/* =========================================================
   01. 基礎設定
   ========================================================= */

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


html,
body {
    width: 100%;
    min-height: 100%;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        "Noto Serif TC",
        "PingFang TC",
        "Microsoft JhengHei",
        serif;

    background: #f7f3ef;

    color: #ffffff;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
}



/* =========================================================
   02. 首頁 HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 650px;

    overflow: hidden;

    background-image:
        url("images/home-bg.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* =========================================================
   03. 首頁背景遮罩
   ========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(30, 25, 20, 0.16) 0%,
            rgba(30, 25, 20, 0.04) 35%,
            rgba(30, 25, 20, 0.10) 70%,
            rgba(30, 25, 20, 0.22) 100%
        );
}



/* =========================================================
   04. 首頁導覽列
   ========================================================= */

.navbar {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 100;

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        28px
        4.5%;
}



/* =========================================================
   05. 首頁 LOGO
   ========================================================= */

.logo {
    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.logo img {
    display: block;

    width: 185px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 2px 8px rgba(0, 0, 0, 0.18)
        );
}



/* 大螢幕 Logo */

@media (min-width: 1400px) {

    .logo img {
        width: 205px;
    }

}



/* =========================================================
   06. 桌機導覽選單
   ========================================================= */

.nav-links {
    display: flex;

    align-items: center;

    gap: 34px;
}


.nav-links a {
    position: relative;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.08em;

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

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.28);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.nav-links a:hover {
    opacity: 0.7;

    transform:
        translateY(-2px);
}



/* =========================================================
   07. 手機選單按鈕
   桌機先隱藏
   ========================================================= */

.menu-toggle,
.menu-backdrop {
    display: none;
}



/* =========================================================
   08. 首頁中央內容
   ========================================================= */

.hero-content {
    position: absolute;

    top: 56%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    z-index: 5;

    width:
        min(90%, 760px);

    text-align: center;

    color: #ffffff;

    text-shadow:
        0 3px 18px rgba(0, 0, 0, 0.30);
}


.hero-eyebrow {
    margin-bottom: 18px;

    font-family:
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.42em;

    color:
        rgba(255, 255, 255, 0.90);
}


.hero-content h1 {
    margin-bottom: 18px;

    font-size:
        clamp(30px, 3vw, 48px);

    font-weight: 600;

    letter-spacing: 0.16em;
}


.hero-description {
    margin-bottom: 28px;

    font-size: 15px;

    letter-spacing: 0.10em;

    line-height: 1.9;

    color:
        rgba(255, 255, 255, 0.92);
}



/* =========================================================
   09. 首頁按鈕
   ========================================================= */

.hero-button {
    display: inline-flex;

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

    min-width: 155px;

    padding:
        12px
        22px;

    border:
        1px solid rgba(255, 255, 255, 0.75);

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

    backdrop-filter:
        blur(7px);

    -webkit-backdrop-filter:
        blur(7px);

    font-size: 12px;

    letter-spacing: 0.12em;

    color: #ffffff;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.hero-button:hover {
    background:
        rgba(255, 255, 255, 0.88);

    color: #5c5048;

    transform:
        translateY(-2px);
}



/* =========================================================
   10. ABOUT PAGE
   ========================================================= */

