:root {
  --article-width: 760px;
  --article-body-size: 1.125rem;
  --article-leading: 1.8;
  --article-title-size: clamp(2rem, 4vw, 3rem);
  --article-heading-size: clamp(1.5rem, 3vw, 1.875rem);
}

.reading-page { max-width: var(--article-width); padding-block: var(--space-16); }
.reading-article { min-width: 0; }
.article-header { margin-bottom: var(--space-10); }
.article-header h1 { margin: 0; font-size: var(--article-title-size); line-height: 1.25; letter-spacing: var(--type-h1-tracking); word-break: keep-all; overflow-wrap: anywhere; }
.article-title-phrase { display: inline-block; max-width: 100%; vertical-align: bottom; }
.article-lead { margin: var(--space-6) 0; color: var(--text-secondary); font-size: var(--article-body-size); line-height: var(--article-leading); word-break: keep-all; overflow-wrap: anywhere; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); color: var(--text-secondary); font-size: var(--type-body-sm-size); }
.article-toc { margin-block: var(--space-8) var(--space-12); padding: var(--space-4) var(--space-6); border-block: 1px solid var(--border-subtle); }
.article-toc summary { min-height: var(--archive-touch-target); align-content: center; cursor: pointer; font-weight: 700; }
.article-toc ol { margin: var(--space-2) 0 0; padding-left: var(--space-6); }
.article-toc li { padding-left: var(--space-1); }
.article-toc a { display: block; padding-block: var(--space-3); min-height: var(--archive-touch-target); font-size: var(--type-body-size); line-height: var(--type-body-sm-leading); text-decoration: none; overflow-wrap: anywhere; }
.article-toc a:hover { text-decoration: underline; }
.article-body { font-size: var(--article-body-size); line-height: var(--article-leading); font-weight: 400; word-break: keep-all; overflow-wrap: anywhere; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 var(--space-6); }
.article-body h2 { margin: var(--space-16) 0 var(--space-6); font-size: var(--article-heading-size); line-height: 1.4; letter-spacing: var(--type-h2-tracking); scroll-margin-top: var(--space-8); }
.article-body h3 { margin: var(--space-10) 0 var(--space-4); font-size: var(--type-h3-size); line-height: 1.5; letter-spacing: var(--type-h3-tracking); }
.article-body strong { font-weight: 700; }
.article-body ul, .article-body ol { margin-block: var(--space-4) var(--space-8); padding-left: var(--space-6); }
.article-body li { margin-bottom: var(--space-3); padding-left: var(--space-1); }
.article-body figure { margin: var(--space-10) 0; max-width: 100%; }
.article-body figure img { height: auto; max-width: 100%; }
.article-image-link { display: block; }
.article-image-link img { cursor: zoom-in; }
.article-image-open { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--archive-touch-target); margin-top: var(--space-1); font-size: var(--type-body-sm-size); }
.article-image-open span { color: var(--text-secondary); }
.article-body figcaption { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-leading); text-align: left; }
.article-body blockquote, .article-body .article-callout, .article-body .article-summary { margin: var(--space-8) 0; padding: var(--space-6); background: var(--surface-elevated); border-left: 2px solid var(--border-default); }
.article-body :is(blockquote, .article-callout, .article-summary) > :first-child { margin-top: 0; }
.article-body :is(blockquote, .article-callout, .article-summary) > :last-child { margin-bottom: 0; }
.article-body .article-summary h2, .article-body .article-callout h2 { font-size: var(--type-h3-size); }
.article-table-scroll { max-width: 100%; overflow-x: auto; margin-block: var(--space-8); }
.article-body table { width: 100%; border-collapse: collapse; font-size: var(--type-body-sm-size); line-height: var(--type-body-lg-leading); word-break: normal; }
.article-body th, .article-body td { min-width: 8rem; padding: var(--space-4); border: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.article-body th { font-weight: 700; background: var(--surface-elevated); }
.article-body caption { padding-bottom: var(--space-3); font-weight: 600; text-align: left; }
.article-body pre { max-width: 100%; overflow-x: auto; padding: var(--space-4); background: var(--surface-elevated); font-size: var(--type-body-sm-size); white-space: pre-wrap; }
.article-body hr { border: 0; border-top: 1px solid var(--border-subtle); margin-block: var(--space-12); }
.article-footer { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.article-footer a { display: inline-flex; align-items: center; min-height: var(--archive-touch-target); }

@media (max-width: 639px) {
  .reading-page { padding-block: var(--space-10); }
  .article-toc { padding-inline: var(--space-4); }
  .article-body h2 { margin-top: var(--space-12); margin-bottom: var(--space-5); }
  .article-body :is(blockquote, .article-callout, .article-summary) { padding: var(--space-5); }
}