:root {
    --article-paper: #FDFCF8;
    --article-ink: #1E2824;
    --article-heading: #111814;
    --article-muted: #65706B;
    --article-line: #E9E3D9;

    --article-blue: #1E3A5F;
    --article-blue-soft: #F3F8FF;

    --article-accent: #8AA39A;

    --article-serif:
        "Newsreader",
        Georgia,
        serif;

    --article-display:
        "Fraunces",
        Georgia,
        serif;

    --article-sans:
        "Inter",
        Arial,
        sans-serif;

    --article-mono:
        "IBM Plex Mono",
        monospace;
}


/* ==================================================================
   ARTICLE SHELL
   ================================================================== */

.article-shell {
    margin: 0;
    background: var(--article-paper);
    color: var(--article-ink);

    font-family: var(--article-serif);
    font-size: 19px;
    line-height: 1.75;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.article-shell main {
    overflow-x: clip;
}

.article-shell a {
    color: inherit;
}


/* ==================================================================
   READING PROGRESS
   ================================================================== */

.article-reading-progress {
    position: fixed;
    z-index: 9999;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: rgba(30, 58, 95, .07);

    pointer-events: none;
}

.article-reading-progress span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #1E3A5F,
            #8AA39A
        );

    transform: scaleX(0);
    transform-origin: left center;

    will-change: transform;
}

[dir="rtl"]
.article-reading-progress span {
    transform-origin: right center;
}


/* ==================================================================
   MAIN LAYOUT
   ================================================================== */

.article-layout {
    width: min(1280px, 100%);

    margin: 0 auto;

    padding:
        0 28px 96px;

    display: grid;

    grid-template-columns:
        minmax(0, 760px)
        360px;

    gap: 64px;

    align-items: start;
    justify-content: center;
}

.article-layout > article {
    min-width: 0;
}


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

.article-main-header {
    position: relative;

    margin:
        0 -28px
        48px;

    padding:
        64px 28px
        48px;

    text-align: center;

    background:
        radial-gradient(
            800px 380px
            at 50% 0%,
            #EAF2FF 0%,
            transparent 70%
        ),
        radial-gradient(
            650px 300px
            at 92% 10%,
            rgba(255, 241, 214, .58),
            transparent 65%
        ),
        var(--article-paper);

    border-bottom:
        1px solid
        var(--article-line);
}


/* ==================================================================
   BREADCRUMBS
   ================================================================== */

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

    margin:
        0 auto
        30px;

    padding: 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 6px 9px;

    font-family: var(--article-sans);

    font-size: 12px;
    line-height: 1.5;

    color: #727B76;
}

.article-breadcrumbs a {
    color: #5D6963;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(30, 40, 36, .16);

    transition:
        color .18s ease,
        border-color .18s ease;
}

.article-breadcrumbs a:hover {
    color: var(--article-blue);
    border-color: var(--article-blue);
}


/* ==================================================================
   EYEBROW
   ================================================================== */

.article-eyebrow {
    display: inline-flex;
    align-items: center;

    margin:
        0 0
        24px;

    padding:
        8px 14px;

    border:
        1px solid
        #E7DFD4;

    border-radius:
        999px;

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

    box-shadow:
        0 4px 18px
        rgba(29, 38, 34, .04);

    color:
        #6B5F52;

    font-family:
        var(--article-sans);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


/* ==================================================================
   TITLE / DEK
   ================================================================== */

.article-main-header h1 {
    max-width: 18ch;

    margin:
        0 auto
        22px;

    color:
        var(--article-heading);

    font-family:
        var(--article-display);

    font-size:
        clamp(
            36px,
            4.8vw,
            56px
        );

    font-weight:
        800;

    line-height:
        1.02;

    letter-spacing:
        -.04em;

    text-align:
        center;

    text-wrap:
        balance;

    hyphens:
        none;
}

.article-dek {
    max-width: 62ch;

    margin:
        0 auto
        28px;

    color:
        #3D4A45;

    font-family:
        var(--article-serif);

    font-size:
        21px;

    font-style:
        italic;

    line-height:
        1.5;

    text-align:
        center;

    text-wrap:
        pretty;
}


/* ==================================================================
   METADATA
   ================================================================== */

.article-meta {
    max-width: 720px;

    margin: 0 auto;

    padding:
        14px 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap:
        7px 12px;

    border-top:
        1px solid
        #EDE7DE;

    border-bottom:
        1px solid
        #EDE7DE;

    color:
        #75817B;

    font-family:
        var(--article-mono);

    font-size:
        11.5px;

    line-height:
        1.5;
}

.article-meta span {
    display: inline-flex;
    align-items: center;
}

.article-meta span:not(:last-child)::after {
    content: "·";

    margin-inline-start:
        12px;

    color:
        #B3BBB7;
}


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

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

    margin:
        0 auto;
}

.article-content section {
    margin-top:
        56px;

    scroll-margin-top:
        40px;
}

.article-content section:first-child {
    margin-top:
        0;
}

