/* ==========================================================
   HORMUUD UNIVERSITY — READING ARTICLE
   Editorial, wide, calm, interactive
   ========================================================== */

.hu-reading {
    /* Hormuud University identity */
    --green:#148154;
    --green-dark:#0F6843;
    --green-soft:#E8F3EE;

    --blue:#2C85B7;
    --blue-dark:#236E98;
    --blue-soft:#EAF4F9;

    --ink:#202522;
    --soft:#606862;
    --muted:#7B857E;

    --paper:#F8FAF9;
    --white:#FFFFFF;

    --line:#D9E0DC;
    --line-dark:#C8D1CB;

    --sans:"Inter", Arial, sans-serif;
    --serif:"Source Serif 4", Georgia, serif;

    width:100%;

    color:var(--ink);
    background:var(--paper);

    font-family:var(--sans);

    overflow:visible;
}


.hu-reading *,
.hu-reading *::before,
.hu-reading *::after {
    box-sizing:border-box;
}


.hu-reading button,
.hu-reading a {
    font:inherit;
}


.hu-reading-shell {
    width:min(
        1180px,
        calc(100% - 56px)
    );

    margin-inline:auto;
}


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

.hu-reading-progress {
    position:fixed;

    z-index:10000;

    left:0;
    right:0;
    top:0;

    height:3px;

    pointer-events:none;
}


.hu-reading-progress span {
    width:0;
    height:100%;

    display:block;

    background: var(--green);

    box-shadow: 0 0 0 1px var(--blue);
}


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

.hu-article-header {
    padding:
        68px
        0
        58px;

    background:var(--paper);
}


