/* Static article navigation and comfortable reading widths. */
.reading-page .hero { padding: 126px 0 42px; }
.reading-page .hero h1 { max-width: 980px; font-size: clamp(34px,4.3vw,56px); line-height: 1.12; letter-spacing: -.045em; margin: 18px 0; }
.reading-page .hero-lead { max-width: 860px; font-size: 17px; line-height: 1.7; }
.reading-page .hero-meta, .reading-page .article-meta { margin-top: 22px; align-items: center; color: #bdb3cc; font-size: 13px; }
.reading-page .article-shell { padding: 40px 0 80px; }
.reading-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 40px; align-items: start; }
.reading-sidebar { position: sticky; top: 96px; max-height: calc(100dvh - 120px); overflow-y: auto; scrollbar-width: thin; }
.reading-index { border-bottom: 1px solid #ffffff18; padding-bottom: 20px; }
.reading-index summary { font-size: 14px; font-weight: 700; cursor: pointer; color: #eee8f6; padding: 6px 0; }
.reading-index ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: contents; }
.reading-index li { margin: 0; counter-increment: contents; }
.reading-index a { display: grid; grid-template-columns: 19px 1fr; gap: 8px; padding: 8px 4px; color: #b7b0c2; font-size: 13px; line-height: 1.6; }
.reading-index a::before { content: counter(contents,decimal-leading-zero); color: #9884b8; font-size: 10px; padding-top: 3px; }
.reading-index a:hover, .reading-back:hover { color: #d5c0ff; }
.reading-tool { display: block; padding: 18px; margin: 20px 0 14px; border: 1px solid #a78bfa42; border-radius: 12px; background: #a78bfa0a; }
.reading-tool span { display: block; color: #bba0fa; font-size: 10px; letter-spacing: .12em; margin-bottom: 9px; }
.reading-tool strong { color: #eee8f6; font-size: 14px; line-height: 1.5; }
.reading-back { display: inline-block; padding: 10px 0; color: #b7b0c2; font-size: 13px; }
.reading-page .article { width: 100%; max-width: 800px; padding: 30px 34px; min-width: 0; }
.reading-page .article h2 { font-size: clamp(24px,2.7vw,31px); line-height: 1.3; }
.reading-page .article p, .reading-page .article li { line-height: 1.85; }
.reading-page .article-cover { max-width: 420px; margin: 40px auto; }
.reading-page .workflow-figure { max-width: 320px; margin: 28px auto; }
.reading-page .workflow-figure img { width: 100%; height: auto; border: 1px solid #ffffff20; border-radius: 18px; }
.reading-page .workflow-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.7; color: #bdb3cc; }
.reading-page .article .search-entry { margin: 0 0 32px; padding: 20px; }
.reading-page .article .search-entry h2 { font-size: 21px; }
.reading-page .article .next { grid-template-columns: repeat(2,minmax(0,1fr)); }
.reading-page .article a:not(.native-artwork):focus-visible, .reading-sidebar a:focus-visible, .reading-index summary:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 4px; border-radius: 4px; }
.reading-page .article p a, .reading-page .article li a { color: #d3bcff; text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:900px) {
 .reading-layout { grid-template-columns: 1fr; gap: 22px; }
 .reading-sidebar { position: static; max-height: none; display: block; }
 .reading-index { border: 1px solid #ffffff20; border-radius: 12px; padding: 15px 20px; }
 .reading-index ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
 .reading-tool, .reading-back { display: none; }
 .reading-page .article { max-width: none; }
}
@media(max-width:600px) {
 .reading-page .hero { padding: 100px 0 30px; }
 .reading-page .hero h1 { font-size: 34px; line-height: 1.18; overflow-wrap: normal; }
 .reading-page .hero-lead { font-size: 15px; }
 .reading-page .article-shell { padding: 24px 0 56px; }
 .reading-page .article { padding: 22px 18px; }
 .reading-index ol { grid-template-columns: 1fr; }
 .reading-index a { font-size: 13px; }
 .reading-page .article .next { grid-template-columns: 1fr; }
 .reading-page .article figure { margin-left: 0; margin-right: 0; }
}