*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    -webkit-text-size-adjust:100%;
}


body{

    background:#000;

    color:#fff;

    font-family:
        "Inter",
        "Noto Sans SC",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size:15px;

    line-height:1.75;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


a{
    color:inherit;
}



/* =========================
   GLOBAL TYPOGRAPHY
   ========================= */


h1,
h2,
h3{
    font-weight:500;
}


p{
    line-height:1.75;
}


hr{

    border:0;

    border-top:1px solid rgba(255,255,255,0.22);

    margin:36px 0;

}



/* =========================
   HOMEPAGE
   ========================= */


.hero{

    min-height:100vh;
    min-height:100svh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:60px 40px;

}


.logo{

    width:120px;

    margin-bottom:38px;

}


.hero h1{

    width:100%;

    text-align:center;

    font-size:34px;

    font-weight:600;

    line-height:1.2;

    letter-spacing:6px;

    margin-bottom:14px;

}


.since{

    font-size:13px;

    color:#888;

    letter-spacing:4px;

    line-height:1.4;

    margin-bottom:58px;

}


.menu{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:17px;

}


.menu a{

    color:#888;

    text-decoration:none;

    font-size:17px;

    line-height:1.2;

    letter-spacing:2px;

    transition:color 0.25s ease;

}


.menu a:hover{
    color:#fff;
}



/* =========================
   ARCHIVE LIST
   ========================= */


.archive{

    min-height:100vh;
    min-height:100svh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:80px 40px;

}


.archive h1{

    text-align:center;

    font-size:20px;

    font-weight:400;

    line-height:1.3;

    letter-spacing:2px;

    margin-bottom:60px;

}


.years{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    text-align:center;

}


.years a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:400;

    line-height:1.4;

    letter-spacing:0.5px;

    transition:opacity 0.25s ease;

}


.years a:hover{
    opacity:0.45;
}



/* =========================
   ARCHIVE DETAIL
   ========================= */


.archive-page{

    min-height:100vh;
    min-height:100svh;

    padding:50px 40px 90px;

}


.archive-header{

    font-size:13px;

    line-height:1.4;

    letter-spacing:1.5px;

    margin-bottom:56px;

}


.archive-header a{

    color:#fff;

    text-decoration:none;

    transition:opacity 0.25s ease;

}


.archive-header a:hover{
    opacity:0.5;
}


.archive-detail{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:72px;

    max-width:1000px;

    margin:auto;

}


.archive-poster{
    width:32%;
}


.archive-poster img{

    width:100%;

    height:auto;

    display:block;

}


.archive-text{

    width:45%;

    max-width:420px;

}


.archive-text h1{

    font-size:32px;

    font-weight:500;

    line-height:1.2;

    letter-spacing:4px;

    margin-bottom:34px;

}


.archive-text p{

    font-size:15px;

    line-height:1.75;

    margin-bottom:18px;

}


.archive-text p:last-child{
    margin-bottom:0;
}


.archive-text .chinese,
.archive-text .english{
    width:100%;
}



/* =========================
   GALLERY BUTTON
   ========================= */


.archive-gallery{
    margin-top:42px;
}


.archive-gallery a{

    display:inline-block;

    color:#888;

    text-decoration:none;

    border:1px solid #3d3d3d;

    padding:10px 18px;

    font-size:13px;

    line-height:1.2;

    letter-spacing:1.8px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;

}


.archive-gallery a:hover{

    color:#fff;

    border-color:#fff;

}



/* =========================
   SITE MENU
   ========================= */


.site-menu{

    position:absolute;

    top:50px;

    right:50px;

    z-index:999;

}



/* =========================
   HAMBURGER BUTTON
   ========================= */


.site-menu > #menu-button{

    width:30px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    color:#fff;

    text-decoration:none;

    font-size:0;

    line-height:1;

    letter-spacing:0;

    cursor:pointer;

}



/* middle line */

.menu-icon{

    position:relative;

    display:block;

    width:28px;

    height:1px;

    background:#fff;

    transition:
        background 0.25s ease;

}



/* top + bottom lines */

.menu-icon::before,
.menu-icon::after{

    content:"";

    position:absolute;

    left:0;

    width:28px;

    height:1px;

    background:#fff;

    transition:
        transform 0.3s ease,
        top 0.3s ease,
        background 0.25s ease;

}


.menu-icon::before{
    top:-8px;
}


.menu-icon::after{
    top:8px;
}



/* =========================
   MENU OPEN → X
   ========================= */


.site-menu.open .menu-icon{
    background:transparent;
}


.site-menu.open .menu-icon::before{

    top:0;

    transform:rotate(45deg);

}


.site-menu.open .menu-icon::after{

    top:0;

    transform:rotate(-45deg);

}



/* =========================
   MENU ICON HOVER
   ========================= */


@media (hover:hover) and (pointer:fine){

    .site-menu > #menu-button:hover .menu-icon,
    .site-menu > #menu-button:hover .menu-icon::before,
    .site-menu > #menu-button:hover .menu-icon::after{

        background:#888;

    }


    .site-menu.open > #menu-button:hover .menu-icon{

        background:transparent;

    }

}



/* =========================
   MENU DROPDOWN
   ========================= */


.menu-list{

    display:none;

    margin-top:26px;

    flex-direction:column;

    align-items:flex-end;

    gap:16px;

}


.menu-list a{

    color:#fff;

    text-decoration:none;

    font-size:17px;

    font-weight:400;

    line-height:1.2;

    letter-spacing:2px;

    transition:opacity 0.25s ease;

}


.menu-list a:hover{
    opacity:0.5;
}



/* =========================
   FESTIVAL PAGE
   ========================= */


.festival-container{

    max-width:900px;

    margin:0 auto;

    padding:140px 40px 120px;

    text-align:center;

}


.festival-item{
    margin-bottom:90px;
}


.festival-item:last-child{
    margin-bottom:0;
}


.festival-item h2{

    font-size:30px;

    font-weight:500;

    line-height:1.45;

}


.content{

    max-width:620px;

    margin:0 auto;

    text-align:center;

    font-size:16px;

    line-height:1.85;

    opacity:0;

    max-height:0;

    overflow:hidden;

    transition:
        opacity 0.45s ease,
        max-height 0.7s ease,
        transform 0.45s ease,
        margin 0.45s ease;

}


.content p{

    margin-bottom:20px;

    line-height:1.85;

}


.content p:last-child{
    margin-bottom:0;
}


.content a{
    color:#fff;
}



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


@media(max-width:800px){


    body{
        font-size:15px;
    }



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


    .hero{
        padding:40px 20px;
    }


    .hero h1{

        font-size:28px;

        letter-spacing:3px;

        margin-bottom:12px;

    }


    .since{

        font-size:12px;

        margin-bottom:50px;

    }


    .menu{
        gap:16px;
    }


    .menu a{
        font-size:17px;
    }



    /* =========================
       ARCHIVE LIST MOBILE
       ========================= */


    .archive{

        padding:80px 20px 60px;

    }


    .archive h1{

        font-size:18px;

        margin-bottom:50px;

    }


    .years{
        gap:17px;
    }


    .years a{
        font-size:16px;
    }



    /* =========================
       ARCHIVE DETAIL MOBILE
       ========================= */


    .archive-page{

        padding:30px 20px 70px;

    }


    .archive-header{
        margin-bottom:44px;
    }


    .archive-detail{

        flex-direction:column;

        gap:42px;

    }


    .archive-poster,
    .archive-text{

        width:100%;

        max-width:none;

    }


    .archive-text h1{

        text-align:left;

        font-size:28px;

        letter-spacing:3px;

        margin-bottom:28px;

    }


    .archive-text p{

        font-size:15px;

        line-height:1.75;

        margin-bottom:17px;

    }


    .archive-text hr{
        margin:32px 0;
    }


    .archive-gallery{
        margin-top:36px;
    }



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


    .festival-container{

        margin:0 auto;

        padding:120px 22px 80px;

    }


    .festival-item{
        margin-bottom:75px;
    }


    .festival-item h2{
        font-size:26px;
    }



    /* =========================
       MOBILE FULLSCREEN MENU
       ========================= */


    .site-menu{

        position:fixed;

        top:0;

        right:0;

        z-index:9999;

    }


    .site-menu > #menu-button{

        position:fixed;

        top:30px;

        right:24px;

        width:30px;

        height:22px;

        z-index:10001;

    }


    .menu-list{

        position:fixed;

        top:0;

        left:0;

        width:100vw;

        height:100vh;
        height:100svh;

        margin:0;

        padding:0;

        background:#000;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:26px;

        z-index:10000;

    }


    .menu-list a{

        color:#fff;

        font-size:22px;

        font-weight:400;

        line-height:1.2;

        letter-spacing:2px;

    }


}