/* =========================================================
   Base
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #000;
    color: #fff;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

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

button {
    font: inherit;
}


/* =========================================================
   Header
========================================================= */

.site-header {
    position: absolute;
    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;

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

    padding: 24px 40px;
}


.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-teamayu {
    width: auto;
    height: 30px;
}

.brand-divider {
    width: 1px;
    height: 28px;

    background:
        rgba(255, 255, 255, 0.35);
}

.brand-china {
    width: 120px;
    height: auto;
}


/* =========================================================
   Section tabs / archive header
========================================================= */

.section-tab-header {
    position: fixed;
    min-height: 112px;
    gap: 36px;
    padding: 28px clamp(32px, 4.5vw, 74px);
}

.section-mini-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 42px);
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.section-mini-nav a {
    position: relative;
    padding: 12px 0;
    transition: color .22s ease;
}

.section-mini-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 5px;
    height: 1px;
    background: #b89b68;
    transition: right .25s ease;
}

.section-mini-nav a:hover,
.section-mini-nav a.is-current {
    color: rgba(255, 255, 255, 0.92);
}

.section-mini-nav a:hover::after,
.section-mini-nav a.is-current::after {
    right: 0;
}

.ayu-inline-logo {
    display: inline-block;
    width: auto;
    height: .82em;
    margin: 0 .08em;
    vertical-align: -.06em;
    filter: brightness(0) invert(1);
}


/* =========================================================
   Menu
========================================================= */

.menu-button {
    position: relative;
    z-index: 100;

    width: 44px;
    height: 44px;

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    gap: 7px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.menu-button span {
    display: block;

    height: 1px;

    background: #fff;

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

.menu-button span:first-child {
    width: 22px;
}

.menu-button span:last-child {
    width: 15px;
}

.menu-button.is-open span:first-child {
    width: 22px;

    transform:
        translateY(4px)
        rotate(45deg);
}

.menu-button.is-open span:last-child {
    width: 22px;

    transform:
        translateY(-4px)
        rotate(-45deg);
}

body.nav-open {
    overflow: hidden;
}


/* =========================================================
   Hero
========================================================= */

.hero {
    position: relative;

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

    overflow: hidden;

    background: #000;
}

.hero-media {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 56%;

    overflow: hidden;

    background: #000;
}

.hero-slide {
    position: absolute;
    inset: 0;

    background-color: #000;
    background-repeat: no-repeat;

    opacity: 0;
    transform: none;

    transition:
        opacity 1.4s ease;

    will-change: opacity;
}

.hero-slide.is-active {
    opacity: 1;
    transform: none;
}


/*
    从左侧黑色自然过渡进人物照片。
*/

.hero-shade {
    position: absolute;
    z-index: 2;

    top: 0;
    right: 0;
    bottom: 0;

    width: 62%;

    background:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0, 0, 0, 0.88) 10%,
            rgba(0, 0, 0, 0.55) 22%,
            rgba(0, 0, 0, 0.18) 38%,
            transparent 58%
        );

    pointer-events: none;
}




/* =========================================================
   Hero cover → cinematic MV
   静态封面退场后，直接露出后方固定随机 MV。
========================================================= */

.home-page .hero,
.home-page .hero-media,
.home-page .hero-shade,
.home-page .hero-signature {
    transition:
        opacity 1s ease,
        background-color 1s ease;
}

.home-page.hero-cover-active .hero {
    background: #000;
}

.home-page .hero.is-cover-released {
    background: transparent;
}

.home-page .hero.is-cover-released .hero-media,
.home-page .hero.is-cover-released .hero-shade,
.home-page .hero.is-cover-released .hero-signature {
    opacity: 0;
    pointer-events: none;
}

.home-page .hero-slide-b {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero,
    .home-page .hero-media,
    .home-page .hero-shade,
    .home-page .hero-signature {
        transition: none;
    }

    .home-page .hero.is-cover-released .hero-media,
    .home-page .hero.is-cover-released .hero-shade,
    .home-page .hero.is-cover-released .hero-signature {
        opacity: 1;
    }
}

/* =========================================================
   Hero signature
   左下只保留 TeamAyu 金色签名。
========================================================= */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.home-page .hero-signature {
    position: absolute;
    z-index: 10;

    left: clamp(34px, 4vw, 72px);
    bottom: clamp(32px, 4vw, 58px);

    display: flex;
    align-items: center;
}

.home-page .hero-signature-logo {
    width: clamp(132px, 9.8vw, 164px);
    height: auto;

    display: block;
}

@media (max-width: 780px) {
    .home-page .hero-signature {
        left: 18px;
        bottom: 24px;
    }

    .home-page .hero-signature-logo {
        width: 108px;
    }
}

@media (max-width: 420px) {
    .home-page .hero-signature {
        left: 15px;
        bottom: 20px;
    }

    .home-page .hero-signature-logo {
        width: 98px;
    }
}


/* =========================================================
   Hero content
========================================================= */

.hero-content {
    position: absolute;
    z-index: 10;

    top: 50%;
    left: 0;

    width: 44%;

    padding:
        0
        clamp(60px, 7vw, 130px);

    transform:
        translateY(-47%);
}

.hero-eyebrow {
    position: relative;

    margin:
        0
        0
        44px;

    padding-left: 48px;

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

    font-size: 11px;
    font-weight: 400;

    letter-spacing: 0.18em;
}

.hero-eyebrow::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 28px;
    height: 1px;

    background: #b89b68;
}

.hero-logo {
    width:
        min(340px, 25vw);

    margin-bottom: 42px;
}

.hero-title {
    margin: 0;

    font-size:
        clamp(36px, 3.1vw, 56px);

    font-weight: 300;

    line-height: 1.35;

    letter-spacing: 0.03em;
}