.article-content h2 {
    margin:
        0 0
        18px;

    padding-top:
        28px;

    border-top:
        1px solid
        #EDE7DE;

    color:
        #121A17;

    font-family:
        var(--article-display);

    font-size:
        31px;

    font-weight:
        700;

    line-height:
        1.18;

    letter-spacing:
        -.02em;

    text-align:
        start;

    text-wrap:
        balance;
}

.article-content section:first-child h2 {
    border-top: 0;
    padding-top: 0;
}

.article-content h3 {
    margin:
        36px 0
        14px;

    color:
        #1E2924;

    font-family:
        var(--article-display);

    font-size:
        22px;

    font-style:
        italic;

    font-weight:
        700;

    line-height:
        1.3;

    text-align:
        start;

    text-wrap:
        balance;
}


/* ==================================================================
   BODY TYPOGRAPHY
   ================================================================== */

.article-content p,
.article-content li,
.article-faq p {
    text-align:
        justify;

    text-justify:
        auto;

    hyphens:
        auto;

    -webkit-hyphens:
        auto;

    hyphenate-limit-chars:
        6 3 2;

    hanging-punctuation:
        first;

    orphans:
        3;

    widows:
        3;
}

.article-content p {
    margin:
        0 0
        1.25em;

    color:
        #212E28;
}

.article-content section:first-of-type
p:first-of-type::first-letter {
    float:
        inline-start;

    margin:
        .08em .14em
        0 0;

    color:
        #0E1612;

    font-family:
        var(--article-display);

    font-size:
        3.4em;

    font-weight:
        800;

    line-height:
        .78;
}


/* ==================================================================
   STANDARD LISTS
   ================================================================== */

.article-content ul,
.article-content ol {
    margin:
        0 0
        1.7em;

    padding-inline-start:
        1.45em;
}

.article-content li {
    margin:
        .55em 0;

    padding-inline-start:
        .12em;

    color:
        #212E28;

    font-size:
        18.5px;
}

.article-content li::marker {
    color:
        var(--article-accent);

    font-family:
        var(--article-display);

    font-weight:
        700;
}


/* ==================================================================
   ENHANCED NUMBERED ROADMAP
   ================================================================== */

.article-content
.article-numbered-list {
    margin:
        26px 0
        34px;

    padding:
        10px 22px;

    list-style:
        none;

    counter-reset:
        article-step;

    border:
        1px solid
        rgba(30, 58, 95, .10);

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(243, 248, 255, .92),
            rgba(253, 252, 248, .88)
        );

    box-shadow:
        0 10px 35px
        rgba(30, 58, 95, .045);
}

.article-content
.article-numbered-list li {
    position:
        relative;

    counter-increment:
        article-step;

    margin:
        0;

    padding:
        16px 4px
        16px 48px;

    border-bottom:
        1px solid
        rgba(30, 58, 95, .09);
}

.article-content
.article-numbered-list li:last-child {
    border-bottom:
        0;
}

.article-content
.article-numbered-list li::before {
    content:
        counter(article-step);

    position:
        absolute;

    left:
        0;

    top:
        15px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        999px;

    background:
        var(--article-blue);

    color:
        #fff;

    font-family:
        var(--article-sans);

    font-size:
        12px;

    font-weight:
        700;
}

[dir="rtl"]
.article-content
.article-numbered-list li {
    padding:
        16px 48px
        16px 4px;
}

[dir="rtl"]
.article-content
.article-numbered-list li::before {
    left:
        auto;

    right:
        0;
}


/* ==================================================================
   FAQ
   ================================================================== */

.article-faq-wrap {
    max-width:
        760px;

    margin:
        80px auto
        0;

    padding-top:
        40px;

    border-top:
        2px solid
        #111814;
}

.article-faq-wrap > h2 {
    margin:
        0 0
        28px;

    color:
        var(--article-heading);

    font-family:
        var(--article-display);

    font-size:
        30px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        -.02em;

    text-align:
        start;
}

.article-faq {
    margin-bottom:
        18px;

    padding:
        22px 24px;

    border:
        1px solid
        #E6DFD3;

    border-radius:
        18px;

    background:
        #fff;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .04);
}

.article-faq h3 {
    margin:
        0 0
        8px;

    padding:
        0;

    border:
        0;

    color:
        #18221D;

    font-family:
        var(--article-display);

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.35;

    text-align:
        start;
}

.article-faq p {
    margin:
        0;

    color:
        #2B3832;

    font-size:
        17.5px;

    line-height:
        1.65;
}


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

.article-side {
    position:
        sticky;

    top:
        28px;

    align-self:
        start;
}


/* ==================================================================
   COURSE CARD
   ================================================================== */

.article-course-box {
    padding:
        26px 24px;

    border:
        1px solid
        rgba(30, 58, 95, .12);

    border-radius:
        22px;

    background:
        var(--article-blue-soft);

    box-shadow:
        0 0 0 1px
        rgba(96, 165, 250, .14),
        0 0 28px
        rgba(96, 165, 250, .18),
        0 12px 32px
        rgba(0, 0, 0, .055);
}

