/* =========================================================
   China TA · 演出活动
========================================================= */

:root {
    --live-black: #080808;
    --live-panel: #0d0d0d;
    --live-panel-soft: #11100f;

    --live-gold: #b89b68;
    --live-gold-soft: #d0b57c;

    --live-white: #f3f0e9;
    --live-muted: rgba(255,255,255,.42);

    --live-line: rgba(255,255,255,.085);
    --live-gold-line: rgba(184,155,104,.20);
}


.live-page {
    min-height: 100vh;

    background:
        var(--live-black);

    color:
        var(--live-white);
}


.live-page
.live-subpage-header {
    position: fixed;

    background:
        rgba(7,7,7,.82);

    border-bottom:
        1px solid
        rgba(184,155,104,.11);

    backdrop-filter:
        blur(16px);

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


.live-shell {
    width:
        min(
            1320px,
            calc(100% - 80px)
        );

    margin:
        0 auto;
}


/* =========================================================
   Masthead
========================================================= */

.live-masthead {
    position:
        relative;

    overflow:
        hidden;

    padding:
        182px
        0
        92px;

    background:
        radial-gradient(
            circle at 77% 28%,
            rgba(184,155,104,.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #070707,
            #0b0b0b
        );

    border-bottom:
        1px solid
        var(--live-gold-line);
}


.live-masthead::before {
    content:
        "";

    position:
        absolute;

    right:
        3vw;

    bottom:
        -170px;

    width:
        clamp(
            310px,
            36vw,
            570px
        );

    aspect-ratio:
        1;

    background:
        url("../assets/logos/logo.png")
        center
        /
        contain
        no-repeat;

    filter:
        brightness(0)
        invert(1);

    opacity:
        .018;

    pointer-events:
        none;
}


.live-breadcrumb {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0
        0
        60px;

    color:
        rgba(255,255,255,.30);

    font-size:
        9px;

    letter-spacing:
        .12em;
}


.live-breadcrumb a {
    transition:
        color .2s ease;
}


.live-breadcrumb a:hover {
    color:
        var(--live-gold-soft);
}


.live-masthead-grid {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

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

    align-items:
        end;

    gap:
        70px;
}


.live-eyebrow {
    margin:
        0
        0
        18px;

    color:
        var(--live-gold);

    font-size:
        10px;

    letter-spacing:
        .15em;
}


.live-masthead h1 {
    margin:
        0;

    font-size:
        clamp(
            64px,
            8vw,
            118px
        );

    font-weight:
        300;

    line-height:
        .95;

    letter-spacing:
        .015em;
}


.live-masthead-description {
    max-width:
        680px;

    margin:
        28px
        0
        0;

    color:
        rgba(255,255,255,.45);

    font-size:
        13px;

    line-height:
        1.9;
}


.live-count-block {
    min-width:
        150px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;
}


.live-count-block strong {
    color:
        var(--live-gold-soft);

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

    font-size:
        clamp(
            46px,
            5vw,
            74px
        );

    font-weight:
        400;

    line-height:
        1;
}


.live-count-block span {
    margin-top:
        10px;

    color:
        rgba(255,255,255,.28);

    font-size:
        9px;

    letter-spacing:
        .10em;
}


/* =========================================================
   Archive toolbar
========================================================= */

.live-archive-section {
    padding:
        70px
        0
        150px;

    background:
        linear-gradient(
            180deg,
            #0c0c0c,
            #080808
        );
}


.live-toolbar {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        36px;

    padding-bottom:
        26px;

    margin-bottom:
        60px;

    border-bottom:
        1px solid
        var(--live-gold-line);
}


.live-toolbar-title,
.live-result-meta {
    margin:
        0;

    font-size:
        9px;

    letter-spacing:
        .12em;
}


.live-toolbar-title {
    color:
        var(--live-gold-soft);
}


.live-result-meta {
    color:
        rgba(255,255,255,.28);
}


.live-year-filters {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        16px;
}


.live-year-filter {
    appearance:
        none;

    min-height:
        34px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(184,155,104,.15);

    background:
        rgba(255,255,255,.01);

    color:
        rgba(255,255,255,.40);

    cursor:
        pointer;

    font:
        inherit;

    font-size:
        10px;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.live-year-filter:hover {
    color:
        rgba(255,255,255,.78);

    border-color:
        rgba(184,155,104,.34);
}


.live-year-filter.is-active {
    color:
        #e5d2aa;

    border-color:
        rgba(184,155,104,.48);

    background:
        rgba(184,155,104,.07);
}


/* =========================================================
   Year groups
========================================================= */

.live-year-group {
    display:
        grid;

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

    gap:
        56px;

    padding:
        0
        0
        74px;
}


.live-year-group + .live-year-group {
    padding-top:
        66px;

    border-top:
        1px solid
        var(--live-line);
}


.live-year-heading {
    position:
        sticky;

    top:
        120px;

    align-self:
        start;

    margin:
        0;

    color:
        rgba(184,155,104,.62);

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

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

    font-weight:
        400;

    line-height:
        1;
}


.live-year-list {
    display:
        grid;

    gap:
        1px;

    background:
        rgba(184,155,104,.12);

    border:
        1px solid
        rgba(184,155,104,.12);
}


.live-card {
    position:
        relative;

    min-height:
        190px;

    display:
        grid;

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

    align-items:
        stretch;

    background:
        #0b0b0b;

    transition:
        background .25s ease;
}


.live-card:hover {
    background:
        #10100f;
}


.live-card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        var(--live-gold-soft);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform .25s ease;
}


.live-card:hover::before {
    transform:
        scaleY(1);
}


.live-card-date {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        34px
        14px;

    color:
        rgba(205,177,120,.62);

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

    font-size:
        10px;

    letter-spacing:
        .08em;
}


.live-card-copy {
    min-width:
        0;

    padding:
        32px
        34px;
}


.live-card-label {
    margin:
        0
        0
        12px;

    color:
        rgba(184,155,104,.46);

    font-size:
        8px;

    letter-spacing:
        .12em;
}


.live-card-title {
    margin:
        0;

    color:
        rgba(255,255,255,.88);

    font-size:
        clamp(
            20px,
            2vw,
            30px
        );

    font-weight:
        350;

    line-height:
        1.42;
}


.live-card-summary {
    max-width:
        780px;

    margin:
        16px
        0
        0;

    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    color:
        rgba(255,255,255,.35);

    font-size:
        11px;

    line-height:
        1.8;
}


.live-card-more {
    display:
        inline-block;

    margin-top:
        20px;

    color:
        rgba(203,174,116,.52);

    font-size:
        9px;

    letter-spacing:
        .08em;

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


.live-card:hover
.live-card-more {
    color:
        var(--live-gold-soft);

    transform:
        translateX(4px);
}


.live-card-media {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        190px;

    background:
        #060606;

    border-left:
        1px solid
        rgba(184,155,104,.10);
}


.live-card-media img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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


.live-card:hover
.live-card-media img {
    transform:
        scale(1.025);
}


.live-card-media-empty {
    display:
        grid;

    place-items:
        center;
}


.live-card-media-empty img {
    width:
        34%;

    height:
        auto;

    object-fit:
        contain;

    filter:
        brightness(0)
        invert(1);

    opacity:
        .055;
}


/* =========================================================
   A-logo inline
========================================================= */

.live-a-inline {
    display:
        inline-block;

    width:
        .80em;

    height:
        .80em;

    margin:
        0
        .055em;

    object-fit:
        contain;

    vertical-align:
        -.07em;

    filter:
        brightness(0)
        invert(1);

    opacity:
        .92;
}


/* =========================================================
   Detail stage
========================================================= */

.live-detail-stage {
    position:
        relative;

    padding:
        168px
        0
        100px;

    background:
        radial-gradient(
            circle at 17% 30%,
            rgba(184,155,104,.075),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #080808,
            #0b0b0b
        );

    border-bottom:
        1px solid
        var(--live-gold-line);
}


.live-detail-grid {
    display:
        grid;

    grid-template-columns:
        minmax(330px,.88fr)
        minmax(0,1.12fr);

    gap:
        clamp(
            62px,
            8vw,
            120px
        );

    align-items:
        start;
}


.live-detail-media {
    position:
        sticky;

    top:
        120px;
}


.live-detail-main-media {
    position:
        relative;

    min-height:
        540px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(184,155,104,.05),
            transparent 38%
        ),
        #060606;

    border:
        1px solid
        rgba(184,155,104,.17);
}


.live-detail-main-media img.live-main-image {
    width:
        100%;

    height:
        100%;

    max-height:
        720px;

    object-fit:
        contain;
}


.live-no-visual {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        26px;
}


.live-no-visual::before {
    content:
        "";

    position:
        absolute;

    inset:
        20px;

    border:
        1px solid
        rgba(184,155,104,.06);
}


.live-no-visual-logo {
    width:
        120px;

    max-width:
        28%;

    filter:
        brightness(0)
        invert(1);

    opacity:
        .075;
}


.live-no-visual span {
    color:
        rgba(203,174,116,.43);

    font-size:
        10px;

    letter-spacing:
        .15em;
}


.live-detail-gallery {
    display:
        grid;

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

    gap:
        10px;

    margin-top:
        12px;
}


.live-detail-gallery figure {
    margin:
        0;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        #060606;

    border:
        1px solid
        rgba(184,155,104,.10);
}


.live-detail-gallery img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.live-detail-copy {
    min-width:
        0;
}


.live-detail-kicker {
    margin:
        0
        0
        46px;

    color:
        var(--live-gold);

    font-size:
        10px;

    letter-spacing:
        .14em;
}


.live-detail-meta {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        16px;

    margin-bottom:
        22px;
}


.live-detail-date {
    color:
        var(--live-gold-soft);

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

    font-size:
        10px;

    letter-spacing:
        .10em;
}


.live-detail-type {
    padding-left:
        16px;

    border-left:
        1px solid
        rgba(184,155,104,.24);

    color:
        rgba(255,255,255,.30);

    font-size:
        9px;

    letter-spacing:
        .08em;
}


.live-detail-title {
    margin:
        0;

    color:
        var(--live-white);

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

    font-weight:
        300;

    line-height:
        1.14;

    letter-spacing:
        -.015em;
}


.live-detail-original-title {
    margin:
        24px
        0
        0;

    color:
        rgba(255,255,255,.40);

    font-size:
        13px;

    line-height:
        1.7;
}


.live-detail-lead {
    margin:
        32px
        0
        0;

    color:
        rgba(255,255,255,.48);

    font-size:
        13px;

    line-height:
        1.95;
}


/* =========================================================
   Detail body
========================================================= */

.live-detail-body {
    padding:
        74px
        0
        138px;

    background:
        linear-gradient(
            180deg,
            #0c0c0c,
            #080808
        );
}


.live-article {
    width:
        min(
            940px,
            100%
        );

    margin:
        0 auto;
}


.live-copy {
    color:
        rgba(255,255,255,.72);

    font-size:
        15px;

    line-height:
        2.05;
}


.live-copy p {
    margin:
        0
        0
        26px;
}


.live-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        52px;

    padding-top:
        28px;

    border-top:
        1px solid
        var(--live-line);
}


.live-tag {
    padding:
        7px
        10px;

    border:
        1px solid
        rgba(184,155,104,.17);

    color:
        rgba(203,174,116,.60);

    font-size:
        8px;

    letter-spacing:
        .07em;
}


.live-source {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        26px;

    margin-top:
        44px;

    padding:
        25px
        0;

    border-top:
        1px solid
        var(--live-gold-line);

    border-bottom:
        1px solid
        var(--live-gold-line);
}


.live-source span {
    color:
        rgba(255,255,255,.33);

    font-size:
        10px;
}


.live-source a {
    color:
        var(--live-gold-soft);

    font-size:
        9px;
}


.live-adjacent {
    display:
        grid;

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

    gap:
        1px;

    margin-top:
        72px;

    background:
        rgba(184,155,104,.13);

    border:
        1px solid
        rgba(184,155,104,.13);
}


.live-adjacent-link {
    min-height:
        170px;

    padding:
        30px;

    background:
        #0a0a0a;

    transition:
        background .2s ease;
}


.live-adjacent-link:hover {
    background:
        #10100f;
}


.live-adjacent-link.is-next {
    text-align:
        right;
}


.live-adjacent-label {
    display:
        block;

    margin-bottom:
        15px;

    color:
        rgba(203,174,116,.57);

    font-size:
        9px;
}


.live-adjacent-title {
    color:
        rgba(255,255,255,.68);

    font-size:
        12px;

    line-height:
        1.75;
}


.live-not-found {
    min-height:
        72vh;

    display:
        grid;

    place-items:
        center;

    padding:
        150px
        40px
        80px;

    text-align:
        center;
}


.live-not-found h1 {
    margin:
        0
        0
        16px;

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

    font-size:
        56px;

    font-weight:
        400;
}


.live-not-found p {
    color:
        rgba(255,255,255,.38);
}


.live-not-found a {
    display:
        inline-block;

    margin-top:
        24px;

    color:
        var(--live-gold-soft);

    font-size:
        10px;
}


.live-status {
    margin:
        60px
        0;

    color:
        rgba(255,255,255,.35);

    font-size:
        12px;
}


/* =========================================================
   Footer
========================================================= */

.live-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding:
        36px
        40px;

    background:
        #060606;

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

    color:
        rgba(255,255,255,.25);

    font-size:
        8px;

    letter-spacing:
        .12em;
}