.hero-description {
    margin:
        72px
        0
        0;

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

    font-size: 13px;

    letter-spacing: 0.08em;
}


/* =========================================================
   Hero buttons
========================================================= */

.hero-actions {
    display: flex;

    gap: 16px;

    margin-top: 120px;
}

.button {
    min-width: 150px;

    padding:
        14px
        24px;

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

    border-radius: 999px;

    font-size: 13px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.button:hover {
    transform:
        translateY(-2px);
}

.button-primary {
    background: #ed2c87;

    border:
        1px solid #ed2c87;
}

.button-primary:hover {
    background: #ff3b97;

    border-color: #ff3b97;
}

.button-secondary {
    border:
        1px solid rgba(255, 255, 255, 0.5);

    background:
        rgba(0, 0, 0, 0.1);

    backdrop-filter:
        blur(8px);
}

.button-secondary:hover {
    border-color: #fff;
}


/* =========================================================
   Scroll
========================================================= */

.scroll-hint {
    position: absolute;
    z-index: 10;

    left:
        clamp(60px, 7vw, 130px);

    bottom: 32px;

    display: flex;
    align-items: center;

    gap: 16px;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 0.18em;
}

.scroll-line {
    width: 28px;
    height: 1px;

    background: #b89b68;
}


/* =========================================================
   Fullscreen navigation
========================================================= */

.site-nav {
    position: fixed;
    z-index: 90;

    inset: 0;

    display: flex;

    overflow-y: auto;

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

    opacity: 0;

    visibility: hidden;

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

.site-nav.is-open {
    opacity: 1;

    visibility: visible;
}

.site-nav-inner {
    width:
        min(720px, 80vw);

    margin: auto;

    padding:
        100px
        0
        70px;
}

.site-nav-label {
    margin:
        0
        0
        42px;

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

    font-size: 10px;

    letter-spacing: 0.22em;
}

.site-nav-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.site-nav-list li {
    border-top:
        1px solid rgba(255, 255, 255, 0.12);
}

.site-nav-list li:last-child {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.site-nav-list a {
    min-height: 100px;

    display: grid;

    grid-template-columns:
        60px
        1fr
        auto;

    align-items: center;

    gap: 24px;

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

.site-nav-list a:hover {
    padding-left: 10px;
}

.nav-index {
    color: #b89b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.15em;
}

.nav-name {
    font-size:
        clamp(32px, 4vw, 58px);

    font-weight: 300;

    letter-spacing: 0.04em;
}

.nav-cn {
    color:
        rgba(255, 255, 255, 0.45);

    font-size: 13px;

    letter-spacing: 0.08em;
}

.site-nav-footer {
    margin-top: 38px;

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

    font-size: 9px;

    letter-spacing: 0.18em;
}


/* =========================================================
   Latest MV
========================================================= */

.mv-section {
    position: relative;

    background: transparent;

    color: #fff;

    padding:
        clamp(78px, 8vw, 120px)
        clamp(40px, 5vw, 80px)
        clamp(100px, 10vw, 150px);
}

.mv-inner {
    width:
        min(1420px, 100%);

    margin:
        0
        auto;
}

.mv-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom:
        clamp(32px, 4vw, 52px);
}

.section-title-line {
    display: flex;
    align-items: baseline;
    gap: clamp(14px, 1.6vw, 24px);
}

.mv-header .section-index,
.updates-header .section-index,
.contents-header .section-index {
    flex: 0 0 auto;

    color: #b89b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(13px, 1.15vw, 18px);

    line-height: 1;

    letter-spacing: 0.08em;
}

.mv-header h2 {
    margin: 0;

    font-family: inherit;

    font-size:
        clamp(38px, 4vw, 58px);

    font-weight: 300;
    font-style: normal;

    letter-spacing: 0.03em;
}

.mv-header-note {
    margin:
        0
        0
        9px;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: 0.18em;
}


/* =========================================================
   MV stage
========================================================= */

.mv-stage {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    background: transparent;

    isolation: isolate;
}

.mv-video {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position:
        center
        center;

    opacity: 0;

    background: #000;

    transition:
        opacity
        0.9s
        cubic-bezier(.2, .7, .2, 1);

    will-change: opacity;

    pointer-events: none;
}

.mv-video.is-active {
    opacity: 1;
}

.mv-caption {
    position: absolute;

    z-index: 5;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;

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

    gap: 24px;

    padding:
        22px
        26px;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: 0.18em;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 0, 0, 0.42)
        );

    pointer-events: none;
}


/* =========================================================
   Official Updates
========================================================= */

.updates-section {
    position: relative;

    background:
        radial-gradient(
            circle at 78% 12%,
            rgba(184, 155, 104, 0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #080808 0%,
            #0d0d0d 48%,
            #090909 100%
        );

    color: #f4f1eb;

    padding:
        clamp(90px, 10vw, 150px)
        clamp(50px, 7vw, 120px);

    border-top:
        1px solid rgba(184, 155, 104, 0.18);

    border-bottom:
        1px solid rgba(184, 155, 104, 0.14);
}

.updates-section::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(184, 155, 104, 0.025) 50%,
            transparent 100%
        );
}

.updates-inner {
    position: relative;

    z-index: 1;

    width:
        min(1420px, 100%);

    margin:
        0
        auto;
}


/* =========================================================
   Section headers
========================================================= */

.updates-header,
.contents-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 60px;

    padding-bottom: 30px;

    border-bottom:
        1px solid rgba(184, 155, 104, 0.22);
}

.updates-header h2,
.contents-header h2 {
    margin: 0;

    color: #f5f2ec;

    font-size:
        clamp(38px, 4vw, 58px);

    font-weight: 300;

    letter-spacing: 0.03em;
}

.updates-header-note,
.contents-header-note {
    margin:
        0
        0
        8px;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 0.18em;
}


