/* ==========================================================
   320 FM · SHOW DETAIL FINAL
   ========================================================== */

.fm-show-final{
    color:#edf3f5;
}


/* HERO */

.fm-show-final__hero{
    position:relative;
    min-height:590px;
    overflow:hidden;
    background:#05090c;
}

.fm-show-final__show-art{
    position:absolute;
    inset:0 34% 0 0;

    background-image:var(--show-cover);
    background-size:cover;
    background-position:center;

    filter:
        saturate(.9)
        brightness(.66);

    transform:scale(1.025);
}

.fm-show-final__dj-art{
    position:absolute;
    inset:0 0 0 37%;

    background-image:var(--dj-image);
    background-size:cover;
    background-position:center 22%;

    filter:
        saturate(.83)
        contrast(1.03)
        brightness(.72);

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.18) 12%,
            #000 39%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.18) 12%,
            #000 39%,
            #000 100%
        );
}

.fm-show-final__hero-gradient{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 65% 40%,
            transparent 0 20%,
            rgba(5,9,12,.11) 53%,
            rgba(5,9,12,.42) 100%
        ),
        linear-gradient(
            90deg,
            rgba(4,7,9,.95) 0%,
            rgba(4,7,9,.63) 27%,
            rgba(4,7,9,.26) 55%,
            rgba(4,7,9,.16) 74%,
            rgba(4,7,9,.58) 100%
        ),
        linear-gradient(
            0deg,
            #070d10 0%,
            transparent 38%
        );
}

.fm-show-final__hero-inner{
    position:relative;
    z-index:3;

    width:min(1320px,calc(100% - 64px));
    min-height:590px;

    margin:0 auto;

    display:flex;
    align-items:flex-end;

    padding:80px 0 68px;
}

.fm-show-final__hero-copy{
    max-width:750px;
}

.fm-show-final__genre{
    color:#2aafe1;

    font-size:11px;
    font-weight:900;
    letter-spacing:.18em;
}

.fm-show-final__hero h1{
    margin:9px 0 11px;

    color:#fff;

    font-size:clamp(58px,7vw,98px);
    line-height:.88;

    font-weight:950;
    letter-spacing:-.07em;
}

.fm-show-final__dj{
    display:inline-block;

    color:#dce6e9;

    font-size:18px;
    font-weight:700;

    text-decoration:none;

    transition:color .18s ease;
}

.fm-show-final__dj:hover{
    color:#fff;
}

.fm-show-final__socials{
    display:flex;
    flex-wrap:wrap;
    gap:17px;

    margin-top:17px;
}

.fm-show-final__socials a{
    display:flex;
    align-items:center;
    gap:5px;

    color:#83949b;

    text-decoration:none;

    font-size:10px;
    font-weight:900;
    letter-spacing:.105em;

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

.fm-show-final__socials a:hover{
    color:#fff;
    transform:translateY(-1px);
}

.fm-show-final__socials span{
    color:#d52d94;
}

.fm-show-final__brand{
    position:absolute;
    right:0;
    bottom:40px;

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

    font-size:58px;
    line-height:.8;

    font-weight:950;
    letter-spacing:-.075em;
}

.fm-show-final__brand small{
    font-size:.43em;
}


/* WORKSPACE */

.fm-show-final__workspace{
    width:min(1180px,calc(100% - 64px));

    margin:0 auto;

    display:grid;
    grid-template-columns:
        minmax(0,1.85fr)
        minmax(280px,.75fr);

    gap:25px;

    padding:68px 0 78px;
}

.fm-show-final__workspace.has-no-sets{
    grid-template-columns:minmax(280px,380px);
    justify-content:end;
}


/* HEAD */

.fm-show-final__section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:25px;

    margin-bottom:20px;
}

.fm-show-final__section-head span,
.fm-show-final__about-kicker{
    color:#2aafe1;

    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
}

.fm-show-final__section-head h2{
    margin:5px 0 0;

    color:#f0f4f5;

    font-size:27px;
    font-weight:950;
    letter-spacing:-.045em;
}

