/* Blog article only; shared navigation, forms and Technical Guides remain intact. */
.blog-article-layout { --blog-header-height: var(--hk-header-offset,80px); display: grid; grid-template-columns: minmax(0,800px) 260px; align-items: start; gap: 40px; width: min(1100px,calc(100% - 48px)); padding-block: 36px 48px; }
.blog-article-main, .blog-article-aside { min-width: 0; }
.blog-article-header { padding-bottom: 22px; }
.blog-article-header h1 { margin: 0 0 18px; color: var(--hk-ink); font-size: clamp(36px,3.2vw,44px); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.blog-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; color: #596b7d; font-size: 14px; line-height: 1.6; }
.blog-article-meta > * + *::before { content: '·'; padding-inline: 10px; }
.blog-article-featured { margin: 4px 0 28px; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 2px; background: #f3f6f8; }
.blog-article-featured img { width: 100%; height: 100%; object-fit: contain; }
.blog-key-takeaway { margin: 0 0 28px; padding: 20px 23px; border-left: 3px solid var(--blog-blue); background: #f1f6fa; color: #243d50; font-size: 17px; line-height: 1.75; }
.blog-key-takeaway p { margin: 0; color: inherit; }
.blog-key-takeaway .blog-takeaway-label { margin-bottom: 8px; color: var(--blog-blue); font-size: 12px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.blog-article-content { --blog-body-color: color-mix(in srgb, var(--hk-muted) 75%, var(--hk-navy) 25%); padding-top: 8px; color: var(--hk-muted); color: var(--blog-body-color); font-size: 17px; line-height: 1.78; overflow-wrap: anywhere; }
.blog-article-content p { margin: 0 0 22px; color: inherit; }
.blog-article-content h2 { margin: 38px 0 18px; padding-left: 14px; border-left: 3px solid var(--blog-blue); color: var(--hk-ink); font-size: 27px; line-height: 1.3; letter-spacing: -.015em; }
.blog-article-content > :first-child, .blog-article-content > article > :first-child { margin-top: 0; }
.blog-article-content h3 { margin: 28px 0 12px; color: var(--hk-ink); font-size: 21px; line-height: 1.4; }
.blog-article-content strong { color: var(--hk-ink); font-weight: 700; }
.blog-article-content a { color: var(--blog-blue); text-decoration: underline; text-underline-offset: 3px; }
.blog-article-content a:hover { color: #103c5b; }
.blog-article-content img { display: block; width: auto; max-width: 100%; height: auto; margin: 26px auto 10px; }
.blog-article-content figure { max-width: 100%; margin: 30px 0 26px; }
.blog-article-content figure img { width: 100%; height: auto; margin: 0 auto; }
.blog-article-content figcaption { margin-top: 9px; color: #596b7d; font-size: 14px; line-height: 1.65; }
.blog-article-content ul, .blog-article-content ol { margin: 0 0 22px; padding-left: 25px; }
.blog-article-content ul { list-style: disc; }
.blog-article-content ol { list-style: decimal; }
.blog-article-content li { margin-bottom: 10px; }
.blog-article-content blockquote { margin: 26px 0; padding: 18px 22px; border-left: 3px solid var(--blog-blue); background: #f3f6f9; }
.blog-article-content blockquote > :last-child { margin-bottom: 0; }
.blog-article-content table { display: block; width: 100%; max-width: 100%; margin: 26px 0; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.blog-article-content .blog-table-scroll { width: 100%; max-width: 100%; margin: 26px 0; overflow-x: auto; overscroll-behavior-inline: contain; }
.blog-table-scroll table { display: table; width: 100%; min-width: 580px; margin: 0; overflow: visible; }
.blog-article-content th, .blog-article-content td { min-width: 150px; padding: 12px 14px; border: 1px solid var(--hk-line); text-align: left; vertical-align: top; }
.blog-article-content th { color: var(--hk-ink); background: #f3f6f9; }
.blog-article-content pre { max-width: 100%; overflow-x: auto; padding: 18px; background: #f3f6f9; font-size: 14px; }
.blog-article-content iframe, .blog-article-content video { max-width: 100%; }
/* Root scroll-padding already reserves the shared header height. */
.blog-article-content h2, .blog-article-content h3 { scroll-margin-top: 24px; }
.blog-article-content h2:focus-visible { outline: 2px solid var(--blog-blue); outline-offset: 6px; }
.blog-article-sources { font-size: 15px; }
.blog-article-sources li { margin-bottom: 8px; }
.blog-article-pager { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hk-line); }
.blog-article-pager a { display: block; min-height: 44px; color: var(--blog-blue); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.blog-article-pager a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-article-pager span { display: block; margin-bottom: 6px; color: #596b7d; font-size: 12px; }
.blog-article-pager-next { grid-column: 2; text-align: right; }
.blog-article-related { margin-top: 28px; }
.blog-article-aside { position: sticky; top: calc(var(--blog-header-height) + 24px); max-height: calc(100dvh - var(--blog-header-height) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.blog-article-aside h2 { margin: 0 0 10px; padding: 0 0 12px; border-bottom: 1px solid var(--hk-line); color: #18384e; font-size: 13px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.blog-article-aside ul, .blog-article-toc ul { margin: 0; padding: 0; list-style: none; }
.blog-article-toc a { display: block; padding: 8px 10px; border-left: 2px solid transparent; color: #526173; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.blog-article-toc a:hover, .blog-article-toc a[aria-current="location"] { border-left-color: var(--blog-blue); color: var(--blog-blue); background: #f3f7fa; }
.blog-article-related li + li { border-top: 1px solid var(--hk-line); }
.blog-article-related a { display: flex; align-items: center; min-height: 44px; padding: 12px 0; color: var(--hk-ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.blog-article-related a:hover { color: var(--blog-blue); text-decoration: underline; text-underline-offset: 3px; }
.blog-mobile-toc { display: none; }
@media (min-width: 991px) {
 .blog-article-featured { max-height: 390px; }
 /* Preserve complete parts and measurement interfaces; no cropping or enlarged low-resolution images. */
 .blog-article-content figure img { width: auto; max-height: 460px; }
}
@media (max-width: 1200px) {
 .blog-article-layout { grid-template-columns: minmax(0,800px) 230px; gap: 30px; }
}
@media (max-width: 990px) {
 .blog-article-layout { grid-template-columns: minmax(0,1fr); max-width: 800px; gap: 30px; }
 .blog-article-aside { position: static; max-height: none; overflow: visible; }
 .blog-desktop-toc { display: none; }
 .blog-article-related { margin-top: 0; }
 .blog-mobile-toc { display: block; margin: 0 0 26px; padding-block: 8px; border-block: 1px solid var(--hk-line); }
 .blog-mobile-toc summary { min-height: 44px; padding: 9px 0; color: var(--blog-blue); cursor: pointer; font-size: 15px; font-weight: 700; }
 .blog-mobile-toc .blog-article-toc { padding-bottom: 10px; }
 .blog-mobile-toc .blog-article-toc a { min-height: 44px; padding-block: 12px; }
}
@media (max-width: 768px) {
 .blog-article-layout { width: calc(100% - 36px); padding-block: 28px 36px; }
 .blog-article-header h1 { font-size: 32px; line-height: 1.18; }
 .blog-article-meta { font-size: 13px; }
 .blog-article-meta > * + *::before { padding-inline: 7px; }
 .blog-article-featured { margin-bottom: 24px; }
 .blog-key-takeaway { padding: 17px 18px; font-size: 17px; }
 .blog-article-content h2 { font-size: 25px; }
 .blog-article-content h3 { font-size: 20px; }
 .blog-article-pager { grid-template-columns: minmax(0,1fr); gap: 22px; }
 .blog-article-pager-next { grid-column: auto; text-align: left; }
}