/* =========================================================
   Updates grid
========================================================= */

.updates-grid {
    --updates-panel-height:
        620px;

    display: grid;

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

    gap:
        clamp(20px, 2.4vw, 36px);

    align-items: stretch;
}

.update-panel {
    position: relative;

    height:
        var(--updates-panel-height);

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.update-panel-news {
    grid-column:
        span 2;
}

/* .update-panel-header {
    min-height: 94px;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
} */

.update-panel-kicker {
    margin:
        0
        0
        10px;

    color: #c2a66f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.18em;
}

.update-panel-header h3 {
    margin: 0;

    color: #f4f1eb;

    font-size: 25px;

    font-weight: 400;

    letter-spacing: 0.03em;
}

.update-panel-more {
    margin-top: 4px;

    color:
        rgba(194, 166, 111, 0.68);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: 0.16em;

    transition:
        color 0.22s ease,
        transform 0.22s ease;
}

.update-panel-more:hover {
    color: #d3b779;

    transform:
        translateX(3px);
}


/* =========================================================
   NEWS
========================================================= */

.home-news-list {
    flex: 1;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.home-news-item {
    position: relative;

    flex: 1;

    min-height: 0;

    display: grid;

    grid-template-columns:
        112px
        minmax(0, 1fr)
        20px;

    align-items: center;

    gap: 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    transition:
        padding-left 0.22s ease,
        background-color 0.22s ease;
}

.home-news-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #b89b68,
            rgba(184, 155, 104, 0)
        );

    transition:
        width 0.34s ease;
}

.home-news-item:last-child {
    border-bottom: 0;
}

.home-news-item:hover {
    padding-left: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(184, 155, 104, 0.07),
            transparent 78%
        );
}

.home-news-item:hover::before {
    width: 52%;
}

.home-news-date {
    color:
        rgba(194, 166, 111, 0.72);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.09em;
}

.home-news-title {
    min-width: 0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

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

    font-size:
        clamp(15px, 1.2vw, 19px);

    font-weight: 400;

    line-height: 1.7;

    transition:
        color 0.22s ease;
}

.home-news-item:hover
.home-news-title {
    color: #fff;
}

.home-news-arrow {
    color:
        rgba(184, 155, 104, 0.48);

    font-size: 14px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.home-news-item:hover
.home-news-arrow {
    color: #c7aa70;

    transform:
        translate(
            2px,
            -2px
        );
}


/* =========================================================
   NEW RELEASE / LIVE
========================================================= */

.home-feature-card {
    flex: 1;

    min-height: 0;

    padding-top: 22px;

    overflow: hidden;
}

.home-feature-link {
    width: 100%;
    height: 100%;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.home-feature-media {
    position: relative;

    flex: 1;

    min-height: 0;

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

    overflow: hidden;

    background: #060606;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(184, 155, 104, 0.10);
}

.home-feature-media::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(255, 255, 255, 0.025);

    transition:
        box-shadow 0.3s ease;
}

.home-feature-link:hover
.home-feature-media::after {
    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(184, 155, 104, 0.30);
}

.home-feature-media img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.7s
        cubic-bezier(.2, .7, .2, 1),
        filter 0.35s ease;
}

.home-feature-link:hover
.home-feature-media img {
    transform:
        scale(1.018);

    filter:
        brightness(1.035);
}

.home-feature-media-empty {
    background:
        linear-gradient(
            135deg,
            #090909,
            #15120d
        );

    color:
        rgba(194, 166, 111, 0.32);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 0.18em;
}

.home-feature-copy {
    flex:
        0
        0
        160px;

    padding-top: 20px;

    overflow: hidden;
}

.home-feature-date {
    display: block;

    margin-bottom: 10px;

    color:
        rgba(194, 166, 111, 0.68);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 0.12em;
}

.home-feature-copy h4 {
    margin: 0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    color: #f4f1eb;

    font-size:
        clamp(18px, 1.45vw, 23px);

    font-weight: 400;

    line-height: 1.45;
}

.home-feature-copy p {
    margin:
        10px
        0
        0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

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

    font-size: 11px;

    line-height: 1.65;
}

.home-feature-arrow {
    display: inline-block;

    margin-top: 12px;

    color:
        rgba(194, 166, 111, 0.58);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 9px;

    letter-spacing: 0.16em;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.home-feature-link:hover
.home-feature-arrow {
    color: #d1b576;

    transform:
        translateX(4px);
}


/* =========================================================
   Loading / empty / error
========================================================= */

.updates-loading,
.updates-empty,
.updates-error {
    margin:
        auto
        0;

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

    font-size: 12px;

    line-height: 1.8;

    letter-spacing: 0.06em;
}


/* =========================================================
   Contents
========================================================= */

.contents-section {
    background: #111;

    color: #fff;

    padding:
        clamp(90px, 10vw, 150px)
        clamp(50px, 7vw, 120px)
        clamp(110px, 12vw, 180px);
}

.contents-inner {
    width:
        min(1420px, 100%);

    margin:
        0
        auto;
}

.contents-header {
    margin-bottom: 54px;

    border-bottom-color:
        rgba(255, 255, 255, 0.16);
}

.contents-grid {
    display: grid;

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

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

    border-left:
        1px solid rgba(255, 255, 255, 0.14);
}

.content-entry {
    position: relative;

    min-height: 310px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding:
        clamp(28px, 3vw, 42px);

    border-right:
        1px solid rgba(255, 255, 255, 0.14);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.14);

    background: #111;

    transition:
        background-color 0.28s ease,
        padding 0.28s ease;
}

.content-entry:hover {
    background: #171717;
}

.content-entry-original {
    background:
        linear-gradient(
            135deg,
            rgba(184, 155, 104, 0.12),
            rgba(184, 155, 104, 0.025)
        );
}

