/* Reading pages share the existing site type, colors and navigation. */
.reading-guide { margin-inline: auto; max-width: 72ch; padding-block: 30px 40px; }
.reading-guide h1 { max-width: 24ch; }
.reading-guide h2 { margin-top: 2.25em; line-height: 1.25; }
.reading-guide .lede { max-width: 56ch; margin-bottom: 18px; }
.guide-kicker, .guide-date { color: var(--muted); font-size: .84rem; }
.guide-kicker { margin: 0 0 18px; }
.guide-kicker a { color: inherit; }
.guide-date { margin-bottom: 32px; }
.reading-guide p, .reading-guide li { overflow-wrap: anywhere; }
.reading-guide ol, .reading-guide ul { padding-inline-start: 1.4em; }
.reading-guide li + li { margin-top: 12px; }
.guide-table { max-width: 100%; overflow-x: auto; margin-block: 24px; }
.guide-table table { min-width: 510px; margin: 0; line-height: 1.5; }
.guide-table th, .guide-table td { padding: 14px; }
.guide-table th { font-weight: 600; }
.reading-guide blockquote { margin: 24px 0; background: var(--bg-2); padding: 8px 24px; border-radius: 12px; }
.guide-flow { margin: 28px 0; }
.guide-flow > div { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 18px; background: var(--bg-2); border-radius: 12px; }
.guide-flow span { text-align: center; font-size: .95rem; }
.guide-flow b { font-size: 1.4rem; font-weight: 400; color: var(--muted); }
.guide-flow figcaption { margin-top: 12px; color: var(--muted); font-size: .85rem; }
.guide-related { margin-top: 48px; }
.guide-related h2 { margin-top: 0; }
.guide-end { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 36px; font-size: .9rem; }
.guide-directory { list-style: none; padding: 0 !important; margin-top: 36px; }
.guide-directory li + li { margin-top: 28px; }
.guide-directory h2 { margin: 0 0 8px; }
.guide-directory p { margin: 0; color: var(--muted); }
@media (max-width: 540px) {
  .reading-guide { padding-top: 16px; }
  .guide-flow > div { gap: 10px; padding: 20px 12px; }
  .guide-flow span { font-size: .8rem; }
}