.about-page {
    position: relative;

    min-height: 100vh;

    color: #4e4742;

    background-image:
        linear-gradient(
            rgba(250, 246, 242, 0.72),
            rgba(250, 246, 242, 0.82)
        ),
        url("images/about-bg.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;
}



/* =========================================================
   11. ABOUT 導覽列
   ========================================================= */

.sub-navbar {
    position: sticky;

    top: 0;

    z-index: 100;

    width: 100%;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        22px
        5%;

    background:
        rgba(247, 243, 239, 0.92);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid rgba(100, 85, 75, 0.08);
}



/* =========================================================
   12. ABOUT LOGO
   ========================================================= */

.sub-logo {
    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.sub-logo img {
    display: block;

    width: 180px;
    height: auto;

    object-fit: contain;
}


@media (min-width: 1400px) {

    .sub-logo img {
        width: 195px;
    }

}



/* =========================================================
   13. ABOUT 導覽連結
   ========================================================= */

.sub-nav-links {
    display: flex;

    gap: 32px;

    align-items: center;
}


.sub-nav-links a {
    position: relative;

    font-size: 13px;

    letter-spacing: 0.08em;

    color: #756b64;

    transition:
        color 0.3s ease;
}


.sub-nav-links a:hover {
    color: #403934;
}


.sub-nav-links a.active {
    color: #403934;
}


.sub-nav-links a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 18px;
    height: 1px;

    background: #796c64;

    transform:
        translateX(-50%);
}



/* =========================================================
   14. ABOUT 開場
   ========================================================= */

.about-intro {
    max-width: 800px;

    margin:
        0 auto;

    padding:
        110px
        30px
        120px;

    text-align: center;
}


.section-eyebrow {
    margin-bottom: 22px;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.42em;

    color: #a6978d;
}


.about-intro h1 {
    margin-bottom: 28px;

    font-size:
        clamp(34px, 5vw, 64px);

    font-weight: 500;

    letter-spacing: 0.12em;

    color: #4e443e;
}


.about-lead {
    max-width: 600px;

    margin:
        0 auto;

    font-size: 15px;

    line-height: 2.3;

    letter-spacing: 0.10em;

    color: #847870;
}



/* =========================================================
   15. ABOUT 人物區
   ========================================================= */

.about-creators {
    width:
        min(1180px, 90%);

    margin:
        0 auto;

    display: flex;

    flex-direction: column;

    gap: 150px;

    padding-bottom: 160px;
}


.about-card {
    display: grid;

    grid-template-columns:
        minmax(300px, 480px)
        minmax(280px, 1fr);

    align-items: center;

    gap:
        clamp(50px, 8vw, 120px);
}



/* 第二組反向 */

.about-card.reverse .about-image-wrap {
    order: 2;
}


.about-card.reverse .about-card-content {
    order: 1;

    text-align: right;

    margin-left: auto;
}



/* =========================================================
   16. ABOUT 人物圖片
   ★ 固定 3:4 ★
   ========================================================= */

.about-image-wrap {
    width: 100%;

    aspect-ratio:
        3 / 4;

    overflow: hidden;

    background: #e8dfd8;

    box-shadow:
        0 24px 60px
        rgba(83, 66, 55, 0.12);
}


.about-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    transition:
        transform 0.8s ease;
}


.about-image-wrap:hover .about-image {
    transform:
        scale(1.025);
}



/* ======================================
   ABOUT 人物文字
====================================== */

.about-card-content {
    width: 100%;
    max-width: 560px;

    text-align: left;
}


/* 第二位不要再靠右 */
.about-card.reverse .about-card-content {
    order: 1;

    text-align: left;

    margin-left: 0;
}


/* 編號 */

.about-number {
    margin-bottom: 18px;

    font-family:
        Georgia,
        serif;

    font-size: 12px;

    letter-spacing: 0.25em;

    color: #c2b2a7;
}


/* 名字 */

.about-card-content h2 {
    margin-bottom: 12px;

    font-size:
        clamp(36px, 4vw, 54px);

    font-weight: 500;

    line-height: 1.25;

    letter-spacing: 0.10em;

    color: #4c423d;
}


/* 英文職稱 */

.about-role {
    margin-bottom: 38px;

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.6;

    letter-spacing: 0.30em;

    color: #aaa099;
}


/* 主要文案 */

.about-text {
    margin-bottom: 24px;

    max-width: 520px;

    font-size: 17px;

    line-height: 2;

    letter-spacing: 0.06em;

    color: #625750;
}


/* 次要介紹 */

.about-description {
    max-width: 520px;

    font-size: 14px;

    line-height: 2.1;

    letter-spacing: 0.045em;

    color: #8a7e76;
}

/* =========================================================
   18. 品牌故事
   ========================================================= */

