/* ==========================================================
   HORMUUD UNIVERSITY
   CHIEF REGISTRAR MESSAGE

   CONCEPT:
   THE ACADEMIC LEDGER

   OFFICIAL HU GREEN + BLUE
   ========================================================== */


.reg-page {
    /* Hormuud University identity */
    --hu-green: #148154;
    --hu-green-dark: #0a3420;
    --hu-green-soft: #E8F3EE;

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

    --hu-text: #202522;
    --hu-text-soft: #606862;
    --hu-muted: #7B857E;

    --hu-white: #FFFFFF;
    --hu-paper: #F8FAF9;
    --hu-cream: #F1F5F2;

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

    --reg-display: "Fraunces", Georgia, serif;
    --reg-body: "Inter", Arial, sans-serif;
    --reg-mono: "DM Mono", monospace;

    width: 100%;

    color: var(--hu-text);

    background: var(--hu-paper);

    font-family: var(--reg-body);

    font-size: 17px;
    line-height: 1.75;

    -webkit-font-smoothing: antialiased;

    overflow: visible;
}


.reg-page *,
.reg-page *::before,
.reg-page *::after {
    box-sizing: border-box;
}


.reg-page button,
.reg-page a {
    font: inherit;
}


.reg-shell {
    width: min(
        1280px,
        calc(100% - 56px)
    );

    margin-inline: auto;
}


.reg-svg-library {
    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;
}


/* ==========================================================
   COMMON
   ========================================================== */

.reg-kicker {
    display: block;

    color: var(--hu-green);

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

    letter-spacing: .11em;

    text-transform: uppercase;
}


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

.reg-hero {
    position: relative;

    overflow: hidden;

    background:
        var(--hu-paper);

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

    isolation: isolate;
}


.reg-hero::before {
    content: "REG";

    position: absolute;

    z-index: -1;

    right: -35px;
    top: 120px;

    color:
        rgba(20,129,84,.025);

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

    font-size: clamp(
        270px,
        38vw,
        590px
    );

    font-weight: 700;

    line-height: .75;

    letter-spacing: -.1em;

    pointer-events: none;
}


/* ==========================================================
   TOPBAR
   ========================================================== */

.reg-topbar {
    min-height: 80px;

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

    gap: 30px;

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


.reg-brand {
    display: flex;
    align-items: center;

    gap: 12px;
}


.reg-brand-mark {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: var(--hu-green);

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

    font-size: 15px;
}


.reg-brand strong {
    display: block;

    color: var(--hu-green-dark);

    font-size: 13px;
}


.reg-brand small {
    display: block;

    color: var(--hu-muted);

    font-size: 12px;
}


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

    gap: 12px;
}


.reg-top-meta span {
    color: var(--hu-muted);

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

    font-size: 11px;
}