.content-entry-top {
    display: flex;

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

    gap: 20px;
}

.content-entry-index {
    color:
        rgba(255, 255, 255, 0.32);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 0.16em;
}

.content-entry-state {
    color:
        rgba(255, 255, 255, 0.24);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;

    letter-spacing: 0.16em;
}

.content-entry-original
.content-entry-state,
.content-entry-active
.content-entry-state {
    color: #b89b68;
}

.content-entry-copy {
    margin-top: 70px;
}

.content-entry-name {
    margin:
        0
        0
        12px;

    color: #b89b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.18em;
}

.content-entry-copy h3 {
    margin: 0;

    font-size:
        clamp(24px, 2vw, 32px);

    font-weight: 400;

    letter-spacing: 0.03em;
}

.content-entry-copy p:last-child {
    max-width: 330px;

    margin:
        18px
        0
        0;

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

    font-size: 12px;

    line-height: 1.8;
}

.content-entry-active {
    cursor: pointer;
}

.content-entry-active::after {
    content: "查看  →";

    position: absolute;

    right:
        clamp(28px, 3vw, 42px);

    bottom:
        clamp(28px, 3vw, 42px);

    color:
        rgba(194, 166, 111, 0);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8px;

    letter-spacing: 0.16em;

    transform:
        translateX(-8px);

    transition:
        color .24s ease,
        transform .24s ease;
}

.content-entry-active:hover::after {
    color: #c2a66f;

    transform:
        translateX(0);
}


/* =========================================================
   Tablet / narrow desktop
========================================================= */

