/* ==========================================================
   MUFLIKHUN.ID
   MOMENTUM UNIVERSE — PUBLIC THINKING V1
   Abstract constellation, not literal solar system.
   ========================================================== */

.thinking-page,
.thinking-detail {
    --thinking-bg: #020b13;
    --thinking-bg-soft: #061725;
    --thinking-panel: rgba(6, 27, 41, .74);
    --thinking-line: rgba(116, 181, 214, .18);
    --thinking-line-bright: rgba(205, 174, 107, .36);
    --thinking-gold: #d0ad64;
    --thinking-gold-soft: #efd28d;
    --thinking-text: #f2eee5;
    --thinking-muted: #91a7b5;

    min-height: 100vh;

    color:
        var(--thinking-text);

    background:
        radial-gradient(
            ellipse at 50% 8%,
            rgba(17, 80, 116, .22),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 90% 52%,
            rgba(20, 63, 94, .13),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #03111c 0%,
            #020a12 58%,
            #02070d 100%
        );
}


/* ==========================================================
   PAGE HERO
   ========================================================== */

.thinking-hero {
    width:
        min(
            1240px,
            calc(100% - 64px)
        );

    min-height: 520px;

    margin:
        0 auto;

    padding:
        120px 0 78px;

    display: grid;

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

    gap: 70px;

    align-items: end;

    border-bottom:
        1px solid
        rgba(125, 168, 192, .12);
}

.thinking-hero-copy {
    max-width: 850px;
}

.thinking-kicker,
.thinking-section-head > div > span,
.thinking-ending > span,
.thinking-detail-meta > span,
.thinking-block-label,
.thinking-detail-related > header > span,
.thinking-aside-note > span {
    display: block;

    color:
        var(--thinking-gold);

    font-size: 9px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.thinking-hero h1,
.thinking-section-head h2,
.thinking-ending h2,
.thinking-detail-hero h1,
.thinking-detail-related h2 {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-weight: 500;

    letter-spacing: -.038em;
}

.thinking-hero h1 {
    max-width: 840px;

    margin:
        16px 0 24px;

    font-size:
        clamp(62px, 7.4vw, 112px);

    line-height: .84;
}

.thinking-hero h1 em,
.thinking-section-head h2 em,
.thinking-ending h2 em,
.thinking-detail-related h2 em {
    display: block;

    color:
        var(--thinking-gold);

    font-style: italic;

    font-weight: 400;
}

.thinking-hero-copy > p {
    max-width: 680px;

    margin: 0;

    color:
        var(--thinking-muted);

    font-size: 13px;

    line-height: 1.75;
}

.thinking-text-link {
    margin-top: 24px;

    display: inline-flex;

    color:
        #e7ded0;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;
}

.thinking-hero-index {
    padding-bottom: 6px;

    display: grid;

    gap: 8px;

    justify-items: end;

    text-align: right;
}

.thinking-hero-index > span {
    color:
        rgba(210, 177, 105, .72);

    font-family:
        Georgia,
        serif;

    font-size: 64px;

    line-height: .8;
}

.thinking-hero-index > small {
    max-width: 180px;

    color:
        #7792a2;

    font-size: 9px;

    line-height: 1.45;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   SECTION HEAD
   ========================================================== */

.thinking-constellation-section,
.thinking-directory,
.thinking-detail-related {
    width:
        min(
            1240px,
            calc(100% - 64px)
        );

    margin:
        0 auto;

    padding:
        90px 0;
}

.thinking-section-head {
    margin-bottom: 52px;

    display: grid;

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

    gap: 50px;

    align-items: end;
}

.thinking-section-head.compact {
    grid-template-columns:
        1fr;
}

.thinking-section-head h2,
.thinking-detail-related h2 {
    margin:
        11px 0 0;

    font-size:
        clamp(44px, 5.2vw, 72px);

    line-height: .92;
}

.thinking-section-head > p {
    margin: 0;

    color:
        var(--thinking-muted);

    font-size: 11px;

    line-height: 1.7;
}


/* ==========================================================
   CONSTELLATION
   ========================================================== */

.thinking-constellation {
    position: relative;

    width: 100%;

    height:
        min(
            72vw,
            760px
        );

    min-height: 650px;

    overflow: hidden;

    border:
        1px solid
        rgba(122, 171, 199, .13);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(27, 99, 135, .14),
            transparent 26%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(217, 181, 103, .06),
            transparent 47%
        ),
        rgba(2, 13, 22, .64);

    box-shadow:
        inset 0 0 80px
        rgba(0, 0, 0, .34);
}

.thinking-constellation::before,
.thinking-constellation::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;
}

.thinking-constellation::before {
    opacity: .62;

    background-image:
        radial-gradient(
            circle at 7% 16%,
            rgba(255,255,255,.84) 0 1px,
            transparent 1.4px
        ),
        radial-gradient(
            circle at 18% 72%,
            rgba(178,222,247,.68) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 31% 28%,
            rgba(238,204,132,.66) 0 1px,
            transparent 1.4px
        ),
        radial-gradient(
            circle at 46% 9%,
            rgba(255,255,255,.72) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 57% 81%,
            rgba(185,225,246,.62) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 73% 19%,
            rgba(238,204,132,.58) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 88% 66%,
            rgba(255,255,255,.76) 0 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle at 94% 12%,
            rgba(186,227,248,.60) 0 1px,
            transparent 1.5px
        );
}

