/* ====================================================== */
    /* ARTICLE PAGE BASE */
    /* ====================================================== */

    body {
        background:
            #f8fbfe !important;
        color:
            #0f172a;
    }

    body::before {
        opacity:
            .24;
    }

    #about-scroll-progress {
        background:
            linear-gradient(
                90deg,
                rgba(14,165,233,.34),
                #0ea5e9 45%,
                #38bdf8 76%,
                rgba(125,211,252,.58)
            );
    }

    .news-detail-page {
        position:
            relative;

        overflow:
            hidden;

        padding:
            146px 0 0;
    }

    .news-detail-page::before {
        content:
            "";

        position:
            absolute;

        top:
            0;

        left:
            0;

        right:
            0;

        height:
            760px;

        z-index:
            -2;

        pointer-events:
            none;

        background:
            linear-gradient(
                180deg,
                rgba(240,249,255,.95) 0%,
                rgba(248,252,255,.90) 42%,
                rgba(255,255,255,.95) 82%,
                #ffffff 100%
            );
    }

    .news-detail-page::after {
        content:
            "";

        position:
            absolute;

        width:
            720px;

        height:
            720px;

        top:
            -330px;

        left:
            50%;

        z-index:
            -1;

        pointer-events:
            none;

        transform:
            translateX(-50%);

        border-radius:
            999px;

        background:
            radial-gradient(
                circle,
                rgba(14,165,233,.14),
                rgba(125,211,252,.06) 42%,
                transparent 71%
            );

        filter:
            blur(3px);
    }

    .article-container {
        width:
            min(
                1180px,
                calc(100% - 40px)
            );

        margin-inline:
            auto;
    }


    /* ====================================================== */
    /* BREADCRUMB */
    /* ====================================================== */

    .article-breadcrumb {
        display:
            flex;

        align-items:
            center;

        flex-wrap:
            wrap;

        gap:
            8px;

        margin-bottom:
            28px;

        color:
            #64748b;

        font-size:
            10px;

        font-weight:
            700;
    }

    .article-breadcrumb a {
        transition:
            color .25s ease;
    }

    .article-breadcrumb a:hover {
        color:
            #0284c7;
    }

    .article-breadcrumb-current {
        color:
            #0f172a;
    }


    /* ====================================================== */
    /* ARTICLE HEADER */
    /* ====================================================== */

    .article-header {
        max-width:
            930px;

        margin:
            0 auto;

        text-align:
            center;
    }

    .article-kicker-row {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            10px;
    }

    .article-kicker {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            7px;

        padding:
            8px 12px;

        border:
            1px solid
            #bae6fd;

        border-radius:
            999px;

        background:
            rgba(240,249,255,.88);

        color:
            #0369a1;

        box-shadow:
            0 7px 20px
            rgba(14,165,233,.07);

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .09em;

        text-transform:
            uppercase;
    }

    .article-header-date {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            6px;

        color:
            #64748b;

        font-size:
            10px;

        font-weight:
            700;
    }

    .article-title {
        max-width:
            900px;

        margin:
            20px auto 0;

        color:
            #0f172a;

        font-size:
            clamp(
                42px,
                5.35vw,
                74px
            );

        line-height:
            1.035;

        letter-spacing:
            -.058em;

        font-weight:
            800;
    }

    .article-title-accent {
        color:
            #0ea5e9;
    }

    .article-deck {
        max-width:
            760px;

        margin:
            24px auto 0;

        color:
            #64748b;

        font-size:
            16px;

        line-height:
            1.82;

        font-weight:
            500;
    }

    .article-meta {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            10px 17px;

        margin-top:
            25px;
    }

    .article-meta-item {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            7px;

        color:
            #64748b;

        font-size:
            10px;

        font-weight:
            700;
    }

    .article-author {
        padding:
            7px 11px;

        border:
            1px solid
            #e2e8f0;

        border-radius:
            999px;

        background:
            rgba(255,255,255,.72);

        box-shadow:
            0 5px 16px
            rgba(15,23,42,.035);
    }

    .article-share-button {
        border:
            0;

        padding:
            0;

        background:
            transparent;

        cursor:
            pointer;

        transition:
            color .25s ease;
    }

    .article-share-button:hover {
        color:
            #0284c7;
    }


    /* ====================================================== */
    /* HERO MEDIA */
    /* ====================================================== */

    .article-cover {
        position:
            relative;

        width:
            min(
                1120px,
                100%
            );

        aspect-ratio:
            16 / 8.4;

        margin:
            46px auto 0;

        overflow:
            hidden;

        border:
            1px solid
            rgba(255,255,255,.96);

        border-radius:
            32px;

        background:
            #e0f2fe;

        box-shadow:
            0 34px 82px
            rgba(15,23,42,.14),
            0 10px 28px
            rgba(14,165,233,.08);
    }

    .article-cover img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        transform:
            scale(1.012);

        transition:
            transform
            1.2s
            cubic-bezier(.16,1,.3,1);
    }

    .article-cover:hover img {
        transform:
            scale(1.045);
    }

    .article-cover::after {
        content:
            "";

        position:
            absolute;

        inset:
            0;

        pointer-events:
            none;

        background:
            linear-gradient(
                to top,
                rgba(7,24,39,.42) 0%,
                rgba(7,24,39,.08) 36%,
                transparent 70%
            );
    }

    .article-cover-caption {
        position:
            absolute;

        left:
            22px;

        right:
            22px;

        bottom:
            20px;

        z-index:
            2;

        display:
            flex;

        align-items:
            flex-end;

        justify-content:
            space-between;

        gap:
            20px;

        color:
            #ffffff;
    }

    .cover-caption-badge {
        display:
            inline-flex;

        align-items:
            center;

        gap:
            7px;

        padding:
            8px 11px;

        border:
            1px solid
            rgba(255,255,255,.19);

        border-radius:
            999px;

        background:
            rgba(7,24,39,.42);

        backdrop-filter:
            blur(12px);

        -webkit-backdrop-filter:
            blur(12px);

        font-size:
            9px;

        font-weight:
            800;
    }

    .cover-caption-note {
        max-width:
            360px;

        color:
            rgba(255,255,255,.76);

        font-size:
            9px;

        line-height:
            1.6;

        text-align:
            right;
    }


    /* ====================================================== */
    /* ARTICLE CONTENT */
    /* ====================================================== */

    .article-layout {
        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr)
            292px;

        gap:
            48px;

        align-items:
            start;

        width:
            min(
                1050px,
                100%
            );

        margin:
            58px auto 0;
    }

    .article-body {
        min-width:
            0;
    }

    .article-body-inner {
        padding:
            44px 48px;

        border:
            1px solid
            rgba(226,232,240,.92);

        border-radius:
            28px;

        background:
            rgba(255,255,255,.92);

        box-shadow:
            0 17px 52px
            rgba(15,23,42,.055),
            inset 0 1px 0
            rgba(255,255,255,.96);
    }

    .article-lead {
        margin:
            0;

        color:
            #334155;

        font-size:
            18px;

        line-height:
            1.88;

        font-weight:
            560;
    }

    .article-lead::first-letter {
        float:
            left;

        margin:
            10px 9px 0 0;

        color:
            #0284c7;

        font-size:
            58px;

        line-height:
            .74;

        font-weight:
            800;

        letter-spacing:
            -.055em;
    }

    .article-body p {
        margin:
            0 0 24px;

        color:
            #475569;

        font-size:
            15px;

        line-height:
            1.94;
    }

    .article-body h2 {
        margin:
            43px 0
            15px;

        color:
            #0f172a;

        font-size:
            clamp(
                24px,
                2.4vw,
                31px
            );

        line-height:
            1.25;

        letter-spacing:
            -.035em;

        font-weight:
            800;

        scroll-margin-top:
            112px;
    }

    .article-divider {
        width:
            100%;

        height:
            1px;

        margin:
            34px 0;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(148,163,184,.34),
                transparent
            );
    }

    .article-highlight {
        position:
            relative;

        margin:
            32px 0;

        padding:
            25px 26px
            25px 65px;

        overflow:
            hidden;

        border:
            1px solid
            #dbeafe;

        border-radius:
            22px;

        background:
            radial-gradient(
                circle at 90% 12%,
                rgba(125,211,252,.22),
                transparent 32%
            ),
            linear-gradient(
                145deg,
                #f0f9ff,
                #f8fafc
            );

        color:
            #075985;

        font-size:
            15px;

        line-height:
            1.78;

        font-weight:
            750;
    }

    .article-highlight-icon {
        position:
            absolute;

        left:
            22px;

        top:
            24px;

        width:
            30px;

        height:
            30px;

        display:
            grid;

        place-items:
            center;

        border-radius:
            10px;

        color:
            #ffffff;

        background:
            linear-gradient(
                135deg,
                #0ea5e9,
                #0369a1
            );

        box-shadow:
            0 8px 20px
            rgba(14,165,233,.20);
    }

    .article-note {
        margin-top:
            36px;

        padding:
            18px 20px;

        border:
            1px dashed
            rgba(14,165,233,.32);

        border-radius:
            18px;

        background:
            rgba(240,249,255,.66);
    }

    .article-note strong {
        display:
            flex;

        align-items:
            center;

        gap:
            7px;

        color:
            #075985;

        font-size:
            11px;

        font-weight:
            800;
    }

    .article-note p {
        margin:
            8px 0 0;

        color:
            #64748b;

        font-size:
            12px;

        line-height:
            1.72;
    }


    /* ====================================================== */
    /* SIDEBAR */
    /* ====================================================== */

    .article-sidebar {
        position:
            sticky;

        top:
            112px;

        display:
            grid;

        gap:
            15px;
    }

    .article-side-card {
        padding:
            21px;

        border:
            1px solid
            rgba(226,232,240,.92);

        border-radius:
            22px;

        background:
            rgba(255,255,255,.91);

        box-shadow:
            0 14px 40px
            rgba(15,23,42,.055),
            inset 0 1px 0
            rgba(255,255,255,.95);

        backdrop-filter:
            blur(13px);

        -webkit-backdrop-filter:
            blur(13px);
    }

    .side-card-kicker {
        display:
            flex;

        align-items:
            center;

        gap:
            6px;

        color:
            #0284c7;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .095em;

        text-transform:
            uppercase;
    }

    .side-card-title {
        margin:
            8px 0 0;

        color:
            #0f172a;

        font-size:
            16px;

        line-height:
            1.35;

        letter-spacing:
            -.02em;

        font-weight:
            800;
    }

    .article-facts {
        display:
            grid;

        gap:
            12px;

        margin-top:
            17px;
    }

    .article-fact {
        display:
            grid;

        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap:
            10px;

        align-items:
            center;
    }

    .article-fact-icon {
        width:
            34px;

        height:
            34px;

        display:
            grid;

        place-items:
            center;

        border:
            1px solid
            #e0f2fe;

        border-radius:
            11px;

        background:
            #f0f9ff;

        color:
            #0284c7;
    }

    .article-fact small {
        display:
            block;

        color:
            #94a3b8;

        font-size:
            8px;

        font-weight:
            800;

        letter-spacing:
            .08em;

        text-transform:
            uppercase;
    }

    .article-fact strong {
        display:
            block;

        margin-top:
            2px;

        color:
            #334155;

        font-size:
            10px;

        line-height:
            1.5;

        font-weight:
            750;
    }

    .article-side-actions {
        display:
            grid;

        gap:
            8px;

        margin-top:
            17px;
    }

    .article-side-button {
        min-height:
            43px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px;

        padding:
            0 12px;

        border-radius:
            13px;

        font-size:
            10px;

        font-weight:
            800;

        transition:
            transform .28s
            cubic-bezier(.16,1,.3,1),
            box-shadow .28s ease,
            background .25s ease;
    }

    .article-side-button:hover {
        transform:
            translateY(-2px);
    }

    .article-side-button.primary {
        color:
            #ffffff;

        background:
            linear-gradient(
                135deg,
                #0ea5e9,
                #0369a1
            );

        box-shadow:
            0 10px 24px
            rgba(14,165,233,.20);
    }

    .article-side-button.secondary {
        color:
            #0369a1;

        border:
            1px solid
            #e0f2fe;

        background:
            #f0f9ff;
    }

    .article-toc {
        display:
            grid;

        gap:
            5px;

        margin-top:
            13px;
    }

    .article-toc a {
        display:
            grid;

        grid-template-columns:
            20px
            minmax(0, 1fr);

        gap:
            8px;

        align-items:
            start;

        padding:
            8px 9px;

        border-radius:
            10px;

        color:
            #64748b;

        font-size:
            9.5px;

        line-height:
            1.5;

        font-weight:
            650;

        transition:
            color .2s ease,
            background .2s ease;
    }

    .article-toc a:hover {
        color:
            #0284c7;

        background:
            #f0f9ff;
    }

    .article-toc-number {
        width:
            20px;

        height:
            20px;

        display:
            grid;

        place-items:
            center;

        border-radius:
            7px;

        background:
            #f0f9ff;

        color:
            #0284c7;

        font-size:
            8px;

        font-weight:
            800;
    }


    /* ====================================================== */
    /* ARTICLE FOOT */
    /* ====================================================== */

    .article-end-section {
        padding:
            58px 0 105px;
    }

    .article-end-card {
        position:
            relative;

        overflow:
            hidden;

        width:
            min(
                1050px,
                100%
            );

        margin:
            0 auto;

        padding:
            34px;

        border:
            1px solid
            rgba(255,255,255,.14);

        border-radius:
            28px;

        background:
            radial-gradient(
                circle at 85% 20%,
                rgba(125,211,252,.20),
                transparent 29%
            ),
            linear-gradient(
                135deg,
                #075985 0%,
                #0369a1 50%,
                #0c4a6e 100%
            );

        box-shadow:
            0 28px 70px
            rgba(3,105,161,.19);
    }

    .article-end-card::after {
        content:
            "";

        position:
            absolute;

        width:
            250px;

        height:
            250px;

        top:
            -110px;

        right:
            -100px;

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:
            50%;

        box-shadow:
            0 0 0 34px
            rgba(255,255,255,.024),
            0 0 0 68px
            rgba(255,255,255,.016);
    }

    .article-end-content {
        position:
            relative;

        z-index:
            2;

        max-width:
            690px;
    }

    .article-end-kicker {
        color:
            #bae6fd;

        font-size:
            9px;

        font-weight:
            800;

        letter-spacing:
            .12em;

        text-transform:
            uppercase;
    }

    .article-end-title {
        margin:
            9px 0 0;

        color:
            #ffffff;

        font-size:
            clamp(
                27px,
                3vw,
                40px
            );

        line-height:
            1.15;

        letter-spacing:
            -.04em;

        font-weight:
            800;
    }

    .article-end-copy {
        max-width:
            620px;

        margin:
            12px 0 0;

        color:
            rgba(226,232,240,.88);

        font-size:
            12px;

        line-height:
            1.75;
    }

    .article-end-actions {
        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            9px;

        margin-top:
            21px;
    }

    .article-end-action {
        min-height:
            43px;

        display:
            inline-flex;

        align-items:
            center;

        gap:
            7px;

        padding:
            0 14px;

        border-radius:
            12px;

        font-size:
            10px;

        font-weight:
            800;

        transition:
            transform .3s
            cubic-bezier(.16,1,.3,1),
            background .25s ease;
    }

    .article-end-action:hover {
        transform:
            translateY(-2px);
    }

    .article-end-action.light {
        color:
            #075985;

        background:
            #ffffff;
    }

    .article-end-action.glass {
        color:
            #ffffff;

        border:
            1px solid
            rgba(255,255,255,.20);

        background:
            rgba(255,255,255,.09);
    }


    /* ====================================================== */
    /* COPY TOAST */
    /* ====================================================== */

    #article-copy-toast {
        position:
            fixed;

        right:
            22px;

        bottom:
            22px;

        z-index:
            10020;

        display:
            inline-flex;

        align-items:
            center;

        gap:
            8px;

        padding:
            11px 13px;

        border-radius:
            13px;

        color:
            #ffffff;

        background:
            rgba(15,23,42,.94);

        box-shadow:
            0 16px 42px
            rgba(15,23,42,.20);

        opacity:
            0;

        transform:
            translateY(10px);

        pointer-events:
            none;

        font-size:
            10px;

        font-weight:
            750;

        transition:
            opacity .28s ease,
            transform .35s
            cubic-bezier(.16,1,.3,1);
    }

    #article-copy-toast.show {
        opacity:
            1;

        transform:
            translateY(0);
    }


    /* ====================================================== */
    /* MOBILE */
    /* ====================================================== */

    @media (max-width: 1024px) {

        .article-layout {
            grid-template-columns:
                1fr;

            max-width:
                850px;
        }

        .article-sidebar {
            position:
                static;

            grid-template-columns:
                1fr 1fr;
        }

    }


    @media (max-width: 767px) {

        .news-detail-page {
            padding-top:
                105px;
        }

        .article-container {
            width:
                min(
                    100% - 24px,
                    1180px
                );
        }

        .article-breadcrumb {
            margin-bottom:
                22px;

            font-size:
                9px;
        }

        .article-title {
            font-size:
                clamp(
                    38px,
                    12.2vw,
                    56px
                );

            letter-spacing:
                -.052em;
        }

        .article-deck {
            font-size:
                14px;

            line-height:
                1.8;
        }

        .article-cover {
            aspect-ratio:
                4 / 3;

            margin-top:
                32px;

            border-radius:
                23px;
        }

        .article-cover-caption {
            left:
                14px;

            right:
                14px;

            bottom:
                13px;
        }

        .cover-caption-note {
            display:
                none;
        }

        .article-layout {
            gap:
                22px;

            margin-top:
                30px;
        }

        .article-body-inner {
            padding:
                29px 21px;

            border-radius:
                22px;
        }

        .article-lead {
            font-size:
                16px;
        }

        .article-body p {
            font-size:
                14px;

            line-height:
                1.9;
        }

        .article-body h2 {
            margin-top:
                36px;
        }

        .article-highlight {
            padding:
                61px 19px
                20px;

            font-size:
                13px;
        }

        .article-highlight-icon {
            left:
                19px;

            top:
                18px;
        }

        .article-sidebar {
            grid-template-columns:
                1fr;
        }

        .article-end-section {
            padding-top:
                34px;

            padding-bottom:
                82px;
        }

        .article-end-card {
            padding:
                27px 21px;

            border-radius:
                22px;
        }

        #article-copy-toast {
            left:
                50%;

            right:
                auto;

            bottom:
                calc(
                    88px +
                    env(
                        safe-area-inset-bottom
                    )
                );

            transform:
                translate(
                    -50%,
                    10px
                );

            white-space:
                nowrap;
        }

        #article-copy-toast.show {
            transform:
                translate(
                    -50%,
                    0
                );
        }

    }