:root { --ink: #172340; --accent: #4f46e5; }
html { scroll-padding-top: 112px; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid #a855f7; outline-offset: 5px; }
.skip-link { position: absolute; left: 1rem; top: -120px; padding: .75rem 1rem; color: #fff; background: #312e81; z-index: 1000; }
.skip-link:focus { top: 1rem; }
.card h3 a, .extra-card h3 a, .drama-item h4 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .extra-card h3 a:hover, .drama-item h4 a:hover { text-decoration: underline; text-underline-offset: 4px; }
h3 { line-height: 1.45; }
.resource-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 25px; }
.resource-links a { color: #4338ca; text-underline-offset: 4px; font-weight: 600; }
.header-inner { gap: 25px; }
.logo { flex-shrink: 0; }
.logo img { width: 46px; height: 46px; object-fit: contain; }
.logo span { font-size: 1.18rem; }
.nav { gap: 19px; }
.nav a { font-size: .85rem; }
.hero h1 { font-size: clamp(2rem,3.2vw,3.1rem); line-height: 1.34; }
.hero { gap: 44px; }
.hero-image { flex-shrink: 0; }
.hero-badge { font-size: .8rem; }
.article-main { padding-top: 34px; padding-bottom: 70px; }
.breadcrumbs { font-size: .86rem; color: #64748b; display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 30px; }
.breadcrumbs a { color: #4338ca; text-underline-offset: 3px; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 36px; align-items: start; }
.article-body { background: #fff; padding: 44px 48px; border: 1px solid #e4e8f4; border-radius: 28px; box-shadow: 0 14px 40px #1e1b4b05; min-width: 0; }
.article-heading h1 { font-size: clamp(1.8rem,3vw,2.6rem); line-height: 1.4; margin: 0 0 20px; }
.article-lead { color: #43516b; font-size: 1.08rem; padding: 20px; background: #f2f3ff; border-radius: 16px; border-left: 4px solid #6366f1; }
.article-figure { margin: 32px 0; }
.article-figure img { width: 100%; height: auto; border-radius: 18px; display: block; }
.article-figure figcaption { font-size: .8rem; color: #64748b; margin-top: 10px; text-align: center; }
.article-section { margin-top: 36px; scroll-margin-top: 120px; }
.article-section h2, .article-related h2, .takeaways h2, .sources h2 { font-size: 1.45rem; line-height: 1.5; margin-bottom: 16px; }
.article-section p { line-height: 1.95; color: #334155; margin: 16px 0; }
.article-body ul { padding-left: 1.4rem; color: #334155; }
.article-body li { margin: 10px 0; line-height: 1.8; }
.article-body a { color: #4338ca; text-underline-offset: 4px; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid #dce2f2; border-radius: 12px; margin: 22px 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .91rem; text-align: left; line-height: 1.7; }
.article-body th { color: #3730a3; background: #eef2ff; font-weight: 700; }
.article-body td, .article-body th { border-bottom: 1px solid #e4e8f4; padding: 14px 16px; vertical-align: top; }
.article-body tr:last-child td { border-bottom: none; }
.article-body td:first-child { font-weight: 600; }
.takeaways { margin-top: 36px; border-radius: 18px; background: #f0f4ff; padding: 24px; }
.sources, .article-related { padding-top: 30px; margin-top: 30px; border-top: 1px solid #e2e8f0; }
.sources p { font-size: .87rem; color: #64748b; }
.article-related ul { padding-left: 20px; }
.article-sidebar { position: sticky; top: 115px; }
.reading-guide { background: #eef1ff; border: 1px solid #e0e7ff; border-radius: 22px; padding: 24px; }
.reading-guide h2 { font-size: 1.1rem; margin-bottom: 18px; }
.reading-guide ol { padding-left: 18px; }
.reading-guide li { margin: 13px 0; font-size: .86rem; line-height: 1.7; }
.reading-guide a { color: #4338ca; text-underline-offset: 3px; }
.reading-guide hr { border: 0; border-top: 1px solid #c7d2fe; margin: 23px 0; }
.reading-guide p { color: #64748b; font-size: .86rem; margin-bottom: 20px; }
.reading-guide .btn-secondary { font-size: .83rem; padding: 10px 12px; }
@media (min-width:769px) and (max-width:1160px) { .header-inner { flex-wrap: wrap; justify-content: center; gap: 12px; } .hero-image { width: 43%; } }
@media (max-width:768px) {
 html { scroll-padding-top: 85px; }
 .header-inner { flex-wrap: nowrap; gap: 10px; }
 .header-inner .nav { flex-basis: 100%; }
 html:not(.js) .header-inner { flex-wrap: wrap; }
 .logo img { width: 34px; height: 34px; }
 .logo span { font-size: 1rem; }
 .hero h1 { font-size: 1.9rem; line-height: 1.4; }
 .hero-content p { font-size: .94rem; line-height: 1.85; }
 .hero-image { width: 100%; }
 .hero-actions a { font-size: .85rem; }
 .card h3 { font-size: 1rem; line-height: 1.5; }
 .card p { font-size: .84rem; line-height: 1.8; }
 .article-main { padding: 24px 16px 40px; }
 .article-layout { display: flex; flex-direction: column-reverse; gap: 22px; }
 .article-sidebar { position: static; width: 100%; }
 .reading-guide { padding: 20px; }
 .reading-guide ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
 .reading-guide li { margin: 3px 0; }
 .reading-guide hr, .reading-guide p, .reading-guide .btn-secondary { display: none; }
 .article-body { padding: 27px 20px; border-radius: 22px; width: 100%; }
 .article-heading h1 { font-size: 1.75rem; }
 .article-lead { font-size: .96rem; padding: 16px; }
 .article-section h2, .article-related h2, .takeaways h2, .sources h2 { font-size: 1.25rem; }
 .article-section p { font-size: .97rem; }
 .article-body th, .article-body td { padding: 10px; }
 .table-wrap { margin-left: -4px; margin-right: -4px; }
 .article-body table { font-size: .8rem; }
 .resource-links { gap: 16px; font-size: .9rem; }
 .download-area h2 { font-size: 1.45rem; }
 .bottom-bar .bar-info strong { font-size: .8rem; }
}