.brand-story {
    padding:
        140px
        30px;

    background:
        rgba(238, 231, 225, 0.96);
}


.brand-story-inner {
    max-width: 720px;

    margin:
        0 auto;

    text-align: center;
}


.brand-story h2 {
    margin-bottom: 30px;

    font-size:
        clamp(32px, 4vw, 50px);

    font-weight: 500;

    letter-spacing: 0.18em;

    color: #514740;
}


.brand-line {
    width: 1px;
    height: 55px;

    margin:
        0 auto
        40px;

    background: #c6b5a9;
}


.brand-story p {
    margin-bottom: 18px;

    font-size: 14px;

    line-height: 2.4;

    letter-spacing: 0.08em;

    color: #756a63;
}


.brand-story .brand-ending {
    margin-top: 42px;

    font-size: 15px;

    color: #514740;
}



/* =========================================================
   19. FOOTER
   ========================================================= */

.site-footer {
    padding: 36px;

    text-align: center;

    background: #49413d;

    color:
        rgba(255, 255, 255, 0.60);
}


.site-footer p {
    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.32em;
}



/* =========================================================
   20. 手機版首頁
   ========================================================= */

@media (max-width: 768px) {


    /* -------------------------------------
       手機專用封面
       ------------------------------------- */

    .hero {
        width: 100%;

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

        background-image:
            linear-gradient(
                rgba(45, 35, 30, 0.06),
                rgba(45, 35, 30, 0.16)
            ),
            url("images/home-mobile.jpg");

        background-size: cover;

        background-position:
            center center;

        background-repeat: no-repeat;
    }



    /* -------------------------------------
       手機遮罩
       ------------------------------------- */

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(35, 28, 25, 0.18) 0%,
                rgba(35, 28, 25, 0.02) 30%,
                rgba(35, 28, 25, 0.04) 52%,
                rgba(35, 28, 25, 0.22) 100%
            );
    }



    /* -------------------------------------
       手機首頁導覽列
       ------------------------------------- */

    .navbar {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;

        padding:
            max(20px, env(safe-area-inset-top))
            22px
            16px;
    }



    /* -------------------------------------
       手機 Logo
       ------------------------------------- */

    .logo {
        position: relative;

        z-index: 102;
    }


    .logo img {
        width: 120px;
    }



    /* -------------------------------------
       漢堡按鈕
       ------------------------------------- */

    .menu-toggle {
        position: relative;

        z-index: 102;

        display: flex;

        width: 42px;
        height: 42px;

        padding: 0;

        flex-direction: column;

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

        gap: 6px;

        border:
            1px solid rgba(255, 255, 255, 0.45);

        border-radius: 50%;

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

        backdrop-filter:
            blur(10px);

        -webkit-backdrop-filter:
            blur(10px);

        cursor: pointer;
    }


    .menu-toggle span {
        display: block;

        width: 18px;
        height: 1px;

        background: #ffffff;

        transition:
            transform 0.35s ease,
            opacity 0.25s ease;
    }


    .menu-toggle.active span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }


    .menu-toggle.active span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }



    /* -------------------------------------
       手機側邊選單
       ------------------------------------- */

    .nav-links {
        position: fixed;

        top: 0;
        right: 0;

        z-index: 101;

        width:
            min(78vw, 330px);

        height: 100svh;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 0;

        padding:
            90px
            42px
            60px;

        background:
            rgba(239, 228, 220, 0.94);

        backdrop-filter:
            blur(22px);

        -webkit-backdrop-filter:
            blur(22px);

        box-shadow:
            -20px 0 60px
            rgba(55, 42, 35, 0.12);

        transform:
            translateX(105%);

        visibility: hidden;

        transition:
            transform 0.45s
            cubic-bezier(.77, 0, .18, 1),
            visibility 0.45s;
    }


    .nav-links.active {
        transform:
            translateX(0);

        visibility: visible;
    }


    .nav-links a {
        width: 100%;

        padding:
            17px 0;

        font-size: 16px;

        font-weight: 500;

        letter-spacing: 0.16em;

        color: #65564f;

        text-shadow: none;

        border-bottom:
            1px solid
            rgba(105, 87, 78, 0.12);

        white-space: nowrap;

        opacity: 1;

        transform: none;

        transition:
            color 0.25s ease,
            padding-left 0.25s ease;
    }


    .nav-links a:hover {
        color: #a87872;

        padding-left: 8px;

        opacity: 1;

        transform: none;
    }



    /* -------------------------------------
       手機暗幕
       ------------------------------------- */

    .menu-backdrop {
        position: fixed;

        inset: 0;

        z-index: 99;

        display: block;

        background:
            rgba(35, 27, 24, 0.34);

        backdrop-filter:
            blur(2px);

        -webkit-backdrop-filter:
            blur(2px);

        opacity: 0;

        visibility: hidden;

        transition:
            opacity 0.35s ease,
            visibility 0.35s;
    }


    .menu-backdrop.active {
        opacity: 1;

        visibility: visible;
    }



    /* -------------------------------------
       手機首頁文字
       ------------------------------------- */

    .hero-content {
        top: 68%;

        width: 88%;

        max-width: 500px;

        text-shadow:
            0 2px 8px
            rgba(55, 40, 34, 0.34),

            0 6px 22px
            rgba(55, 40, 34, 0.18);
    }


    .hero-eyebrow {
        margin-bottom: 18px;

        font-size: 9px;

        letter-spacing: 0.38em;
    }


    .hero-content h1 {
        margin-bottom: 20px;

        font-size:
            clamp(32px, 9vw, 40px);

        line-height: 1.25;

        letter-spacing: 0.14em;
    }


    .hero-description {
        margin-bottom: 30px;

        font-size: 14px;

        line-height: 2;

        letter-spacing: 0.08em;
    }


    .hero-button {
        min-width: 170px;

        padding:
            14px
            25px;

        font-size: 13px;
    }



    /* =====================================================
       ABOUT 手機版
       ===================================================== */

    .about-page {
        background-attachment: scroll;
    }


    .sub-navbar {
        padding:
            18px
            20px;

        align-items: center;
    }


    .sub-logo img {
        width: 110px;
    }


    .sub-nav-links {
        max-width: 250px;

        gap:
            10px
            14px;

        flex-wrap: wrap;

        justify-content: flex-end;
    }


    .sub-nav-links a {
        font-size: 10px;

        white-space: nowrap;
    }


    .sub-nav-links a.active::after {
        bottom: -5px;
    }



    /* -------------------------------------
       ABOUT 開場
       ------------------------------------- */

    .about-intro {
        padding:
            80px
            25px
            90px;
    }


    .about-intro h1 {
        font-size:
            clamp(32px, 9vw, 44px);
    }


    .about-lead {
        font-size: 14px;

        line-height: 2.2;
    }



    /* -------------------------------------
       ABOUT 人物
       ------------------------------------- */

    .about-creators {
        width: 88%;

        gap: 100px;

        padding-bottom: 100px;
    }


    .about-card {
        display: flex;

        flex-direction: column;

        gap: 38px;
    }


    .about-card.reverse .about-image-wrap,
    .about-card.reverse .about-card-content {
        order: initial;
    }


    .about-card.reverse .about-card-content {
        margin-left: 0;

        text-align: left;
    }



    /* ★ 手機一樣固定 3:4 ★ */

    .about-image-wrap {
        width:
            min(100%, 420px);

        margin:
            0 auto;

        aspect-ratio:
            3 / 4;
    }


    .about-card-content {
        width: 100%;

        max-width: none;
    }


    .about-text {
        font-size: 16px;
    }


    .about-description {
        font-size: 14px;
    }



    /* -------------------------------------
       品牌故事
       ------------------------------------- */

    .brand-story {
        padding:
            100px
            25px;
    }

}


