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

   WANGYALGYA ARTICLES PAGE

   Clean personal portfolio / editorial style

   Responsive across desktop, tablet, and mobile

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



:root {

    --page-bg: #f7f8fc;

    --surface: #ffffff;

    --text: #171923;

    --muted: #687080;

    --border: #e7e9ef;

    --accent: #6c5ce7;

    --accent-soft: #f0efff;



    --content-width: 900px;



    --radius-large: 18px;

    --radius-medium: 14px;



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

}





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

   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,

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

}





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

   ARTICLES INTRO

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



.articles-intro {

    padding-top: 88px;

    padding-bottom: 68px;



    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;

}





.articles-intro h1 {

    margin: 0;



    font-size: clamp(

        42px,

        6vw,

        68px

    );



    line-height: 1.05;



    letter-spacing: -0.04em;

}





.articles-intro-text {

    max-width: 650px;



    margin: 18px 0 0;



    color: var(--muted);



    font-size: 18px;

}





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

   ARTICLE LIST

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



.articles-section {

    padding-top: 64px;

    padding-bottom: 80px;

}





.section-heading {

    margin-bottom: 24px;

}





.section-heading h2 {

    margin: 0;



    font-size: 27px;

    line-height: 1.2;

}





.article-list {

    display: flex;

    flex-direction: column;



    gap: 14px;

}





.article-card {

    display: grid;



    grid-template-columns:

        minmax(0, 1fr)

        auto;



    align-items: center;



    gap: 28px;



    padding: 24px;



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

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



    background: var(--surface);



    box-shadow: var(--shadow);



    transition:

        transform 0.2s ease,

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}





.article-card:hover {

    transform: translateY(-2px);



    border-color: #d8d2ff;



    box-shadow:

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

}





.article-card-content {

    min-width: 0;

}





.article-card-title {

    margin: 0 0 9px;



    font-size: 21px;



    line-height: 1.3;



    letter-spacing: -0.015em;

}





.article-card-description {

    display: -webkit-box;



    margin: 0;



    overflow: hidden;



    color: var(--muted);



    font-size: 14px;

    line-height: 1.6;



    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

}





.article-card-meta {

    margin-top: 15px;



    color: var(--muted);



    font-size: 12px;

}





.article-card-action {

    display: inline-flex;

    align-items: center;



    gap: 6px;



    white-space: nowrap;



    color: var(--accent);



    font-size: 13px;

    font-weight: 700;

}





.article-card-action:hover {

    color: #5747c8;

}





.article-state {

    padding: 30px 22px;



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

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



    color: var(--muted);



    font-size: 14px;



    text-align: center;

}





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

   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)

        );

    }





    .nav-link {

        padding-left: 9px;

        padding-right: 9px;

    }





    .article-card {

        gap: 22px;

    }



}





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

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

    }





    .articles-intro {

        padding-top: 64px;

        padding-bottom: 50px;

    }





    .articles-intro h1 {

        font-size: 43px;

    }





    .articles-intro-text {

        font-size: 16px;

    }





    .articles-section {

        padding-top: 52px;

        padding-bottom: 65px;

    }





    .section-heading h2 {

        font-size: 24px;

    }





    .article-card {

        grid-template-columns: 1fr;



        gap: 16px;



        padding: 20px;

    }





    .article-card-action {

        justify-self: 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;

    }





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

    }





    .articles-intro h1 {

        font-size: 37px;

    }





    .article-card {

        padding: 18px;

    }





    .article-card-title {

        font-size: 19px;

    }



}




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

   IMAGES PAGE

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



.images-intro {

    padding: 88px 0 56px;

    background: #f7f8fc;

}



.images-intro-text {

    max-width: 700px;

    margin: 14px auto 0;

    color: #687080;

    font-size: 1.05rem;

    line-height: 1.7;

}



.images-section {

    padding: 24px 0 88px;

    background: #f7f8fc;

}



.image-gallery {

    display: grid;

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

    gap: 24px;

}



.image-card {

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e7e9ef;

    border-radius: 18px;

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

    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease;

}



.image-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 34px rgba(23, 25, 35, 0.10);

}



.image-card-link {

    display: block;

    color: inherit;

    text-decoration: none;

}



.image-card-media {

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eef0f5;

}



.image-card-media img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.image-card:hover .image-card-media img {

    transform: scale(1.03);

}



.image-card-content {

    padding: 18px 20px 20px;

}



.image-card-content h3 {

    margin: 0;

    color: #171923;

    font-size: 1.1rem;

    line-height: 1.4;

}



.image-card-content p {

    margin: 8px 0 0;

    color: #687080;

    font-size: 0.95rem;

    line-height: 1.6;

}



.image-state {

    padding: 28px 0;

    color: #687080;

    text-align: center;

}



/* Tablet */

@media (max-width: 900px) {

    .image-gallery {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



/* Mobile */

@media (max-width: 640px) {

    .images-intro {

        padding: 64px 0 42px;

    }



    .images-section {

        padding-bottom: 64px;

    }



    .image-gallery {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .image-card-content {

        padding: 16px 18px 18px;

    }

}




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

   IMAGES PAGE

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



.images-intro {

    padding: 88px 0 56px;

    background: #f7f8fc;

}



.images-intro-text {

    max-width: 700px;

    margin: 14px auto 0;

    color: #687080;

    font-size: 1.05rem;

    line-height: 1.7;

}



.images-section {

    padding: 24px 0 88px;

    background: #f7f8fc;

}



.image-gallery {

    display: grid;

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

    gap: 24px;

}



.image-card {

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e7e9ef;

    border-radius: 18px;

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

    transition:

        transform 0.2s ease,

        box-shadow 0.2s ease;

}



.image-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 34px rgba(23, 25, 35, 0.10);

}



.image-card-link {

    display: block;

    color: inherit;

    text-decoration: none;

}



.image-card-media {

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eef0f5;

}



.image-card-media img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.image-card:hover .image-card-media img {

    transform: scale(1.03);

}



.image-card-content {

    padding: 18px 20px 20px;

}



.image-card-content h3 {

    margin: 0;

    color: #171923;

    font-size: 1.1rem;

    line-height: 1.4;

}



.image-card-content p {

    margin: 8px 0 0;

    color: #687080;

    font-size: 0.95rem;

    line-height: 1.6;

}



.image-state {

    padding: 28px 0;

    color: #687080;

    text-align: center;

}



@media (max-width: 900px) {

    .image-gallery {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 640px) {

    .images-intro {

        padding: 64px 0 42px;

    }



    .images-section {

        padding-bottom: 64px;

    }



    .image-gallery {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .image-card-content {

        padding: 16px 18px 18px;

    }

}




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

html {

    min-height: 100%;

}



body {

    min-height: 100vh;

}



main {

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

}



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



    }



}