.article-course-box small {
    display:
        block;

    color:
        var(--article-blue);

    font-family:
        var(--article-sans);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.article-course-box h2 {
    margin:
        12px 0;

    padding:
        0;

    border:
        0;

    color:
        var(--article-blue);

    font-family:
        var(--article-display);

    font-size:
        24px;

    font-weight:
        700;

    line-height:
        1.15;

    text-align:
        start;
}

.article-course-box p {
    margin:
        0 0
        16px;

    color:
        #2E3A55;

    font-size:
        16.5px;

    line-height:
        1.6;
}

.article-course-box a {
    display:
        inline-flex;

    padding:
        11px 16px;

    border-radius:
        999px;

    background:
        var(--article-blue);

    color:
        #fff;

    font-family:
        var(--article-sans);

    font-size:
        14.5px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.article-course-box a:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(30, 58, 95, .19);
}


/* ==================================================================
   TABLE OF CONTENTS
   ================================================================== */

.article-toc {
    margin-top:
        22px;

    padding:
        20px 20px
        18px;

    border:
        1px solid
        #E8E2D9;

    border-radius:
        18px;

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

.article-toc-title {
    margin:
        0 0
        12px;

    color:
        #5D6762;

    font-family:
        var(--article-sans);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.article-toc ol {
    max-height:
        min(44vh, 430px);

    margin:
        0;

    padding:
        0 4px 0
        20px;

    overflow-y:
        auto;

    scrollbar-width:
        thin;

    scrollbar-color:
        #D5DCD8
        transparent;
}

.article-toc li {
    margin:
        0;

    padding:
        4px 0;

    color:
        #88918D;

    font-family:
        var(--article-sans);

    font-size:
        12.5px;

    line-height:
        1.35;
}

.article-toc a {
    color:
        #53605A;

    text-decoration:
        none;

    transition:
        color .16s ease;
}

.article-toc a:hover {
    color:
        var(--article-blue);
}


/* ==================================================================
   BACK TO LIBRARY
   ================================================================== */

.article-back {
    display:
        inline-flex;

    margin:
        56px 0
        0;

    padding:
        12px 18px;

    border:
        1px solid
        #E0D9CE;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #35413B;

    font-family:
        var(--article-sans);

    font-size:
        14.5px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        border-color .18s ease,
        transform .18s ease;
}

.article-back:hover {
    border-color:
        #AEB9B3;

    transform:
        translateY(-1px);
}


/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 1100px) {

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

        gap:
            40px;
    }

    .article-side {
        position:
            static;

        display:
            grid;

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

        gap:
            20px;
    }

    .article-toc {
        margin-top:
            0;
    }

    .article-toc ol {
        max-height:
            340px;
    }
}


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

@media (max-width: 640px) {

    .article-shell {
        font-size:
            18px;

        line-height:
            1.72;
    }

    .article-layout {
        padding:
            0 18px
            72px;

        gap:
            32px;
    }

    .article-main-header {
        margin:
            0 -18px
            38px;

        padding:
            44px 18px
            38px;
    }

    .article-breadcrumbs {
        justify-content:
            flex-start;

        margin-bottom:
            24px;

        font-size:
            11.5px;

        text-align:
            start;
    }

    .article-main-header h1 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );
    }

    .article-dek {
        font-size:
            19px;
    }

    .article-meta {
        justify-content:
            flex-start;

        text-align:
            start;
    }

    .article-content section {
        margin-top:
            44px;
    }

    .article-content h2 {
        font-size:
            27px;
    }

    .article-content h3 {
        font-size:
            21px;
    }

    .article-content p,
    .article-content li,
    .article-faq p {
        text-align:
            start;

        hyphens:
            auto;
    }

    .article-content li {
        font-size:
            18px;
    }

    .article-content
    .article-numbered-list {
        padding:
            8px 16px;
    }

    .article-content
    .article-numbered-list li {
        padding-inline-start:
            44px;
    }

    .article-side {
        display:
            block;
    }

    .article-toc {
        margin-top:
            20px;
    }

    .article-toc ol {
        max-height:
            none;

        overflow:
            visible;
    }
}


/* ==================================================================
   RTL
   ================================================================== */

[dir="rtl"]
.article-breadcrumbs,
[dir="rtl"]
.article-content h2,
[dir="rtl"]
.article-content h3,
[dir="rtl"]
.article-faq-wrap > h2,
[dir="rtl"]
.article-faq h3,
[dir="rtl"]
.article-course-box h2 {
    text-align:
        start;
}

[dir="rtl"]
.article-toc ol {
    padding:
        0 20px
        0 4px;
}


/* ==================================================================
   REDUCED MOTION
   ================================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    html {
        scroll-behavior:
            auto;
    }

    .article-course-box a,
    .article-back {
        transition:
            none;
    }
}