.thinking-constellation::after {
    background:
        linear-gradient(
            90deg,
            transparent 49.92%,
            rgba(127,178,207,.045) 50%,
            transparent 50.08%
        ),
        linear-gradient(
            transparent 49.92%,
            rgba(127,178,207,.045) 50%,
            transparent 50.08%
        );
}

.thinking-lines {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;

    height: 100%;

    overflow: visible;
}

.thinking-lines line {
    vector-effect:
        non-scaling-stroke;

    stroke:
        rgba(109, 173, 207, .24);

    stroke-width: .24;

    stroke-dasharray:
        .8 1.15;
}

.thinking-root-node,
.thinking-node {
    position: absolute;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-decoration: none;

    transition:
        border-color .22s ease,
        background .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.thinking-root-node {
    left: 50%;
    top: 50%;

    width: 214px;
    height: 214px;

    padding: 30px;

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

    align-items: center;

    border:
        1px solid
        rgba(221, 184, 101, .54);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 42% 35%,
            rgba(232, 193, 108, .19),
            rgba(6, 28, 42, .87) 59%,
            rgba(2, 13, 21, .94)
        );

    box-shadow:
        0 0 70px
        rgba(36, 124, 167, .16),
        0 0 42px
        rgba(218, 181, 101, .09);

    text-align: center;
}

.thinking-root-node::before,
.thinking-root-node::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(105, 176, 212, .13);

    border-radius: 50%;
}

.thinking-root-node::before {
    inset: -34px;
}

.thinking-root-node::after {
    inset: -66px;

    border-style: dashed;
}

.thinking-root-node > span {
    color:
        var(--thinking-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.thinking-root-node > strong {
    margin-top: 10px;

    color:
        #f5efe4;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.05;
}

.thinking-root-node > small {
    max-width: 125px;

    margin-top: 9px;

    color:
        #87a0ae;

    font-size: 8px;

    line-height: 1.45;
}

.thinking-node {
    left:
        var(--node-x);

    top:
        var(--node-y);

    width: 185px;

    min-height: 126px;

    padding:
        18px 19px;

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

    border:
        1px solid
        rgba(108, 171, 205, .17);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 34, 50, .88),
            rgba(3, 18, 29, .84)
        );

    backdrop-filter:
        blur(8px);
}

.thinking-node.framework {
    border-color:
        rgba(210, 174, 97, .28);
}

.thinking-node:hover,
.thinking-node:focus-visible {
    transform:
        translate(-50%, -50%)
        translateY(-4px);

    border-color:
        rgba(220, 184, 103, .62);

    background:
        linear-gradient(
            145deg,
            rgba(12, 47, 66, .94),
            rgba(4, 24, 36, .92)
        );

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.30);
}

