/* Shared reading styles for the static writing guides. */
html { scroll-behavior: smooth; }
.article-page a { color: #6236c9; text-decoration: none; }
.article-page a:hover { color: #3f1c88; }
.article-page a:focus-visible { outline: 2px solid #6236c9; outline-offset: 4px; border-radius: 2px; }
.article-page .info-brand, .article-page .info-back { text-decoration: none; }
.article-page .info-brand { display: inline-flex; align-items: center; padding: 8px 16px; margin-left: -16px; border-radius: 8px; font-size: 13px; line-height: 1.5; font-weight: 550; color: #655c76; }
.article-page .info-brand:is(:hover, :focus-visible, :active) { background: #ebe3f7; color: #5429b1; border-radius: 8px; box-shadow: inset 0 1px 0 #ffffffb3; }
.article-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 20px; color: #74677f; font-size: 13px; line-height: 1.8; }
.article-page .info-intro h1 { line-height: 1.5; text-wrap: balance; }
.article-page .info-intro { padding: 0 0 6px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.article-page .info-paper p { white-space: normal; }
.article-page .article-body > p, .article-page .article-body blockquote > p { margin: 0; text-indent: 2em; }
.article-page .info-paper > h2 { margin: 34px 0 14px; padding: 0; border: 0; }
.article-page .info-paper :is(h2, h3) { scroll-margin-top: 24px; }
.article-page .info-paper :is(ul, ol) { padding-left: 1.5em; margin: 14px 0 22px; color: #443c4c; font-size: 15px; line-height: 1.95; }
.article-page .info-paper li { margin: 7px 0; overflow-wrap: anywhere; }
.article-page .info-paper li > p { margin: 8px 0; }
.article-page .info-paper strong { color: #493763; }
.article-toc { margin: 24px 0 30px; padding: 0 0 16px; border-bottom: 1px solid #ece6f2; }
.article-page .info-paper .article-toc :is(ul, ol) { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; margin: 0; list-style: none; font-size: 13px; line-height: 1.8; }
.article-page .article-toc > :is(strong, p) { display: block; margin: 0 0 5px; color: #74677f; font-size: 12px; font-weight: 400; }
.article-page .article-toc li { margin: 0; }
.article-toc a { display: inline-block; padding: 3px 0; }
.article-note, .article-example { margin: 22px 0; padding: 20px 22px; background: #faf7fd; border-radius: 0 6px 6px 0; }
.article-example { background: #fcfaf7; border-color: #c4b695; }
.article-label { display: block; margin-bottom: 4px; color: #6a517f; font-size: 13px; font-weight: 700; }
.article-page .article-example-label { margin-bottom: 8px; color: #6a517f; font-size: 13px; font-weight: 600; }
.article-page :is(.article-note, .article-example) > :first-child { margin-top: 0; }
.article-page :is(.article-note, .article-example) > :last-child { margin-bottom: 0; }
.article-page blockquote { margin: 18px 0; padding: 18px 22px; background: #faf7fe; color: #443c4c; overflow-wrap: anywhere; }
.article-page blockquote p:last-child { margin-bottom: 0; }
.article-page .article-example blockquote { padding: 0; margin: 14px 0 0; border: 0; background: transparent; }
.article-page [lang="en"] { line-height: 1.85; overflow-wrap: anywhere; }
.article-page table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; table-layout: fixed; color: #443c4c; font-size: 14px; line-height: 1.85; }
.article-page caption { text-align: left; padding-bottom: 10px; color: #594a68; font-weight: 600; }
.article-page :is(th, td) { padding: 12px 14px; border: 1px solid #e2d8ef; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.article-page th { background: #f6f0fc; color: #493763; font-weight: 600; }
.article-page th:first-child { width: 30%; }
.article-table-wrap { max-width: 100%; overflow-x: auto; margin: 18px 0 24px; }
.article-table-wrap table { margin: 0; }
.article-related { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid #e0d6ed; }
.article-related h2 { margin: 0 0 14px; padding: 0; border: 0; color: #5126a5; font-size: 19px; line-height: 1.5; }
.article-related ul { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.8; }
.article-related li { padding: 6px 0; overflow-wrap: anywhere; }
.article-related p { line-height: 1.9; font-size: 14px; }
.article-sources { overflow-wrap: anywhere; }
.article-page .article-sources { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid #ece6f2; }
.article-page .article-sources p { color: #74677f; font-size: 12px; line-height: 1.8; }
.article-report-figure { margin: 24px 0; }
.article-report-figure > a { display: block; }
.article-report-figure img { display: block; width: 100%; height: auto; border: 1px solid #e0d6ed; }
.article-report-figure figcaption { margin-top: 10px; color: #74677f; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.article-page .info-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.article-page .info-footer a { display: inline-block; padding: 0; }
.article-footer-links { margin-left: auto; text-align: right; }
@media (max-width: 760px) {
  .article-page .info-brand { padding: 8px 10px; margin-left: -10px; font-size: 12px; }
  .article-breadcrumb { font-size: 12px; margin-bottom: 16px; }
  .article-page .info-intro h1 { font-size: 25px; }
  .article-note, .article-example { padding: 16px; }
  .article-page :is(th, td) { padding: 10px 8px; }
  .article-page table { font-size: 13px; }
  .article-related { padding: 18px 0 0; }
}
@media (max-width: 560px) {
  .article-page .article-table-stack, .article-table-stack :is(caption, tbody, tr, th, td) { display: block; width: 100%; }
  .article-table-stack thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .article-table-stack tbody tr { margin: 12px 0; border: 1px solid #e2d8ef; border-radius: 6px; overflow: hidden; }
  .article-page .article-table-stack :is(th, td) { border: 0; padding: 12px 14px; }
  .article-page .article-table-stack th { width: 100%; }
  .article-page .article-table-stack td + td { border-top: 1px solid #ece6f2; }
  .article-table-stack td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #6a517f; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }