/* =========================
   GENERAL
========================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: #ffffff;

    color: #111111;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

}


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

.portfolio-header {

    max-width: 1100px;

    margin: 0 auto;

    padding:
        70px
        30px
        50px;

}


.back-container {
    width: 100%;

    display: flex;

    justify-content: center;

    padding:
        20px
        20px
        80px;
}


.back-link {

    color: #111111;

    text-decoration: none;

    font-size: 20px;

    font-weight: bold;

}


.back-link:hover {

    text-decoration: underline;

}


.portfolio-header h1 {

    margin: 0 0 15px;

    font-family: "Abril Fatface", serif;

    font-size: clamp(
        42px,
        7vw,
        72px
    );

    font-weight: normal;

}


.header-description {

    margin: 0;

    font-size: 18px;

    line-height: 1.6;

}


/* =========================
   PORTFOLIO
========================= */

.portfolio {

    max-width: 1100px;

    margin: 0 auto;

    padding:
        0 30px
        100px;

}


/* =========================
   ARTWORK
========================= */

.artwork {

    margin-bottom: 130px;

}


.artwork-image {
    width: 100%;

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

    margin-bottom: 35px;

    position: relative;
}

.artwork-image::after {
    content: "JIANNA SHAO";

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-25deg);

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: clamp(
        28px,
        5vw,
        70px
    );

    font-weight: bold;

    letter-spacing: 4px;

    color: rgba(
        255,
        255,
        255,
        0.28
    );

    text-shadow:
        0 1px 3px rgba(
            0,
            0,
            0,
            0.25
        );

    pointer-events: none;

    z-index: 2;

    white-space: nowrap;
}


.artwork-image img {

    display: block;

    max-width: 100%;

    max-height: 750px;

    width: auto;

    height: auto;

    object-fit: contain;

}


/* =========================
   ARTWORK INFORMATION
========================= */

.artwork-info {

    max-width: 750px;

}


.artwork-info h2 {

    margin: 0 0 8px;

    font-family: "Abril Fatface", serif;

    font-size: 32px;

    font-weight: normal;

}


.artwork-subtitle {

    margin: 0 0 22px;

    font-size: 15px;

    color: #555555;

}


.artwork-description {

    margin: 0;

    font-size: 17px;

    line-height: 1.7;

}

.artwork-image {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}


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

@media (max-width: 700px) {

    .portfolio-header {

        padding:
            40px
            20px
            40px;

    }



    .portfolio {

        padding:
            0
            20px
            60px;

    }


    .artwork {

        margin-bottom: 90px;

    }


    .artwork-image {

        margin-bottom: 25px;

    }


    .artwork-image img {

        max-height: none;

        width: 100%;

        height: auto;

    }


    .artwork-info h2 {

        font-size: 27px;

    }


    .artwork-description {

        font-size: 16px;

        line-height: 1.65;

    }

}


/* =====================================================
   INDEX-ALIGNED ART PORTFOLIO
===================================================== */
:root{
    --navy:#14253d;
    --navy2:#263b58;
    --muted:#667080;
    --cream:#fafafa;
    --accent:#4c6170;
    --sidebar-rail:58px;
    --sidebar-full:200px;
}

html{
    scroll-behavior:smooth;
    scrollbar-width:none;
}
::-webkit-scrollbar{width:0;height:0;display:none}

body{
    margin:0;
    padding-left:var(--sidebar-rail) !important;
    background:var(--cream) !important;
    color:var(--navy) !important;
    font-family:'Work Sans',Arial,sans-serif !important;
    font-size:16px !important;
}

h1,h2,h3{
    font-family:'DM Serif Display',Georgia,serif !important;
    color:var(--navy) !important;
    font-weight:400 !important;
}