.hu-article-topline {
    display:flex;

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

    gap:30px;

    padding-bottom:30px;

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


.hu-back-news {
    color:var(--ink);

    text-decoration:none;

    font-size:13px;
    font-weight:600;
}


.hu-back-news:hover {
    color:var(--green-dark);
}


.hu-article-top-meta {
    display:flex;
    align-items:center;

    gap:10px;

    color:var(--muted);

    font-family:var(--serif);

    font-size:13px;
}


.hu-article-top-meta > span {
    color:var(--green-dark);
}


.hu-article-top-meta i {
    width:28px;
    height:1px;

    background:var(--line-dark);
}


.hu-article-heading {
    max-width:1050px;

    margin:
        70px
        auto
        0;
}


.hu-article-category {
    color:var(--green-dark);

    font-size:12px;
    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;
}


.hu-article-heading h1 {
    max-width:1000px;

    margin:
        16px
        0
        0;

    color:var(--ink);

    font-size:
        clamp(
            52px,
            6.5vw,
            88px
        );

    font-weight:700;

    line-height:.95;

    letter-spacing:-.058em;
}


.hu-article-deck {
    max-width:850px;

    margin:
        30px
        0
        0;

    color:var(--soft);

    font-family:var(--serif);

    font-size:
        clamp(
            20px,
            2.1vw,
            27px
        );

    line-height:1.36;
}


.hu-article-byline {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    margin-top:38px;

    padding-top:20px;

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


.hu-article-byline > div:first-child {
    display:flex;
    flex-wrap:wrap;

    gap:
        8px
        18px;

    color:var(--muted);

    font-size:12px;
}


.hu-article-actions {
    display:flex;

    gap:8px;
}


.hu-article-actions button {
    min-height:39px;

    padding:
        0
        12px;

    color:var(--green-dark);

    background:transparent;

    border:
        1px solid
        var(--line-dark);

    border-radius:7px;

    cursor:pointer;

    font-size:12px;

    font-weight:600;
}


.hu-article-actions button:hover {
    color:#ffffff;

    background:var(--green);

    border-color:var(--green);
}


/* ==========================================================
   HERO IMAGE
   ========================================================== */

.hu-article-visual {
    padding-bottom:78px;
}


.hu-article-media {
    margin:0;

    overflow:hidden;

    background:#E8F3EE;

    border-radius:14px;
}


.hu-article-media img {
    width:100%;

    display:block;

    object-fit:cover;
}


.hu-article-media--landscape img {
    max-height:720px;
}


.hu-article-media--portrait {
    max-width:760px;

    margin-inline:auto;
}


.hu-article-media--portrait img {
    max-height:900px;

    object-fit:contain;
}


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

.hu-article-main {
    padding:
        0
        0
        105px;
}


.hu-reading-body {
    width:min(
        900px,
        calc(100% - 56px)
    );

    margin-inline:auto;
}


.hu-article-content {
    color:#202522;

    font-family:var(--serif);

    font-size:
        clamp(
            18px,
            1.55vw,
            21px
        );

    line-height:1.78;
}


.hu-article-content > *:first-child {
    margin-top:0;
}


.hu-article-content p {
    margin:
        0
        0
        1.45em;
}


.hu-article-content h2,
.hu-article-content h3,
.hu-article-content h4 {
    color:var(--ink);

    font-family:var(--sans);

    line-height:1.15;

    letter-spacing:-.025em;
}


.hu-article-content h2 {
    margin:
        2em
        0
        .65em;

    font-size:
        clamp(
            31px,
            3vw,
            42px
        );
}


.hu-article-content h3 {
    margin:
        1.8em
        0
        .55em;

    font-size:
        28px;
}


.hu-article-content a {
    color:var(--green-dark);

    text-decoration:
        underline;

    text-decoration-thickness:1px;

    text-underline-offset:3px;
}


.hu-article-content blockquote {
    margin:
        2em
        0;

    padding:
        4px
        0
        4px
        25px;

    color:var(--green-dark);

    border-left:
        4px solid
        var(--green);

    font-size:
        1.22em;

    line-height:1.45;
}


.hu-article-content img {
    max-width:100%;
    height:auto;

    display:block;

    margin:
        2em
        auto;

    border-radius:8px;
}


.hu-article-content figure {
    margin:
        2.1em
        0;
}


.hu-article-content figcaption {
    margin-top:8px;

    color:var(--muted);

    font-family:var(--sans);

    font-size:12px;
}


.hu-article-content table {
    width:100%;

    margin:
        2em
        0;

    border-collapse:collapse;

    font-family:var(--sans);

    font-size:14px;
}


.hu-article-content th,
.hu-article-content td {
    padding:
        10px
        12px;

    border:
        1px solid
        var(--line);

    text-align:left;
}


/* ==========================================================
   ARTICLE END
   ========================================================== */

.hu-article-end {
    margin-top:75px;

    padding-top:28px;

    border-top:
        1px solid
        var(--line-dark);
}


.hu-article-end > span {
    color:var(--green-dark);

    font-size:10px;
    font-weight:700;

    letter-spacing:.08em;
}


.hu-article-end p {
    max-width:590px;

    margin:
        10px
        0
        0;

    color:var(--soft);

    font-family:var(--serif);

    font-size:17px;
}


.hu-article-end a {
    display:inline-block;

    margin-top:15px;

    color:var(--green-dark);

    text-decoration:none;

    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   PREVIOUS / NEXT
   ========================================================== */

.hu-article-navigation {
    padding:
        65px
        0;

    background:#ffffff;

    border-top:
        1px solid
        var(--line);

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


.hu-article-navigation-grid {
    display:grid;

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


.hu-nav-story {
    min-height:190px;

    display:flex;
    flex-direction:column;

    justify-content:flex-end;

    padding:
        28px
        36px
        28px
        0;

    color:var(--ink);

    text-decoration:none;
}


.hu-nav-story--next {
    padding:
        28px
        0
        28px
        36px;

    text-align:right;

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


.hu-nav-story > span {
    color:var(--green-dark);

    font-size:11px;
    font-weight:700;

    text-transform:uppercase;
}


.hu-nav-story small {
    display:block;

    margin-top:13px;

    color:var(--muted);

    font-family:var(--serif);

    font-size:12px;
}


.hu-nav-story strong {
    max-width:500px;

    margin-top:7px;

    color:var(--ink);

    font-family:var(--serif);

    font-size:
        clamp(
            22px,
            2.2vw,
            31px
        );

    font-weight:500;

    line-height:1.18;
}


.hu-nav-story--next strong {
    margin-left:auto;
}


a.hu-nav-story:hover strong {
    color:var(--green-dark);

    text-decoration:underline;

    text-decoration-thickness:1px;

    text-underline-offset:4px;
}


.hu-nav-story--empty {
    opacity:.55;
}


/* ==========================================================
   RELATED
   ========================================================== */

.hu-related {
    padding:
        105px
        0
        120px;

    background:var(--paper);
}


.hu-related-heading {
    display:flex;

    align-items:end;
    justify-content:space-between;

    gap:30px;

    margin-bottom:36px;

    padding-bottom:22px;

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


.hu-related-heading span {
    color:var(--green-dark);

    font-size:10px;
    font-weight:700;

    letter-spacing:.08em;
}


.hu-related-heading h2 {
    margin:
        9px
        0
        0;

    color:var(--ink);

    font-size:
        clamp(
            38px,
            4vw,
            54px
        );

    line-height:1;
}


.hu-related-heading > a {
    color:var(--green-dark);

    text-decoration:none;

    font-size:13px;
    font-weight:700;
}


.hu-related-grid {
    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:20px;
}


.hu-related-image {
    aspect-ratio:
        4 / 3;

    display:block;

    overflow:hidden;

    background:var(--green-soft);

    border-radius:9px;
}


.hu-related-image img {
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

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


.hu-related-card:hover
.hu-related-image img {
    transform:
        scale(1.025);
}


.hu-related-fallback {
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    color:#ffffff;

    background: var(--green);

    box-shadow: inset 0 -4px 0 var(--blue);

    font-size:36px;
    font-weight:700;
}


.hu-related-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:14px;

    color:var(--muted);

    font-size:11px;
}


.hu-related-meta span {
    color:var(--green-dark);

    font-weight:600;
}


.hu-related-card h3 {
    margin:
        9px
        0
        0;

    font-family:var(--serif);

    font-size:
        clamp(
            19px,
            1.7vw,
            24px
        );

    font-weight:500;

    line-height:1.2;
}


.hu-related-card h3 a {
    color:var(--ink);

    text-decoration:none;
}


.hu-related-card:hover h3 a {
    color:var(--green-dark);

    text-decoration:underline;

    text-decoration-thickness:1px;

    text-underline-offset:3px;
}


/* ==========================================================
   CLOSE
   ========================================================== */

.hu-reading-close {
    padding:
        105px
        0;

    color:#ffffff;

    background:#0F6843;
}


.hu-reading-close-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
}


.hu-reading-close h2 {
    max-width:760px;

    margin:0;

    font-size:
        clamp(
            42px,
            5vw,
            64px
        );

    line-height:1;

    letter-spacing:-.045em;
}


.hu-reading-close a {
    min-height:46px;

    display:inline-flex;
    align-items:center;

    gap:9px;

    padding:
        0
        14px;

    color:var(--ink);

    background:#ffffff;

    border-radius:7px;

    text-decoration:none;

    font-size:13px;
    font-weight:600;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1000px) {

    .hu-related-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 700px) {

    .hu-reading-shell,
    .hu-reading-body {
        width:
            min(
                100% - 30px,
                1180px
            );
    }


    .hu-article-header {
        padding-top:45px;
    }


    .hu-article-topline {
        align-items:flex-start;

        flex-direction:column;

        gap:12px;
    }


    .hu-article-heading {
        margin-top:50px;
    }


    .hu-article-heading h1 {
        font-size:
            clamp(
                44px,
                13vw,
                64px
            );
    }


    .hu-article-byline {
        align-items:flex-start;

        flex-direction:column;
    }


    .hu-article-media {
        border-radius:10px;
    }


    .hu-article-visual {
        padding-bottom:55px;
    }


    .hu-article-main {
        padding-bottom:80px;
    }


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


    .hu-nav-story,
    .hu-nav-story--next {
        min-height:auto;

        padding:
            28px
            0;

        text-align:left;

        border-left:0;
    }


    .hu-nav-story--next {
        border-top:
            1px solid
            var(--line);
    }


    .hu-nav-story--next strong {
        margin-left:0;
    }


    .hu-related {
        padding:
            80px
            0
            95px;
    }


    .hu-related-heading {
        align-items:flex-start;

        flex-direction:column;
    }


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


    .hu-related-image {
        aspect-ratio:
            16 / 10;
    }


    .hu-reading-close-inner {
        align-items:flex-start;

        flex-direction:column;
    }

}


/* ==========================================================
   SCROLL SAFETY
   ========================================================== */

html,
body {
    height:auto !important;

    min-height:100% !important;

    overflow-y:auto !important;

    overflow-x:hidden;
}


.hu-reading {
    height:auto !important;

    max-height:none !important;

    overflow:visible !important;
}


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

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

    .hu-reading *,
    .hu-reading *::before,
    .hu-reading *::after {
        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}


/* ==========================================================
   HORMUUD UNIVERSITY — READING ARTICLE DARK MODE 2026
   ========================================================== */

html[data-theme="dark"] .hu-reading {
    --green:#66C59B;
    --green-dark:#86D5B2;
    --green-soft:#183A2C;

    --blue:#72BCE3;
    --blue-dark:#97D1EC;
    --blue-soft:#173442;

    --ink:#EDF3EF;
    --soft:#A9B5AE;
    --muted:#7F8B84;

    --paper:#0E1511;
    --white:#151E18;

    --line:#2D3A32;
    --line-dark:#3A493F;

    color:var(--ink) !important;
    background:var(--paper) !important;
}


/* PROGRESS */

html[data-theme="dark"] .hu-reading .hu-reading-progress span {
    background:var(--green) !important;
    box-shadow:0 0 0 1px var(--blue) !important;
}


/* HEADER */

html[data-theme="dark"] .hu-reading .hu-article-header {
    background:#0E1511 !important;
}

html[data-theme="dark"] .hu-reading .hu-article-topline,
html[data-theme="dark"] .hu-reading .hu-article-byline,
html[data-theme="dark"] .hu-reading .hu-article-end,
html[data-theme="dark"] .hu-reading .hu-related-heading {
    border-color:var(--line-dark) !important;
}

html[data-theme="dark"] .hu-reading .hu-back-news,
html[data-theme="dark"] .hu-reading .hu-article-heading h1,
html[data-theme="dark"] .hu-reading .hu-article-content h2,
html[data-theme="dark"] .hu-reading .hu-article-content h3,
html[data-theme="dark"] .hu-reading .hu-article-content h4,
html[data-theme="dark"] .hu-reading .hu-related-heading h2,
html[data-theme="dark"] .hu-reading .hu-related-card h3 a {
    color:var(--ink) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-top-meta,
html[data-theme="dark"] .hu-reading .hu-article-deck,
html[data-theme="dark"] .hu-reading .hu-article-byline > div:first-child,
html[data-theme="dark"] .hu-reading .hu-article-end p,
html[data-theme="dark"] .hu-reading .hu-related-meta {
    color:var(--soft) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-top-meta > span,
html[data-theme="dark"] .hu-reading .hu-article-category,
html[data-theme="dark"] .hu-reading .hu-article-end > span,
html[data-theme="dark"] .hu-reading .hu-article-end a,
html[data-theme="dark"] .hu-reading .hu-related-heading span,
html[data-theme="dark"] .hu-reading .hu-related-heading > a,
html[data-theme="dark"] .hu-reading .hu-related-meta span {
    color:var(--green-dark) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-actions button {
    color:var(--green-dark) !important;
    background:#151E18 !important;
    border-color:var(--line-dark) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-actions button:hover {
    color:#0E1511 !important;
    background:var(--green) !important;
    border-color:var(--green) !important;
}


/* HERO IMAGE */

html[data-theme="dark"] .hu-reading .hu-article-media {
    background:var(--green-soft) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-media img,
html[data-theme="dark"] .hu-reading .hu-article-content img,
html[data-theme="dark"] .hu-reading .hu-related-image img {
    filter:none !important;
}


/* ARTICLE BODY */

html[data-theme="dark"] .hu-reading .hu-article-main {
    background:#0E1511 !important;
}

html[data-theme="dark"] .hu-reading .hu-article-content {
    color:var(--ink) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-content a,
html[data-theme="dark"] .hu-reading .hu-article-content blockquote {
    color:var(--green-dark) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-content blockquote {
    border-left-color:var(--green) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-content figcaption {
    color:var(--muted) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-content th,
html[data-theme="dark"] .hu-reading .hu-article-content td {
    border-color:var(--line) !important;
}

html[data-theme="dark"] .hu-reading .hu-article-content th {
    background:#18241D !important;
}


/* PREVIOUS / NEXT */

html[data-theme="dark"] .hu-reading .hu-article-navigation {
    background:#151E18 !important;
    border-color:var(--line) !important;
}

html[data-theme="dark"] .hu-reading .hu-nav-story {
    color:var(--ink) !important;
}

html[data-theme="dark"] .hu-reading .hu-nav-story--next {
    border-color:var(--line) !important;
}

html[data-theme="dark"] .hu-reading .hu-nav-story > span {
    color:var(--green-dark) !important;
}

html[data-theme="dark"] .hu-reading .hu-nav-story small {
    color:var(--muted) !important;
}

html[data-theme="dark"] .hu-reading .hu-nav-story strong {
    color:var(--ink) !important;
}

html[data-theme="dark"] .hu-reading a.hu-nav-story:hover strong {
    color:var(--green-dark) !important;
}


/* RELATED */

html[data-theme="dark"] .hu-reading .hu-related {
    background:#0E1511 !important;
}

html[data-theme="dark"] .hu-reading .hu-related-image {
    background:var(--green-soft) !important;
}

html[data-theme="dark"] .hu-reading .hu-related-fallback {
    color:#0E1511 !important;
    background:var(--green) !important;
    box-shadow:inset 0 -4px 0 var(--blue) !important;
}


/* CLOSING */

html[data-theme="dark"] .hu-reading .hu-reading-close {
    color:#F4F7F5 !important;
    background:#0B3322 !important;
}

html[data-theme="dark"] .hu-reading .hu-reading-close a {
    color:#0E1511 !important;
    background:#86D5B2 !important;
}


/* RESPONSIVE */

@media (max-width:700px) {
    html[data-theme="dark"] .hu-reading .hu-nav-story--next {
        border-top-color:var(--line) !important;
    }
}


/* THEME TRANSITIONS */

.hu-reading,
.hu-reading .hu-article-header,
.hu-reading .hu-article-actions button,
.hu-reading .hu-article-main,
.hu-reading .hu-article-navigation,
.hu-reading .hu-related,
.hu-reading .hu-reading-close {
    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}

@media (prefers-reduced-motion:reduce) {
    .hu-reading,
    .hu-reading .hu-article-header,
    .hu-reading .hu-article-actions button,
    .hu-reading .hu-article-main,
    .hu-reading .hu-article-navigation,
    .hu-reading .hu-related,
    .hu-reading .hu-reading-close {
        transition:none !important;
    }
}