@media (max-width: 1180px) {

    .updates-grid {
        --updates-panel-height:
            560px;

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

    .update-panel-news {
        grid-column:
            span 2;
    }

}


@media (max-width: 1100px) {

    .contents-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   Mobile homepage refinement
========================================================= */

@media (max-width: 780px) {

    html,
    body {
        width: 100%;

        overflow-x: hidden;
    }


    /* -----------------------------------------------------
       Header
    ----------------------------------------------------- */

    .site-header {
        padding:
            16px
            18px;
    }

    .brand {
        gap: 10px;
    }

    .brand-teamayu {
        height: 24px;
    }

    .brand-divider {
        height: 22px;
    }

    .brand-china {
        width: 92px;
    }

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


    /* -----------------------------------------------------
       Hero
    ----------------------------------------------------- */

    .hero {
        height: 100svh;

        min-height: 620px;
        max-height: 860px;
    }

    .hero-media {
        inset: 0;

        width: 100%;
    }

    /*
        JS 仍负责具体 background-image。
        手机上这里只重设构图方式。
    */

    .hero-slide {
        background-size:
            cover !important;

        background-position:
            center center !important;

        transform: none;
    }

    .hero-slide.is-active {
        transform: none;
    }

    .hero-shade {
        inset: 0;

        width: 100%;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.14) 0%,
                rgba(0, 0, 0, 0.08) 28%,
                rgba(0, 0, 0, 0.38) 52%,
                rgba(0, 0, 0, 0.86) 76%,
                #000 100%
            );
    }

    .hero-content {
        top: auto;

        right: 0;
        bottom: 54px;
        left: 0;

        width: 100%;

        padding:
            0
            22px;

        transform: none;
    }

    .hero-eyebrow {
        display: none;
    }

    .hero-logo {
        width:
            min(190px, 48vw);

        margin-bottom: 24px;
    }

    .hero-title {
        max-width: 92%;

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

        line-height: 1.24;

        letter-spacing: 0.015em;
    }

    .hero-description {
        max-width: 92%;

        margin-top: 14px;

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

        font-size: 12px;

        line-height: 1.7;

        letter-spacing: 0.035em;
    }

    .hero-actions {
        display: grid;

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

        gap: 10px;

        margin-top: 26px;
    }

    .button {
        min-width: 0;

        padding:
            12px
            14px;

        font-size: 12px;
    }

    .button:hover {
        transform: none;
    }

    .scroll-hint {
        display: none;
    }


    /* -----------------------------------------------------
       Fullscreen navigation
    ----------------------------------------------------- */

    .site-nav-inner {
        width: 100%;

        margin: auto;

        padding:
            90px
            22px
            38px;
    }

    .site-nav-label {
        margin-bottom: 24px;
    }

    .site-nav-list a {
        min-height: 78px;

        grid-template-columns:
            42px
            minmax(0, 1fr);

        gap: 12px;
    }

    .site-nav-list a:hover {
        padding-left: 0;
    }

    .nav-name {
        font-size:
            clamp(26px, 8vw, 34px);
    }

    .nav-cn {
        display: none;
    }

    .site-nav-footer {
        margin-top: 26px;
    }


    /* -----------------------------------------------------
       MV
    ----------------------------------------------------- */

    .mv-section {
        padding:
            54px
            16px
            64px;
    }

    .mv-header {
        display: block;

        margin-bottom: 24px;
    }

    .section-title-line {
        gap: 10px;
    }

    .mv-header .section-index,
    .updates-header .section-index,
    .contents-header .section-index {
        font-size: 11px;
    }

    .mv-header h2 {
        font-size: 32px;
    }

    .mv-stage {
        width: 100%;

        aspect-ratio:
            16 / 9;
    }

    .mv-video {
        object-fit: cover;
    }

    .mv-caption {
        padding: 12px;

        gap: 12px;

        font-size: 7px;

        letter-spacing: 0.12em;
    }


    /* -----------------------------------------------------
       Updates
    ----------------------------------------------------- */

    .updates-section {
        padding:
            62px
            18px
            70px;
    }

    .updates-header {
        display: block;

        margin-bottom: 30px;

        padding-bottom: 18px;
    }

    .updates-header h2 {
        font-size: 32px;
    }

    .updates-header-note {
        display: none;
    }

    .updates-grid {
        display: block;
    }

    .update-panel {
        height: auto;

        min-height: 0;

        margin: 0;
    }

    .update-panel + .update-panel {
        margin-top: 38px;
    }

    /* .update-panel-header {
        min-height: 0;

        align-items: center;

        padding-bottom: 15px;
    } */

    .update-panel-header h3 {
        font-size: 20px;
    }

    .update-panel-kicker {
        margin-bottom: 6px;

        font-size: 9px;
    }

    .update-panel-more {
        margin-top: 0;

        font-size: 9px;
    }


    /* NEWS */

    .home-news-list {
        display: block;

        overflow: visible;
    }

    .home-news-item {
        min-height: 0;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            18px;

        grid-template-rows:
            auto
            auto;

        column-gap: 10px;
        row-gap: 7px;

        padding:
            17px
            0;

        align-items: center;
    }

    .home-news-item:hover {
        padding-left: 0;

        background: transparent;
    }

    .home-news-item:hover::before {
        width: 0;
    }

    .home-news-date {
        grid-column: 1;
        grid-row: 1;

        font-size: 10px;
    }

    .home-news-title {
        grid-column: 1;
        grid-row: 2;

        -webkit-line-clamp: 3;

        font-size: 15px;

        line-height: 1.55;
    }

    .home-news-arrow {
        grid-column: 2;

        grid-row:
            1 / span 2;

        justify-self: end;

        font-size: 13px;
    }


    /* NEW RELEASE / LIVE */

    .home-feature-card {
        padding-top: 16px;

        overflow: visible;
    }

    .home-feature-link {
        height: auto;

        display: grid;

        grid-template-columns:
            minmax(108px, 34vw)
            minmax(0, 1fr);

        align-items: center;

        overflow: visible;
    }

    .home-feature-media {
        width: 100%;

        aspect-ratio:
            1 / 1;

        flex: none;
    }

    .home-feature-media img {
        object-fit: contain;
    }

    .home-feature-copy {
        flex: none;

        min-width: 0;

        padding:
            0
            0
            0
            16px;

        overflow: visible;
    }

    .home-feature-date {
        margin-bottom: 7px;

        font-size: 9px;
    }

    .home-feature-copy h4 {
        -webkit-line-clamp: 3;

        font-size: 17px;

        line-height: 1.4;
    }

    .home-feature-copy p {
        margin-top: 7px;

        -webkit-line-clamp: 2;

        font-size: 10px;

        line-height: 1.55;
    }

    .home-feature-arrow {
        margin-top: 9px;

        font-size: 9px;

        letter-spacing: 0.10em;
    }

    .home-feature-link:hover
    .home-feature-media img {
        transform: none;

        filter: none;
    }


    /* -----------------------------------------------------
       Contents
    ----------------------------------------------------- */

    .contents-section {
        padding:
            62px
            18px
            76px;
    }

    .contents-header {
        display: block;

        margin-bottom: 24px;

        padding-bottom: 18px;
    }

    .contents-header h2 {
        font-size: 32px;
    }

    .contents-header-note {
        display: none;
    }

    .contents-grid {
        display: block;

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

        border-left: 0;
    }

    .content-entry {
        min-height: 0;

        display: grid;

        grid-template-columns:
            34px
            minmax(0, 1fr);

        align-items: center;

        gap: 10px;

        padding:
            20px
            44px
            20px
            4px;

        border-right: 0;

        background: #111;
    }

    .content-entry:hover {
        background: #111;
    }

    .content-entry-original,
    .content-entry-original:hover {
        background:
            linear-gradient(
                90deg,
                rgba(184, 155, 104, 0.10),
                rgba(184, 155, 104, 0.025)
            );
    }

    .content-entry-top {
        grid-column: 1;

        display: block;

        align-self: start;

        padding-top: 3px;
    }

    .content-entry-index {
        font-size: 9px;
    }

    .content-entry-state,
    .content-entry-name {
        display: none;
    }

    .content-entry-copy {
        grid-column: 2;

        min-width: 0;

        margin-top: 0;
    }

    .content-entry-copy h3 {
        font-size: 20px;

        line-height: 1.35;
    }

    .content-entry-copy p:last-child {
        max-width: none;

        margin-top: 6px;

        padding-right: 2px;

        font-size: 11px;

        line-height: 1.55;
    }

    /*
        手机没有 hover。
        可点击卡片直接显示轻量箭头。
    */

    .content-entry-active::after {
        top: 50%;

        right: 8px;

        bottom: auto;

        color:
            rgba(194, 166, 111, 0.76);

        font-size: 9px;

        transform:
            translateY(-50%);
    }

    .content-entry-active:hover::after {
        color:
            rgba(194, 166, 111, 0.76);

        transform:
            translateY(-50%);
    }

}


/* =========================================================
   Small phones
========================================================= */

@media (max-width: 420px) {

    .site-header {
        padding:
            14px
            15px;
    }

    .brand-teamayu {
        height: 22px;
    }

    .brand-china {
        width: 82px;
    }

    .hero {
        min-height: 600px;
    }

    .hero-content {
        bottom: 42px;

        padding:
            0
            18px;
    }

    .hero-logo {
        width:
            min(170px, 46vw);

        margin-bottom: 20px;
    }

    .hero-title {
        max-width: 100%;

        font-size:
            clamp(30px, 9.5vw, 38px);
    }

    .hero-description {
        max-width: 100%;
    }

    .hero-actions {
        margin-top: 22px;
    }

    .mv-section {
        padding:
            48px
            14px
            58px;
    }

    .updates-section,
    .contents-section {
        padding-right: 16px;

        padding-left: 16px;
    }

    .home-feature-link {
        grid-template-columns:
            112px
            minmax(0, 1fr);
    }

    .home-feature-copy {
        padding-left: 13px;
    }

    .content-entry {
        padding-right: 40px;
    }

}


