/* ============================================================

   WANGYALGYA PUBLIC HOME PAGE

   Clean personal portfolio theme

   Fully responsive: desktop, tablet, mobile

   ============================================================ */



:root {

    --page-bg: #f4f8fc;

    --surface: #ffffff;

    --text: #152238;

    --muted: #66758a;

    --border: #d8e2ee;

    --accent: #2563eb;

    --accent-soft: #e8f1ff;

    --accent-hover: #1d4ed8;

    --secondary: #06b6d4;

    --media-bg: #edf5fb;

    --shadow: 0 10px 30px rgba(21, 34, 56, 0.08);



    --content-width: 1180px;

    --header-height: 76px;

    --radius-large: 18px;

    --radius-medium: 14px;

    --radius-small: 10px;

}





/* ============================================================

   RESET

   ============================================================ */



* {

    box-sizing: border-box;

}





html {

    scroll-behavior: smooth;

}





body {

    margin: 0;

    font-family:

        Inter,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        Arial,

        Helvetica,

        sans-serif;



    background: var(--page-bg);

    color: var(--text);



    line-height: 1.6;

}





body,

button,

input,

textarea,

select {

    -webkit-font-smoothing: antialiased;

}





img {

    display: block;

    max-width: 100%;

}





a {

    color: inherit;

    text-decoration: none;

}





button {

    font: inherit;

}





/* ============================================================

   SHARED WIDTH

   ============================================================ */



.site-header-inner,

.site-footer-inner,

.content-section {

    width: min(

        calc(100% - 40px),

        var(--content-width)

    );



    margin: 0 auto;

}





/* ============================================================

   HEADER

   ============================================================ */



.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;



    min-height: var(--header-height);



    background: rgba(255, 255, 255, 0.96);

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



    backdrop-filter: blur(12px);

}





.site-header-inner {

    min-height: var(--header-height);



    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 24px;

}





.site-brand,

.footer-brand {

    display: inline-flex;

    align-items: center;



    gap: 11px;



    min-width: 0;



    font-weight: 700;

}





.site-logo {

    width: 38px;

    height: 38px;



    object-fit: contain;



    border-radius: 9px;



    background: var(--accent-soft);

}





.site-name {

    color: var(--text);



    font-size: 24px;

    font-weight: 700;



    white-space: nowrap;

}





.site-navigation {

    display: flex;

    align-items: center;

    justify-content: flex-end;



    gap: 4px;

}





.nav-link {

    padding: 9px 12px;



    border-radius: 9px;



    color: var(--muted);



    font-size: 14px;

    font-weight: 600;



    transition:

        background 0.2s ease,

        color 0.2s ease;

}





.nav-link:hover {

    background: var(--accent-soft);

    color: var(--accent);

}





.nav-link.active {

    background: var(--accent-soft);

    color: var(--accent);

}





.mobile-menu-button {

    display: none;



    align-items: center;

    justify-content: center;



    flex-direction: column;



    gap: 4px;



    width: 42px;

    height: 42px;



    padding: 0;



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

    border-radius: 10px;



    background: var(--surface);

    color: var(--text);



    cursor: pointer;

}





.mobile-menu-button span {

    width: 18px;

    height: 2px;



    border-radius: 99px;



    background: currentColor;

}





/* ============================================================

   HERO

   ============================================================ */



.hero-section {

    min-height: 50vh;



    display: flex;

    align-items: center;

    justify-content: center;



    padding: 64px 20px;



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

}





.hero-content {

    width: min(

        880px,

        100%

    );



    text-align: center;

}





.hero-text {

    margin: 0;



    color: var(--text);



    font-size: clamp(

        38px,

        6vw,

        72px

    );



    font-weight: 700;

    line-height: 1.08;



    letter-spacing: -0.035em;



    white-space: pre-line;

}





/* ============================================================

   CONTENT SECTIONS

   ============================================================ */



.content-section {

    padding-top: 80px;

    padding-bottom: 12px;

}





