/* Article Specific Overrides - Clean Full Width */
        .article-header {
            padding-top: 80px;
            text-align: left;
            max-width: 100%;
            margin: 0 auto;
            padding-bottom: 1.5rem;
            padding-left: 6%;
            padding-right: 6%;
        }

        .article-meta-row {
            display: flex;
            justify-content: flex-start;
            gap: 2rem;
            margin-bottom: 1rem;
            color: var(--accent);
            font-family: var(--font-body);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            opacity: 0.9;
        }

        .article-hero-container {
            width: 100%;
            max-width: 100%;
            margin: 0 0 2rem;
            height: 22vh;
            max-height: 200px;
            overflow: hidden;
            border-radius: 0;
            box-shadow: none;
            position: relative;
        }

        .article-hero-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(to top, var(--bg-main), transparent);
        }

        .article-hero-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Clean two-column article layout */
        .article-body {
            max-width: 100%;
            margin: 0 auto 4rem;
            padding: 0 6%;
            font-size: 1rem;
            line-height: 1.85;
            color: rgba(249, 244, 234, 0.85);
            columns: 2;
            column-gap: 4rem;
            column-rule: 1px solid rgba(255,255,255,0.06);
        }

        @media (max-width: 1000px) {
            .article-body {
                columns: 1;
                padding: 0 5%;
                max-width: 750px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        .article-body img {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            margin: 2rem auto;
            display: block;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .article-body h2 {
            font-size: 1.5rem;
            margin-top: 2rem;
            margin-bottom: 0.8rem;
            color: #fff;
            break-after: avoid;
            letter-spacing: -0.02em;
        }

        .article-body h3 {
            font-size: 1.15rem;
            margin-top: 1.5rem;
            margin-bottom: 0.6rem;
            color: var(--accent);
            break-after: avoid;
            font-weight: 600;
        }

        .article-body p {
            margin-bottom: 1.25rem;
            color: inherit;
        }

        .article-body ul, .article-body ol {
            margin-bottom: 1.25rem;
            padding-left: 1.25rem;
        }

        .article-body li {
            margin-bottom: 0.5rem;
        }

        .article-body blockquote {
            border-left: 2px solid var(--accent);
            padding-left: 1.25rem;
            margin: 1.5rem 0;
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-style: italic;
            color: rgba(255,255,255,0.75);
            break-inside: avoid;
        }

        /* Reading Progress Bar */
        #readingProgress {
            position: fixed;
            top: 0;
            left: 0;
            height: 2px;
            background: var(--accent);
            width: 0%;
            z-index: 10001;
            transition: width 0.1s;
        }

        .back-nav {
            margin-bottom: 1rem;
            display: block;
            text-align: left;
            padding-left: 6%;
        }

/* Extracted Inline Styles */
.loader-container { display: flex; justify-content: center; padding: 2rem; }
.loader-icon { color: var(--accent); }
.article-footer { text-align: center; margin-bottom: 5rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.1); }
.article-footer-text { color: var(--text-secondary); margin-bottom: 1rem; }


/* Editorial reading layout: preserve the full article and avoid narrow newspaper columns. */
.article-page { overflow-x: clip; }
.article-container { min-width: 0; }
.article-header { padding-top: clamp(6rem, 12vh, 9rem); padding-left: clamp(1rem, 6vw, 5rem); padding-right: clamp(1rem, 6vw, 5rem); }
.article-header h1 { max-width: 100%; overflow-wrap: anywhere; line-height: 1.12; }
.article-meta-row { flex-wrap: wrap; gap: .65rem 1.25rem; }
.article-hero-container { height: clamp(220px, 38vw, 460px); max-height: none; border-radius: 12px; }
.article-hero-container img { display: block; object-fit: cover; }
.article-body { columns: 1; column-rule: 0; width: min(100% - 2rem, 820px); padding: 0; overflow-wrap: anywhere; }
.article-body pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 768px) {
 .article-header { padding-top: 6rem; }
 .article-header h1 { font-size: clamp(2rem, 8vw, 3.25rem); }
 .article-hero-container { height: clamp(190px, 55vw, 320px); }
 .article-body { width: min(100% - 1.5rem, 820px); font-size: 1rem; }
}


