.article-main { background: #f4f7fb; }
.article-breadcrumb { display: flex; gap: 8px; align-items: center; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 18px; color: #6b7890; font-size: 14px; }
.article-breadcrumb a { color: var(--blog-blue); text-decoration: none; }
.article-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-breadcrumb span[aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-hero { position: relative; min-height: 460px; display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--blog-navy); }
.article-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .46; }
.article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,13,32,.94), rgba(2,18,44,.64) 65%, rgba(3,18,43,.38)), linear-gradient(0deg, rgba(3,15,35,.8), transparent 60%); }
.article-hero-copy { position: relative; z-index: 1; width: min(980px, calc(100% - 64px)); margin: 0 auto; padding: 96px 0 62px; }
.article-hero-copy time { color: var(--blog-cyan); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; }
.article-hero-copy h1 { max-width: 920px; margin: 18px 0 0; font-size: clamp(38px, 5vw, 66px); line-height: 1.16; letter-spacing: -2.5px; }
.article-layout { width: min(980px, calc(100% - 64px)); margin: 0 auto; padding: 64px 0 90px; }
.article-back { margin-bottom: 40px; display: inline-flex; align-items: center; gap: 12px; color: var(--blog-blue); font-size: 13px; font-weight: 800; transition: gap .2s; }
.article-back:hover { gap: 16px; }
.article-body { padding: 56px max(32px, 7vw); color: #25324a; background: #fff; box-shadow: 0 18px 50px rgba(7,27,59,.07); }
.article-body p { margin: 0 0 1.5em; font-size: 17px; line-height: 2; overflow-wrap: anywhere; }
.article-body p:last-child { margin-bottom: 0; }
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 { margin: 1.65em 0 .7em; color: #142842; line-height: 1.35; }
.article-body h1:first-child,
.article-body h2:first-child,
.article-body h3:first-child { margin-top: 0; }
.article-body h1 { font-size: 32px; }
.article-body h2 { padding-bottom: 10px; border-bottom: 1px solid #dfe7f0; font-size: 27px; }
.article-body h3 { font-size: 22px; }
.article-body h4 { font-size: 19px; }
.article-body h5,
.article-body h6 { font-size: 17px; }
.article-body ul,
.article-body ol { margin: 0 0 1.6em; padding-left: 1.6em; font-size: 17px; line-height: 1.9; }
.article-body li + li { margin-top: .35em; }
.article-body blockquote { margin: 0 0 1.6em; padding: 18px 22px; color: #516178; border-left: 4px solid var(--blog-blue); background: #f3f7fc; }
.article-body blockquote > :last-child { margin-bottom: 0; }
.article-body pre { margin: 0 0 1.8em; padding: 22px; overflow-x: auto; color: #e7eef9; border-radius: 5px; background: #101b2b; font: 14px/1.75 Consolas, "Courier New", monospace; }
.article-body :not(pre) > code { padding: .16em .42em; color: #b4234d; border-radius: 3px; background: #f1f4f8; font: .88em/1.5 Consolas, "Courier New", monospace; }
.article-body a { color: var(--blog-blue); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong { color: #172940; }
.article-body hr { height: 1px; margin: 2.4em 0; border: 0; background: #dce5ef; }
.article-body > img,
.article-body p img { max-width: 100%; height: auto; margin: .5em 0 1.5em; display: block; }
.article-related { margin-top: 34px; padding: 34px; background: #eaf1fa; }
.article-related-kicker { margin: 0 0 6px; color: var(--blog-blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.article-related h2 { margin: 0 0 20px; color: #142842; font-size: 25px; }
.article-related > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.article-related a { min-width: 0; padding: 20px; display: grid; gap: 8px; color: #142842; background: #fff; box-shadow: 0 8px 22px rgba(7,27,59,.06); transition: transform .2s; }
.article-related a:hover { transform: translateY(-2px); }
.article-related strong { font-size: 16px; }
.article-related span { color: #607089; font-size: 13px; line-height: 1.5; }
@media (max-width: 600px) {
  .article-hero { min-height: 390px; }
  .article-hero-copy, .article-layout { width: calc(100% - 32px); }
  .article-hero-copy { padding: 80px 0 42px; }
  .article-hero-copy h1 { font-size: 38px; letter-spacing: -1.5px; }
  .article-layout { padding: 38px 0 58px; }
  .article-back { margin-bottom: 26px; }
  .article-body { padding: 30px 22px; }
  .article-body p { font-size: 16px; line-height: 1.9; }
  .article-body h1 { font-size: 27px; }
  .article-body h2 { font-size: 23px; }
  .article-body h3 { font-size: 20px; }
  .article-body ul,
  .article-body ol { font-size: 16px; }
  .article-body pre { margin-right: -10px; margin-left: -10px; padding: 17px; font-size: 13px; }
  .article-related { padding: 24px 20px; }
  .article-related > div { grid-template-columns: 1fr; }
}