/* Shared reading primitives. Existing palette and fonts remain authoritative. */
:root {
  --reading-measure: 65ch;
  --reading-size: 18px;
  --reading-leading: 1.65;
  --reading-title-size: clamp(40px, 4.82vw, 69.33px);
  --reading-heading-size: clamp(28px, 2.3vw, 36px);
  --reading-small: 14px;
  --reading-space-xs: 8px;
  --reading-space-sm: 16px;
  --reading-space-md: 24px;
  --reading-space-lg: 32px;
  --reading-space-xl: 48px;
  --reading-space-2xl: 64px;
  --reading-sticky-top: 96px;
  --reading-toc-width: 220px;
  --reading-radius: 10px;
}
.reading-title { font-size: var(--reading-title-size); line-height: 1.06; letter-spacing: -.048em; font-weight: 610; text-wrap: balance; margin: 0; }
.reading-subtitle { font-size: var(--reading-heading-size); line-height: 1.15; letter-spacing: -.03em; font-weight: 580; text-wrap: balance; margin: 0; }
.reading-lead { font-size: var(--reading-size); line-height: 1.6; color: var(--ink-secondary); text-wrap: pretty; }
.reading-lead p { margin: 0; }
.reading-link { display: inline-flex; align-items: center; gap: var(--reading-space-xs); min-height: 44px; color: var(--studio-green); font-weight: 560; }
.reading-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.reading-category { display: block; font-size: var(--reading-small); line-height: 1.5; font-weight: 560; color: var(--studio-green); }
.reading-meta { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--reading-space-sm); row-gap: var(--reading-space-xs); font-size: var(--reading-small); line-height: 1.5; color: var(--ink-secondary); }
.reading-updated { margin: 0; font-size: var(--reading-small); color: var(--ink-secondary); }
.post-card { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--reading-space-md); }
.post-card__link { display: flex; flex-direction: column; height: 100%; gap: var(--reading-space-md); }
.post-card__image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--reading-radius); background: var(--paper-blue); }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; }
.post-card__content { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: var(--reading-space-sm); }
.post-card__title { font-size: clamp(23px, 1.9vw, 30px); font-weight: 580; line-height: 1.2; letter-spacing: -.025em; margin: 0; text-wrap: balance; transition: color .15s; }
.post-card__summary { margin: 0; }
.post-card__link:hover .post-card__title { color: var(--studio-green); }
.post-card .reading-meta { margin-top: auto; padding-top: var(--reading-space-xs); }
.topic-links { display: flex; flex-wrap: wrap; gap: var(--reading-space-xs) var(--reading-space-md); }
.topic-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-secondary); }
.topic-links a[aria-current] { color: var(--studio-green); text-decoration: underline; text-underline-offset: .4em; font-weight: 600; }
.post-index .pagination { margin-top: var(--reading-space-xl); }
.post-index .nav-links { display: flex; flex-wrap: wrap; gap: var(--reading-space-xs); }
.post-index .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--reading-space-sm); border: 1px solid var(--line); border-radius: var(--reading-radius); }
.post-index .page-numbers.current { background: var(--studio-green-light); color: var(--studio-green); }
.reading-toc { border-block: 1px solid var(--line); font-size: var(--reading-small); line-height: 1.5; }
.reading-toc summary { min-height: 44px; padding-block: var(--reading-space-sm); cursor: pointer; font-weight: 600; }
.reading-toc ol { list-style: none; margin: 0 0 var(--reading-space-sm); padding: 0; }
.reading-toc a { display: block; padding-block: var(--reading-space-xs); min-height: 44px; color: var(--ink-secondary); overflow-wrap: anywhere; }
.reading-toc a[aria-current] { color: var(--studio-green); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.reading-prose { font-size: var(--reading-size); line-height: var(--reading-leading); overflow-wrap: anywhere; }
.reading-prose > :first-child { margin-top: 0; }
.reading-prose :is(p, ul, ol, figure, blockquote, pre, .wp-block-rank-math-faq-block) { margin-block: 0 var(--reading-space-md); }
.reading-prose p { text-wrap: pretty; }
.reading-prose :is(h2, h3, h4) { scroll-margin-top: var(--reading-sticky-top); line-height: 1.2; letter-spacing: -.025em; font-weight: 580; text-wrap: balance; margin-block: var(--reading-space-xl) var(--reading-space-sm); }
.reading-prose h2 { font-size: var(--reading-heading-size); }
.reading-prose h3 { font-size: 26px; }
.reading-prose h4 { font-size: 21px; }
.reading-prose :is(ul, ol) { padding-inline-start: var(--reading-space-md); }
.reading-prose ul { list-style: disc; }
.reading-prose ol { list-style: decimal; }
.reading-prose ul ul { list-style: circle; }
.reading-prose li { padding-inline-start: var(--reading-space-xs); margin-bottom: var(--reading-space-xs); }
.reading-prose li :is(ul, ol) { margin-block: var(--reading-space-xs); }
.reading-prose a { color: var(--studio-green); text-decoration: underline; text-underline-offset: .18em; }
.reading-prose :is(img, video, iframe) { max-width: 100%; }
.reading-prose img { height: auto; border-radius: var(--reading-radius); outline: 1px solid var(--line-subtle); outline-offset: -1px; }
.reading-prose figcaption { font-size: var(--reading-small); color: var(--ink-secondary); line-height: 1.5; margin-top: var(--reading-space-xs); }
.reading-prose .wp-block-table { overflow-x: auto; }
.reading-prose table { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; line-height: 1.5; }
.reading-prose :is(td, th) { min-width: 10rem; border: 1px solid var(--line); padding: var(--reading-space-sm); vertical-align: top; }
.reading-prose th { background: var(--paper-blue); font-weight: 600; }
.reading-prose blockquote { border: 0; padding: var(--reading-space-md); background: var(--paper-blue); border-radius: var(--reading-radius); }
.reading-prose blockquote p:last-child { margin: 0; }
.reading-prose pre { overflow-x: auto; padding: var(--reading-space-md); background: var(--paper-blue); border-radius: var(--reading-radius); font-size: var(--reading-small); }
.reading-prose .rank-math-faq-item { padding-block: var(--reading-space-md); border-top: 1px solid var(--line); }
.reading-prose .rank-math-question { font-size: 22px; margin-top: 0; }
.reading-prose .rank-math-answer p:last-child { margin-bottom: 0; }
.reading-prose details { padding-block: var(--reading-space-sm); border-block-start: 1px solid var(--line); }
.reading-prose summary { cursor: pointer; min-height: 44px; font-weight: 580; }
.reading-share { margin-top: var(--reading-space-xl); padding-top: var(--reading-space-lg); border-top: 1px solid var(--line); }
.reading-share__heading { font-size: 18px; letter-spacing: -.015em; font-weight: 580; margin: 0 0 var(--reading-space-xs); }
.reading-share__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--reading-space-xs) var(--reading-space-md); margin-bottom: var(--reading-space-md); }
.reading-share__links :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; color: var(--studio-green); font-size: var(--reading-small); text-decoration: underline; text-underline-offset: .2em; }
.reading-copy { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.reading-copy__status { width: 100%; font-size: var(--reading-small); overflow-wrap: anywhere; }
@media (min-width: 1600px) { :root { --reading-size: 19px; --reading-title-size: 78px; --reading-toc-width: 240px; } }
@media (min-width: 1800px) { :root { --reading-size: 20px; --reading-title-size: 86px; } }
@media (max-width: 1023px) { :root { --reading-title-size: 48px; --reading-space-2xl: 48px; } }
@media (max-width: 640px) { :root { --reading-title-size: 40px; --reading-size: 17px; --reading-space-xl: 32px; --reading-space-2xl: 40px; } .reading-prose h3 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .post-card__title { transition: none; } }
@media print { .reading-toc, .reading-share, .article-related { display: none; } .reading-prose { font-size: 11pt; } }