/* ==========================================================================
   CSB PODCAST — FICHE ÉPISODE
   ULTRA PREMIUM / CINEMATIC EXPERIENCE 2026
   ========================================================================== */

#csb-episode {
    --ep-bg:#07070A;
    --ep-bg-soft:#0B0A0F;
    --ep-panel:#101015;
    --ep-panel-2:#15121B;

    --ep-white:#F7F7FB;
    --ep-text:#DCD8E3;
    --ep-muted:#938D9E;

    --ep-violet:#8B43A8;
    --ep-cyan:#12B4D6;
    --ep-pink:#EA5B78;
    --ep-red:#FF3B30;

    --ep-line:rgba(255,255,255,.078);
    --ep-line-strong:rgba(255,255,255,.13);

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

    --ep-glow:
        0 40px 120px
        rgba(0,0,0,.32);

    --ep-pointer-x:50%;
    --ep-pointer-y:20%;

    position:relative;
    isolation:isolate;

    width:
        min(
            1480px,
            calc(100% - 42px)
        );

    margin:0 auto;

    padding:
        34px 0
        100px;

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

/* ==========================================================================
   AMBIANCE GLOBALE
   ========================================================================== */

#csb-episode::before {
    content:"";

    position:fixed;
    z-index:-4;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at
            var(--ep-pointer-x)
            var(--ep-pointer-y),
            rgba(139,67,168,.095),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(234,91,120,.065),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 64%,
            rgba(18,180,214,.04),
            transparent 28%
        ),
        #07070A;
}

#csb-episode::after {
    content:"";

    position:fixed;
    z-index:-3;

    inset:0;

    pointer-events:none;

    opacity:.21;

    background-image:
        linear-gradient(
            rgba(255,255,255,.014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.014) 1px,
            transparent 1px
        );

    background-size:
        84px 84px;

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            transparent 82%
        );
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.ep-breadcrumb {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:9px;

    min-height:37px;

    margin-bottom:
        clamp(
            30px,
            5vw,
            65px
        );

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

    font-size:.59rem;

    font-weight:760;

    letter-spacing:.03em;
}

.ep-breadcrumb a {
    position:relative;

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

    text-decoration:none;

    transition:
        color .2s ease;
}

.ep-breadcrumb a::after {
    content:"";

    position:absolute;

    right:0;
    bottom:-4px;
    left:0;

    height:1px;

    transform:scaleX(0);

    transform-origin:left;

    background:
        var(--ep-gradient);

    transition:
        transform .25s ease;
}

.ep-breadcrumb a:hover {
    color:var(--ep-cyan);
}

.ep-breadcrumb a:hover::after {
    transform:scaleX(1);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.ep-hero {
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(370px,.78fr)
        minmax(0,1.22fr);

    gap:
        clamp(
            50px,
            8vw,
            125px
        );

    align-items:center;

    min-height:
        min(
            720px,
            calc(100vh - 160px)
        );

    padding-bottom:
        clamp(
            70px,
            9vw,
            125px
        );
}

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

    position:absolute;

    top:8%;
    bottom:16%;
    left:39.5%;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.065),
            transparent
        );

    pointer-events:none;
}

/* ==========================================================================
   COVER
   ========================================================================== */

.ep-art {
    --rx:0deg;
    --ry:0deg;
    --shine-x:50%;
    --shine-y:50%;

    position:relative;

    width:
        min(
            520px,
            100%
        );

    aspect-ratio:1;

    justify-self:start;

    overflow:hidden;

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

    border-radius:
        clamp(
            30px,
            4vw,
            50px
        );

    transform:
        perspective(1200px)
        rotateX(var(--rx))
        rotateY(var(--ry));

    transform-style:preserve-3d;

    background:
        linear-gradient(
            145deg,
            #15121B,
            #0B0A0F
        );

    box-shadow:
        0 65px 160px
        rgba(0,0,0,.52),
        0 0 0 1px
        rgba(255,255,255,.025)
        inset;

    transition:
        transform .13s ease-out,
        box-shadow .3s ease;
}

.ep-art::before {
    content:"";

    position:absolute;

    z-index:3;

    inset:0;

    pointer-events:none;

    opacity:.36;

    background:
        radial-gradient(
            circle at
            var(--shine-x)
            var(--shine-y),
            rgba(255,255,255,.34),
            transparent 28%
        );
}

