.reading-article { max-width: var(--container-reading); }
.reading-article h1 { overflow-wrap: anywhere; }
.article-intro { margin-top: var(--space-5); font-size: var(--text-lg); }
.article-section { margin-top: var(--space-7); }
.article-section > h2 { margin-bottom: var(--space-4); }
.article-section h3 { margin-block: var(--space-5) var(--space-3); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.article-grid .card { min-width: 0; }
.article-grid .text-link { margin-top: auto; }
.card-related { font-size: var(--text-sm); }
.article-product-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.article-product-links a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-3); border: var(--border); border-radius: var(--radius-sm); }
@media (min-width: 40rem) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-grid-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.article-main { min-width: 0; }
.article-layout .reading-article { max-width: 52rem; }
.article-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.sidebar-card { min-width: 0; overflow: hidden; border: var(--border); border-radius: var(--radius-md); background: var(--color-white); }
.sidebar-card > h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-5); border-bottom: var(--border); background: var(--color-surface); font-size: var(--text-sm); font-weight: 750; letter-spacing: .04em; line-height: 1.4; }
.sidebar-card > h2::before { content: ""; flex-shrink: 0; width: .5rem; height: .5rem; border-radius: 1px; background: var(--color-orange); }
.sidebar-toc-card { border-top: 3px solid var(--color-orange); }
.sidebar-list { list-style: none; margin: 0; padding: var(--space-2); }
.sidebar-list a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.sidebar-list a:hover { background: var(--color-accent-soft); color: var(--color-accent-ink); }
.sidebar-list a::after { content: "\2192"; margin-left: auto; padding-left: var(--space-2); color: var(--color-accent-ink); opacity: 0; transition: opacity .15s; }
.sidebar-list a:hover::after, .sidebar-list a:focus-visible::after { opacity: 1; }
.sidebar-toc { counter-reset: toc; }
.sidebar-toc li { counter-increment: toc; }
.sidebar-toc a::before { content: counter(toc); display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 750; }
.sidebar-toc a:hover::before { background: var(--color-white); }
.sidebar-card > .text-link { display: flex; justify-content: space-between; min-height: 48px; padding: var(--space-2) var(--space-5); border-top: var(--border); background: var(--color-surface); color: var(--color-accent-ink); font-size: var(--text-sm); text-decoration: none; }
.sidebar-card > .text-link::after { content: "\2192"; }
.sidebar-card > .text-link:hover { text-decoration: underline; }
.sidebar-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-color: var(--color-anthracite); border-top: 3px solid var(--color-orange); background: var(--color-anthracite); color: var(--color-white); }
.sidebar-cta > div { display: grid; gap: var(--space-2); }
.sidebar-cta h2 { font-size: var(--text-lg); }
.sidebar-cta p { color: var(--color-footer-text); font-size: var(--text-sm); }
.sidebar-cta .button { width: 100%; margin-top: var(--space-2); }
.sidebar-cta :focus-visible { --focus-ring: 3px solid var(--color-orange); }
@media (min-width: 48rem) {
    .article-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .sidebar-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
    .sidebar-cta .button { width: auto; margin-top: 0; flex-shrink: 0; }
    .sidebar-cta > div { flex: 1; }
}
@media (min-width: 72rem) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
    .article-sidebar { grid-template-columns: minmax(0, 1fr); }
    .sidebar-cta { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
    .sidebar-cta .button { width: 100%; margin-top: var(--space-2); }
}