.section-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;



    gap: 20px;



    margin-bottom: 26px;

}





.section-eyebrow {

    margin: 0 0 5px;



    color: var(--accent);



    font-size: 12px;

    font-weight: 700;



    letter-spacing: 0.12em;

    text-transform: uppercase;

}





.section-heading h2 {

    margin: 0;



    color: var(--text);



    font-size: 30px;

    line-height: 1.15;

}





/* ============================================================

   EXPLORE

   ============================================================ */



.horizontal-card-list {

    display: flex;



    gap: 16px;



    overflow-x: auto;



    padding: 4px 2px 16px;



    scroll-snap-type: x proximity;



    scrollbar-width: thin;

}





.horizontal-card-list::-webkit-scrollbar {

    height: 7px;

}





.horizontal-card-list::-webkit-scrollbar-thumb {

    background: #a8b8ca;

    border-radius: 99px;

}





.explore-card {

    flex: 0 0 220px;



    min-height: 170px;



    display: flex;

    flex-direction: column;

    justify-content: space-between;



    padding: 22px;



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

    border-radius: var(--radius-large);



    background: var(--surface);



    box-shadow: var(--shadow);



    scroll-snap-align: start;



    transition:

        transform 0.2s ease,

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}





.explore-card:hover {

    transform: translateY(-3px);



    border-color: #9bb9f5;



    box-shadow:

        0 14px 34px rgba(21, 34, 56, 0.10);

}





.explore-card-title {

    margin: 0 0 9px;



    font-size: 18px;

    line-height: 1.25;

}





.explore-card-description {

    margin: 0;



    color: var(--muted);



    font-size: 14px;

    line-height: 1.55;

}





.explore-card-link {

    display: inline-flex;

    align-items: center;



    gap: 6px;



    margin-top: 18px;



    color: var(--accent);



    font-size: 13px;

    font-weight: 700;

}





/* ============================================================

   LATEST

   ============================================================ */



.latest-group {

    margin-bottom: 48px;

}





.latest-group-header {

    display: flex;

    align-items: center;

    justify-content: space-between;



    gap: 16px;



    margin-bottom: 16px;

}





.latest-group-title {

    margin: 0;



    font-size: 21px;

}





.latest-group-link {

    color: var(--muted);



    font-size: 13px;

    font-weight: 600;

}





.latest-group-link:hover {

    color: var(--accent);

}





.latest-grid {

    display: grid;



    grid-template-columns:

        repeat(

            3,

            minmax(0, 1fr)

        );



    gap: 16px;

}





.latest-card {

    min-width: 0;



    padding: 20px;



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

    border-radius: var(--radius-medium);



    background: var(--surface);



    box-shadow: var(--shadow);



    transition:

        transform 0.2s ease,

        border-color 0.2s ease;

}





.latest-card:hover {

    transform: translateY(-2px);



    border-color: #9bb9f5;

}





.latest-card-title {

    display: -webkit-box;



    margin: 0 0 8px;



    overflow: hidden;



    color: var(--text);



    font-size: 17px;

    font-weight: 700;

    line-height: 1.35;



    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

}





.latest-card-description {

    display: -webkit-box;



    margin: 0;



    overflow: hidden;



    color: var(--muted);



    font-size: 14px;

    line-height: 1.5;



    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

}





.latest-card-date {

    margin-top: 16px;



    color: var(--muted);



    font-size: 12px;

}





.latest-media {

    width: 100%;



    aspect-ratio: 16 / 10;



    margin-bottom: 15px;



    overflow: hidden;



    border-radius: var(--radius-small);



    background: #edf5fb;

}





.latest-media img {

    width: 100%;

    height: 100%;



    object-fit: cover;

}





.latest-app {

    display: flex;

    align-items: center;



    gap: 14px;

}





.latest-app-icon {

    width: 52px;

    height: 52px;



    flex: 0 0 52px;



    object-fit: cover;



    border-radius: 13px;



    background: #edf5fb;

}