.ep-art::after {
    content:"";

    position:absolute;

    z-index:2;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            transparent 25%,
            transparent 63%,
            rgba(7,7,10,.48)
        );
}

.ep-art img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.015);

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

.ep-art:hover {
    box-shadow:
        0 75px 175px
        rgba(0,0,0,.58),
        0 0 80px
        rgba(139,67,168,.055);
}

.ep-art:hover img {
    transform:scale(1.055);

    filter:
        saturate(1.08)
        contrast(1.025);
}

.ep-art-label {
    position:absolute;

    z-index:5;

    right:18px;
    bottom:18px;

    display:inline-flex;

    align-items:center;

    min-height:32px;

    padding:
        0
        10px;

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

    border-radius:9px;

    background:
        rgba(7,7,10,.62);

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

    font-size:.47rem;

    font-weight:900;

    letter-spacing:.13em;

    backdrop-filter:
        blur(14px);
}

/* ==========================================================================
   HERO INTRO
   ========================================================================== */

.ep-intro {
    min-width:0;
}

.ep-kicker {
    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--ep-cyan);

    font-size:.57rem;

    font-weight:900;

    letter-spacing:.18em;
}

.ep-kicker::before {
    content:"";

    width:30px;
    height:1px;

    background:var(--ep-cyan);

    box-shadow:
        0 0 16px
        rgba(18,180,214,.45);
}

.ep-badges {
    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:18px;
}

.ep-badges > span {
    display:inline-flex;

    align-items:center;

    min-height:29px;

    padding:
        0
        9px;

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

    border-radius:999px;

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

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

    font-size:.51rem;

    font-weight:800;

    backdrop-filter:
        blur(10px);
}

.ep-badges > span:first-child {
    border-color:
        rgba(18,180,214,.16);

    background:
        rgba(18,180,214,.035);

    color:var(--ep-cyan);
}

.ep-intro h1 {
    max-width:900px;

    margin:
        19px 0
        0;

    color:var(--ep-white);

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

    font-size:
        clamp(
            4.2rem,
            8vw,
            8.5rem
        );

    line-height:.82;

    letter-spacing:-.075em;

    text-wrap:balance;
}

.ep-intro h1::after {
    content:"";

    display:block;

    width:
        clamp(
            135px,
            24vw,
            340px
        );

    height:2px;

    margin-top:25px;

    transform-origin:left;

    background:var(--ep-gradient);

    animation:
        epHeroLine
        1s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.ep-summary {
    max-width:780px;

    margin:
        26px 0
        0;

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

    font-size:
        clamp(
            .95rem,
            1.25vw,
            1.08rem
        );

    line-height:1.78;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */

.ep-actions {
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin-top:33px;
}

#csb-episode .ep-button {
    position:relative;

    display:inline-flex;

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

    gap:8px;

    min-height:45px;

    padding:
        0
        14px;

    overflow:hidden;

    border:
        1px solid
        var(--ep-line);

    border-radius:12px;

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

    color:
        var(--ep-text);

    font-size:.65rem;

    font-weight:820;

    text-decoration:none;

    cursor:pointer;

    box-shadow:none;

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

#csb-episode .ep-button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(18,180,214,.24);

    background:
        rgba(18,180,214,.035);

    color:var(--ep-cyan);
}

#csb-episode .ep-primary {
    border:0;

    background:var(--ep-gradient);

    color:white;

    box-shadow:
        0 18px 50px
        rgba(139,67,168,.20);
}

#csb-episode .ep-primary::before {
    content:"";

    position:absolute;

    top:-120%;
    left:-45%;

    width:35%;
    height:350%;

    transform:rotate(24deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transition:
        left .65s ease;
}

#csb-episode .ep-primary:hover {
    color:white;

    box-shadow:
        0 25px 65px
        rgba(139,67,168,.28);
}

#csb-episode .ep-primary:hover::before {
    left:120%;
}

/* ==========================================================================
   FAVORITE / PLAYLIST OVERRIDE
   ========================================================================== */

#csb-episode .ep-favorite-button {
    min-height:45px;

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

    border-radius:12px;

    background:
        rgba(234,91,120,.035);
}

#csb-episode .ep-favorite-button:hover {
    border-color:
        rgba(234,91,120,.38);

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

    color:#F7F7FB;
}

