/* Articles: easier reading (hand-written; loaded on single posts only, see inc/reading.php). */
.prose-a { max-width: 66ch; font-size: 19px; line-height: 1.85; }
.prose-a > * + * { margin-top: 1.15em; }
.prose-a p { text-align: start; overflow-wrap: break-word; }
.prose-a h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 2em; padding-top: .2em; scroll-margin-top: 120px; }
.prose-a h3 { font-size: clamp(20px, 2.1vw, 23px); margin-top: 1.7em; scroll-margin-top: 120px; }
.prose-a h4 { font-size: 19px; margin-top: 1.5em; }
.prose-a h2 + *, .prose-a h3 + *, .prose-a h4 + * { margin-top: .55em; }
.prose-a h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--red); margin-bottom: .55em; }
.prose-a .rd-lead { font-size: 1.12em; line-height: 1.7; font-weight: 600; color: var(--ink); border-inline-start: 4px solid var(--red); padding-inline-start: 16px; }
.prose-a strong, .prose-a b { font-weight: 700; color: var(--ink); }
.prose-a ul, .prose-a ol { padding-inline-start: 1.5em; }
.prose-a ul > li::marker { color: var(--red); }
.prose-a ol > li::marker { color: var(--red); font-weight: 700; }
.prose-a li + li { margin-top: .5em; }
.prose-a li > ul, .prose-a li > ol { margin-top: .5em; }
.prose-a sup, .prose-a sub { line-height: 0; }
.prose-a .rd-fig { margin: 1.6em 0; text-align: center; }
.prose-a .rd-fig img { margin: 0 auto; }
.prose-a figcaption { margin-top: .6em; font-size: 15px; color: var(--ink-2); }
.prose-a .rd-table { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 12px; }
.prose-a .rd-table table { display: table; width: 100%; margin: 0; }
.prose-a .rd-table tr:nth-child(even) td { background: var(--tint); }
.prose-a .rd-table:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* Table of contents: at the top of the text on narrow screens, in the side column on wide ones. */
.rd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: rd; }
.rd-toc li { counter-increment: rd; }
.rd-toc li.l3 a::before { color: var(--ink-2); font-weight: 600; }
.rd-toc li.l3 { padding-inline-start: 14px; font-size: .94em; }
.rd-toc a { display: flex; gap: 8px; padding: 5px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; line-height: 1.4; }
.rd-toc a::before { content: counter(rd); min-width: 1.4em; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.rd-toc a:hover, .rd-toc a:focus-visible { background: var(--tint); }
.prose-a .rd-toc-in { max-width: none; font-size: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; }
.rd-toc-in summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); }
.rd-toc-in[open] summary { margin-bottom: 8px; }
.rd-toc-side { font-size: 15px; max-height: calc(100vh - 140px); overflow-y: auto; }
@media (min-width: 1025px) { .prose-a .rd-toc-in { display: none; } }
@media (max-width: 1024px) { .rd-toc-side { display: none; } }
@media (max-width: 640px) {
  .prose-a { font-size: 18px; line-height: 1.8; }
  .prose-a h2 { margin-top: 1.7em; }
}

/* Reading progress (browsers with scroll-driven animations; others simply don't show it). */
.rd-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .rd-progress { display: block; position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; background: var(--red); transform-origin: right; transform: scaleX(0); animation: rd-grow linear both; animation-timeline: scroll(root); pointer-events: none; }
  @keyframes rd-grow { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .rd-progress { display: none; } }
@media print { .rd-progress, .rd-toc { display: none !important; } }