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

   WANGYALGYA PUBLIC HOME PAGE

   Clean personal portfolio theme

   Fully responsive: desktop, tablet, mobile

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



:root {

    --page-bg: #f7f8fc;

    --surface: #ffffff;

    --text: #171923;

    --muted: #687080;

    --border: #e7e9ef;

    --accent: #6c5ce7;

    --accent-soft: #f0efff;

    --shadow: 0 10px 30px rgba(23, 25, 35, 0.06);



    --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: 17px;

    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: #d4d8e1;

    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: #d8d2ff;



    box-shadow:

        0 14px 34px rgba(23, 25, 35, 0.09);

}





.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: #d8d2ff;

}





.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: #eef0f4;

}





.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: #eef0f4;

}





.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: #eceef4;

}





.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 {

        grid-template-columns: 1fr;

    }





    .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;

    }

}







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

   AUDIOS PAGE

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



.audios-intro {

    padding-top: 92px;

    padding-bottom: 70px;

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

}



.audios-intro h1 {

    margin: 0;

    font-size: clamp(42px, 6vw, 70px);

    line-height: 1.05;

    letter-spacing: -0.04em;

}



.audios-intro-text {

    max-width: 680px;

    margin: 20px 0 0;

    color: var(--muted);

    font-size: 18px;

}



.audios-section {

    padding-top: 58px;

    padding-bottom: 88px;

}



.audio-player {

    margin-bottom: 34px;

    padding: 24px;

    background: var(--surface);

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

    border-radius: 18px;

    box-shadow: 0 14px 35px rgba(23, 25, 35, 0.08);

}



.player-main {

    display: flex;

    align-items: center;

    gap: 18px;

}



.player-art {

    width: 74px;

    height: 74px;

    flex: 0 0 74px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: var(--accent-soft);

}



.player-art-symbol {

    color: var(--accent);

    font-size: 32px;

    font-weight: 700;

}



.player-info {

    min-width: 0;


    flex: 1;
}



.player-title {

    color: var(--text);

    font-size: 18px;

    font-weight: 700;

    line-height: 1.35;

}



.player-status {

    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;

}



.player-progress-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

}



.player-time {

    min-width: 42px;

    color: var(--muted);

    font-size: 12px;

    text-align: center;

}



.player-progress {

    width: 100%;

    accent-color: var(--accent);

}



.player-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 18px;

    flex-wrap: wrap;

}



.player-button {

    width: 40px;

    height: 40px;

    padding: 0;

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

    border-radius: 50%;

    background: var(--surface);

    color: var(--text);

    cursor: pointer;

    transition:

        background 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease;

}



.player-button:hover {

    background: var(--accent-soft);

    color: var(--accent);

    transform: translateY(-1px);

}



.player-button-primary {

    width: 46px;

    height: 46px;

    border-color: var(--accent);

    background: var(--accent);

    color: #ffffff;

}



.player-button-primary:hover {

    background: var(--accent);

    color: #ffffff;

}



.volume-control,

.speed-control {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--muted);

    font-size: 13px;

}



.volume-control {

    margin-left: 6px;

}



.volume-control input {

    width: 90px;

    accent-color: var(--accent);

}



.speed-control {

    
    margin-left: 0;
}



.speed-control select {

    min-height: 36px;

    padding: 5px 9px;

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

    border-radius: 9px;

    background: var(--surface);

    color: var(--text);

}



.audio-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.audio-track {

    display: grid;

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

    align-items: center;

    gap: 16px;

    padding: 13px 16px;

    background: var(--surface);

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

    border-radius: 13px;

    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        transform 0.2s ease;

}



.audio-track:hover {

    background: var(--accent-soft);

}



.audio-track.active {

    border-color: var(--accent);

    background: var(--accent-soft);

}



.track-number {

    color: var(--muted);

    font-size: 13px;

    text-align: center;

}



.track-play {

    width: 38px;

    height: 38px;

    margin-left: auto;

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

    border-radius: 50%;

    background: var(--surface);

    color: var(--accent);

    cursor: pointer;

}



.track-play:hover {

    background: var(--accent);

    color: #ffffff;

}



.track-main {

    min-width: 0;

}



.track-title {

    margin: 0;

    color: var(--text);

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;

}



.track-description {

    margin: 4px 0 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.track-date {

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

}



.track-duration {

    color: var(--muted);

    font-size: 12px;

    white-space: nowrap;

}



.audio-state {

    padding: 36px 0;

    color: var(--muted);

    text-align: center;

}



@media (max-width: 760px) {



    .audios-intro {

        padding-top: 65px;

        padding-bottom: 52px;

    }



    .audios-intro h1 {

        font-size: 43px;

    }



    .audios-intro-text {

        font-size: 16px;

    }



    .audios-section {

        padding-top: 45px;

        padding-bottom: 65px;

    }



    .audio-player {

        padding: 18px;

        border-radius: 15px;

    }



    .player-main {

        gap: 14px;

    }



    .player-art {

        width: 58px;

        height: 58px;

        flex-basis: 58px;

        border-radius: 12px;

    }



    .player-art-symbol {

        font-size: 26px;

    }



    .player-controls {

        gap: 8px;

    }



    .volume-control {

        width: 100%;

        margin-left: 0;

    }



    .volume-control input {

        flex: 1;

        width: auto;

    }



    .speed-control {

        margin-left: 0;

    }



    .audio-track {

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

        gap: 10px;

        padding: 12px;

    }



    .track-description {

        white-space: normal;

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 2;

        overflow: hidden;

    }



}



@media (max-width: 420px) {



    .audios-intro h1 {

        font-size: 37px;

    }



    .audio-player {

        padding: 15px;

    }



    .player-progress-row {

        gap: 6px;

    }



    .player-time {

        min-width: 36px;

    }



}




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

   MOBILE CONTENT SIDE SPACING

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



@media (max-width: 760px) {



    .audios-section .page-container {

        width: calc(100% - 24px);

        margin-left: auto;

        margin-right: auto;

    }



}



@media (max-width: 420px) {



    .audios-section .page-container {

        width: calc(100% - 20px);

    }



}




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

   CENTER AUDIO CONTENT ONLY

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



.audios-intro .page-container,

.audios-section .page-container {

    width: min(

        calc(100% - 40px),

        980px

    );



    margin-left: auto;

    margin-right: auto;

}



@media (max-width: 760px) {



    .audios-intro .page-container,

    .audios-section .page-container {

        width: calc(100% - 32px);

    }



}



@media (max-width: 420px) {



    .audios-intro .page-container,

    .audios-section .page-container {

        width: calc(100% - 24px);

    }



}




/* Keep footer at the bottom on short pages */

html {

    min-height: 100%;

}



body {

    min-height: 100vh;

}



main {

    min-height: calc(100vh - 100px);

}



.site-footer {

    background: #eceef4;

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

}



/* 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;



    }



}