#csb-episode
.ep-favorite-button.is-favorite {
    border-color:
        rgba(234,91,120,.34);

    background:
        linear-gradient(
            115deg,
            rgba(139,67,168,.15),
            rgba(234,91,120,.09)
        );

    box-shadow:
        0 15px 40px
        rgba(234,91,120,.07);
}

#csb-episode
.ep-playlist-popover {
    border-color:
        rgba(255,255,255,.10);

    background:
        rgba(13,12,18,.985);

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.62);

    backdrop-filter:
        blur(28px)
        saturate(140%);
}

/* ==========================================================================
   STATUS
   ========================================================================== */

.ep-status {
    min-height:17px;

    margin:
        9px 0
        0;

    color:var(--ep-cyan);

    font-size:.61rem;
}

/* ==========================================================================
   PANELS
   ========================================================================== */

.ep-panel {
    --panel-x:50%;
    --panel-y:50%;

    position:relative;

    overflow:hidden;

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

    border-radius:
        clamp(
            22px,
            3vw,
            30px
        );

    background:
        radial-gradient(
            circle at
            var(--panel-x)
            var(--panel-y),
            rgba(139,67,168,.045),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );

    box-shadow:
        0 30px 95px
        rgba(0,0,0,.16);

    backdrop-filter:
        blur(10px);

    transition:
        transform .35s
        cubic-bezier(.2,.8,.2,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

.ep-panel::before {
    content:"";

    position:absolute;

    z-index:1;

    top:0;
    left:8%;
    right:8%;

    height:1px;

    transform:scaleX(.45);

    background:var(--ep-gradient);

    opacity:.35;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.ep-panel:hover::before {
    transform:scaleX(.88);

    opacity:.75;
}

.ep-panel:hover {
    border-color:
        rgba(139,67,168,.15);

    box-shadow:
        0 40px 110px
        rgba(0,0,0,.20);
}

.ep-panel > * {
    position:relative;

    z-index:2;
}

/* ==========================================================================
   PARTICIPANTS
   ========================================================================== */

#csb-episode .ep-people {
    margin-top:0;

    padding:
        clamp(
            25px,
            4vw,
            42px
        );

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(139,67,168,.09),
            transparent 27%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(18,180,214,.04),
            transparent 28%
        ),
        rgba(255,255,255,.012);
}

.ep-panel-head {
    display:flex;

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

    gap:25px;
}

.ep-panel-head h2 {
    margin:
        10px 0
        0;

    color:var(--ep-white);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            2.1rem,
            4vw,
            4rem
        );

    line-height:.96;

    letter-spacing:-.045em;
}

#csb-episode .ep-people-lead {
    max-width:650px;

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

    font-size:.74rem;

    line-height:1.7;
}

#csb-episode
.ep-people-stats > span {
    border-color:
        rgba(255,255,255,.07);

    background:
        rgba(7,7,10,.30);

    backdrop-filter:
        blur(10px);
}

#csb-episode
.ep-person-card {
    padding:15px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.022),
            rgba(255,255,255,.007)
        );

    box-shadow:
        0 12px 40px
        rgba(0,0,0,.08);

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1),
        border-color .3s ease,
        box-shadow .3s ease;
}

#csb-episode
.ep-person-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(18,180,214,.18);

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

#csb-episode
.ep-person-guest:hover {
    border-color:
        rgba(234,91,120,.20);
}

/* ==========================================================================
   PLAYER STUDIO
   ========================================================================== */

.ep-studio {
    margin-top:
        clamp(
            28px,
            4vw,
            48px
        );

    padding:
        clamp(
            26px,
            4vw,
            46px
        );

    overflow:visible;
}

.ep-studio::after {
    content:"";

    position:absolute;

    z-index:0;

    top:-180px;
    right:-180px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(18,180,214,.055),
            transparent 68%
        );

    pointer-events:none;
}

.ep-modes {
    display:inline-flex;

    gap:4px;

    padding:4px;

    border:
        1px solid
        var(--ep-line);

    border-radius:12px;

    background:
        rgba(7,7,10,.35);
}

.ep-modes button {
    min-height:36px;

    padding:
        0
        13px;

    border:0;

    border-radius:8px;

    background:transparent;

    color:var(--ep-muted);

    font-size:.59rem;

    font-weight:800;

    cursor:pointer;
}

.ep-modes
button[aria-pressed="true"] {
    background:
        linear-gradient(
            115deg,
            rgba(139,67,168,.18),
            rgba(18,180,214,.08)
        );

    color:var(--ep-white);

    box-shadow:
        0 7px 25px
        rgba(0,0,0,.18);
}

