.reading-page { background: var(--light-surface); }
.reading-head { max-width: 88rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--gutter); border-bottom: 1px solid var(--hairline-light); }
.reading-brand { font-family: var(--font-display); font-size: 2rem; text-decoration: none; }
.reading-head nav, .reading-foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.reading-head nav > a:not(.btn) { font-size: .875rem; text-underline-offset: .25em; }
.article-shell { max-width: 54rem; margin-inline: auto; padding: var(--space-20) var(--gutter); }
.article-intro { margin-bottom: var(--space-12); }
.article-intro h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.06; letter-spacing: -.025em; max-width: 20ch; }
.reading-label { font-size: .875rem; color: var(--on-light-2); margin-bottom: var(--space-4); }
.article-deck { margin-top: var(--space-6); font-size: 1.25rem; line-height: 1.5; max-width: 54ch; }
.article-meta, .small-note { font-size: .875rem; color: var(--on-light-2); }
.article-meta { margin-top: var(--space-6); }
.article-body { max-width: 66ch; font-size: 1.0625rem; line-height: 1.8; }
.article-body > p:first-child { font-size: 1.25rem; line-height: 1.65; }
.article-body h2, .related h2, .product-note h2 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.2; margin-top: var(--space-12); margin-bottom: var(--space-5); }
.article-body h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; margin-top: var(--space-8); margin-bottom: var(--space-3); }
.article-body ul, .article-body ol, .related ul { padding-left: 1.25rem; margin-block: var(--space-5); }
.article-body li + li, .related li + li { margin-top: var(--space-3); }
.article-body a, .related a { text-underline-offset: .2em; }
.practice { border-left: 2px solid var(--cool-on-light); background: var(--light-raised); padding: var(--space-6); margin-block: var(--space-8); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.practice h2, .practice h3 { margin-top: 0; }
.practice dl { margin-top: var(--space-4); }
.practice dt { font-weight: 600; margin-top: var(--space-4); }
.practice dd { margin: var(--space-1) 0 0; }
.product-note { margin-top: var(--space-16); padding: var(--space-8); border: 1px solid var(--hairline-light); border-radius: var(--radius-lg); }
.product-note h2 { margin-top: 0; }
.product-note > p { max-width: 58ch; }
.product-note .btn { margin-top: var(--space-6); }
.product-note .small-note { margin-top: var(--space-4); }
.related { margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--hairline-light); }
.catalog-shell { max-width: 74rem; padding: var(--space-20) var(--gutter); margin-inline: auto; }
.catalog-list { padding: 0; margin-top: var(--space-16); list-style: none; }
.catalog-list > li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--hairline-light); }
.catalog-number { font-family: var(--font-display); font-size: 1.5rem; color: var(--cool-on-light); }
.catalog-list h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; font-weight: 400; max-width: 30ch; }
.catalog-list h2 a { text-decoration: none; }
.catalog-list h2 a:hover { text-decoration: underline; }
.catalog-list p { margin-top: var(--space-4); max-width: 58ch; }
.reading-foot { padding: var(--space-12) var(--gutter); border-top: 1px solid var(--hairline-light); max-width: 88rem; margin-inline: auto; }
.reading-foot > p { font-family: var(--font-display); font-size: 1.5rem; }
.reading-foot nav { margin-block: var(--space-6); }
.reading-foot small { color: var(--on-light-2); }
@media (max-width: 40rem) {
  .reading-head { align-items: flex-start; flex-direction: column; gap: var(--space-4); }
  .reading-head nav { gap: var(--space-3) var(--space-5); }
  .article-shell, .catalog-shell { padding-block: var(--space-12); }
  .catalog-list > li { grid-template-columns: 2rem 1fr; gap: var(--space-3); }
  .product-note { padding: var(--space-6); }
}
@media (prefers-color-scheme: dark) {
  .reading-page { background: var(--dark-ground); }
  .reading-head, .reading-foot, .related, .catalog-list > li, .product-note { border-color: var(--hairline-dark); }
  .reading-label, .article-meta, .small-note, .reading-foot small { color: var(--on-dark-2); }
  .practice { background: var(--dark-surface); border-color: var(--cool-on-dark); }
  .catalog-number { color: var(--cool-on-dark); }
}
@media print {
  .reading-head, .reading-foot, .related, .product-note, .skip-link { display: none; }
  .reading-page { background: var(--light-raised); color: var(--on-light-1); }
  .article-shell { max-width: none; padding: 0; }
  .article-intro h1 { font-size: 2rem; }
  .article-body { max-width: none; font-size: 11pt; }
  .practice { break-inside: avoid; }
}