/* =========================================================
   21. 小尺寸手機
   ========================================================= */

@media (max-width: 430px) {

    .navbar {
        padding-left: 18px;
        padding-right: 18px;
    }


    .logo img {
        width: 108px;
    }


    .menu-toggle {
        width: 40px;
        height: 40px;
    }


    .nav-links {
        width: 80vw;

        padding-left: 36px;
        padding-right: 36px;
    }


    .hero-content {
        top: 69%;

        width: 90%;
    }


    .hero-content h1 {
        font-size: 34px;
    }


    .hero-description {
        font-size: 13px;
    }


    /* ABOUT */

    .sub-navbar {
        padding:
            16px
            16px;
    }


    .sub-logo img {
        width: 100px;
    }


    .sub-nav-links {
        max-width: 220px;

        gap:
            8px
            11px;
    }


    .sub-nav-links a {
        font-size: 9px;
    }


    .about-creators {
        width: 90%;
    }


    .about-image-wrap {
        width: 100%;

        aspect-ratio: 3 / 4;
    }


    .brand-story {
        padding:
            80px
            22px;
    }

}


/* =========================================================
   22. ABOUT 社群 ICON
   ========================================================= */

.about-socials {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;

    margin-top: 28px;
}


.about-social-icon {
    display: flex;

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

    width: 32px;
    height: 32px;

    min-width: 32px;
    min-height: 32px;

    max-width: 32px;
    max-height: 32px;

    padding: 0;
    margin: 0;

    border: none;

    background: transparent;

    overflow: hidden;

    cursor: pointer;
}