/* ==========================================================================
   MEDIA SOURCE
   ========================================================================== */

.ep-source {
    position:relative;

    margin-top:28px;

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

    overflow:hidden;

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

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(7,7,10,.54),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.13);
}

.ep-source::before {
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(18,180,214,.40),
            rgba(139,67,168,.40),
            transparent
        );

    opacity:.45;
}

/* ==========================================================================
   AUDIO HEADING
   ========================================================================== */

.ep-audio-heading {
    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;
}

.ep-audio-heading strong {
    display:block;

    color:var(--ep-white);

    font-size:.78rem;
}

.ep-audio-heading p {
    margin:
        3px 0
        0;

    color:var(--ep-muted);

    font-size:.58rem;
}

/* ==========================================================================
   SOUND MARK
   ========================================================================== */

.ep-sound-mark {
    display:flex;

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

    gap:3px;

    width:47px;
    height:47px;

    flex:0 0 47px;

    border:
        1px solid
        rgba(18,180,214,.15);

    border-radius:14px;

    background:
        rgba(18,180,214,.035);

    box-shadow:
        0 0 35px
        rgba(18,180,214,.035);
}

.ep-sound-mark i {
    display:block;

    width:2px;

    border-radius:99px;

    background:
        linear-gradient(
            to top,
            var(--ep-violet),
            var(--ep-cyan)
        );

    transform-origin:center;
}

.ep-sound-mark i:nth-child(1) {height:9px;}
.ep-sound-mark i:nth-child(2) {height:17px;}
.ep-sound-mark i:nth-child(3) {height:24px;}
.ep-sound-mark i:nth-child(4) {height:15px;}
.ep-sound-mark i:nth-child(5) {height:8px;}

.ep-source.is-media-playing
.ep-sound-mark i {
    animation:
        epSoundBar
        .82s ease-in-out
        infinite alternate;
}

.ep-source.is-media-playing
.ep-sound-mark i:nth-child(2) {
    animation-delay:-.35s;
}

.ep-source.is-media-playing
.ep-sound-mark i:nth-child(3) {
    animation-delay:-.62s;
}

.ep-source.is-media-playing
.ep-sound-mark i:nth-child(4) {
    animation-delay:-.20s;
}

.ep-source.is-media-playing
.ep-sound-mark i:nth-child(5) {
    animation-delay:-.48s;
}

/* ==========================================================================
   NATIVE AUDIO / VIDEO
   ========================================================================== */

.ep-source > audio {
    display:block;

    width:100%;

    margin-top:10px;

    border-radius:12px;

    filter:
        saturate(.95)
        contrast(.95);
}