/* =========================================================
   Very small phones
========================================================= */

@media (max-width: 360px) {

    .brand-china,
    .brand-divider {
        display: none;
    }

    .hero-actions {
        grid-template-columns: 1fr;
    }

    .home-feature-link {
        grid-template-columns:
            96px
            minmax(0, 1fr);
    }

    .home-feature-copy p {
        display: none;
    }

}

/* =========================================================
   Section tabs responsive
========================================================= */
@media (max-width: 980px) {
    .section-tab-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .section-mini-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 24px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .section-mini-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 720px) {
    .section-tab-header {
        min-height: 88px;
        padding: 20px 18px;
    }
}


/* =========================================================
   AVEX-inspired homepage depth

   只作用于首页：
   - 固定 MV 作为整页底层影像
   - 首屏保持 China TA 现有视觉
   - 下方内容以深色浮层卡片滚过影像
   - 黑 / 金 / 粉配色不变
========================================================= */

.home-page {
    position: relative;
    background: #050505;
}

.home-cinematic-bg {
    position: fixed;
    z-index: 0;
    inset: 0;

    overflow: hidden;

    background: #050505;

    pointer-events: none;
}

.home-cinematic-video {
    position: absolute;
    inset: -3%;

    width: 106%;
    height: 106%;

    object-fit: cover;
    object-position: center center;

    opacity: 0;

    filter:
        saturate(.84)
        contrast(1.05)
        brightness(.72);

    transform: scale(1.015);

    transition:
        opacity 1.1s ease,
        transform 7s ease;
}

.home-page.cinematic-ready .home-cinematic-video {
    opacity: .62;
    transform: scale(1);
}

.home-cinematic-vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(184, 155, 104, .10),
            transparent 32%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .76) 0%,
            rgba(0, 0, 0, .48) 28%,
            rgba(0, 0, 0, .24) 58%,
            rgba(0, 0, 0, .42) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .10) 0%,
            rgba(0, 0, 0, .12) 54%,
            rgba(0, 0, 0, .70) 100%
        );
}

.home-page > main,
.home-page > .site-footer {
    position: relative;
    z-index: 2;
}

/* 顶部栏：首屏透明，滚动后变成克制的黑金悬浮栏。 */
.home-page .site-header {
    transition:
        background-color .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease,
        -webkit-backdrop-filter .35s ease;
}

.home-page .site-header.is-scrolled {
    position: fixed;

    background: rgba(6, 6, 6, .78);
    border-bottom: 1px solid rgba(184, 155, 104, .14);

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

/* 首屏与下方影像保持连续，不再使用斜切分隔。 */
.home-page .hero {
    z-index: 4;

    clip-path: none;
    margin-bottom: 0;
}

/* 三个首页内容区都不再自己铺满整屏背景，让固定 MV 真正露出来。 */
.home-page .mv-section,
.home-page .updates-section,
.home-page .contents-section {
    position: relative;

    background: transparent !important;
    border: 0 !important;
}

.home-page .updates-section::before {
    background: none !important;
}

.home-page .mv-section {
    padding:
        clamp(150px, 13vw, 220px)
        clamp(34px, 5vw, 78px)
        clamp(120px, 11vw, 180px);
}

.home-page .updates-section,
.home-page .contents-section {
    padding:
        clamp(110px, 10vw, 160px)
        clamp(34px, 5vw, 78px)
        clamp(130px, 12vw, 190px);
}

/* 深色浮层卡片：官方站是白卡片，这里改成 China TA 黑金版本。 */
.home-page .mv-inner,
.home-page .updates-inner,
.home-page .contents-inner {
    position: relative;

    width: min(1380px, 100%);

    padding:
        clamp(58px, 5vw, 82px)
        clamp(46px, 5vw, 78px)
        clamp(62px, 5vw, 86px);

    overflow: hidden;

    border: 1px solid rgba(184, 155, 104, .18);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 13, 13, .94),
            rgba(7, 7, 7, .82)
        );

    box-shadow:
        0 34px 90px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .025);

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

/* 每张卡片顶部一条不规则斜切色带：只借结构，不复刻 AVEX 图形。 */
.home-page .mv-inner::before,
.home-page .updates-inner::before,
.home-page .contents-inner::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: clamp(22px, 2.3vw, 36px);

    background:
        linear-gradient(
            90deg,
            rgba(237, 44, 135, .78) 0%,
            rgba(184, 155, 104, .54) 34%,
            rgba(184, 155, 104, .12) 72%,
            transparent 100%
        );

    clip-path:
        polygon(
            0 68%,
            72% 0,
            100% 28%,
            100% 100%,
            0 100%
        );

    opacity: .72;

    pointer-events: none;
}

.home-page .mv-inner > *,
.home-page .updates-inner > *,
.home-page .contents-inner > * {
    position: relative;
    z-index: 1;
}

/* 轻微错位让三张内容卡不像同一个模板重复堆叠。 */
.home-page .mv-inner {
    transform: translateX(-1.8vw);
}

.home-page .updates-inner {
    transform: translateX(1.8vw);
}

.home-page .contents-inner {
    transform: translateX(-.8vw);
}