.thinking-node-code {
    color:
        var(--thinking-gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.thinking-node > strong {
    margin-top: 6px;

    color:
        #ece8e0;

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.08;
}

.thinking-node-summary {
    margin-top: 8px;

    display: -webkit-box;

    overflow: hidden;

    color:
        #819ba9;

    font-size: 8px;

    line-height: 1.45;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.thinking-node-book {
    margin-top: 8px;

    overflow: hidden;

    color:
        rgba(214, 181, 111, .77);

    font-size: 7px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ==========================================================
   DIRECTORY
   ========================================================== */

.thinking-directory {
    padding-top: 48px;
}

.thinking-list-grid {
    display: grid;

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

    border-top:
        1px solid
        rgba(124, 169, 195, .14);
}

.thinking-list-card {
    min-height: 250px;

    padding:
        32px 32px 28px;

    border-right:
        1px solid
        rgba(124, 169, 195, .11);

    border-bottom:
        1px solid
        rgba(124, 169, 195, .11);
}

.thinking-list-card:nth-child(even) {
    border-right: 0;
}

.thinking-list-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.thinking-list-meta span {
    color:
        #718d9d;

    font-size: 8px;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.thinking-list-meta b {
    color:
        var(--thinking-gold);

    font-size: 10px;
}

.thinking-list-card h2 {
    margin:
        20px 0 12px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(26px, 3vw, 38px);

    font-weight: 400;

    line-height: 1;
}

.thinking-list-card h2 a {
    color:
        #f0ece4;

    text-decoration: none;
}

.thinking-list-card > p {
    max-width: 520px;

    margin: 0;

    color:
        var(--thinking-muted);

    font-size: 10px;

    line-height: 1.65;
}

.thinking-list-actions {
    margin-top: 24px;

    display: flex;

    flex-wrap: wrap;

    gap:
        10px 20px;
}

.thinking-list-actions > a {
    color:
        #d9c394;

    font-size: 9px;

    font-weight: 600;

    text-decoration: none;
}

.thinking-list-book {
    color:
        #7f9baa !important;
}


/* ==========================================================
   ENDING
   ========================================================== */

.thinking-ending {
    min-height: 440px;

    padding:
        85px 32px;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    border-top:
        1px solid
        rgba(124,169,195,.11);

    background:
        radial-gradient(
            ellipse at 50% 55%,
            rgba(21,82,115,.18),
            transparent 37%
        );
}

.thinking-ending h2 {
    max-width: 870px;

    margin:
        16px auto 24px;

    font-size:
        clamp(48px, 6.3vw, 84px);

    line-height: .88;
}

.thinking-ending > a {
    color:
        #d8c08f;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;
}


/* ==========================================================
   DETAIL HERO
   ========================================================== */

.thinking-detail {
    --thinking-accent: #d0ad64;
}

.thinking-detail-hero {
    position: relative;

    width:
        min(
            1240px,
            calc(100% - 64px)
        );

    min-height: 610px;

    margin:
        0 auto;

    padding:
        125px 0 82px;

    display: grid;

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

    gap: 70px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(121,169,194,.12);
}

.thinking-detail-intro {
    max-width: 790px;
}

.thinking-detail-meta {
    display: flex;

    gap: 14px;

    align-items: center;
}

.thinking-detail-meta > small {
    color:
        #748f9f;

    font-size: 8px;

    letter-spacing: .11em;

    text-transform: uppercase;
}

.thinking-detail-code {
    margin-top: 27px;

    display: inline-flex;

    color:
        var(--thinking-accent);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(70px, 8.6vw, 128px);

    line-height: .72;

    opacity: .85;
}

.thinking-detail-hero h1 {
    max-width: 860px;

    margin:
        18px 0 22px;

    font-size:
        clamp(58px, 7vw, 102px);

    line-height: .86;
}

.thinking-detail-intro > p {
    max-width: 700px;

    margin: 0;

    color:
        var(--thinking-muted);

    font-size: 13px;

    line-height: 1.75;
}

.thinking-detail-actions {
    margin-top: 27px;
}

.thinking-primary-link {
    min-height: 40px;

    padding:
        0 16px;

    display: inline-flex;

    align-items: center;

    border:
        1px solid
        rgba(213, 179, 105, .34);

    border-radius: 999px;

    color:
        #e4d6b6;

    font-size: 9px;

    text-decoration: none;
}

.thinking-detail-orbit {
    position: relative;

    width: 340px;
    height: 340px;

    margin-left: auto;

    display: grid;

    place-items: center;
}

.thinking-detail-orbit i {
    position: absolute;

    border:
        1px solid
        rgba(110,174,207,.13);

    border-radius: 50%;
}

.thinking-detail-orbit i:nth-child(1) {
    inset: 0;
}

.thinking-detail-orbit i:nth-child(2) {
    inset: 42px;

    border-style: dashed;
}

.thinking-detail-orbit i:nth-child(3) {
    inset: 89px;

    border-color:
        rgba(216,180,101,.25);
}

.thinking-detail-orbit span {
    position: relative;

    z-index: 2;

    max-width: 190px;

    color:
        var(--thinking-accent);

    font-family:
        Georgia,
        serif;

    font-size: 54px;

    line-height: .95;

    text-align: center;
}


/* ==========================================================
   DETAIL CONTENT
   ========================================================== */

.thinking-detail-content {
    width:
        min(
            1120px,
            calc(100% - 64px)
        );

    margin:
        0 auto;

    padding:
        90px 0;

    display: grid;

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

    gap: 90px;
}

.thinking-detail-main {
    min-width: 0;
}

.thinking-detail-block {
    padding:
        0 0 50px;

    margin-bottom: 50px;

    border-bottom:
        1px solid
        rgba(122,169,195,.12);
}

.thinking-detail-block:last-child {
    margin-bottom: 0;
}

.thinking-prose,
.thinking-question {
    margin-top: 18px;
}

.thinking-prose p,
.thinking-question p {
    margin:
        0 0 18px;

    color:
        #b1c0c9;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(19px, 2.2vw, 25px);

    line-height: 1.65;
}

.thinking-question p {
    color:
        #eee6d8;

    font-size:
        clamp(28px, 3.7vw, 45px);

    line-height: 1.24;
}

.thinking-detail-aside {
    display: grid;

    align-content: start;

    gap: 16px;
}

.thinking-parent-link,
.thinking-aside-note {
    padding: 22px;

    border:
        1px solid
        rgba(121,169,195,.13);

    border-radius: 12px;

    background:
        rgba(6,26,40,.47);
}

.thinking-parent-link {
    display: grid;

    gap: 8px;

    text-decoration: none;
}

.thinking-parent-link span,
.thinking-aside-note span {
    color:
        #7691a0;

    font-size: 8px;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.thinking-parent-link strong {
    color:
        #e9ddc3;

    font-family:
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 400;
}

.thinking-aside-note p {
    margin:
        10px 0 0;

    color:
        var(--thinking-muted);

    font-size: 9px;

    line-height: 1.6;
}


/* ==========================================================
   RELATED NODES + BOOKS
   ========================================================== */

.thinking-detail-related {
    padding-top: 70px;

    border-top:
        1px solid
        rgba(121,169,194,.11);
}

.thinking-detail-related > header {
    margin-bottom: 36px;
}

.thinking-related-grid {
    display: grid;

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

    gap: 12px;
}

.thinking-related-node {
    min-height: 205px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    border:
        1px solid
        rgba(119,169,196,.13);

    border-radius: 13px;

    background:
        rgba(5,24,37,.47);

    text-decoration: none;
}

.thinking-related-node > span {
    color:
        var(--thinking-gold);

    font-size: 9px;

    font-weight: 700;
}

.thinking-related-node > strong {
    margin-top: 12px;

    color:
        #eee9df;

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 400;

    line-height: 1.05;
}

.thinking-related-node > p {
    margin:
        auto 0 0;

    padding-top: 18px;

    color:
        var(--thinking-muted);

    font-size: 9px;

    line-height: 1.55;
}

.thinking-book-grid {
    display: grid;

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

    gap: 16px;
}

.thinking-book-card {
    min-height: 315px;

    padding: 20px;

    display: grid;

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

    gap: 25px;

    align-items: center;

    border:
        1px solid
        rgba(124,169,195,.13);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(7,30,44,.74),
            rgba(3,17,27,.70)
        );

    text-decoration: none;
}

.thinking-book-cover {
    min-height: 240px;

    display: grid;

    place-items: center;
}

.thinking-book-cover img {
    display: block;

    max-width: 100%;
    max-height: 245px;

    object-fit: contain;

    box-shadow:
        0 18px 38px
        rgba(0,0,0,.35);
}

.thinking-book-card > div:last-child > span {
    color:
        var(--thinking-gold);

    font-size: 8px;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.thinking-book-card > div:last-child > strong {
    margin-top: 12px;

    display: block;

    color:
        #f1ece4;

    font-family:
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1;
}

.thinking-book-card > div:last-child > p {
    margin:
        12px 0 0;

    color:
        var(--thinking-muted);

    font-size: 9px;

    line-height: 1.55;
}

.thinking-book-card > div:last-child > small {
    margin-top: 20px;

    display: block;

    color:
        #dbc389;

    font-size: 9px;
}


/* ==========================================================
   404
   ========================================================== */

.thinking-not-found {
    min-height:
        calc(100vh - 80px);

    display: flex;

    flex-direction: column;

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

    background:
        #020b13;

    color:
        #eee8df;

    text-align: center;
}

.thinking-not-found > span {
    color:
        #d0ad64;

    font-family:
        Georgia,
        serif;

    font-size: 72px;
}

.thinking-not-found h1 {
    font-family:
        Georgia,
        serif;

    font-weight: 400;
}

.thinking-not-found a {
    color:
        #d0ad64;

    font-size: 10px;
}


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

@media (max-width: 820px) {

    .thinking-hero {
        width:
            calc(100% - 32px);

        min-height: auto;

        padding:
            92px 0 50px;

        grid-template-columns:
            1fr;

        gap: 28px;
    }

    .thinking-hero h1 {
        font-size:
            clamp(49px, 15vw, 74px);
    }

    .thinking-hero-index {
        justify-items: start;

        text-align: left;
    }

    .thinking-hero-index > span {
        font-size: 42px;
    }

    .thinking-constellation-section,
    .thinking-directory,
    .thinking-detail-related {
        width:
            calc(100% - 32px);

        padding:
            58px 0;
    }

    .thinking-section-head {
        margin-bottom: 30px;

        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .thinking-section-head h2,
    .thinking-detail-related h2 {
        font-size:
            clamp(39px, 12vw, 58px);
    }


    /*
     * Mobile constellation becomes a guided map.
     * No desktop orbital shrinking.
     */

    .thinking-constellation {
        height: auto;

        min-height: 0;

        padding: 18px;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;

        border-radius: 18px;
    }

    .thinking-lines {
        display: none;
    }

    .thinking-root-node,
    .thinking-node {
        position: relative;

        left: auto;
        top: auto;

        width: auto;
        height: auto;

        min-height: 142px;

        transform: none;

        border-radius: 12px;
    }

    .thinking-root-node {
        grid-column:
            1 / -1;

        min-height: 176px;

        padding: 26px 20px;

        border-radius: 16px;
    }

    .thinking-root-node::before,
    .thinking-root-node::after {
        display: none;
    }

    .thinking-node:hover,
    .thinking-node:focus-visible {
        transform:
            translateY(-2px);
    }

    .thinking-node {
        padding: 16px;
    }

    .thinking-node > strong {
        font-size: 15px;
    }

    .thinking-node-summary {
        font-size: 8px;

        -webkit-line-clamp: 3;
    }


    .thinking-list-grid {
        grid-template-columns:
            1fr;
    }

    .thinking-list-card,
    .thinking-list-card:nth-child(even) {
        min-height: 220px;

        padding:
            25px 5px;

        border-right: 0;
    }

    .thinking-list-card h2 {
        font-size: 30px;
    }


    .thinking-ending {
        min-height: 360px;

        padding:
            60px 20px;
    }

    .thinking-ending h2 {
        font-size:
            clamp(42px, 13vw, 65px);
    }


    .thinking-detail-hero {
        width:
            calc(100% - 32px);

        min-height: auto;

        padding:
            96px 0 54px;

        grid-template-columns:
            1fr;

        gap: 44px;
    }

    .thinking-detail-code {
        font-size:
            clamp(62px, 23vw, 96px);
    }

    .thinking-detail-hero h1 {
        font-size:
            clamp(49px, 14vw, 72px);
    }

    .thinking-detail-orbit {
        width: 250px;
        height: 250px;

        margin:
            0 auto;
    }

    .thinking-detail-orbit span {
        font-size: 42px;
    }


    .thinking-detail-content {
        width:
            calc(100% - 32px);

        padding:
            58px 0;

        grid-template-columns:
            1fr;

        gap: 38px;
    }

    .thinking-detail-block {
        padding-bottom: 36px;

        margin-bottom: 36px;
    }

    .thinking-prose p {
        font-size: 19px;
    }

    .thinking-question p {
        font-size: 30px;
    }


    .thinking-related-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 9px;
    }

    .thinking-related-node {
        min-height: 175px;

        padding: 17px;
    }

    .thinking-related-node > strong {
        font-size: 19px;
    }


    .thinking-book-grid {
        grid-template-columns:
            1fr;
    }

    .thinking-book-card {
        min-height: 250px;

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

        gap: 18px;

        padding: 16px;
    }

    .thinking-book-cover {
        min-height: 190px;
    }

    .thinking-book-cover img {
        max-height: 190px;
    }

    .thinking-book-card
    > div:last-child
    > strong {
        font-size: 24px;
    }

}


@media (max-width: 480px) {

    .thinking-constellation {
        grid-template-columns:
            1fr;
    }

    .thinking-root-node {
        grid-column: auto;
    }

    .thinking-related-grid {
        grid-template-columns:
            1fr;
    }

}


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

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

    .thinking-root-node,
    .thinking-node {
        transition: none !important;
    }

}


/* ==========================================================
   MOMENTUM UNIVERSE
   CONSTELLATION INTERACTION V1
   ========================================================== */

.thinking-constellation {
    --thinking-pointer-x: 50%;
    --thinking-pointer-y: 50%;
}


/*
 * Pointer atmosphere. This sits below the nodes and never
 * represents a conceptual relation.
 */
.thinking-constellation.js-thinking-ready {
    background:
        radial-gradient(
            circle at
            var(--thinking-pointer-x)
            var(--thinking-pointer-y),
            rgba(89, 173, 214, .095),
            transparent 20%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(27, 99, 135, .14),
            transparent 26%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(217, 181, 103, .06),
            transparent 47%
        ),
        rgba(2, 13, 22, .64);
}


/* Entrance */

.thinking-constellation.js-thinking-ready
.thinking-root-node,
.thinking-constellation.js-thinking-ready
.thinking-node {
    opacity: 0;
}

.thinking-constellation.js-thinking-ready
.thinking-root-node {
    transform:
        translate(-50%, -50%)
        scale(.92);
}

.thinking-constellation.js-thinking-ready
.thinking-node {
    transform:
        translate(-50%, -50%)
        scale(.94);
}

.thinking-constellation.js-thinking-ready
.thinking-lines line {
    opacity: 0;

    stroke-dasharray:
        1.1 1.7;

    stroke-dashoffset: 7;
}


/*
 * Enter after JS is ready.
 */

.thinking-constellation.js-thinking-ready.is-entered
.thinking-root-node {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        opacity .72s ease,
        transform .82s
        cubic-bezier(.16,.8,.24,1),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        opacity .58s ease,
        transform .68s
        cubic-bezier(.16,.8,.24,1),
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node:nth-of-type(2) {
    transition-delay: .04s;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node:nth-of-type(3) {
    transition-delay: .08s;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node:nth-of-type(4) {
    transition-delay: .12s;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node:nth-of-type(5) {
    transition-delay: .16s;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node:nth-of-type(6) {
    transition-delay: .20s;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-node:nth-of-type(7) {
    transition-delay: .24s;
}

.thinking-constellation.js-thinking-ready.is-entered
.thinking-lines line {
    opacity: 1;

    stroke-dashoffset: 0;

    transition:
        opacity .55s ease .16s,
        stroke-dashoffset 1.05s ease .12s,
        stroke .22s ease,
        stroke-width .22s ease;
}


/* ==========================================================
   RELATION FOCUS
   ========================================================== */

.thinking-constellation.is-node-focus
.thinking-node:not(.is-relation-active) {
    opacity: .33;
}

.thinking-constellation.is-node-focus
.thinking-lines line:not(.is-relation-active) {
    opacity: .12;
}

.thinking-constellation.is-node-focus
.thinking-root-node {
    border-color:
        rgba(221, 184, 101, .72);

    box-shadow:
        0 0 82px
        rgba(36, 124, 167, .19),
        0 0 52px
        rgba(218, 181, 101, .13);
}

.thinking-constellation
.thinking-node.is-relation-active {
    z-index: 6;

    border-color:
        rgba(231, 194, 111, .76);

    background:
        linear-gradient(
            145deg,
            rgba(17, 54, 72, .97),
            rgba(5, 28, 41, .96)
        );

    box-shadow:
        0 20px 52px
        rgba(0, 0, 0, .36),
        0 0 30px
        rgba(197, 164, 90, .10);
}

.thinking-constellation
.thinking-lines
line.is-relation-active {
    opacity: 1;

    stroke:
        rgba(224, 188, 106, .86);

    stroke-width: .42;
}


/*
 * Root focus means:
 * show every relation that directly originates from the root.
 */

.thinking-constellation.is-root-focus
.thinking-lines line {
    opacity: 1;

    stroke:
        rgba(218, 183, 104, .60);

    stroke-width: .33;
}

.thinking-constellation.is-root-focus
.thinking-root-node {
    border-color:
        rgba(234, 197, 112, .88);

    background:
        radial-gradient(
            circle at 42% 35%,
            rgba(237, 199, 113, .25),
            rgba(7, 34, 49, .92) 59%,
            rgba(2, 13, 21, .97)
        );

    box-shadow:
        0 0 88px
        rgba(42, 139, 182, .22),
        0 0 62px
        rgba(221, 183, 98, .16);
}


/* Keyboard focus */

.thinking-root-node:focus-visible,
.thinking-node:focus-visible {
    outline:
        1px solid
        rgba(239, 205, 133, .95);

    outline-offset: 5px;
}


/* ==========================================================
   MOBILE
   Entrance follows guided layout, not desktop coordinates.
   ========================================================== */

@media (max-width: 820px) {

    .thinking-constellation.js-thinking-ready
    .thinking-root-node,
    .thinking-constellation.js-thinking-ready
    .thinking-node {
        transform:
            translateY(10px)
            scale(.98);
    }

    .thinking-constellation.js-thinking-ready.is-entered
    .thinking-root-node,
    .thinking-constellation.js-thinking-ready.is-entered
    .thinking-node {
        transform: none;
    }

    .thinking-constellation.is-node-focus
    .thinking-node:not(.is-relation-active) {
        opacity: .58;
    }

}


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

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

    .thinking-constellation.js-thinking-ready
    .thinking-root-node,
    .thinking-constellation.js-thinking-ready
    .thinking-node,
    .thinking-constellation.js-thinking-ready
    .thinking-lines line {
        opacity: 1 !important;

        transition: none !important;
    }

    .thinking-constellation.js-thinking-ready
    .thinking-root-node {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    .thinking-constellation.js-thinking-ready
    .thinking-node {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


@media
(
    prefers-reduced-motion:
    reduce
)
and
(
    max-width: 820px
) {

    .thinking-constellation.js-thinking-ready
    .thinking-root-node,
    .thinking-constellation.js-thinking-ready
    .thinking-node {
        transform: none;
    }

}


/* ==========================================================
   THINKING MOBILE COMPOSITION V1

   Mobile is recomposed, not desktop shrunk:
   Root
   -> 5P + 5K
   -> methods
   -> compact directory
   ========================================================== */

@media (max-width: 820px) {

    /* ------------------------------------------------------
       HERO
       ------------------------------------------------------ */

    .thinking-page {
        overflow-x: hidden;
    }

    .thinking-hero {
        padding-top: 92px;
        padding-bottom: 42px;

        gap: 22px;
    }

    .thinking-hero h1 {
        margin-top: 14px;
        margin-bottom: 20px;

        line-height: .88;
    }

    .thinking-hero-copy > p {
        max-width: 100%;

        font-size: 12px;
        line-height: 1.72;
    }

    .thinking-text-link {
        margin-top: 18px;

        font-size: 9px;
    }


    /*
     * The 01 indicator becomes part of the hero rhythm,
     * rather than creating a tall empty block.
     */
    .thinking-hero-index {
        padding-top: 15px;
        padding-bottom: 0;

        display: flex;

        align-items: center;

        gap: 13px;

        border-top:
            1px solid
            rgba(123, 169, 195, .12);

        text-align: left;
    }

    .thinking-hero-index > span {
        flex: 0 0 auto;

        font-size: 35px;
    }

    .thinking-hero-index > small {
        max-width: none;

        font-size: 8px;
        line-height: 1.45;
    }


    /* ------------------------------------------------------
       SECTION HEAD
       ------------------------------------------------------ */

    .thinking-constellation-section {
        padding-top: 49px;
        padding-bottom: 42px;
    }

    .thinking-section-head {
        margin-bottom: 25px;
    }

    .thinking-section-head h2 {
        margin-top: 9px;

        line-height: .94;
    }

    .thinking-section-head > p {
        font-size: 10px;
        line-height: 1.62;
    }


    /* ------------------------------------------------------
       CONSTELLATION
       ------------------------------------------------------ */

    .thinking-constellation {
        padding: 11px;

        gap: 8px;

        border-radius: 16px;
    }

    .thinking-root-node {
        min-height: 154px;

        padding:
            23px 18px;
    }

    .thinking-root-node > strong {
        margin-top: 8px;

        font-size: 22px;
    }

    .thinking-root-node > small {
        max-width: 150px;

        margin-top: 7px;

        font-size: 8px;
        line-height: 1.5;
    }


    .thinking-node {
        min-height: 128px;

        padding:
            15px 14px;
    }

    .thinking-node-code {
        font-size: 9px;
    }

    .thinking-node > strong {
        margin-top: 5px;

        font-size: 16px;
        line-height: 1.08;
    }

    .thinking-node-summary {
        margin-top: 7px;

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

        -webkit-line-clamp: 3;
    }

    .thinking-node-book {
        margin-top: 7px;

        font-size: 8px;
    }


    /* ------------------------------------------------------
       DIRECTORY

       Constellation already introduces every concept.
       Directory now works as navigation, not duplicate essay.
       ------------------------------------------------------ */

    .thinking-directory {
        padding-top: 43px;
        padding-bottom: 53px;
    }

    .thinking-directory
    .thinking-section-head {
        margin-bottom: 19px;
    }

    .thinking-list-grid {
        display: block;
    }

    .thinking-list-card,
    .thinking-list-card:nth-child(even) {
        min-height: 0;

        padding:
            18px 2px 17px;

        border-right: 0;
    }

    .thinking-list-meta span {
        font-size: 7px;
    }

    .thinking-list-meta b {
        font-size: 9px;
    }

    .thinking-list-card h2 {
        margin:
            9px 0 0;

        font-size: 25px;
        line-height: 1.04;
    }


    /*
     * Summary is already visible in the constellation above.
     * Hiding it here removes duplicate reading on mobile.
     */
    .thinking-list-card > p {
        display: none;
    }

    .thinking-list-actions {
        margin-top: 9px;

        gap:
            7px 14px;
    }

    .thinking-list-actions > a {
        font-size: 8px;
    }


    /* ------------------------------------------------------
       ENDING
       ------------------------------------------------------ */

    .thinking-ending {
        min-height: 345px;

        padding:
            57px 21px;
    }

    .thinking-ending h2 {
        margin-top: 13px;
        margin-bottom: 20px;

        font-size:
            clamp(
                40px,
                12vw,
                58px
            );

        line-height: .91;
    }

}


/* ==========================================================
   PHONE
   ========================================================== */

@media (max-width: 480px) {

    /*
     * Hybrid guided constellation:
     *
     * Root = full width.
     * Frameworks = paired.
     * Methods = full width for readable names and summaries.
     */

    .thinking-constellation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .thinking-root-node {
        grid-column:
            1 / -1;
    }

    .thinking-node.framework {
        grid-column: auto;

        min-height: 133px;

        padding:
            14px 12px;
    }

    .thinking-node.framework
    > strong {
        font-size: 15px;
    }

    .thinking-node.framework
    .thinking-node-summary {
        -webkit-line-clamp: 3;

        font-size: 8px;
    }

    .thinking-node.framework
    .thinking-node-book {
        display: none;
    }

    .thinking-node.method {
        grid-column:
            1 / -1;

        min-height: 112px;

        padding:
            15px 15px;
    }

    .thinking-node.method
    > strong {
        font-size: 17px;
    }

    .thinking-node.method
    .thinking-node-summary {
        max-width: 94%;

        -webkit-line-clamp: 2;

        font-size: 9px;
    }

}


/* ==========================================================
   VERY SMALL PHONE
   ========================================================== */

@media (max-width: 360px) {

    .thinking-node.framework {
        min-height: 126px;

        padding:
            13px 10px;
    }

    .thinking-node.framework
    > strong {
        font-size: 14px;
    }

    .thinking-node.framework
    .thinking-node-summary {
        font-size: 7.5px;
    }

}


/* ==========================================================
   THINKING DESKTOP VISUAL BALANCE V1

   Large-screen composition only.
   Mobile <= 820px remains owned by Mobile Composition V1.
   ========================================================== */

@media (min-width: 1100px) {

    /* ------------------------------------------------------
       HERO READABILITY
       ------------------------------------------------------ */

    .thinking-hero-copy > p {
        max-width: 720px;

        font-size: 14px;

        line-height: 1.72;
    }

    .thinking-text-link {
        margin-top: 25px;

        font-size: 10.5px;
    }

    .thinking-hero-index > small {
        max-width: 205px;

        font-size: 9.5px;

        line-height: 1.55;
    }


    /* ------------------------------------------------------
       SECTION INTRO
       ------------------------------------------------------ */

    .thinking-section-head > p {
        max-width: 420px;

        font-size: 12px;

        line-height: 1.7;
    }


    /* ------------------------------------------------------
       CONSTELLATION

       Existing canvas was visually too large compared with
       its nodes. Increase node hierarchy and slightly tighten
       the field without changing DB-driven positions/edges.
       ------------------------------------------------------ */

    .thinking-constellation {
        height:
            min(
                60vw,
                690px
            );

        min-height: 620px;

        border-radius: 25px;
    }

    .thinking-root-node {
        width: 244px;
        height: 244px;

        padding: 34px;
    }

    .thinking-root-node::before {
        inset: -38px;
    }

    .thinking-root-node::after {
        inset: -72px;
    }

    .thinking-root-node > span {
        font-size: 8.5px;
    }

    .thinking-root-node > strong {
        max-width: 170px;

        margin-top: 11px;

        font-size: 29px;

        line-height: 1.03;
    }

    .thinking-root-node > small {
        max-width: 150px;

        margin-top: 10px;

        font-size: 8.5px;

        line-height: 1.5;
    }


    .thinking-node {
        width: 218px;

        min-height: 142px;

        padding:
            20px 21px;
    }

    .thinking-node-code {
        font-size: 9.5px;
    }

    .thinking-node > strong {
        margin-top: 7px;

        font-size: 19px;

        line-height: 1.08;
    }

    .thinking-node-summary {
        margin-top: 9px;

        font-size: 9.2px;

        line-height: 1.5;

        -webkit-line-clamp: 3;
    }

    .thinking-node-book {
        margin-top: 9px;

        font-size: 8px;
    }


    /*
     * Strengthen actual relation lines enough to be visible
     * on a large desktop field without becoming diagram-heavy.
     */
    .thinking-lines line {
        stroke:
            rgba(115, 181, 215, .31);

        stroke-width: .27;
    }


    /* ------------------------------------------------------
       DIRECTORY
       ------------------------------------------------------ */

    .thinking-directory {
        padding-top: 55px;
        padding-bottom: 82px;
    }

    .thinking-list-card {
        min-height: 220px;

        padding:
            28px 28px 26px;
    }

    .thinking-list-meta span {
        font-size: 8.5px;
    }

    .thinking-list-meta b {
        font-size: 10.5px;
    }

    .thinking-list-card h2 {
        margin:
            17px 0 12px;

        font-size:
            clamp(
                30px,
                2.7vw,
                37px
            );

        line-height: 1.04;
    }

    .thinking-list-card > p {
        max-width: 540px;

        font-size: 11px;

        line-height: 1.66;
    }

    .thinking-list-actions {
        margin-top: 20px;
    }

    .thinking-list-actions > a {
        font-size: 9.5px;
    }

}


/* ==========================================================
   MEDIUM DESKTOP / TABLET LANDSCAPE

   Improve readability, but do not use the larger 1100px+
   constellation dimensions.
   ========================================================== */

@media
(
    min-width: 821px
)
and
(
    max-width: 1099px
) {

    .thinking-hero-copy > p {
        font-size: 13.5px;
    }

    .thinking-section-head > p {
        font-size: 11px;
    }

    .thinking-node {
        width: 194px;

        min-height: 132px;
    }

    .thinking-node > strong {
        font-size: 17.5px;
    }

    .thinking-node-summary {
        font-size: 8.5px;
    }

}


/* ==========================================================
   THINKING DETAIL REFINEMENT V1
   Desktop + mobile refinement for root/framework/method pages.
   ========================================================== */


/* ----------------------------------------------------------
   METHOD HERO

   Acronym remains the gold visual accent.
   Full method name becomes the semantic page title.
   ---------------------------------------------------------- */

.thinking-detail--method
.thinking-detail-hero h1 {
    max-width: 820px;

    font-size:
        clamp(
            54px,
            5.9vw,
            90px
        );

    line-height: .89;
}


/* ----------------------------------------------------------
   ROOT ORBIT

   Root concepts do not have an acronym. Give the visual
   centre a semantic type label instead of leaving it empty.
   ---------------------------------------------------------- */

.thinking-detail--root
.thinking-detail-orbit span {
    color:
        var(--thinking-accent);

    font-family:
        inherit;

    font-size: 17px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* ----------------------------------------------------------
   SINGLE RELATED BOOK

   One official related book should feel intentional,
   not like an empty half of a two-column grid.
   ---------------------------------------------------------- */

.thinking-book-grid
> .thinking-book-card:only-child {
    grid-column:
        1 / -1;

    width:
        min(
            760px,
            100%
        );
}


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1100px) {

    .thinking-detail--method
    .thinking-detail-code {
        font-size:
            clamp(
                82px,
                8vw,
                122px
            );
    }

    .thinking-detail--method
    .thinking-detail-hero h1 {
        margin-top: 22px;
    }

    .thinking-detail--root
    .thinking-detail-orbit span {
        font-size: 18px;
    }

    .thinking-book-grid
    > .thinking-book-card:only-child {
        min-height: 330px;

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

        gap: 30px;
    }

    .thinking-book-grid
    > .thinking-book-card:only-child
    .thinking-book-cover {
        min-height: 265px;
    }

    .thinking-book-grid
    > .thinking-book-card:only-child
    .thinking-book-cover img {
        max-height: 265px;
    }

}


/* ----------------------------------------------------------
   MOBILE

   Preserve the vertical editorial rhythm visible in the
   approved mobile screenshots.
   ---------------------------------------------------------- */

@media (max-width: 820px) {

    .thinking-detail--method
    .thinking-detail-hero {
        padding-bottom: 48px;
    }

    .thinking-detail--method
    .thinking-detail-code {
        margin-top: 22px;

        font-size:
            clamp(
                66px,
                23vw,
                92px
            );

        line-height: .76;
    }

    .thinking-detail--method
    .thinking-detail-hero h1 {
        margin-top: 15px;
        margin-bottom: 20px;

        font-size:
            clamp(
                39px,
                11.5vw,
                55px
            );

        line-height: .92;
    }

    .thinking-detail--method
    .thinking-detail-intro > p {
        font-size: 12px;

        line-height: 1.72;
    }

    .thinking-detail--method
    .thinking-detail-orbit {
        width: 225px;
        height: 225px;
    }

    .thinking-detail--method
    .thinking-detail-orbit span {
        font-size: 42px;
    }


    .thinking-detail--root
    .thinking-detail-orbit span {
        font-size: 15px;

        letter-spacing: .16em;
    }


    /*
     * Related book already works well on mobile.
     * Only ensure a single item uses the available width.
     */
    .thinking-book-grid
    > .thinking-book-card:only-child {
        width: 100%;

        grid-column: auto;
    }

}


/* ----------------------------------------------------------
   VERY SMALL PHONE
   ---------------------------------------------------------- */

@media (max-width: 360px) {

    .thinking-detail--method
    .thinking-detail-hero h1 {
        font-size:
            clamp(
                36px,
                11vw,
                49px
            );
    }

}