.reading-page { width: min(100%, 720px); }
.reading-nav { line-height: 1.6; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 52px; color: var(--secondary); font-size: var(--text-meta); }
.reading-header { margin-bottom: 42px; }
.reading-date { margin-top: 8px; }
.reading-note { margin-top: 16px; color: var(--quiet); font-size: var(--text-small); line-height: 1.7; }
.reading-body { color: var(--body); font-size: var(--text-body); line-height: 1.95; overflow-wrap: break-word; }
.reading-body p + p { margin-top: 1em; }
.reading-body section + section { margin-top: 24px; }
.reading-body h2 { margin: 48px 0 20px; color: var(--ink); font: 400 var(--text-section)/1.5 var(--serif); }
.reading-body h3 { margin: 32px 0 16px; color: var(--ink); font: 400 var(--text-title)/1.5 var(--serif); }
.reading-body h4 { margin: 24px 0 12px; color: var(--ink); font-size: var(--text-body); font-weight: 600; }
.reading-body ul, .reading-body ol { margin: 20px 0; padding-left: 1.5em; }
.reading-body li + li { margin-top: 10px; }
.reading-body blockquote { margin: 28px 0; padding-left: 20px; border-left: 2px solid var(--line); color: var(--secondary); }
.reading-body figure { margin: 32px 0; }
.reading-body img { display: block; max-width: 100%; height: auto; margin: auto; }
.reading-body figcaption { margin-top: 10px; color: var(--secondary); font-size: var(--text-small); line-height: 1.7; }
.reading-body .table-scroll { overflow-x: auto; margin: 28px 0; }
.table-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.reading-body table { width: 100%; border-collapse: collapse; font-size: var(--text-meta); line-height: 1.7; }
.reading-body th, .reading-body td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 8em; }
.reading-body th { color: var(--ink); font-weight: 600; }
/* The source uses code tags for formulas, not program listings. Keep them at body size. */
.reading-body code { font: inherit; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.reading-toc { line-height: 1.6; margin-bottom: 40px; padding: 20px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); color: var(--secondary); font-size: var(--text-meta); }
.reading-toc summary { cursor: pointer; width: fit-content; }
.reading-toc ol { margin: 16px 0 0; padding-left: 1.5em; }
.reading-toc li + li { margin-top: 8px; }
.archive-header { margin-bottom: 42px; }

@media (max-width: 600px) {
  .reading-nav { margin-bottom: 36px; }
  .reading-header { margin-bottom: 32px; }
  .reading-body h2 { margin-top: 38px; }
  .reading-body th, .reading-body td { padding: 10px; }
}