.home-page .mv-stage {
    border-radius: 12px;

    box-shadow:
        0 22px 56px rgba(0, 0, 0, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.home-page .updates-header,
.home-page .contents-header {
    border-bottom-color: rgba(184, 155, 104, .26);
}

.home-page .content-entry {
    background: rgba(17, 17, 17, .88);
}

.home-page .content-entry:hover {
    background: rgba(24, 24, 24, .94);
}

.home-page .content-entry-original,
.home-page .content-entry-original:hover {
    background:
        linear-gradient(
            135deg,
            rgba(184, 155, 104, .16),
            rgba(17, 17, 17, .90)
        );
}

@media (max-width: 780px) {
    .home-cinematic-bg {
        background: #050505;
    }

    .home-page.cinematic-ready .home-cinematic-video {
        opacity: .50;
    }

    .home-cinematic-vignette {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .18) 0%,
                rgba(0, 0, 0, .28) 42%,
                rgba(0, 0, 0, .76) 100%
            );
    }

    .home-page .hero {
        clip-path: none;
        margin-bottom: 0;
    }

    .home-page .mv-section,
    .home-page .updates-section,
    .home-page .contents-section {
        padding:
            74px
            14px
            86px;
    }

    .home-page .mv-inner,
    .home-page .updates-inner,
    .home-page .contents-inner {
        width: 100%;

        padding:
            46px
            18px
            52px;

        border-radius: 14px;

        transform: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .home-page .mv-inner::before,
    .home-page .updates-inner::before,
    .home-page .contents-inner::before {
        height: 22px;

        clip-path:
            polygon(
                0 72%,
                74% 0,
                100% 34%,
                100% 100%,
                0 100%
            );
    }

    .home-page .site-header.is-scrolled {
        background: rgba(6, 6, 6, .88);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-cinematic-video {
        display: none;
    }
}

/* =========================================================
   Homepage cinematic refinement
   2026-09-23
========================================================= */

/* MV 真正开始播放后，彻底移除 hero-03 fallback，
   避免静态图和视频叠在一起。 */
.home-page.cinematic-ready .home-cinematic-bg {
    background: #050505;
}

.home-page.cinematic-ready .home-cinematic-video {
    opacity: .78;
}


/* =========================================================
   Remove large floating black panels
========================================================= */

.home-page .mv-inner,
.home-page .updates-inner,
.home-page .contents-inner {
    width: min(1380px, 100%);

    padding: 0;

    overflow: visible;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: none;
}


/* 去掉上一版卡片顶部的粉金斜色色带 */
.home-page .mv-inner::before,
.home-page .updates-inner::before,
.home-page .contents-inner::before {
    display: none;
}


/* =========================================================
   Instead of cards, use soft full-width shading
========================================================= */

.home-page .mv-section {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .10) 0%,
            rgba(0, 0, 0, .28) 42%,
            rgba(0, 0, 0, .16) 100%
        ) !important;
}

.home-page .updates-section {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .16) 0%,
            rgba(0, 0, 0, .48) 42%,
            rgba(0, 0, 0, .28) 100%
        ) !important;
}

.home-page .contents-section {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .24) 0%,
            rgba(0, 0, 0, .56) 50%,
            rgba(0, 0, 0, .40) 100%
        ) !important;
}


/* MV 自己仍保留一点边界感，但不再套大黑框 */
.home-page .mv-stage {
    border-radius: 10px;

    box-shadow:
        0 24px 64px rgba(0, 0, 0, .24);
}


/* 手机同样取消静态图与视频混合 */
@media (max-width: 780px) {
    .home-page.cinematic-ready .home-cinematic-bg {
        background: #050505;
    }

    .home-page.cinematic-ready .home-cinematic-video {
        opacity: .68;
    }

    .home-page .mv-inner,
    .home-page .updates-inner,
    .home-page .contents-inner {
        padding: 0;

        border-radius: 0;
    }
}



/* =========================================================
   Homepage cinematic final refinement
   2026-09-23 · v5

   - 移除“官方资讯 / 最新发行 / 演出动态”分栏标题
   - 收窄首页内容区，给固定 MV 更多留白
   - 降低黑色遮罩强度，让背景 MV 更清楚
   - 缩短最新消息区域的固定高度
========================================================= */

.home-page .update-panel-header {
    display: none !important;
}

.home-page .updates-inner,
.home-page .contents-inner {
    width: min(1080px, calc(100% - 180px));
    margin-left: auto;
    margin-right: auto;
}

.home-page .updates-grid {
    --updates-panel-height: 500px;
}

.home-page .home-feature-card {
    padding-top: 0;
}

/* 页面内容区只保留很轻的暗层，避免把背景 MV 压黑。 */
.home-page .updates-section {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .03) 0%,
            rgba(0, 0, 0, .13) 48%,
            rgba(0, 0, 0, .07) 100%
        ) !important;

    padding:
        clamp(88px, 8vw, 126px)
        clamp(24px, 4vw, 64px)
        clamp(108px, 9vw, 150px);
}

.home-page .contents-section {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .06) 0%,
            rgba(0, 0, 0, .18) 50%,
            rgba(0, 0, 0, .10) 100%
        ) !important;

    padding:
        clamp(88px, 8vw, 126px)
        clamp(24px, 4vw, 64px)
        clamp(108px, 9vw, 150px);
}

/* 背景 MV 本身更清楚一点。 */
.home-page.cinematic-ready .home-cinematic-video {
    opacity: .90;
}

/* 减轻固定背景上的全屏暗角。 */
.home-cinematic-vignette {
    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(184, 155, 104, .06),
            transparent 34%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .40) 0%,
            rgba(0, 0, 0, .24) 28%,
            rgba(0, 0, 0, .12) 58%,
            rgba(0, 0, 0, .24) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .06) 0%,
            rgba(0, 0, 0, .08) 54%,
            rgba(0, 0, 0, .36) 100%
        );
}

@media (max-width: 780px) {
    .home-page .updates-inner,
    .home-page .contents-inner {
        width: calc(100% - 32px);
    }

    .home-page .updates-section,
    .home-page .contents-section {
        padding:
            68px
            16px
            80px;
    }

    .home-page.cinematic-ready .home-cinematic-video {
        opacity: .80;
    }

    .home-cinematic-vignette {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .10) 0%,
                rgba(0, 0, 0, .18) 46%,
                rgba(0, 0, 0, .48) 100%
            );
    }
}