.fm-show-final__section-head > a{
    display:flex;
    align-items:center;
    gap:8px;

    color:#687a82;

    text-decoration:none;

    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
}

.fm-show-final__section-head > a span{
    color:#d52d94;
    font-size:15px;
}


/* SETS */

.fm-show-set-list{
    display:grid;
    gap:11px;
}

.fm-show-set{
    min-height:165px;

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

    overflow:hidden;

    border:1px solid #202f36;
    border-radius:8px;

    background:
        linear-gradient(
            110deg,
            #0a1216,
            #080e11
        );

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

.fm-show-set:hover{
    transform:translateX(3px);
    border-color:#354b55;
}

.fm-show-set__art{
    position:relative;

    min-height:165px;

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

.fm-show-set__art::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(5,9,11,.03),
            rgba(5,9,11,.55)
        );
}

.fm-show-set__art > span{
    position:absolute;
    z-index:2;
    left:10px;
    top:10px;

    padding:6px 7px;

    border-radius:3px;

    background:
        rgba(4,8,10,.74);

    color:#e4ecef;

    font-size:9px;
    font-weight:900;
    letter-spacing:.11em;
}

.fm-show-set__art button,
.fm-show-set__art > a{
    position:absolute;
    z-index:3;

    left:50%;
    top:50%;

    width:48px;
    height:48px;

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

    display:grid;
    place-items:center;

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

    border-radius:50%;

    background:
        rgba(7,12,15,.78);

    color:#fff;

    text-decoration:none;
    font-size:15px;

    cursor:pointer;

    backdrop-filter:blur(8px);
}

.fm-show-set__art button:hover,
.fm-show-set__art > a:hover{
    background:#d52d94;
}

.fm-show-set__body{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:19px 21px;
}

.fm-show-set__meta > span{
    color:#2aafe1;

    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;
}

.fm-show-set__meta h3{
    margin:4px 0 2px;

    color:#eaf0f2;

    font-size:16px;
    line-height:1.15;

    font-weight:900;
    letter-spacing:-.025em;
}

.fm-show-set__meta p{
    margin:0;

    color:#6c7e86;

    font-size:11px;
}

.fm-show-set__wave{
    position:relative;

    height:39px;

    display:flex;
    align-items:center;
    gap:1px;

    margin:10px 0 7px;

    overflow:hidden;
}

.fm-show-set__wave i{
    flex:1;

    min-width:1px;
    max-width:3px;

    height:var(--peak);
    min-height:3px;

    border-radius:2px;

    background:#33474f;
}

.fm-show-set__wave > span{
    position:absolute;
    inset:0 auto 0 0;

    width:0%;

    border-right:
        1px solid #2aafe1;

    background:
        rgba(42,175,225,.09);

    pointer-events:none;
}

.fm-show-set__footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding-top:8px;

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

    color:#6f8188;

    font-size:10px;

    font-variant-numeric:tabular-nums;
}

.fm-show-set__footer a{
    color:#596c74;

    text-decoration:none;

    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
}


/* NEXT SHOW */

.fm-show-final__next{
    position:relative;

    align-self:start;

    min-height:310px;

    padding:26px;

    overflow:hidden;

    border:1px solid #263940;
    border-radius:9px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(42,175,225,.12),
            transparent 40%
        ),
        #091115;

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.19);
}

.fm-show-final__next::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:#2aafe1;
}

.fm-show-final__next.is-countdown::before,
.fm-show-final__next.is-live::before{
    background:#d52d94;
}

.fm-show-final__next-head{
    display:flex;
    align-items:center;
    gap:8px;

    color:#6f8188;

    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.fm-show-final__next-head i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#2aafe1;
}

.fm-show-final__next.is-live
.fm-show-final__next-head i{
    background:#d52d94;

    box-shadow:
        0 0 14px
        rgba(213,45,148,.75);

    animation:
        fmShowFinalPulse 1.4s ease-in-out infinite;
}

@keyframes fmShowFinalPulse{
    0%,100%{opacity:.4}
    50%{opacity:1}
}

.fm-show-final__next-body{
    margin-top:60px;
}

