.live-index {
    --live-bg:#07070A;
    --live-white:#F7F7FB;
    --live-muted:#9993A5;
    --live-violet:#8B43A8;
    --live-cyan:#12B4D6;
    --live-pink:#EA5B78;

    min-height:100vh;

    background:
        radial-gradient(
            circle at 90% 3%,
            rgba(234,91,120,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 60%,
            rgba(18,180,214,.04),
            transparent 28%
        ),
        #07070A;
}

.live-index-shell {
    width:min(
        1480px,
        calc(100% - 40px)
    );

    margin:auto;

    padding:
        clamp(55px,8vw,115px)
        0
        100px;
}

.live-index-hero {
    display:grid;

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

    align-items:center;

    gap:50px;

    min-height:420px;
}

.live-kicker {
    color:#12B4D6;

    font-size:.58rem;
    font-weight:900;

    letter-spacing:.18em;
}

.live-index-hero h1 {
    margin:15px 0 0;

    font-family:Georgia,serif;

    font-size:clamp(
        4.5rem,
        10vw,
        9rem
    );

    line-height:.82;

    letter-spacing:-.075em;
}

.live-index-hero h1 span {
    color:transparent;

    background:
        linear-gradient(
            115deg,
            #8B43A8,
            #EA5B78 52%,
            #12B4D6
        );

    background-clip:text;
    -webkit-background-clip:text;
}

.live-index-hero p {
    max-width:650px;

    color:var(--live-muted);

    line-height:1.7;
}

.live-index-orbit {
    display:grid;

    place-items:center;

    width:280px;
    height:280px;

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

    border-radius:50%;

    color:
        rgba(247,247,251,.16);

    font-size:3rem;

    font-weight:900;

    letter-spacing:.14em;

    animation:
        liveOrbitFloat
        5s ease-in-out
        infinite alternate;
}

.live-index-orbit span {
    color:#EA5B78;

    font-size:1rem;

    text-shadow:
        0 0 25px
        rgba(234,91,120,.65);
}

.live-current {
    display:grid;

    grid-template-columns:
        minmax(350px,.9fr)
        minmax(0,1.1fr);

    overflow:hidden;

    margin-top:20px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(139,67,168,.055),
            rgba(255,255,255,.008)
        );

    color:inherit;

    text-decoration:none;

    box-shadow:
        0 45px 120px
        rgba(0,0,0,.28);

    transition:
        transform .35s ease,
        border-color .35s ease;
}

.live-current:hover {
    transform:translateY(-5px);

    border-color:
        rgba(234,91,120,.24);
}

.live-current-media {
    position:relative;

    min-height:470px;

    overflow:hidden;
}

.live-current-media img {
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s ease;
}

.live-current:hover
.live-current-media img {
    transform:scale(1.05);
}

.live-badge-live {
    position:absolute;

    top:18px;
    left:18px;

    padding:
        9px 12px;

    border-radius:999px;

    background:
        rgba(234,91,120,.92);

    color:white;

    font-size:.55rem;

    font-weight:900;

    box-shadow:
        0 0 30px
        rgba(234,91,120,.28);
}

.live-current-copy {
    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        clamp(28px,5vw,65px);
}

.live-current-copy h2 {
    margin:13px 0 0;

    font-family:Georgia,serif;

    font-size:clamp(
        2.5rem,
        5vw,
        5.2rem
    );

    line-height:.9;

    letter-spacing:-.05em;
}

.live-current-copy p {
    color:var(--live-muted);

    line-height:1.7;
}

.live-cta {
    margin-top:25px;

    color:#12B4D6;

    font-weight:800;
}

.live-index-section {
    margin-top:
        clamp(70px,9vw,125px);
}

.live-index-section
> header h2 {
    margin:10px 0 25px;

    font-family:Georgia,serif;

    font-size:clamp(
        2.5rem,
        5vw,
        4.6rem
    );

    letter-spacing:-.05em;
}

.live-index-grid {
    display:grid;

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

    gap:14px;
}

.live-card {
    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:21px;

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

    color:inherit;

    text-decoration:none;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.live-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(139,67,168,.20);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.22);
}

.live-card img {
    display:block;

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    transition:
        transform .6s ease;
}

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

.live-card > div {
    padding:19px;
}

.live-card-state {
    color:#EA5B78;

    font-size:.49rem;

    font-weight:900;

    letter-spacing:.12em;
}

.live-card-state.replay {
    color:#12B4D6;
}

.live-card h3 {
    margin:9px 0 0;

    font-family:Georgia,serif;

    font-size:1.45rem;

    line-height:1.08;
}

.live-card time,
.live-replay-link {
    display:block;

    margin-top:10px;

    color:var(--live-muted);

    font-size:.61rem;
}

.live-empty {
    display:grid;

    place-items:center;
    align-content:center;

    min-height:430px;

    margin-top:40px;

    text-align:center;

    border:
        1px dashed
        rgba(255,255,255,.09);

    border-radius:26px;
}

.live-empty > span {
    color:#EA5B78;

    font-size:2rem;
}

.live-empty p {
    color:var(--live-muted);
}

@keyframes liveOrbitFloat {
    from {
        transform:
            translateY(-8px)
            rotate(-3deg);
    }

    to {
        transform:
            translateY(12px)
            rotate(3deg);
    }
}

@media(max-width:900px) {

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

    .live-index-orbit {
        display:none;
    }

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

    .live-current-media {
        min-height:0;

        aspect-ratio:16/10;
    }

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

@media(max-width:580px) {

    .live-index-shell {
        width:
            calc(100% - 24px);

        padding-top:40px;
    }

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

    .live-index-hero h1 {
        font-size:
            clamp(
                4rem,
                19vw,
                6rem
            );
    }
}