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

   WANGYALGYA ABOUT ME 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;



    --content-width: 1180px;



    --radius-large: 18px;

    --radius-medium: 14px;

    --radius-small: 10px;



    --shadow:

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

}





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

   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;



    -webkit-font-smoothing: antialiased;

}





img {

    display: block;

    max-width: 100%;

}





a {

    color: inherit;

    text-decoration: none;

}





button {

    font: inherit;

}





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

   SHARED WIDTH

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



.page-container,

.site-header-inner,

.site-footer-inner {

    width: min(

        calc(100% - 40px),

        var(--content-width)

    );



    margin: 0 auto;

}





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

   SHARED HEADER

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



.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;



    min-height: 76px;



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



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



    backdrop-filter: blur(12px);

}





.site-header-inner {

    min-height: 76px;



    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;



    flex-wrap: wrap;

}





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

}





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

   PAGE INTRO

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



.about-intro {

    padding-top: 92px;

    padding-bottom: 70px;



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

}





.section-eyebrow {

    margin: 0 0 7px;



    color: var(--accent);



    font-size: 12px;

    font-weight: 700;



    letter-spacing: 0.12em;

    text-transform: uppercase;

}





.about-intro h1 {

    margin: 0;



    font-size: clamp(

        42px,

        6vw,

        70px

    );



    line-height: 1.05;



    letter-spacing: -0.04em;

}





.about-intro-text {

    max-width: 640px;



    margin: 20px 0 0;



    color: var(--muted);



    font-size: 18px;

}





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

   PERSONAL INTRODUCTION

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



.about-personal {

    padding-top: 78px;

    padding-bottom: 30px;

}





.personal-layout {

    display: grid;



    grid-template-columns:

        minmax(280px, 0.9fr)

        minmax(0, 1.1fr);



    gap: 72px;



    align-items: center;

}





.personal-photo-container {

    min-height: 420px;



    display: flex;

    align-items: center;

    justify-content: center;



    overflow: hidden;



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

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



    background: #eceef4;



    box-shadow: var(--shadow);

}





.personal-photo-container img {

    width: 100%;

    height: 100%;



    object-fit: cover;

}





.personal-photo-placeholder {

    padding: 30px;



    color: var(--muted);



    font-size: 14px;



    text-align: center;

}





.personal-copy h2 {

    margin: 0;



    font-size: 34px;

    line-height: 1.2;

}





.personal-text {

    max-width: 680px;



    margin-top: 20px;



    color: var(--muted);



    font-size: 16px;

}





.personal-text p {

    margin: 0 0 16px;

}





.personal-text p:last-child {

    margin-bottom: 0;

}





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

   CONTENT SECTIONS

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



.content-section {

    padding-top: 82px;

}





.section-heading {

    margin-bottom: 28px;

}





.section-heading h2 {

    margin: 0;



    font-size: 30px;



    line-height: 1.15;

}





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

   WHAT I DO

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



.what-i-do-grid {

    display: grid;



    grid-template-columns:

        repeat(

            3,

            minmax(0, 1fr)

        );



    gap: 16px;

}





.info-card {

    padding: 24px;



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

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



    background: var(--surface);



    box-shadow: var(--shadow);

}





.info-card h3 {

    margin: 0 0 9px;



    font-size: 20px;

}





.info-card p {

    margin: 0;



    color: var(--muted);



    font-size: 14px;

    line-height: 1.6;

}





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

   JOURNEY

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



.journey-timeline {

    position: relative;



    max-width: 860px;



    margin-top: 12px;

    margin-left: 5px;

}





.journey-timeline::before {

    content: "";



    position: absolute;



    left: 82px;

    top: 5px;

    bottom: 5px;



    width: 1px;



    background: var(--border);

}





.journey-item {

    position: relative;



    display: grid;



    grid-template-columns:

        82px

        minmax(0, 1fr);



    gap: 28px;



    padding-bottom: 42px;

}





.journey-item:last-child {

    padding-bottom: 0;

}





.journey-year {

    position: relative;



    color: var(--text);



    font-size: 14px;

    font-weight: 700;

}





.journey-year::after {

    content: "";



    position: absolute;



    top: 6px;

    right: -34px;



    width: 10px;

    height: 10px;



    border: 3px solid var(--page-bg);

    border-radius: 50%;



    background: var(--accent);



    box-shadow:

        0 0 0 1px var(--accent);

}





.journey-content {

    padding: 21px 22px;



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

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



    background: var(--surface);



    box-shadow: var(--shadow);

}





.journey-content h3 {

    margin: 0 0 7px;



    font-size: 18px;

}