.fm-show-final__next-body > span{
    display:block;

    color:#53676f;

    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}

.fm-show-final__next-body strong{
    display:block;

    margin-top:8px;

    color:#f1f5f6;

    font-size:clamp(27px,3vw,43px);
    line-height:.96;

    font-weight:950;
    letter-spacing:-.055em;

    font-variant-numeric:tabular-nums;
}

.fm-show-final__program{
    position:absolute;
    left:26px;
    right:26px;
    bottom:24px;

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

    padding-top:14px;

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

    color:#6c7f87;

    text-decoration:none;

    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
}

.fm-show-final__program span{
    color:#d52d94;
    font-size:16px;
}


/* ABOUT */

.fm-show-final__about{
    position:relative;

    width:min(1180px,calc(100% - 64px));

    margin:0 auto;

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

    gap:38px;

    overflow:hidden;

    padding:78px 0 90px;

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

.fm-show-final__about-index{
    color:#566971;

    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
}

.fm-show-final__about-index span{
    display:block;
}

.fm-show-final__about-index strong{
    display:block;

    margin-top:9px;

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

    font-size:15px;
}

.fm-show-final__about-main{
    position:relative;
    z-index:2;

    max-width:830px;
}

.fm-show-final__about h2{
    margin:8px 0 28px;

    color:#f1f5f6;

    font-size:clamp(41px,5vw,70px);
    line-height:.94;

    font-weight:950;
    letter-spacing:-.065em;
}

.fm-show-final__about h2 em{
    display:block;

    color:#7d8e95;

    font-style:normal;
}

.fm-show-final__description{
    max-width:770px;

    color:#a5b3b8;

    font-size:16px;
    line-height:1.95;
}

.fm-show-final__description.is-muted{
    color:#64767e;
}

.fm-show-final__about-meta{
    display:flex;
    flex-wrap:wrap;
    gap:40px;

    margin-top:42px;
    padding-top:23px;

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

.fm-show-final__about-meta div{
    display:grid;
    gap:5px;
}

.fm-show-final__about-meta span{
    color:#52646c;

    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
}

.fm-show-final__about-meta strong{
    color:#bcc9ce;

    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.fm-show-final__about-watermark{
    position:absolute;

    right:-10px;
    bottom:-58px;

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

    font-size:245px;
    line-height:.8;

    font-weight:950;
    letter-spacing:-.09em;

    pointer-events:none;
}


/* FOOTER */

.fm-show-final__footer{
    width:min(1180px,calc(100% - 64px));

    margin:0 auto 90px;
    padding-top:27px;

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

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

.fm-show-final__footer a{
    display:flex;
    align-items:center;
    gap:12px;

    color:#71838b;

    text-decoration:none;

    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
}

.fm-show-final__footer span{
    color:#d52d94;
    font-size:16px;
}


/* RESPONSIVE */

@media(max-width:900px){

    .fm-show-final__workspace{
        grid-template-columns:1fr;
    }

    .fm-show-final__workspace.has-no-sets{
        grid-template-columns:1fr;
    }

    .fm-show-final__next{
        min-height:250px;
    }

    .fm-show-final__next-body{
        margin-top:38px;
    }
}

@media(max-width:700px){

    .fm-show-final__hero{
        min-height:570px;
    }

    .fm-show-final__show-art{
        inset:0;
    }

    .fm-show-final__dj-art{
        inset:0 0 0 26%;
    }

    .fm-show-final__hero-inner,
    .fm-show-final__workspace,
    .fm-show-final__about,
    .fm-show-final__footer{
        width:calc(100% - 36px);
    }

    .fm-show-final__hero-inner{
        padding-bottom:45px;
    }

    .fm-show-final__hero h1{
        font-size:clamp(50px,15vw,75px);
    }

    .fm-show-set{
        grid-template-columns:115px minmax(0,1fr);
    }

    .fm-show-set__art{
        min-height:155px;
    }

    .fm-show-final__about{
        grid-template-columns:1fr;
    }

    .fm-show-final__about-index{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){

    .fm-show-final__next.is-live
    .fm-show-final__next-head i{
        animation:none;
    }
}