.latest-audio {

    display: flex;

    align-items: center;



    gap: 13px;

}





.latest-audio-play {

    width: 42px;

    height: 42px;



    flex: 0 0 42px;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    border: 0;

    border-radius: 50%;



    background: var(--accent);

    color: #ffffff;



    cursor: pointer;

}





.latest-empty {

    padding: 22px;



    border: 1px dashed var(--border);

    border-radius: var(--radius-medium);



    color: var(--muted);



    font-size: 14px;

}





/* ============================================================

   LOADING

   ============================================================ */



.section-loading {

    width: 100%;



    padding: 28px 20px;



    border: 1px dashed var(--border);

    border-radius: var(--radius-medium);



    color: var(--muted);



    text-align: center;

}





/* ============================================================

   FOOTER

   ============================================================ */



.site-footer {

    margin-top: 72px;



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



    background: #0b1f3a;

}





.site-footer-inner {

    min-height: 100px;



    display: grid;



    grid-template-columns:

        1fr

        minmax(0, 1.5fr)

        1fr;



    align-items: center;



    gap: 24px;



    padding-top: 22px;

    padding-bottom: 22px;

}





.footer-brand {

    justify-self: start;

}





.footer-text {

    color: var(--muted);



    font-size: 14px;



    text-align: center;

}





.footer-contact {

    justify-self: end;



    color: var(--text);



    font-size: 14px;

    font-weight: 600;

}





.footer-contact:hover {

    color: var(--accent);

}





/* ============================================================

   RESPONSIVE — TABLET

   ============================================================ */



@media (max-width: 980px) {



    .site-header-inner,

    .site-footer-inner,

    .content-section {

        width: min(

            calc(100% - 32px),

            var(--content-width)

        );
        
    

    }





    .site-navigation {

        gap: 0;

    }





    .nav-link {

        padding-left: 9px;

        padding-right: 9px;

    }





    .latest-grid {

        grid-template-columns:

            repeat(

                2,

                minmax(0, 1fr)

            );

    }



}





/* ============================================================

   RESPONSIVE — MOBILE

   ============================================================ */



@media (max-width: 760px) {



    :root {

        --header-height: 68px;

    }





    .site-header-inner {

        gap: 12px;

    }





    .mobile-menu-button {

        display: inline-flex;

        flex: 0 0 auto;

    }





    .site-navigation {

        display: none;



        position: absolute;



        left: 16px;

        right: 16px;

        top: calc(

            var(--header-height) - 1px

        );



        flex-direction: column;

        align-items: stretch;



        padding: 10px;



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

        border-radius: 14px;



        background: var(--surface);



        box-shadow: 0 14px 35px

            rgba(23, 25, 35, 0.12);

    }





    .site-navigation.is-open {

        display: flex;

    }





    .nav-link {

        padding: 12px 13px;

    }





    .hero-section {

        min-height: 50vh;



        padding: 52px 18px;

    }





    .hero-text {

        font-size: clamp(

            34px,

            10vw,

            52px

        );

    }





    .content-section {

        padding-top: 58px;

    }





    .section-heading h2 {

        font-size: 26px;

    }





    .explore-card {

        flex-basis: 78vw;



        max-width: 290px;

    }





    .latest-grid {

        display: flex;

        gap: 16px;

        overflow-x: auto;

        padding: 4px 2px 16px;

        scroll-snap-type: x proximity;

        scrollbar-width: thin;

    }



    .latest-grid::-webkit-scrollbar {

        height: 7px;

    }



    .latest-grid::-webkit-scrollbar-thumb {

        background: #a8b8ca;

        border-radius: 99px;

    }



    .latest-card {

        flex: 0 0 78vw;

        max-width: 290px;

        scroll-snap-align: start;

    }





    .site-footer-inner {

        display: flex;



        flex-direction: column;



        gap: 14px;



        padding-top: 30px;

        padding-bottom: 30px;



        text-align: center;

    }





    .footer-brand,

    .footer-contact {

        align-self: center;

    }



}





