:root {
    --article-ink: #1b2a45;
    --article-muted: #627083;
    --article-gold: #c99a28;
    --article-paper: #fbfaf7;
    --article-line: rgba(27, 42, 69, .14);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--article-paper); color: var(--article-ink); }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 2000; padding: .7rem 1rem; background: #fff; color: #111; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.article-navbar { background: rgba(255,255,255,.98); box-shadow: 0 2px 14px rgba(15,31,54,.1); }
.article-navbar .nav-links > li > a, .article-navbar .destination-menu-trigger { color: var(--article-ink); }
.article-page { padding: 9rem 0 5rem; }
.article-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.article-breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 2.2rem; color: var(--article-muted); font-size: .92rem; }
.article-breadcrumb a { color: var(--article-ink); text-decoration: underline; text-underline-offset: 3px; }
.article-header { width: min(900px, 100%); margin: 0 auto 2rem; text-align: center; }
.article-eyebrow { display: inline-block; margin-bottom: .9rem; color: var(--article-gold); font-family: var(--font-heading, Georgia, serif); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.article-header h1 { max-width: 900px; margin: 0 auto 1rem; color: var(--article-ink); font-family: var(--font-heading, Georgia, serif); font-size: clamp(2.15rem, 5vw, 4.35rem); line-height: 1.08; text-wrap: balance; }
.article-dek { max-width: 760px; margin: 0 auto 1.35rem; color: #43536a; font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.65; text-wrap: pretty; }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.25rem; color: var(--article-muted); font-size: .95rem; }
.article-hero { width: min(1040px, 100%); margin: 2.3rem auto 2.8rem; }
.article-hero img { display: block; width: 100%; max-height: 650px; border-radius: 18px; object-fit: cover; box-shadow: 0 24px 55px rgba(21,35,57,.16); }
.article-hero figcaption { margin-top: .75rem; color: var(--article-muted); font-size: .86rem; text-align: center; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 280px); justify-content: center; gap: 3.5rem; align-items: start; }
.article-content { font-size: 1.08rem; line-height: 1.9; }
.article-content h2 { margin: 2.5rem 0 1rem; color: var(--article-ink); font-family: var(--font-heading, Georgia, serif); font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.25; }
.article-content h2:first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.6rem; }
.article-content ul { margin: -.2rem 0 1.8rem; padding-left: 1.35rem; }
.article-content li { margin-bottom: .7rem; padding-left: .25rem; }
.article-content strong { color: var(--article-ink); }
.article-content a { color: #8b6500; text-decoration: underline; text-underline-offset: 3px; }
.article-aside { position: sticky; top: 8rem; padding: 1.45rem; border: 1px solid var(--article-line); border-top: 3px solid var(--article-gold); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(21,35,57,.08); }
.article-aside h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.article-aside p { margin: 0 0 1.1rem; color: #526176; line-height: 1.6; }
.article-aside .btn-primary, .article-aside .btn-secondary { display: flex; width: 100%; justify-content: center; margin-top: .7rem; text-align: center; }
.article-related { margin-top: 5rem; padding-top: 3.5rem; border-top: 1px solid var(--article-line); }
.article-related h2 { margin-bottom: 1.8rem; text-align: center; }
.article-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.article-related-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--article-line); border-radius: 14px; background: #fff; color: var(--article-ink); box-shadow: 0 12px 30px rgba(21,35,57,.07); transition: transform .2s ease, box-shadow .2s ease; }
.article-related-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(21,35,57,.13); }
.article-related-card:focus-visible { outline: 3px solid var(--article-gold); outline-offset: 4px; }
.article-related-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-related-card div { display: flex; flex: 1; flex-direction: column; padding: 1.15rem; }
.article-related-card h3 { margin: 0 0 .65rem; font-size: 1.1rem; line-height: 1.35; }
.article-related-card p { margin: 0 0 .9rem; color: #5b6878; font-size: .94rem; line-height: 1.55; }
.article-related-card span { margin-top: auto; color: #8b6500; font-weight: 700; }
.article-footer { background: #12243b; color: #fff; }
.article-footer a { color: #fff; }
.article-footer .footer-bottom { border-top-color: rgba(255,255,255,.14); }

@media (max-width: 900px) {
    .article-page { padding-top: 8rem; }
    .article-layout { grid-template-columns: minmax(0, 760px); gap: 2rem; }
    .article-aside { position: static; }
    .article-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .article-page { padding: 7rem 0 3.5rem; }
    .article-shell { width: min(100% - 1.25rem, 1120px); }
    .article-breadcrumb { margin-bottom: 1.4rem; font-size: .84rem; }
    .article-header h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
    .article-hero { margin: 1.7rem auto 2.1rem; }
    .article-hero img { min-height: 260px; border-radius: 12px; }
    .article-content { font-size: 1.02rem; line-height: 1.78; }
    .article-related { margin-top: 3.5rem; }
    .article-related-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .article-related-card { transition: none; }
}