/* Accessible newspaper reading layout — shared by every article using this template. */
.article-container {
    width: min(100% - 3rem, 1180px);
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 0;
}
.article-header {
    width: 100%;
    padding: clamp(6rem, 10vh, 8rem) 0 1.5rem;
    margin: 0;
}
.article-header h1 {
    max-width: 100%;
    margin-inline: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}
.article-meta-row {
    font-size: .875rem;
    line-height: 1.6;
    letter-spacing: .08em;
}
.article-hero-container {
    width: 100%;
    height: clamp(240px, 42vw, 480px);
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 12px;
    overflow: hidden;
}
.article-hero-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.article-body {
    width: 100%;
    max-width: none;
    margin: 0 0 3.5rem;
    padding: 0;
    columns: 2;
    column-gap: clamp(2rem, 4vw, 4rem);
    column-rule: 1px solid rgba(249, 244, 234, .18);
    column-fill: balance;
    font-family: var(--font-body, Inter, Arial, sans-serif);
    font-size: 1.125rem;
    line-height: 1.85;
    color: #f4f2ed;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.article-body p,
.article-body li {
    font-size: inherit;
    line-height: inherit;
}
.article-body p { margin: 0 0 1.2em; }
.article-body h2,
.article-body h3,
.article-body blockquote,
.article-body ul,
.article-body ol,
.article-body pre {
    break-inside: avoid;
}
.article-body h2 {
    font-size: clamp(1.35rem, 1.8vw, 1.65rem);
    line-height: 1.3;
    color: #fff;
    margin: 1.4em 0 .6em;
}
.article-body h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    color: #ffd16a;
    margin: 1.25em 0 .5em;
}
.article-body a {
    color: #ffd16a;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}
.article-body a:hover { color: #fff; }
.article-body a:focus-visible,
.article-footer a:focus-visible {
    outline: 3px solid #ffd16a;
    outline-offset: 4px;
    border-radius: 2px;
}
.article-body img {
    width: 100%;
    height: auto;
    break-inside: avoid;
}
.article-body pre {
    max-width: 100%;
    white-space: pre;
    overflow-x: auto;
    font-size: .9rem;
    line-height: 1.6;
}
.article-footer { width: 100%; }
@media (max-width: 900px) {
    .article-container { width: min(100% - 2.5rem, 760px); }
    .article-body {
        columns: 1;
        column-rule: 0;
        font-size: 1.125rem;
        line-height: 1.85;
    }
}
@media (max-width: 600px) {
    .article-container { width: calc(100% - 2rem); }
    .article-header { padding-top: 6rem; padding-bottom: 1.25rem; }
    .article-header h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.18; }
    .article-meta-row { gap: .5rem .75rem; font-size: .8rem; }
    .article-hero-container {
        height: clamp(200px, 58vw, 320px);
        margin-bottom: 1.5rem;
        border-radius: 8px;
    }
    .article-body { font-size: 1.0625rem; line-height: 1.8; }
    .article-body pre { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
    #readingProgress { transition: none; }
}


/* Layout regression fix: keep article category/date/read-time below the fixed navbar.
   The navbar can grow when fonts wrap or the viewport narrows, so use a safe
   top offset and allow metadata to wrap instead of clipping. */
.article-page .article-container {
    padding-top: clamp(6.5rem, 11vh, 9rem);
    scroll-padding-top: 6rem;
}

.article-page .article-header {
    padding-top: clamp(1rem, 3vh, 2rem);
    overflow: visible;
}

.article-page .article-meta-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.55rem;
    column-gap: clamp(0.55rem, 2vw, 1.25rem);
    max-width: 100%;
    overflow: visible;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.article-page .article-meta-row > span {
    min-width: 0;
}

@media (max-width: 600px) {
    .article-page .article-container {
        padding-top: 6.25rem;
    }

    .article-page .article-header {
        padding-left: 5%;
        padding-right: 5%;
    }

    .article-page .article-meta-row {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        column-gap: 0.55rem;
    }
}


/* Compact newspaper typography: tighter hierarchy, less dead space, readable columns. */
.article-page .article-container {
    width: min(100% - 3rem, 1120px);
    max-width: 1120px;
}
.article-page .article-header {
    padding-bottom: 1.1rem;
}
.article-page .article-header h1 {
    max-width: 980px;
    font-size: clamp(2rem, 3.7vw, 3.15rem);
    line-height: 1.1;
    letter-spacing: -.035em;
}
.article-page .article-author-byline {
    font-size: .82rem;
    line-height: 1.55;
}
.article-page .article-meta-row {
    font-size: .72rem;
    letter-spacing: .07em;
    margin-bottom: .75rem;
}
.article-page .article-hero-container {
    height: clamp(190px, 28vw, 340px);
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.article-page .article-body {
    font-size: 1rem;
    line-height: 1.76;
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    column-rule-color: rgba(249, 244, 234, .12);
    margin-bottom: 2.5rem;
}
.article-page .article-body p { margin-bottom: .95em; }
.article-page .article-body h2 {
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    line-height: 1.28;
    margin: 1.15em 0 .45em;
}
.article-page .article-body h3 {
    font-size: 1.05rem;
    margin: 1em 0 .4em;
}
.article-page .article-body ul,
.article-page .article-body ol { margin-bottom: .9rem; }
.article-page .article-body li { margin-bottom: .3rem; }
.article-page .article-footer {
    margin-bottom: 3rem;
    padding-top: 2rem;
}
@media (max-width: 900px) {
    .article-page .article-body {
        font-size: 1rem;
        line-height: 1.76;
    }
}
@media (max-width: 600px) {
    .article-page .article-container { width: calc(100% - 2rem); }
    .article-page .article-header h1 { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
    .article-page .article-hero-container { height: clamp(180px, 52vw, 260px); }
    .article-page .article-body { font-size: .97rem; line-height: 1.72; }
}


/* Article diagrams: responsive visual anchors for short-attention, visual readers. */
.article-page .article-body figure.article-visual {
    display: block;
    width: 100%;
    margin: 1.35rem 0 1.65rem;
    padding: .65rem;
    border: 1px solid rgba(249, 244, 234, .16);
    border-radius: 14px;
    background: rgba(16, 24, 43, .72);
    break-inside: avoid;
    column-span: all;
}
.article-page .article-body figure.article-visual img {
    display: block;
    width: 100%;
    max-width: 1120px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: none;
}
.article-page .article-body figure.article-visual figcaption {
    max-width: 960px;
    margin: .65rem auto .2rem;
    padding: 0 .35rem;
    color: rgba(249, 244, 234, .82);
    font-size: .84rem;
    line-height: 1.55;
    text-align: center;
}
@media (max-width: 600px) {
    .article-page .article-body figure.article-visual {
        width: calc(100% + .5rem);
        margin-left: -.25rem;
        padding: .35rem;
        border-radius: 10px;
    }
    .article-page .article-body figure.article-visual figcaption {
        font-size: .78rem;
        padding: 0 .25rem;
    }
}


/* Wide article canvas with a restrained editorial reading measure. Diagrams span both columns. */
.article-page { overflow-x: clip; }
.article-page .article-container {
    width: min(calc(100% - clamp(1.5rem, 4vw, 4rem)), 1680px);
    max-width: 1680px;
    margin-inline: auto;
}
.article-page .article-header {
    width: 100%;
    padding-inline: 0;
    padding-top: clamp(6.25rem, 10vh, 8rem);
}
.article-page .article-header h1 { max-width: 26ch; font-size: clamp(2.1rem, 4.5vw, 4.5rem); text-wrap: balance; }
.article-page .article-hero-container {
    width: 100%;
    height: clamp(220px, 28vw, 440px);
    max-height: 440px;
    margin-block: 0 clamp(1.25rem, 2.5vw, 2.5rem);
}
.article-page .article-hero-container img { width: 100%; height: 100%; object-fit: cover; }
.article-page .article-body {
    width: 100%;
    max-width: none;
    columns: 2;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    column-rule: 1px solid rgba(249, 244, 234, .09);
    font-size: clamp(1rem, 1.08vw, 1.12rem);
    line-height: 1.78;
}
.article-page .article-body h2,
.article-page .article-body h3,
.article-page .article-body pre,
.article-page .article-body blockquote,
.article-page .article-body ul,
.article-page .article-body ol { break-inside: avoid; }
.article-page .article-body h2,
.article-page .article-body h3 { break-after: avoid; }
.article-page .article-body figure.article-visual { column-span: all; }
.article-page .article-footer { width: 100%; }
@media (max-width: 1000px) {
    .article-page .article-container { width: calc(100% - 2.5rem); }
    .article-page .article-body { columns: 1; column-rule: 0; }
}
@media (max-width: 600px) {
    .article-page .article-container { width: calc(100% - 1.25rem); }
    .article-page .article-header { padding-top: 6.25rem; }
    .article-page .article-header h1 { font-size: clamp(1.9rem, 8vw, 2.7rem); }
    .article-page .article-hero-container { height: clamp(170px, 55vw, 260px); }
    .article-page .article-body { font-size: 1rem; line-height: 1.72; }
    .article-page .article-body figure.article-visual { width: 100%; margin-inline: 0; }
}


/* Full article titles remain visible and wrap naturally at every viewport width. */
.article-page .article-header h1,
.article-page #articleTitle {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    font-size: clamp(1.8rem, 3.6vw, 3.2rem);
    line-height: 1.18;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-wrap: balance;
    hyphens: auto;
}
@media (max-width: 600px) {
    .article-page .article-header h1,
    .article-page #articleTitle {
        font-size: clamp(1.65rem, 7vw, 2.4rem);
        line-height: 1.22;
    }
}


/* Curated internal discovery links connect related articles without keyword stuffing. */
.article-page .article-related-reading { column-span: all; break-inside: avoid; margin: clamp(1.5rem, 3vw, 2.75rem) 0 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid rgba(56, 189, 248, .24); border-left: 3px solid #38bdf8; background: rgba(11, 27, 61, .42); }
.article-page .article-related-reading h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.article-page .article-related-reading p { margin: 0 0 .8rem; color: rgba(249, 244, 234, .72); font-size: .9rem; }
.article-page .article-related-reading ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.article-page .article-related-reading li { min-width: 0; margin: 0; }
.article-page .article-related-reading a { display: block; color: #f9f4ea; font-weight: 600; line-height: 1.4; text-decoration: underline; text-decoration-color: rgba(56, 189, 248, .55); text-underline-offset: .2em; }
.article-page .article-related-reading li span { display: block; margin-top: .3rem; color: rgba(249, 244, 234, .62); font-size: .76rem; }
@media (max-width: 700px) { .article-page .article-related-reading ul { grid-template-columns: minmax(0, 1fr); gap: .65rem; } }


/* Editorial disclosures and references keep proposal-based articles transparent and verifiable. */
.article-page .article-editorial-note { column-span: all; break-inside: avoid; margin: 0 0 1.25rem; padding: 1rem 1.15rem; border-left: 3px solid #f5a400; background: rgba(245, 164, 0, .08); color: rgba(249, 244, 234, .9); }
.article-page .article-editorial-note strong { display: block; margin-bottom: .35rem; }
.article-page .article-editorial-note p { margin: 0; font-size: .92rem; line-height: 1.6; }
.article-page .article-source-list { column-span: all; break-inside: avoid; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(249, 244, 234, .16); }
.article-page .article-source-list h2 { margin: 0 0 .65rem; font-size: 1.05rem; }
.article-page .article-source-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; margin: 0; padding-left: 1.1rem; }
.article-page .article-source-list li { break-inside: avoid; }
.article-page .article-source-list a { color: #9bdfff; text-underline-offset: .18em; }
.article-page .article-source-list li span { display: block; color: rgba(249, 244, 234, .62); font-size: .78rem; }
@media (max-width: 700px) { .article-page .article-source-list ul { grid-template-columns: minmax(0, 1fr); } }