/* ============================================================

   RESPONSIVE — SMALL MOBILE

   ============================================================ */



@media (max-width: 420px) {



    .site-header-inner,

    .site-footer-inner,

    .content-section {

        width: calc(100% - 24px);

    }





    .site-name {

        font-size: 16px;

    }





    .site-logo {

        width: 35px;

        height: 35px;

    }





    .hero-text {

        font-size: 34px;

    }





    .explore-card {

        flex-basis: 82vw;



        padding: 19px;

    }



}




/* Mobile footer brand: logo above site name */

@media (max-width: 760px) {

    .footer-brand {

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 8px;

        text-align: center;

    }

}



/* Fixed regulatory filing links */

.footer-records {



    justify-self: end;



    display: inline-flex;



    align-items: center;



    justify-content: flex-end;



    flex-wrap: nowrap;



    gap: 10px;



    white-space: nowrap;



    color: var(--text);



    font-size: 13px;



    line-height: 1.5;



}



.footer-records a {



    color: var(--text);



    font-weight: 600;



    text-decoration: none;



}



.footer-records a:hover {



    color: var(--accent);



}



.footer-police-record {



    display: inline-flex;



    align-items: center;



    gap: 4px;



}



.wangan-logo {



    width: 16px;



    height: 17px;



    flex: 0 0 16px;



    object-fit: contain;



}



@media (max-width: 760px) {



    .footer-records {



        justify-self: auto;



        align-self: center;



        justify-content: center;



        flex-wrap: wrap;



        white-space: normal;



        text-align: center;



    }



}



/* ============================================================

   DEEP BLUE + CYAN VISUAL THEME

   Color-only overrides — layout and workflow unchanged.

   ============================================================ */



.site-header {



    background: rgba(11, 31, 58, 0.96);



    border-bottom-color: #24415f;



}



.site-header .site-name {



    color: #ffffff;



}



.site-header .nav-link {



    color: #c7d6e8;



}



.site-header .nav-link:hover,



.site-header .nav-link.active {



    background: rgba(6, 182, 212, 0.14);



    color: #67e8f9;



}



.site-header .mobile-menu-button {



    border-color: #38536e;



    background: #102946;



    color: #ffffff;



}



.hero-section {

    background-image: url("/assets/hero-backgroun.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.explore-section {
    position: relative;
    isolation: isolate;
}

.explore-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #e9f0f7;
    z-index: -1;
}


.site-footer {



    background: #0b1f3a;



}



.site-footer .site-name {



    color: #ffffff;



}



.footer-text {



    color: #b8c8db;



}



.footer-records a {



    color: #d8e5f2;



}



.footer-records a:hover {



    color: #67e8f9;



}





.hero-text {

    white-space: pre;

    word-break: keep-all;

    overflow-wrap: normal;

}



/* Hero text: centered block, shared left edge, no Chinese wrapping */

.hero-content {

    width: max-content;

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

    text-align: left;

}



.hero-text {

    margin: 0;

    text-align: left;

    white-space: pre;

    word-break: keep-all;

    overflow-wrap: normal;

    font-size: clamp(16px, 5vw, 72px);

}



/* Position hero text 10px above the bottom border */

.hero-section {

    position: relative;

}



.hero-content {

    position: absolute;

    left: 50%;

    bottom: 20px;

    transform: translateX(-50%);

}







.hero-text {

    color: #ffffff;

}






.hero-text {

    color: #ffffff;

     line-height: 1.5;
}






/* Hero image fades smoothly toward the bottom */

.hero-section {

    background-image:

        linear-gradient(

            to bottom,

           rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.25) 70%,
            rgba(0, 0, 0, 0.70) 88%,
            rgba(0, 0, 0, 1) 100%
        ),

        url("/assets/hero-backgroun.jpeg");



    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}