.live-footer a {
    color:
        rgba(203,174,116,.55);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1040px) {

    .live-card {
        grid-template-columns:
            105px
            minmax(0,1fr)
            150px;
    }

}


@media (max-width: 860px) {

    .live-shell {
        width:
            min(
                100% - 42px,
                1320px
            );
    }

    .live-masthead-grid {
        grid-template-columns:
            1fr;

        align-items:
            start;
    }

    .live-count-block {
        align-items:
            flex-start;
    }

    .live-toolbar {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .live-year-group {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }

    .live-year-heading {
        position:
            relative;

        top:
            auto;
    }

    .live-detail-grid {
        grid-template-columns:
            1fr;

        gap:
            54px;
    }

    .live-detail-media {
        position:
            relative;

        top:
            auto;

        width:
            min(
                680px,
                100%
            );
    }

}


@media (max-width: 620px) {

    .live-page
    .live-subpage-header {
        padding:
            20px
            22px;
    }

    .live-masthead {
        padding-top:
            140px;
    }

    .live-card {
        grid-template-columns:
            1fr;
    }

    .live-card-date {
        justify-content:
            flex-start;

        padding:
            24px
            24px
            0;
    }

    .live-card-copy {
        padding:
            20px
            24px
            30px;
    }

    .live-card-media {
        min-height:
            220px;

        border-left:
            0;

        border-top:
            1px solid
            rgba(184,155,104,.10);
    }

    .live-year-filter {
        flex:
            1
            1
            calc(33.333% - 8px);
    }

    .live-detail-main-media {
        min-height:
            420px;
    }

    .live-source,
    .live-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .live-adjacent {
        grid-template-columns:
            1fr;
    }

    .live-adjacent-link.is-next {
        text-align:
            left;
    }

    .live-footer {
        padding:
            30px
            22px;
    }

}


/* =========================================================
   v13 · LIVE 数据库统计 / 具体场次
========================================================= */

.live-count-stack {
    display:
        flex;

    align-items:
        flex-end;

    gap:
        42px;
}


.live-count-stack
.live-count-block + .live-count-block {
    padding-left:
        42px;

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


.live-schedule {
    margin-top:
        70px;

    padding-top:
        34px;

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


.live-schedule-heading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-bottom:
        20px;
}


.live-schedule-heading p {
    margin:
        0;

    color:
        rgba(218,188,128,.80);

    font-size:
        10px;

    letter-spacing:
        .12em;
}


.live-schedule-heading span {
    color:
        rgba(255,255,255,.28);

    font-size:
        9px;
}


.live-show-list {
    display:
        grid;

    gap:
        1px;

    background:
        rgba(184,155,104,.11);

    border:
        1px solid
        rgba(184,155,104,.11);
}


.live-show-row {
    display:
        grid;

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

    gap:
        26px;

    align-items:
        center;

    min-height:
        88px;

    padding:
        18px
        22px;

    background:
        #0a0a0a;
}


.live-show-date {
    color:
        rgba(203,174,116,.63);

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

    font-size:
        10px;

    letter-spacing:
        .06em;
}


.live-show-place {
    min-width:
        0;
}


.live-show-place strong {
    display:
        block;

    color:
        rgba(255,255,255,.72);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.65;
}


.live-show-status {
    display:
        inline-block;

    margin-top:
        6px;

    color:
        rgba(203,174,116,.55);

    font-size:
        8px;
}


.live-show-time {
    color:
        rgba(255,255,255,.33);

    font-size:
        9px;

    line-height:
        1.6;

    text-align:
        right;
}


@media (max-width: 860px) {

    .live-count-stack {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            24px;
    }


    .live-count-stack
    .live-count-block + .live-count-block {
        padding-left:
            0;

        padding-top:
            24px;

        border-left:
            0;

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


    .live-show-row {
        grid-template-columns:
            110px
            minmax(0,1fr);
    }


    .live-show-time {
        grid-column:
            2;

        text-align:
            left;
    }

}


@media (max-width: 560px) {

    .live-show-row {
        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .live-show-time {
        grid-column:
            auto;
    }

}