.ep-source > video {
    display:block;

    width:100%;

    max-height:690px;

    overflow:hidden;

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

    border-radius:20px;

    background:#000;

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

/* ==========================================================================
   CUSTOM AUDIO CONTROLS
   ========================================================================== */

.ep-audio-controls {
    display:grid;

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

    align-items:center;

    gap:18px;

    margin-top:18px;

    padding:
        16px;

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

    border-radius:17px;

    background:
        rgba(255,255,255,.014);
}

.ep-transport {
    display:flex;

    align-items:center;

    gap:7px;
}

.ep-round,
.ep-play {
    display:grid;

    place-items:center;

    border:
        1px solid
        var(--ep-line);

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

    color:var(--ep-text);

    cursor:pointer;

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

.ep-round {
    width:40px;
    height:40px;

    border-radius:12px;

    font-size:.58rem;

    font-weight:850;
}

.ep-play {
    width:48px;
    height:48px;

    border:0;

    border-radius:15px;

    background:var(--ep-gradient);

    color:white;

    box-shadow:
        0 12px 32px
        rgba(139,67,168,.20);
}

.ep-round:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(18,180,214,.20);

    color:var(--ep-cyan);
}

.ep-play:hover {
    transform:
        scale(1.04);

    box-shadow:
        0 18px 42px
        rgba(139,67,168,.28);
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.ep-timeline {
    min-width:0;
}

.ep-timeline input[type="range"] {
    width:100%;

    height:4px;

    appearance:none;

    border-radius:999px;

    outline:0;

    background:
        linear-gradient(
            90deg,
            var(--ep-violet),
            var(--ep-cyan)
        );

    cursor:pointer;
}

.ep-timeline
input[type="range"]::-webkit-slider-thumb {
    width:15px;
    height:15px;

    appearance:none;

    border:
        3px solid
        #07070A;

    border-radius:50%;

    background:var(--ep-cyan);

    box-shadow:
        0 0 0 2px
        rgba(18,180,214,.18),
        0 0 18px
        rgba(18,180,214,.28);
}

.ep-times {
    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:8px;

    color:var(--ep-muted);

    font-size:.54rem;

    font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   SPEED
   ========================================================================== */

.ep-speed {
    display:flex;

    align-items:center;

    gap:7px;

    color:var(--ep-muted);

    font-size:.55rem;
}

.ep-speed select {
    min-height:37px;

    padding:
        0
        26px
        0
        9px;

    border:
        1px solid
        var(--ep-line);

    border-radius:9px;

    outline:0;

    background:#111017;

    color:var(--ep-white);

    font-size:.58rem;

    cursor:pointer;
}

/* ==========================================================================
   VIDEO TOOLS
   ========================================================================== */

.ep-video-tools {
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:14px;
}

/* ==========================================================================
   EMBED
   ========================================================================== */

.ep-embed {
    position:relative;

    overflow:hidden;

    min-height:480px;

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

    border-radius:22px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(139,67,168,.14),
            transparent 34%
        ),
        #09080C;

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

.ep-embed iframe {
    display:block;

    width:100%;

    aspect-ratio:16 / 9;

    min-height:480px;

    border:0;
}

.ep-embed-intro {
    display:grid;

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

    min-height:480px;

    padding:35px;

    text-align:center;
}

.ep-video-symbol {
    display:grid;

    place-items:center;

    width:82px;
    height:82px;

    border:
        1px solid
        rgba(234,91,120,.18);

    border-radius:27px;

    background:
        linear-gradient(
            145deg,
            rgba(139,67,168,.15),
            rgba(234,91,120,.07)
        );

    color:var(--ep-pink);

    font-size:1.5rem;

    box-shadow:
        0 25px 70px
        rgba(139,67,168,.10);

    animation:
        epVideoPulse
        2.8s ease-in-out
        infinite;
}

.ep-embed-intro h3 {
    margin:
        19px 0
        0;

    font-family:Georgia,serif;

    font-size:
        clamp(
            1.8rem,
            4vw,
            3rem
        );
}

.ep-embed-intro p {
    max-width:490px;

    margin:
        9px 0
        0;

    color:var(--ep-muted);

    font-size:.70rem;

    line-height:1.65;
}

.ep-embed-intro
.ep-button {
    margin-top:20px;
}

/* ==========================================================================
   SOURCE LINK
   ========================================================================== */

.ep-source-link {
    display:inline-flex;

    margin-top:14px;

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

    font-size:.57rem;

    font-weight:750;

    text-decoration:none;

    transition:
        color .2s ease;
}

.ep-source-link:hover {
    color:var(--ep-cyan);
}

/* ==========================================================================
   EMPTY MEDIA
   ========================================================================== */

.ep-empty {
    display:grid;

    place-items:center;

    align-content:center;

    min-height:280px;

    padding:35px;

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

    border-radius:20px;

    text-align:center;

    background:
        radial-gradient(
            circle,
            rgba(139,67,168,.055),
            transparent 60%
        );
}

.ep-empty h3 {
    margin:0;

    font-family:Georgia,serif;

    font-size:1.6rem;
}

.ep-empty p {
    max-width:520px;

    margin:
        8px 0
        0;

    color:var(--ep-muted);

    font-size:.70rem;

    line-height:1.6;
}

/* ==========================================================================
   BOTTOM GRID
   ========================================================================== */

.ep-bottom-grid {
    display:grid;

    grid-template-columns:
        minmax(0,.78fr)
        minmax(0,1.22fr);

    gap:
        clamp(
            18px,
            2.5vw,
            30px
        );

    align-items:start;

    margin-top:
        clamp(
            28px,
            4vw,
            48px
        );
}

.ep-notes,
.ep-community {
    padding:
        clamp(
            25px,
            3.5vw,
            40px
        );
}

.ep-notes h2,
.ep-community h2 {
    margin:
        11px 0
        0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.6rem
        );

    line-height:.96;

    letter-spacing:-.04em;
}

/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.ep-description {
    margin:
        24px 0
        0;

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

    font-family:
        Georgia,
        serif;

    font-size:.91rem;

    line-height:1.85;
}

.ep-notes
> .ep-button {
    margin-top:25px;
}

/* ==========================================================================
   COMMUNITY
   ========================================================================== */

.ep-community {
    min-width:0;
}

.ep-help {
    margin:
        16px 0
        0;

    color:var(--ep-muted);

    font-size:.64rem;

    line-height:1.55;
}

.ep-community
[data-comment-login] {
    margin:
        18px 0
        0;

    padding:15px;

    border:
        1px solid
        rgba(18,180,214,.12);

    border-radius:12px;

    background:
        rgba(18,180,214,.025);
}

.ep-community
[data-comment-login] a {
    color:var(--ep-cyan);

    font-size:.66rem;

    font-weight:800;

    text-decoration:none;
}

/* ==========================================================================
   COMMENT FORM
   ========================================================================== */

.ep-comment-form {
    margin-top:18px;

    padding:18px;

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

    border-radius:17px;

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

.ep-comment-form label {
    display:block;

    margin-bottom:7px;

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

    font-size:.60rem;

    font-weight:800;
}

.ep-comment-form textarea {
    width:100%;

    min-height:125px;

    padding:14px;

    resize:vertical;

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

    border-radius:13px;

    outline:0;

    background:
        rgba(7,7,10,.56);

    color:var(--ep-white);

    font-size:.74rem;

    line-height:1.55;

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

.ep-comment-form
textarea:focus {
    border-color:
        rgba(18,180,214,.27);

    background:
        rgba(18,180,214,.02);

    box-shadow:
        0 0 0 4px
        rgba(18,180,214,.03);
}

.ep-comment-form
textarea::placeholder {
    color:
        rgba(247,247,251,.28);
}

.ep-reply-hint {
    display:flex;

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

    gap:12px;

    margin-bottom:11px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(139,67,168,.13);

    border-radius:11px;

    background:
        rgba(139,67,168,.035);

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

    font-size:.60rem;
}

.ep-text-button {
    border:0;

    background:transparent;

    color:var(--ep-pink);

    font-size:.57rem;

    font-weight:800;

    cursor:pointer;
}

.ep-comment-form-footer {
    display:flex;

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

    gap:15px;

    margin-top:11px;
}

.ep-comment-form-footer small {
    color:
        rgba(247,247,251,.29);

    font-size:.53rem;
}

/* ==========================================================================
   COMMENTS RENDERED BY JS
   ========================================================================== */

.ep-comments {
    display:grid;

    gap:10px;

    margin-top:22px;
}

.ep-comments > article,
.ep-comments > div:not(.ep-help),
.ep-comment,
.ep-comment-item,
.ep-comment-card,
[data-comment-item] {
    position:relative;

    padding:
        15px
        16px;

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

    border-radius:15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.017),
            rgba(255,255,255,.006)
        );

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

.ep-comments > article:hover,
.ep-comment:hover,
.ep-comment-item:hover,
.ep-comment-card:hover,
[data-comment-item]:hover {
    transform:
        translateY(-2px);

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

    background:
        rgba(139,67,168,.025);
}

.ep-comments h3,
.ep-comments strong {
    color:var(--ep-white);
}

.ep-comments p {
    color:
        rgba(247,247,251,.58);

    font-size:.68rem;

    line-height:1.6;
}

.ep-comments time,
.ep-comments small {
    color:var(--ep-muted);

    font-size:.52rem;
}

.ep-comments button {
    border:0;

    background:transparent;

    color:var(--ep-cyan);

    font-size:.55rem;

    font-weight:800;

    cursor:pointer;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.ep-pagination {
    display:flex;

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

    gap:15px;

    margin-top:20px;

    padding-top:17px;

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

.ep-pagination
[data-comment-page] {
    color:var(--ep-muted);

    font-size:.57rem;
}

/* ==========================================================================
   PREMIUM REVEAL
   ========================================================================== */

.ep-premium-enhanced
.ep-premium-reveal {
    opacity:0;

    transform:
        translateY(28px)
        scale(.988);

    transition:
        opacity .75s
        cubic-bezier(.2,.8,.2,1),
        transform .75s
        cubic-bezier(.2,.8,.2,1);
}

.ep-premium-enhanced
.ep-premium-reveal.is-visible {
    opacity:1;

    transform:none;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

#csb-episode ::selection {
    background:
        rgba(139,67,168,.34);

    color:white;
}

/* ==========================================================================
   SCROLL MARGINS
   ========================================================================== */

#ep-listen,
#ep-community {
    scroll-margin-top:120px;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes epHeroLine {
    from {
        transform:scaleX(0);

        opacity:0;
    }

    to {
        transform:scaleX(1);

        opacity:1;
    }
}

@keyframes epSoundBar {
    from {
        transform:scaleY(.45);

        opacity:.55;
    }

    to {
        transform:scaleY(1.15);

        opacity:1;
    }
}

@keyframes epVideoPulse {
    0%,
    100% {
        transform:scale(1);

        box-shadow:
            0 25px 70px
            rgba(139,67,168,.10);
    }

    50% {
        transform:scale(1.045);

        box-shadow:
            0 30px 85px
            rgba(139,67,168,.18);
    }
}

/* ==========================================================================
   RESPONSIVE — 1120
   ========================================================================== */

@media(max-width:1120px) {

    .ep-hero {
        grid-template-columns:
            minmax(330px,.72fr)
            minmax(0,1fr);

        gap:55px;
    }

    .ep-hero::before {
        display:none;
    }

    .ep-intro h1 {
        font-size:
            clamp(
                3.7rem,
                7vw,
                6rem
            );
    }

    .ep-audio-controls {
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;
    }

    .ep-audio-controls
    > .ep-button {
        grid-column:
            1 / -1;

        justify-self:start;
    }
}

/* ==========================================================================
   RESPONSIVE — 860
   ========================================================================== */

@media(max-width:860px) {

    #csb-episode {
        width:
            calc(100% - 30px);
    }

    .ep-hero {
        grid-template-columns:1fr;

        min-height:0;
    }

    .ep-art {
        width:
            min(
                570px,
                100%
            );
    }

    .ep-people {
        margin-top:0;
    }

    .ep-bottom-grid {
        grid-template-columns:1fr;
    }

    .ep-audio-controls {
        grid-template-columns:1fr;

        gap:15px;
    }

    .ep-transport {
        justify-content:center;
    }

    .ep-audio-controls
    > .ep-button {
        width:100%;

        justify-self:stretch;
    }

    .ep-speed {
        justify-content:space-between;
    }

    .ep-section-head,
    .ep-panel-head {
        align-items:flex-start;

        flex-direction:column;
    }

    .ep-modes {
        align-self:flex-start;
    }
}

/* ==========================================================================
   RESPONSIVE — 620
   ========================================================================== */

@media(max-width:620px) {

    #csb-episode {
        width:
            calc(100% - 24px);

        padding-top:22px;
    }

    .ep-breadcrumb {
        margin-bottom:30px;
    }

    .ep-hero {
        gap:35px;

        padding-bottom:55px;
    }

    .ep-art {
        border-radius:26px;
    }

    .ep-intro h1 {
        font-size:
            clamp(
                3.1rem,
                16vw,
                5rem
            );
    }

    .ep-summary {
        font-size:.90rem;
    }

    .ep-actions {
        align-items:stretch;

        flex-direction:column;
    }

    .ep-actions
    .ep-button,
    .ep-actions
    form,
    .ep-actions
    details,
    .ep-actions
    summary {
        width:100%;
    }

    #csb-episode
    .ep-playlist-popover {
        right:auto;
        left:0;

        width:
            min(
                330px,
                calc(100vw - 36px)
            );
    }

    .ep-panel,
    .ep-source {
        border-radius:19px;
    }

    .ep-studio,
    .ep-notes,
    .ep-community,
    #csb-episode
    .ep-people {
        padding:
            21px
            17px;
    }

    .ep-embed,
    .ep-embed-intro {
        min-height:300px;
    }

    .ep-embed iframe {
        min-height:0;
    }

    .ep-comment-form-footer {
        align-items:flex-start;

        flex-direction:column;
    }

    .ep-comment-form-footer
    .ep-button {
        width:100%;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

    #csb-episode *,
    #csb-episode *::before,
    #csb-episode *::after {
        animation:none !important;

        transition-duration:.001ms !important;

        scroll-behavior:auto !important;
    }

    .ep-premium-enhanced
    .ep-premium-reveal {
        opacity:1;

        transform:none;
    }

    .ep-art {
        transform:none !important;
    }
}