.detail-page, .detail-page main { background: #9aafcd; }
.detail-page .article-shell { width: 64%; max-width: 1228px; margin: 0 auto; padding: 52px 0 92px; color: rgb(25, 26, 26); }
.detail-page .article-breadcrumb { display: flex; align-items: center; gap: 14px; margin: 0 0 52px; font: 400 16px/1.4 XheartSmall, sans-serif; }
.detail-page .article-breadcrumb a:hover { color: #0a50f5; }
.detail-page .article-shell article { border-top: 4px solid rgb(25, 26, 26); }
.detail-page .article-shell h1 { margin: 26px 0 52px; max-width: 1150px; font: 300 clamp(28px, 2.45vw, 47px)/1.28 XheartBody, sans-serif; letter-spacing: 0; }
.detail-page .article-body { font: 400 clamp(16px, 1.04vw, 20px)/1.4 XheartSmall, sans-serif; overflow-wrap: anywhere; }
.detail-page .article-body p { margin: 0 0 22px; }
.detail-page .article-body strong { font-weight: 600; }
.detail-page .article-body h2 { margin: 22px 0 0; font: 300 clamp(23px, 1.67vw, 32px)/1.25 XheartBody, sans-serif; scroll-margin-top: 100px; }
.detail-page .article-body blockquote { margin: 0; padding: 0; }
.detail-page .article-body figure { margin: 36px 0; }
.detail-page .article-body img { display: block; max-width: 100%; height: auto; }
.detail-page .article-hero img { width: 92%; }
.detail-page .article-hero figcaption { max-width: 92%; margin-top: 10px; font-size: 13px; line-height: 18px; }
html[lang="en"] .detail-page .article-hero figcaption span + span::before { content: " "; }
.detail-page .article-body a { text-decoration: underline; text-underline-offset: 4px; }
.detail-page .article-neighbors { display: grid; gap: 30px; max-width: 760px; margin: 86px 0 0; }
.detail-page .article-neighbors a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 36px; align-items: start; font: 300 22px/1.22 XheartBody, sans-serif; }
.detail-page .article-neighbors a > span:last-child { position: relative; width: fit-content; padding-bottom: 10px; }
.detail-page .article-neighbors a > span:last-child::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: rgb(25, 26, 26); transform: scaleX(0); transform-origin: center; transition: transform .5s cubic-bezier(.85, 0, .15, 1); }
.detail-page .article-neighbors a:is(:hover, :focus-visible) > span:last-child::after { transform: scaleX(1); }
.detail-page .article-neighbor-label { display: block; position: relative; overflow: hidden; }
.detail-page .article-neighbor-label > span { display: block; transition: transform .5s cubic-bezier(.85, 0, .15, 1); }
.detail-page .article-neighbor-label > span + span { position: absolute; top: 100%; left: 0; width: 100%; }
.detail-page .article-neighbors a:is(:hover, :focus-visible) .article-neighbor-label > span { transform: translateY(-100%); }
.detail-page .article-shell a:focus-visible { outline: 2px solid #0a50f5; outline-offset: 5px; }
@media (max-width: 900px) { .detail-page .article-shell { width: 82%; } }
@media (max-width: 700px) { .detail-page .article-shell { width: auto; margin: 0 22px; padding: 28px 0 64px; } .detail-page .article-breadcrumb { margin-bottom: 30px; font-size: 13px; } .detail-page .article-shell h1 { margin: 22px 0 32px; font-size: 27px; } .detail-page .article-body { font-size: 15px; line-height: 1.6; } .detail-page .article-hero img { width: 100%; } .detail-page .article-neighbors { margin-top: 55px; gap: 24px; } .detail-page .article-neighbors a { grid-template-columns: 70px minmax(0, 1fr); gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .detail-page .article-neighbor-label > span, .detail-page .article-neighbors a > span:last-child::after { transition: none; } }