.reg-top-meta i {
    width: 48px;
    height: 1px;

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


/* ==========================================================
   HERO HEADING
   ========================================================== */

.reg-hero-heading {
    display: grid;

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

    gap: 75px;

    padding:
        80px
        0
        60px;
}


.reg-hero-index > span {
    color: var(--hu-blue);

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

    font-size: 13px;
}


.reg-hero-index p {
    margin-top: 12px;

    color: var(--hu-muted);

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

    text-transform: uppercase;
}


.reg-heading-main h1 {
    max-width: 1040px;

    margin:
        17px
        0
        0;

    color: var(--hu-green-dark);

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

    font-size: clamp(
        64px,
        8.6vw,
        110px
    );

    font-weight: 500;

    line-height: .88;

    letter-spacing: -.064em;
}


.reg-heading-main h1 span {
    color: var(--hu-blue);
}


.reg-heading-main h1 em {
    display: block;

    color: var(--hu-green);

    font-style: normal;
}


/* ==========================================================
   LEDGER HERO
   ========================================================== */

.reg-ledger-hero {
    display: grid;

    grid-template-columns:
        1fr
        minmax(340px, 405px)
        1fr;

    align-items: center;

    gap: 40px;

    min-height: 590px;

    padding:
        42px;

    background: var(--hu-cream);

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


/* ==========================================================
   PANEL HEAD
   ========================================================== */

.reg-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding-bottom: 18px;

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


.reg-panel-head span,
.reg-panel-head strong {
    font-family: var(--reg-mono);

    font-size: 11px;
}


.reg-panel-head span {
    color: var(--hu-green);
}


.reg-panel-head strong {
    color: var(--hu-blue);

    font-weight: 500;
}


/* ==========================================================
   JOURNEY
   ========================================================== */

.reg-journey-panel {
    min-height: 470px;

    padding: 25px;

    background: var(--hu-green-soft);

    border-left:
        5px solid
        var(--hu-green);
}


.reg-journey-path {
    position: relative;

    margin-top: 30px;

    padding-left: 46px;
}


.reg-journey-path::before {
    content: "";

    position: absolute;

    left: 12px;
    top: 20px;
    bottom: 20px;

    width: 2px;

    background: #C8D1CB;
}


.reg-journey-progress {
    position: absolute;

    left: 12px;
    top: 20px;

    width: 2px;
    height: 0;

    background:
        linear-gradient(
            180deg,
            var(--hu-green),
            var(--hu-blue)
        );

    transition:
        height
        600ms
        cubic-bezier(.16,1,.3,1);
}


.reg-journey-marker {
    position: absolute;

    z-index: 5;

    left: 13px;
    top: 20px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: var(--hu-green);

    border:
        5px solid
        var(--hu-green-soft);

    border-radius: 50%;

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

    font-size: 11px;

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

    transition:
        top
        600ms
        cubic-bezier(.16,1,.3,1);
}


.reg-journey-step {
    position: relative;

    width: 100%;

    min-height: 76px;

    display: grid;

    grid-template-columns:
        35px
        1fr;

    align-items: center;

    gap: 10px;

    padding:
        10px
        0;

    text-align: left;

    color: var(--hu-text-soft);

    background: transparent;

    border: 0;

    cursor: pointer;
}


.reg-journey-step::before {
    content: "";

    position: absolute;

    left: -40px;
    top: 50%;

    width: 10px;
    height: 10px;

    background: var(--hu-white);

    border:
        2px solid
        var(--hu-line-dark);

    border-radius: 50%;

    transform:
        translateY(-50%);
}


.reg-journey-step.is-active::before {
    background: var(--hu-green);

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


.reg-journey-step > span {
    color: var(--hu-blue);

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

    font-size: 11px;
}


.reg-journey-step strong {
    display: block;

    color: var(--hu-green-dark);

    font-size: 14px;
}


.reg-journey-step small {
    grid-column: 2;

    margin-top: -10px;

    color: var(--hu-muted);

    font-size: 12px;
}


/* ==========================================================
   PORTRAIT
   ========================================================== */

.reg-portrait-meta {
    min-height: 38px;

    display: flex;
    align-items: center;

    gap: 10px;

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

    font-size: 10px;
}


.reg-portrait-meta span {
    color: var(--hu-green);
}


.reg-portrait-meta strong {
    color: var(--hu-blue);

    font-weight: 500;
}


.reg-portrait-meta i {
    height: 1px;

    flex: 1;

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


.reg-portrait-frame {
    position: relative;

    min-height: 420px;

    overflow: hidden;

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

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

    box-shadow:
        0
        25px
        55px
        rgba(31,55,39,.09);
}


.reg-portrait-frame img {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 106%;
    height: 106%;

    object-fit: cover;
    object-position: center top;

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

    transition:
        transform
        180ms ease-out;
}


.reg-portrait-edge {
    position: absolute;

    z-index: 6;

    width: 8px;
}


.reg-portrait-edge--green {
    left: 0;
    top: 0;
    bottom: 0;

    background: var(--hu-green);
}


.reg-portrait-edge--blue {
    right: 0;
    top: 0;

    height: 45%;

    background: var(--hu-blue);
}


.reg-portrait-label {
    position: absolute;

    z-index: 7;

    left: 20px;
    right: 20px;
    bottom: 18px;

    min-height: 57px;

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

    gap: 15px;

    padding:
        0
        14px;

    color: #ffffff;

    background:
        rgba(15,104,67,.88);

    backdrop-filter: blur(7px);
}


.reg-portrait-label span,
.reg-portrait-label strong {
    font-family: var(--reg-mono);

    font-size: 10px;
}


.reg-person {
    padding-top: 18px;
}


.reg-person > span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-person h2 {
    margin:
        7px
        0
        0;

    color: var(--hu-green-dark);

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

    font-size: 29px;
    font-weight: 500;

    line-height: 1.08;
}


.reg-person p {
    margin:
        6px
        0
        0;

    color: var(--hu-text-soft);

    font-size: 13px;
}


/* ==========================================================
   RECORD PANEL
   ========================================================== */

.reg-record-panel {
    min-height: 470px;

    padding: 25px;

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

    border-right:
        5px solid
        var(--hu-blue);
}


.reg-record-document {
    position: relative;

    margin-top: 28px;

    min-height: 355px;

    padding: 24px;

    background: var(--hu-white);

    border:
        1px solid
        #c5d9e4;
}


.reg-document-icon svg {
    width: 42px;
    height: 42px;

    fill: none;

    color: var(--hu-blue);

    stroke: currentColor;

    stroke-width: 1.3;
}


.reg-document-title {
    margin-top: 22px;
}


.reg-document-title span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-document-title strong {
    display: block;

    margin-top: 5px;

    color: var(--hu-green-dark);

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

    font-size: 25px;
    font-weight: 500;
}


.reg-document-lines {
    margin-top: 25px;
}


.reg-document-lines > div {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 36px;
}


.reg-document-lines span {
    min-width: 125px;

    color: var(--hu-muted);

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

    font-size: 10px;
}


.reg-document-lines i {
    height: 1px;

    flex: 1;

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


.reg-document-seal {
    position: absolute;

    right: 20px;
    bottom: 20px;

    width: 75px;
    height: 75px;

    display: grid;
    place-items: center;

    align-content: center;

    color: var(--hu-green);

    border:
        1px solid
        var(--hu-green);

    border-radius: 50%;

    transform:
        rotate(-8deg);
}


.reg-document-seal span {
    font-family: var(--reg-display);

    font-size: 25px;
}


.reg-document-seal strong {
    font-family: var(--reg-mono);

    font-size: 8px;
}


/* ==========================================================
   HERO MESSAGE
   ========================================================== */

.reg-hero-message {
    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 40px;

    padding:
        40px
        0
        48px;
}


.reg-hero-message p {
    max-width: 790px;

    margin: 0;

    color: var(--hu-green-dark);

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

    font-size: 24px;
}


.reg-hero-message button {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 0;

    color: var(--hu-green-dark);

    background: transparent;

    border: 0;

    cursor: pointer;

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


.reg-hero-message button > span {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: var(--hu-green);

    border-radius: 50%;
}


.reg-hero-message button:hover > span {
    background: var(--hu-blue);
}


.reg-hero-message svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}


/* ==========================================================
   MESSAGE
   ========================================================== */

.reg-message {
    padding:
        135px
        0
        150px;

    background: var(--hu-paper);
}


.reg-message-layout {
    display: grid;

    grid-template-columns:
        180px
        minmax(0, 875px);

    justify-content: center;

    gap: 85px;
}


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

.reg-reading-sticky {
    position: sticky;

    top: 105px;
}


.reg-reading-head {
    display: flex;
    justify-content: space-between;

    padding-bottom: 18px;

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


.reg-reading-head span,
.reg-reading-head strong {
    font-family: var(--reg-mono);

    font-size: 10px;
}


.reg-reading-head span {
    color: var(--hu-green);
}


.reg-reading-head strong {
    color: var(--hu-blue);
}


.reg-reading-track {
    position: absolute;

    left: 8px;
    top: 78px;

    width: 2px;
    height: 490px;

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


.reg-reading-progress {
    width: 2px;
    height: 0;

    background:
        linear-gradient(
            var(--hu-green),
            var(--hu-blue)
        );
}


.reg-reading nav {
    height: 510px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin-top: 30px;

    padding-left: 35px;
}


.reg-reading button {
    padding: 0;

    text-align: left;

    color: var(--hu-muted);

    background: transparent;

    border: 0;

    cursor: pointer;
}


.reg-reading button.is-active,
.reg-reading button:hover {
    color: var(--hu-green-dark);

    transform:
        translateX(5px);
}


.reg-reading button span {
    display: block;

    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-reading button strong {
    display: block;

    margin-top: 4px;

    font-size: 12px;
}


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

.reg-letter-header {
    padding-bottom: 50px;

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


.reg-letter-overline {
    display: flex;
    align-items: center;

    gap: 12px;

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

    font-size: 10px;
}


.reg-letter-overline span {
    color: var(--hu-green);
}


.reg-letter-overline strong {
    color: var(--hu-blue);

    font-weight: 500;
}


.reg-letter-overline i {
    height: 1px;

    flex: 1;

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


.reg-letter-header h2 {
    max-width: 820px;

    margin:
        27px
        0
        0;

    color: var(--hu-green-dark);

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

    font-size: clamp(
        52px,
        6vw,
        76px
    );

    font-weight: 500;

    line-height: .98;

    letter-spacing: -.053em;
}


.reg-letter-header h2 span {
    display: block;

    color: var(--hu-blue);
}


.reg-letter-header > p {
    margin-top: 23px;

    color: var(--hu-text-soft);

    font-size: 14px;
}


/* ==========================================================
   LETTER PART
   ========================================================== */

.reg-letter-part {
    display: grid;

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

    gap: 30px;

    padding:
        60px
        0;

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


.reg-part-number {
    color: var(--hu-blue);

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

    font-size: 12px;
}


.reg-part-label {
    display: block;

    margin-bottom: 15px;

    color: var(--hu-green);

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

    font-size: 11px;
}


.reg-letter-part p {
    margin: 0;

    color: var(--hu-text);

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

    font-size: clamp(
        23px,
        2.35vw,
        29px
    );

    line-height: 1.62;
}


.reg-letter-part p + p {
    margin-top: 28px;
}


.reg-dropcap::first-letter {
    float: left;

    margin:
        6px
        11px
        0
        0;

    color: var(--hu-green);

    font-size: 82px;

    line-height: .76;
}


/* ==========================================================
   WELCOME QUOTE
   ========================================================== */

.reg-welcome-quote {
    display: grid;

    grid-template-columns:
        110px
        1fr;

    align-items: center;

    gap: 30px;

    margin:
        60px
        0;

    padding: 30px;

    background: var(--hu-green-soft);

    border-left:
        5px solid
        var(--hu-green);
}


.reg-welcome-quote > span {
    width: 95px;
    height: 95px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: var(--hu-green);

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

    font-size: 30px;
}


.reg-welcome-quote small {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-welcome-quote p {
    margin-top: 6px;

    color: var(--hu-green-dark);

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

    font-size: 34px;

    line-height: 1.18;
}


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

.reg-progress-strip {
    display: flex;
    align-items: center;

    gap: 12px;

    margin:
        55px
        0;

    padding:
        22px
        0;

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

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


.reg-progress-strip > div {
    flex: none;
}


.reg-progress-strip span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-progress-strip strong {
    display: block;

    color: var(--hu-green-dark);

    font-size: 12px;
}


.reg-progress-strip i {
    height: 1px;

    flex: 1;

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


/* ==========================================================
   RECORD SYSTEM
   ========================================================== */

.reg-record-system {
    margin:
        65px
        0;

    padding: 28px;

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

    border-top:
        4px solid
        var(--hu-blue);
}


.reg-record-system header {
    display: flex;
    justify-content: space-between;

    gap: 20px;
}


.reg-record-system header span,
.reg-record-system header strong {
    font-family: var(--reg-mono);

    font-size: 10px;
}


.reg-record-system header span {
    color: var(--hu-blue);
}


.reg-record-system header strong {
    color: var(--hu-green);
}


.reg-record-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 28px;

    background:
        #c4d8e3;
}


.reg-record-grid article {
    min-height: 140px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 19px;

    background: var(--hu-white);
}


.reg-record-grid span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-record-grid strong {
    color: var(--hu-green-dark);

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

    font-size: 23px;
    font-weight: 500;
}


/* ==========================================================
   LEDGER TABLE
   ========================================================== */

.reg-ledger-table {
    margin:
        65px
        0;

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


.reg-ledger-table-head {
    min-height: 55px;

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

    padding:
        0
        18px;

    background: var(--hu-green);

    color: #ffffff;
}


.reg-ledger-table-head span,
.reg-ledger-table-head strong {
    font-family: var(--reg-mono);

    font-size: 10px;
}


.reg-ledger-row {
    min-height: 83px;

    display: grid;

    grid-template-columns:
        60px
        1fr
        1fr;

    align-items: center;

    gap: 20px;

    padding:
        0
        18px;

    background: var(--hu-white);

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


.reg-ledger-row:last-child {
    border-bottom: 0;
}


.reg-ledger-row span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-ledger-row strong {
    color: var(--hu-green-dark);

    font-size: 14px;
}


.reg-ledger-row p {
    margin: 0;

    color: var(--hu-text-soft);

    font-size: 14px;
}


.reg-ledger-row--award {
    background: var(--hu-green-soft);
}


/* ==========================================================
   COMPLETION
   ========================================================== */

.reg-completion {
    display: grid;

    grid-template-columns:
        130px
        1fr;

    align-items: center;

    gap: 30px;

    margin:
        65px
        0;

    padding: 30px;

    background: var(--hu-cream);

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


.reg-completion-mark {
    width: 110px;
    height: 110px;

    display: grid;
    place-items: center;

    align-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--hu-green)
            0%,
            var(--hu-green)
            60%,
            var(--hu-blue)
            60%
        );
}


.reg-completion-mark span {
    font-family: var(--reg-display);

    font-size: 31px;
}


.reg-completion-mark small {
    font-family: var(--reg-mono);

    font-size: 8px;
}


.reg-completion > div:last-child > span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-completion h3 {
    margin:
        8px
        0
        0;

    color: var(--hu-green-dark);

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

    font-size: 35px;
    font-weight: 500;
}


/* ==========================================================
   SIGNATURE
   ========================================================== */

.reg-signature {
    margin-top: 70px;

    padding: 29px;

    background: var(--hu-green-soft);

    border-top:
        4px solid
        var(--hu-green);
}


.reg-signature-head {
    display: flex;
    align-items: center;

    gap: 11px;

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

    font-size: 10px;
}


.reg-signature-head span {
    color: var(--hu-blue);
}


.reg-signature-head strong {
    color: var(--hu-green);
}


.reg-signature-head i {
    height: 1px;

    flex: 1;

    background: #C8D1CB;
}


.reg-signature-main {
    display: grid;

    grid-template-columns:
        80px
        1fr
        auto;

    align-items: center;

    gap: 25px;

    margin-top: 30px;
}


.reg-signature-mark {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--hu-green)
            0%,
            var(--hu-green)
            60%,
            var(--hu-blue)
            60%
        );

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

    font-size: 23px;
}


.reg-signature-copy > span {
    color: var(--hu-blue);

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

    font-size: 10px;
}


.reg-signature-copy h3 {
    margin:
        7px
        0
        0;

    color: var(--hu-green-dark);

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

    font-size: 28px;
    font-weight: 500;
}


.reg-signature-copy strong {
    color: var(--hu-green);

    font-size: 13px;
}


.reg-email {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        11px
        14px;

    color: var(--hu-blue-dark);

    background: var(--hu-white);

    border:
        1px solid
        #C8D1CB;

    text-decoration: none;

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


.reg-email:hover {
    color: #ffffff;

    background: var(--hu-blue);
}


.reg-email svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}


/* ==========================================================
   CLOSING
   ========================================================== */

.reg-closing {
    padding:
        110px
        0
        130px;

    background: var(--hu-white);
}


.reg-closing-panel {
    padding:
        30px
        35px
        50px;

    background: var(--hu-cream);

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


.reg-closing-top {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--hu-muted);

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

    font-size: 10px;
}


.reg-closing-top i {
    height: 1px;

    flex: 1;

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


.reg-closing-grid {
    display: grid;

    grid-template-columns:
        290px
        1fr;

    align-items: center;

    gap: 80px;

    padding:
        80px
        25px
        40px;
}


.reg-closing-ledger {
    position: relative;

    min-height: 280px;

    padding: 23px;

    background: var(--hu-white);

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


.reg-closing-ledger-head {
    display: flex;
    justify-content: space-between;

    padding-bottom: 18px;

    border-bottom:
        2px solid
        var(--hu-green);
}


.reg-closing-ledger-head span {
    color: var(--hu-green);

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

    font-size: 25px;
}


.reg-closing-ledger-head strong {
    color: var(--hu-blue);

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

    font-size: 9px;
}


.reg-closing-ledger-line {
    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 45px;
}


.reg-closing-ledger-line span {
    color: var(--hu-blue);

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

    font-size: 9px;
}


.reg-closing-ledger-line i {
    height: 1px;

    flex: 1;

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


.reg-closing-ledger-stamp {
    position: absolute;

    right: 25px;
    bottom: 22px;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    color: var(--hu-green);

    border:
        1px solid
        var(--hu-green);

    border-radius: 50%;

    transform:
        rotate(-8deg);
}


.reg-closing-ledger-stamp span {
    font-family: var(--reg-display);

    font-size: 24px;
}


.reg-closing-copy h2 {
    max-width: 820px;

    margin:
        15px
        0
        0;

    color: var(--hu-green-dark);

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

    font-size: clamp(
        50px,
        6vw,
        78px
    );

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.055em;
}


.reg-closing-copy h2 span {
    display: block;

    color: var(--hu-blue);
}


.reg-closing-copy button {
    min-height: 48px;

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

    gap: 10px;

    margin-top: 30px;

    padding:
        0
        18px;

    color: #ffffff;

    background: var(--hu-green);

    border: 0;

    cursor: pointer;

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


.reg-closing-copy button:hover {
    background: var(--hu-blue);
}


.reg-closing-copy svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}


/* ==========================================================
   REVEALS
   ========================================================== */

.reg-page.js-ready
.reg-reveal {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity
        760ms ease,
        transform
        760ms
        cubic-bezier(.16,1,.3,1);
}


.reg-page.js-ready
.reg-reveal.is-visible {
    opacity: 1;

    transform: none;
}


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

@media (max-width: 1050px) {

    .reg-ledger-hero {
        grid-template-columns:
            1fr
            380px;
    }


    .reg-record-panel {
        grid-column:
            1 / -1;
    }


    .reg-message-layout {
        grid-template-columns:
            145px
            minmax(0,1fr);

        gap: 50px;
    }


    .reg-signature-main {
        grid-template-columns:
            75px
            1fr;
    }


    .reg-email {
        grid-column: 2;

        justify-self: start;
    }

}


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

@media (max-width: 720px) {

    .reg-shell {
        width:
            min(
                100% - 30px,
                1280px
            );
    }


    .reg-top-meta {
        display: none;
    }


    .reg-hero-heading {
        grid-template-columns: 1fr;

        gap: 25px;

        padding:
            60px
            0
            45px;
    }


    .reg-heading-main h1 {
        font-size:
            clamp(
                54px,
                16vw,
                76px
            );
    }


    .reg-ledger-hero {
        grid-template-columns: 1fr;

        padding: 25px;
    }


    .reg-portrait {
        grid-row: 1;
    }


    .reg-portrait-frame {
        min-height: 430px;
    }


    .reg-hero-message {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .reg-message,
    .reg-closing {
        padding:
            82px
            0;
    }


    .reg-message-layout {
        grid-template-columns: 1fr;
    }


    .reg-reading {
        display: none;
    }


    .reg-letter-header h2 {
        font-size: 42px;
    }


    .reg-letter-part {
        grid-template-columns:
            36px
            1fr;

        gap: 15px;

        padding:
            45px
            0;
    }


    .reg-letter-part p {
        font-size: 21px;
    }


    .reg-record-grid {
        grid-template-columns:
            1fr
            1fr;
    }


    .reg-progress-strip {
        overflow-x: auto;

        scrollbar-width: none;
    }


    .reg-progress-strip i {
        min-width: 30px;
    }


    .reg-welcome-quote,
    .reg-completion {
        grid-template-columns: 1fr;
    }


    .reg-ledger-row {
        grid-template-columns:
            40px
            1fr;
    }


    .reg-ledger-row p {
        grid-column: 2;
    }


    .reg-signature-main {
        grid-template-columns: 1fr;
    }


    .reg-email {
        grid-column: auto;
    }


    .reg-closing-grid {
        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            60px
            0
            30px;
    }


    .reg-closing-ledger {
        max-width: 320px;
    }


    .reg-closing-copy h2 {
        font-size: 42px;
    }

}


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

@media (max-width: 460px) {

    .reg-shell {
        width:
            min(
                100% - 22px,
                1280px
            );
    }


    .reg-brand small {
        display: none;
    }


    .reg-portrait-frame {
        min-height: 370px;
    }


    .reg-letter-part {
        grid-template-columns: 1fr;
    }


    .reg-record-grid {
        grid-template-columns: 1fr;
    }


    .reg-signature,
    .reg-record-system {
        padding: 22px;
    }

}


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

html,
body {
    height: auto !important;

    min-height: 100% !important;

    overflow-y: auto !important;

    overflow-x: hidden;
}


.reg-page {
    height: auto !important;

    max-height: none !important;

    overflow: visible !important;
}


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

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

    .reg-page *,
    .reg-page *::before,
    .reg-page *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    .reg-page.js-ready
    .reg-reveal {
        opacity: 1;

        transform: none;
    }

}

/* ==========================================================
   HORMUUD UNIVERSITY — REGISTRAR OFFICE DARK MODE 2026
   ========================================================== */

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

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

    --hu-text: #EDF3EF;
    --hu-text-soft: #A9B5AE;
    --hu-muted: #7F8B84;

    --hu-white: #151E18;
    --hu-paper: #0E1511;
    --hu-cream: #18241D;

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

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

/* Hero / topbar */
html[data-theme="dark"] .reg-page .reg-hero {
    background: #0E1511 !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-hero::before {
    color: rgba(102,197,155,.035) !important;
}
html[data-theme="dark"] .reg-page .reg-topbar,
html[data-theme="dark"] .reg-page .reg-hero-heading {
    border-color: var(--hu-line) !important;
}
html[data-theme="dark"] .reg-page .reg-brand-mark {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-brand strong,
html[data-theme="dark"] .reg-page .reg-heading-main h1,
html[data-theme="dark"] .reg-page .reg-letter-header h2,
html[data-theme="dark"] .reg-page .reg-signature-copy h3,
html[data-theme="dark"] .reg-page .reg-closing-copy h2 {
    color: var(--hu-green-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-heading-main h1 span,
html[data-theme="dark"] .reg-page .reg-letter-header h2 span,
html[data-theme="dark"] .reg-page .reg-closing-copy h2 span {
    color: var(--hu-blue) !important;
}
html[data-theme="dark"] .reg-page .reg-brand small,
html[data-theme="dark"] .reg-page .reg-top-meta,
html[data-theme="dark"] .reg-page .reg-hero-index p {
    color: var(--hu-muted) !important;
}

/* Academic ledger hero */
html[data-theme="dark"] .reg-page .reg-ledger-hero {
    background: #18241D !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-panel-head,
html[data-theme="dark"] .reg-page .reg-ledger-row {
    border-color: var(--hu-line) !important;
}
html[data-theme="dark"] .reg-page .reg-panel-head span,
html[data-theme="dark"] .reg-page .reg-ledger-row span {
    color: var(--hu-muted) !important;
}
html[data-theme="dark"] .reg-page .reg-panel-head strong,
html[data-theme="dark"] .reg-page .reg-ledger-row strong {
    color: var(--hu-green-dark) !important;
}

/* Student journey */
html[data-theme="dark"] .reg-page .reg-journey-panel {
    background: #151E18 !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-journey-path {
    background: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-journey-progress,
html[data-theme="dark"] .reg-page .reg-journey-marker {
    background: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-journey-step {
    color: var(--hu-muted) !important;
}
html[data-theme="dark"] .reg-page .reg-journey-step.is-active {
    color: var(--hu-green-dark) !important;
}

/* Portrait / record panel */
html[data-theme="dark"] .reg-page .reg-portrait-frame {
    background: var(--hu-green-soft) !important;
    border-color: var(--hu-line-dark) !important;
    box-shadow: 0 24px 55px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] .reg-page .reg-portrait-frame img {
    filter: none !important;
}
html[data-theme="dark"] .reg-page .reg-portrait-label {
    color: #FFFFFF !important;
    background: rgba(15,104,67,.90) !important;
}
html[data-theme="dark"] .reg-page .reg-record-panel {
    background: #151E18 !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-person h2 {
    color: var(--hu-green-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-person p,
html[data-theme="dark"] .reg-page .reg-hero-message p {
    color: var(--hu-text-soft) !important;
}

/* Reading / message */
html[data-theme="dark"] .reg-page .reg-message {
    background: #0E1511 !important;
}
html[data-theme="dark"] .reg-page .reg-reading-sticky {
    background: rgba(14,21,17,.96) !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-reading-head,
html[data-theme="dark"] .reg-page .reg-letter-header,
html[data-theme="dark"] .reg-page .reg-letter-part {
    border-color: var(--hu-line) !important;
}
html[data-theme="dark"] .reg-page .reg-reading-track {
    background: var(--hu-line) !important;
}
html[data-theme="dark"] .reg-page .reg-reading-progress {
    background: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-reading nav button {
    color: var(--hu-muted) !important;
}
html[data-theme="dark"] .reg-page .reg-reading nav button:hover,
html[data-theme="dark"] .reg-page .reg-reading nav button.is-active {
    color: var(--hu-green-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-letter-part p {
    color: var(--hu-text) !important;
}

/* Quote / progress strip */
html[data-theme="dark"] .reg-page .reg-welcome-quote {
    color: var(--hu-green-dark) !important;
    background: var(--hu-blue-soft) !important;
    border-color: #315466 !important;
}
html[data-theme="dark"] .reg-page .reg-progress-strip {
    background: #18241D !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-progress-strip span {
    color: var(--hu-muted) !important;
}

/* Record system + ledger table */
html[data-theme="dark"] .reg-page .reg-record-system {
    background: var(--hu-green-soft) !important;
    border-color: #315944 !important;
}
html[data-theme="dark"] .reg-page .reg-record-document {
    background: #151E18 !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-document-seal {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-ledger-table,
html[data-theme="dark"] .reg-page .reg-ledger-table-head,
html[data-theme="dark"] .reg-page .reg-ledger-table .reg-ledger-row {
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-ledger-table-head {
    background: #18241D !important;
}
html[data-theme="dark"] .reg-page .reg-ledger-row--award {
    background: var(--hu-blue-soft) !important;
}

/* Completion */
html[data-theme="dark"] .reg-page .reg-completion {
    background: #18241D !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-completion-mark {
    color: #0E1511 !important;
    background: var(--hu-blue) !important;
}

/* Signature */
html[data-theme="dark"] .reg-page .reg-signature {
    background: var(--hu-green-soft) !important;
    border-color: #315944 !important;
}
html[data-theme="dark"] .reg-page .reg-signature-mark {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-email {
    color: var(--hu-blue-dark) !important;
    background: #151E18 !important;
    border-color: #315466 !important;
}
html[data-theme="dark"] .reg-page .reg-email:hover,
html[data-theme="dark"] .reg-page .reg-email:focus-visible {
    color: #0E1511 !important;
    background: var(--hu-blue) !important;
}

/* Closing */
html[data-theme="dark"] .reg-page .reg-closing {
    background: #0E1511 !important;
}
html[data-theme="dark"] .reg-page .reg-closing-panel {
    background: #18241D !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-closing-ledger {
    background: #151E18 !important;
    border-color: var(--hu-line-dark) !important;
}
html[data-theme="dark"] .reg-page .reg-closing-ledger-head,
html[data-theme="dark"] .reg-page .reg-closing-ledger-line {
    border-color: var(--hu-line) !important;
}
html[data-theme="dark"] .reg-page .reg-closing-ledger-stamp {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-closing-copy button {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
    border-color: var(--hu-green) !important;
}
html[data-theme="dark"] .reg-page .reg-closing-copy button:hover,
html[data-theme="dark"] .reg-page .reg-closing-copy button:focus-visible {
    background: var(--hu-blue) !important;
    border-color: var(--hu-blue) !important;
}

.reg-page,
.reg-page .reg-hero,
.reg-page .reg-ledger-hero,
.reg-page .reg-journey-panel,
.reg-page .reg-portrait-frame,
.reg-page .reg-record-panel,
.reg-page .reg-message,
.reg-page .reg-reading-sticky,
.reg-page .reg-welcome-quote,
.reg-page .reg-progress-strip,
.reg-page .reg-record-system,
.reg-page .reg-record-document,
.reg-page .reg-ledger-table-head,
.reg-page .reg-completion,
.reg-page .reg-signature,
.reg-page .reg-email,
.reg-page .reg-closing,
.reg-page .reg-closing-panel {
    transition: background-color .24s ease, color .24s ease, border-color .24s ease;
}

@media (prefers-reduced-motion: reduce) {
    .reg-page,
    .reg-page .reg-hero,
    .reg-page .reg-ledger-hero,
    .reg-page .reg-journey-panel,
    .reg-page .reg-portrait-frame,
    .reg-page .reg-record-panel,
    .reg-page .reg-message,
    .reg-page .reg-reading-sticky,
    .reg-page .reg-welcome-quote,
    .reg-page .reg-progress-strip,
    .reg-page .reg-record-system,
    .reg-page .reg-record-document,
    .reg-page .reg-ledger-table-head,
    .reg-page .reg-completion,
    .reg-page .reg-signature,
    .reg-page .reg-email,
    .reg-page .reg-closing,
    .reg-page .reg-closing-panel {
        transition: none !important;
    }
}