.about-social-icon img {
    display: block;

    width: 28px !important;
    height: 28px !important;

    min-width: 28px !important;
    min-height: 28px !important;

    max-width: 28px !important;
    max-height: 28px !important;

    object-fit: contain !important;

    padding: 0 !important;
    margin: 0 !important;

    opacity: 0.75;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.about-social-icon:hover img {
    opacity: 1;

    transform: scale(1.08);
}


/* 眠音也統一靠左 */

.about-card.reverse .about-socials {
    align-items: flex-start;
}


/* =========================================================
   23. ABOUT 社群 ICON 手機版
   ========================================================= */

@media (max-width: 768px) {

    .about-socials {
        gap: 12px;

        margin-top: 26px;
    }


    .about-social-icon {
        width: 30px;
        height: 30px;

        min-width: 30px;
        min-height: 30px;

        max-width: 30px;
        max-height: 30px;
    }


    .about-social-icon img {
        width: 26px !important;
        height: 26px !important;

        min-width: 26px !important;
        min-height: 26px !important;

        max-width: 26px !important;
        max-height: 26px !important;
    }


    .about-card-content,
    .about-card.reverse .about-card-content {
        text-align: left;
    }


    .about-text,
    .about-description {
        max-width: 100%;
    }

}
/* =========================================================
   全站浮動音樂播放器
========================================================= */

.global-music-player {
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 999;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        10px
        18px
        10px
        10px;

    background:
        rgba(247, 243, 239, 0.82);

    border:
        1px solid rgba(100, 82, 72, 0.12);

    border-radius: 50px;

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    box-shadow:
        0 10px 35px
        rgba(60, 45, 38, 0.12);

    color: #554a44;
}


.global-music-button {
    display: flex;

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

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border: none;

    border-radius: 50%;

    background: #62544d;

    color: #ffffff;

    font-size: 12px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.global-music-button:hover {
    transform:
        scale(1.06);

    background: #806e64;
}


.global-music-info {
    min-width: 110px;
}


.global-music-label {
    margin-bottom: 3px;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 0.25em;

    color: #a09289;
}


.global-music-title {
    margin: 0;

    font-size: 11px;

    letter-spacing: 0.08em;

    color: #554a44;

    white-space: nowrap;
}



/* 手機 */

@media (max-width: 768px) {

    .global-music-player {
        right: 16px;

        bottom:
            calc(
                16px +
                env(safe-area-inset-bottom)
            );

        padding:
            8px
            14px
            8px
            8px;

        gap: 10px;
    }


    .global-music-button {
        width: 34px;
        height: 34px;
    }


    .global-music-info {
        min-width: 90px;
    }


    .global-music-title {
        font-size: 10px;
    }