/* =========================================================
   Homepage visual cleanup · v7
   2026-09-23

   - 移除“最新消息 / 浏览内容”大标题
   - 移除六个内容卡片的 01–06 编号
   - 六个内容卡片统一透明度，歌词不再特殊着色
   - 稳定 iPhone 浏览器地址栏收放时的固定背景 MV 构图
========================================================= */

.home-page .updates-header,
.home-page .contents-header,
.home-page .content-entry-top {
    display: none !important;
}

.home-page .content-entry,
.home-page .content-entry-original,
.home-page .content-entry-original:hover {
    background: rgba(8, 8, 8, .34) !important;
}

.home-page .content-entry:hover {
    background: rgba(8, 8, 8, .50) !important;
}

.home-page .contents-grid {
    border-top-color: rgba(255, 255, 255, .10);
    border-left-color: rgba(255, 255, 255, .10);
}

.home-page .content-entry {
    justify-content: center;
    border-right-color: rgba(255, 255, 255, .10);
    border-bottom-color: rgba(255, 255, 255, .10);
}

.home-page .content-entry-copy {
    margin-top: 0;
}

.home-page .updates-section,
.home-page .contents-section {
    padding-top: clamp(62px, 6vw, 92px);
}

.home-cinematic-bg {
    inset: 0 auto auto 0;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
}

.home-cinematic-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transition:
        opacity 1s ease !important;
}

.home-page.cinematic-ready .home-cinematic-video {
    transform: none !important;
}

.home-page.hero-cover-active
.home-cinematic-video {
    opacity: 0 !important;
}




@media (max-width: 780px) {
    .home-page .content-entry {
        min-height: 146px;
        display: flex;
        padding: 26px 44px 26px 20px;
    }

    .home-page .content-entry-copy {
        width: 100%;
        margin: 0;
    }

    .home-page .updates-section,
    .home-page .contents-section {
        padding-top: 54px;
    }
}


/* =========================================================
   Homepage minimal chrome · 2026-09-24 · v1
   只作用于首页：
   - 顶部栏变薄，只保留 China TA
   - Hero 只保留白色 TeamAyu + 主标题
   - 导航直接进入六大栏目，不再显示序号
   - Footer 收成紧凑的一行说明
========================================================= */

/* 首屏：只有 Logo + 菜单浮在 Hero 上，不显示黑色 bar */
.home-page .site-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 68px;
    min-height: 68px;

    padding: 0 clamp(20px, 3vw, 44px);

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

    background: transparent;
    border-bottom-color: transparent;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 滚动以后才出现固定黑色 bar */
.home-page .site-header.is-scrolled {
    position: fixed;

    background: rgba(5, 5, 5, .82);
    border-bottom: 1px solid rgba(184, 155, 104, .10);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.home-page .site-header .brand {
    gap: 0;
}

.home-page .site-header .brand-china {
    width: 104px;
    height: auto;
}

.home-page .site-header .menu-button {
    width: 38px;
    height: 38px;
}

.home-page .hero-description,
.home-page .hero-actions {
    display: none !important;
}


.home-page .site-nav {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .78),
            rgba(0, 0, 0, .72)
        );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.home-page .site-nav-inner {
    width: min(980px, calc(100% - 96px));

    margin: auto;

    padding:
        84px
        0
        48px;
}

.home-page .site-nav-list {
    display: grid;

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

    margin: 0;
    padding: 0;

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

    border-left:
        1px solid rgba(255, 255, 255, .08);
}

.home-page .site-nav-list li {
    border: 0;

    border-right:
        1px solid rgba(255, 255, 255, .08);

    border-bottom:
        1px solid rgba(255, 255, 255, .10);
}

.home-page .site-nav-list a {
    min-height: 112px;

    display: flex;
    align-items: center;

    padding:
        0
        clamp(22px, 3vw, 40px);

    border: 0;

    transition:
        color .22s ease,
        background-color .22s ease,
        padding-left .22s ease;
}

.home-page .site-nav-list a:hover {
    padding-left:
        clamp(30px, 3.6vw, 50px);

    background:
        linear-gradient(
            90deg,
            rgba(184, 155, 104, .08),
            rgba(184, 155, 104, .025) 56%,
            transparent 100%
        );
}

.home-page .nav-name {
    color:
        rgba(255, 255, 255, .92);

    font-size:
        clamp(30px, 2.5vw, 38px);

    font-weight: 300;

    line-height: 1.15;

    letter-spacing: .035em;

    transition:
        color .22s ease;
}

.home-page .site-nav-list a:hover .nav-name {
    color: #c9aa72;
}

.home-page .nav-index,
.home-page .site-nav-label,
.home-page .site-nav-footer {
    display: none !important;
}


@media (max-width: 780px) {
    .home-page .site-header,
    .home-page .site-header.is-scrolled {
        height: 62px;
        min-height: 62px;

        padding:
            0
            18px;
    }

    .home-page .site-header .brand-china {
        width: 92px;
    }

    .home-page .site-header .menu-button {
        width: 36px;
        height: 36px;
    }


    .home-page .site-nav-inner {
        width:
            calc(100% - 36px);

        padding:
            74px
            0
            30px;
    }

    .home-page .site-nav-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .home-page .site-nav-list a {
        min-height: 66px;

        padding:
            0
            16px;
    }

    .home-page .site-nav-list a:hover {
        padding-left: 22px;
    }

    .home-page .nav-name {
        font-size:
            clamp(25px, 7.3vw, 30px);

        letter-spacing: .025em;
    }
}

@media (max-width: 420px) {
    .home-page .site-header,
    .home-page .site-header.is-scrolled {
        height: 58px;
        min-height: 58px;

        padding:
            0
            15px;
    }

    .home-page .site-header .brand-china {
        width: 84px;
    }
}