.portfolio-header,
.portfolio{
    width:min(1152px,calc(100% - 96px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.portfolio-header{
    padding-top:90px !important;
    padding-bottom:70px !important;
}

.portfolio-header h1{
    font-size:clamp(68px,10vw,136px) !important;
    line-height:.86 !important;
    letter-spacing:-.03em !important;
    margin:0 0 28px !important;
}

.header-description{
    color:var(--muted) !important;
    font-size:15px !important;
    line-height:1.75 !important;
    font-weight:300 !important;
}

.artwork-info{
    max-width:750px !important;
}

.artwork-info h2{
    font-size:clamp(38px,5vw,56px) !important;
    line-height:1 !important;
    margin:0 0 12px !important;
}

.artwork-subtitle{
    color:var(--accent) !important;
    font-size:14px !important;
    letter-spacing:.08em !important;
    font-weight:500 !important;
}

.artwork-description{
    color:var(--muted) !important;
    font-size:15px !important;
    line-height:1.75 !important;
    font-weight:300 !important;
}

/* Rounded like index, but intentionally STATIC — no hover scaling. */
.artwork-image,
.artwork-image img{
    border-radius:14px !important;
}
.artwork-image img{
    transform:none !important;
    transition:none !important;
}
.artwork-image:hover img{
    transform:none !important;
}

/* Keep artwork non-interactive exactly as requested. */
.artwork-image{
    pointer-events:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
}

/* Sidebar */
.side-nav{
    position:fixed !important;left:0 !important;top:0 !important;bottom:0 !important;
    width:var(--sidebar-rail) !important;background:#e8ebea !important;
    border-right:1px solid rgba(66,82,77,.12) !important;z-index:6000 !important;
    overflow:hidden !important;transition:width .24s ease !important;pointer-events:auto !important;
}
.side-nav::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:2px;
    background:#fff;pointer-events:none;z-index:0;
}
.side-nav.hover-open{width:var(--sidebar-full) !important}
.side-nav-inner{
    position:relative;z-index:1;height:100% !important;width:var(--sidebar-full) !important;
    padding:24px 8px 28px !important;overflow:hidden !important;
}
.side-brand{
    display:block !important;width:42px !important;height:42px !important;margin:0 0 56px 0 !important;
    color:#42524d;text-decoration:none;transform-origin:center center !important;
    transition:transform .18s ease !important;
}
.side-logo{
    width:42px;height:42px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
}
.side-links{
    display:flex !important;flex-direction:column !important;gap:0 !important;width:170px !important;
    padding-left:14px !important;opacity:0 !important;pointer-events:none !important;
    transform:translateX(-8px) !important;transition:opacity .16s ease .04s,transform .2s ease !important;
    white-space:nowrap;
}
.side-nav.hover-open .side-links{opacity:1 !important;pointer-events:auto !important;transform:none !important}
.side-nav-item{width:100%;margin:0 0 30px 0}
.side-nav-item:last-child{margin-bottom:0}
.side-main-link,.side-dropdown-toggle{
    width:100%;min-height:24px;padding:0;border:0;background:transparent;color:#42524d !important;
    font-family:'Work Sans',Arial,sans-serif !important;font-size:16px !important;font-weight:400;
    line-height:1.35;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;
    transition:color .16s ease,transform .18s ease !important;
}
.side-dropdown-toggle{display:flex;align-items:center;justify-content:space-between;padding-right:15px}
.side-main-link:hover,.side-dropdown-toggle:hover{color:#fff !important;transform:translateX(4px) !important}
.side-dropdown-arrow{display:inline-block;font-size:18px;line-height:1;transition:transform .22s ease}
.side-dropdown.is-open .side-dropdown-arrow{transform:rotate(180deg)}
.side-submenu-wrap{
    display:grid;grid-template-rows:0fr;opacity:0;
    transition:grid-template-rows .26s ease,opacity .18s ease,margin-top .26s ease;margin-top:0;
}
.side-dropdown.is-open .side-submenu-wrap{grid-template-rows:1fr;opacity:1;margin-top:13px}
.side-submenu{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:11px;padding-left:12px}
.side-submenu a{
    display:block;color:#42524d !important;font-family:'Work Sans',Arial,sans-serif !important;
    font-size:14px !important;line-height:1.3;text-decoration:none;white-space:nowrap;opacity:.82;
    transition:color .16s ease,transform .18s ease,opacity .16s ease !important;
}
.side-submenu a:hover{color:#fff !important;opacity:1;transform:translateX(4px) !important}
@media (hover:hover) and (pointer:fine){.side-brand:hover{transform:scale(1.10) !important}}

/* Scrolling snake */
.scroll-snake{
    display:block !important;visibility:visible !important;opacity:1 !important;
    position:fixed !important;top:8px !important;bottom:8px !important;right:12px !important;
    width:48px !important;height:auto !important;z-index:5500 !important;
    pointer-events:none !important;overflow:visible !important;
}
.scroll-snake svg{display:block !important;width:48px !important;height:100% !important;overflow:visible !important}
#snake-ghost,#snake-path{
    display:block !important;fill:none !important;stroke-width:4.5 !important;
    vector-effect:non-scaling-stroke !important;stroke-linecap:round !important;stroke-linejoin:round !important;
}
#snake-ghost{stroke:#d5dfdc !important;opacity:1 !important}
#snake-path{stroke:#42524d !important;opacity:1 !important;stroke-dasharray:1;stroke-dashoffset:1}

@media(max-width:700px){
    :root{--sidebar-rail:54px;--sidebar-full:176px}
    .portfolio-header,.portfolio{width:calc(100% - 72px) !important}
    .portfolio-header{padding-top:70px !important;padding-bottom:50px !important}
    .portfolio-header h1{font-size:76px !important}
    .artwork-info h2{font-size:38px !important}
    .scroll-snake{right:7px !important;width:38px !important}
    .scroll-snake svg{width:38px !important}
}
@media(max-width:500px){.portfolio-header h1{font-size:64px !important}}