/* Reading pages share the application's current neutral theme and local Inter. */
body { background: var(--canvas); color: var(--ink); }
.plain-page { max-width: 72ch; margin: 0 auto; padding: clamp(24px, 5vw, 64px) 20px 80px; }
.plain-page h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; margin: 28px 0 24px; }
.plain-page h2 { font-size: 1.4rem; line-height: 1.3; text-wrap: balance; margin: 0 0 16px; }
.plain-page p { font-size: 1.0625rem; line-height: 1.8; text-wrap: pretty; white-space: pre-line; overflow-wrap: anywhere; }
.plain-page section { margin: 44px 0; scroll-margin-top: 28px; }
.plain-page a { color: var(--ink); text-underline-offset: .2em; }
.plain-page a:hover { text-decoration-thickness: 2px; }
.plain-page .note { color: var(--muted); font-size: .875rem; }
.plain-page nav { font-size: .9rem; line-height: 1.7; }
.article-contents { padding: 24px 0; margin: 32px 0; border-block: 1px solid var(--line); }
.article-contents ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; margin-bottom: 0; }
.article-contents li { padding: 0; margin: 0; }
.article-contents a { display: inline; padding: 0; min-height: 0; }
.article-list article { border-top: 1px solid var(--line); padding: 28px 0; }
.app-header { flex-wrap: wrap; gap: 16px; }
.app-header nav { display: flex; flex-wrap: wrap; gap: 20px; }
.app-footer { flex-wrap: wrap; }

/* Structured article bodies. A block-rendered article carries real markup, so
   the pre-line rule above must not reach it: it exists to turn the blank lines
   in a plain-text section into paragraph breaks, and on a block paragraph it
   would instead turn an author's stray newline into a visible gap. */
.plain-page p.block-text { white-space: normal; }
.plain-page h3 { font-size: 1.125rem; line-height: 1.4; text-wrap: balance; margin: var(--space-6) 0 var(--space-2); }
.plain-page .block-list { font-size: 1.0625rem; line-height: 1.8; padding-left: var(--space-6); margin: var(--space-4) 0; }
.plain-page .block-list li { margin: var(--space-2) 0; }
.plain-page figure { margin: var(--space-8) 0; }
.plain-page figcaption { color: var(--muted); font-size: .875rem; line-height: 1.6; margin-top: var(--space-2); }
.plain-page .image-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface); }

/* Tables are the one element allowed to be wider than the reading column, so
   each one scrolls inside its own box rather than widening the page. */
.table-scroll { overflow-x: auto; }
.plain-page table { border-collapse: collapse; width: 100%; font-size: .9375rem; line-height: 1.6; }
.plain-page th, .plain-page td { border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; }
.plain-page th { font-weight: 600; border-bottom-width: 2px; white-space: nowrap; }
.plain-page .table-figure figcaption { margin: 0 0 var(--space-3); }

.plain-page blockquote { margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 2px solid var(--edge); }
.plain-page blockquote p { white-space: normal; }
.plain-page .callout { margin: var(--space-8) 0; padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.plain-page .callout strong { display: block; margin-bottom: var(--space-2); }
.plain-page .callout p { white-space: normal; margin: 0; }
.plain-page .code-block { overflow-x: auto; margin: var(--space-6) 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .875rem; line-height: 1.7; }

/* A citation marker is a reading aid, not a control, so it stays inline and
   small; the reference it points at is the 44px target. */
.plain-page .cite { font-size: .75rem; line-height: 1; }
.plain-page .cite a { padding: 0 2px; text-decoration: none; }
.plain-page .cite a:hover, .plain-page .cite a:focus-visible { text-decoration: underline; }
.plain-page .references { font-size: 1rem; line-height: 1.7; padding-left: var(--space-6); }
.plain-page .references li { margin: var(--space-3) 0; scroll-margin-top: 28px; }
.plain-page .references li:target { background: var(--surface); }
.plain-page .references .note { display: block; }

.plain-page .cluster { margin: var(--space-12) 0; }
.plain-page .cluster .article-list h3 { margin: var(--space-1) 0 var(--space-2); font-size: 1.25rem; }
.plain-page .cluster-more { margin-top: var(--space-4); }

@media (max-width: 600px) { .app-header { padding: 18px; } .app-header .utilities { display: none; } .plain-page { padding-top: 20px; } .plain-page th, .plain-page td { padding: var(--space-2) var(--space-3); } .plain-page .callout { padding: var(--space-4); } }