.journey-content p {

    margin: 0;



    color: var(--muted);



    font-size: 14px;

}





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

   INTERESTS

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



.interest-list {

    display: flex;



    flex-wrap: wrap;



    gap: 10px;

}





.interest-item {

    display: inline-flex;

    align-items: center;



    min-height: 38px;



    padding: 7px 14px;



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

    border-radius: 999px;



    background: var(--surface);



    color: var(--text);



    font-size: 13px;

    font-weight: 600;

}





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

   CLOSING

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



.about-closing {

    margin-top: 90px;



    padding-top: 78px;

    padding-bottom: 88px;



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

}





.about-closing h2 {

    margin: 0 0 10px;



    font-size: 34px;

    line-height: 1.2;

}





.about-closing p:not(.section-eyebrow) {

    margin: 0 0 24px;



    color: var(--muted);



    font-size: 16px;

}





.cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    min-height: 44px;



    padding: 10px 22px;



    border-radius: 999px;



    background: var(--accent);

    color: #ffffff;



    font-size: 14px;

    font-weight: 700;



    transition:

        transform 0.2s ease,

        background 0.2s ease;

}





.cta-button:hover {

    transform: translateY(-2px);



    background: #5d4ed0;

}





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

   FOOTER

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



.site-footer {

    margin-top: 0;



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



    .page-container,

    .site-header-inner,

    .site-footer-inner {

        width: min(

            calc(100% - 32px),

            var(--content-width)

        );

    }





    .site-navigation {

        gap: 0;

    }





    .nav-link {

        padding-left: 9px;

        padding-right: 9px;

    }





    .personal-layout {

        grid-template-columns:

            minmax(240px, 0.85fr)

            minmax(0, 1.15fr);



        gap: 42px;

    }





    .personal-photo-container {

        min-height: 360px;

    }



}





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

   RESPONSIVE — MOBILE

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



@media (max-width: 760px) {



    .site-header {

        min-height: 68px;

    }





    .site-header-inner {

        min-height: 68px;



        gap: 12px;

    }





    .mobile-menu-button {

        display: inline-flex;



        flex: 0 0 auto;

    }





    .site-navigation {

        display: none;



        position: absolute;



        left: 16px;

        right: 16px;

        top: 67px;



        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;

    }





    .page-container,

    .site-footer-inner {

        width: calc(100% - 24px);

    }





    .about-intro {

        padding-top: 65px;

        padding-bottom: 52px;

    }





    .about-intro h1 {

        font-size: 43px;

    }





    .about-intro-text {

        font-size: 16px;

    }





    .about-personal {

        padding-top: 55px;

    }





    .personal-layout {

        grid-template-columns: 1fr;



        gap: 32px;

    }





    .personal-photo-container {

        min-height: 310px;

    }





    .personal-copy h2 {

        font-size: 29px;

    }





    .content-section {

        padding-top: 60px;

    }





    .section-heading h2 {

        font-size: 26px;

    }





    .what-i-do-grid {

        grid-template-columns: 1fr;

    }





    .journey-timeline {

        margin-left: 0;

    }





    .journey-timeline::before {

        left: 18px;

    }





    .journey-item {

        grid-template-columns: 1fr;



        gap: 9px;



        padding-left: 42px;

        padding-bottom: 30px;

    }





    .journey-year {

        font-size: 13px;

    }





    .journey-year::before {

        content: "";



        position: absolute;



        left: -29px;

        top: 4px;



        width: 10px;

        height: 10px;



        border: 3px solid var(--page-bg);

        border-radius: 50%;



        background: var(--accent);



        box-shadow:

            0 0 0 1px var(--accent);

    }





    .journey-year::after {

        display: none;

    }





    .journey-content {

        padding: 18px;

    }





    .about-closing {

        margin-top: 70px;



        padding-top: 60px;

        padding-bottom: 70px;

    }





    .about-closing h2 {

        font-size: 29px;

    }





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

    }





    /* Logo above Site Name on mobile */

    .footer-brand {

        flex-direction: column;



        justify-content: center;

        align-items: center;



        gap: 8px;

    }



}





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

   RESPONSIVE — SMALL MOBILE

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



@media (max-width: 420px) {



    .page-container,

    .site-footer-inner {

        width: calc(100% - 20px);

    }





    .site-name {

        font-size: 16px;

    }





    .site-logo {

        width: 35px;

        height: 35px;

    }





    .about-intro h1 {

        font-size: 37px;

    }





    .personal-photo-container {

        min-height: 270px;

    }



}



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



    }



}