.content-page-shell:has(.resident-profile-page){max-width:none!important;margin:0!important;padding:0!important}

:root{
 --resident-bg:#050708;
 --resident-panel:#0a0e10;
 --resident-line:#1c252a;
 --resident-text:#f7f8f8;
 --resident-muted:#87959c;
 --resident-soft:#b8c1c5;
 --resident-accent:#ef2851;
 --resident-accent-soft:#ff6d8b;
 --resident-blue:#315e74;
}
.resident-profile-page{background:var(--resident-bg);color:var(--resident-text);overflow:hidden}
.resident-profile-page a{color:inherit}
.resident-shell{width:min(1180px,calc(100% - 36px));margin:0 auto}
.resident-hero{position:relative;border-bottom:1px solid var(--resident-line);background:
radial-gradient(circle at 62% 28%,rgba(49,94,116,.15),transparent 34%),
linear-gradient(90deg,#090d0f,#050708 66%)}
.resident-hero-watermark{position:absolute;right:-12px;top:34px;font-size:260px;line-height:.78;font-weight:950;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);transform:rotate(90deg);transform-origin:center;pointer-events:none}
.resident-hero-grid{width:min(1180px,calc(100% - 36px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);min-height:630px}
.resident-portrait-wrap{position:relative;align-self:stretch}
.resident-portrait{position:absolute;inset:0 34px 0 0;background-position:center top;background-size:cover;background-repeat:no-repeat;filter:saturate(.72) contrast(1.06)}
.resident-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--resident-bg) 100%),linear-gradient(0deg,var(--resident-bg) 0%,transparent 34%)}
.resident-image-placeholder{width:100%;height:100%;display:grid;place-items:center;font-size:120px;font-weight:950;color:#182229}
.resident-hero-copy{position:relative;z-index:2;align-self:center;padding:72px 0 100px 30px}
.resident-kicker,.resident-section-kicker{display:block;font-size:13px;letter-spacing:.16em;font-weight:850;color:var(--resident-accent)}
.resident-hero-copy h1{font-size:clamp(62px,7vw,116px);line-height:.78;letter-spacing:-.055em;text-transform:uppercase;margin:14px 0 22px;max-width:610px;overflow-wrap:anywhere}
.resident-genres{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#d3d8da}
.resident-intro{max-width:520px;font-size:16px;line-height:1.65;color:var(--resident-soft);margin-top:20px}
.resident-socials{display:flex;gap:8px;margin-top:24px}
.resident-socials a{width:35px;height:35px;display:grid;place-items:center;border:1px solid #334048;border-radius:50%;text-decoration:none;font-size:12px;font-weight:850;transition:.18s}
.resident-socials a:hover{border-color:var(--resident-accent);background:var(--resident-accent);color:#fff}

.resident-broadcast-card{position:absolute;z-index:5;left:0;right:34px;bottom:22px;display:grid;grid-template-columns:1.25fr .75fr;background:rgba(7,11,13,.92);backdrop-filter:blur(12px);border:1px solid #283339;box-shadow:0 20px 50px rgba(0,0,0,.26)}
.broadcast-main,.broadcast-next{padding:16px}
.broadcast-main{border-right:1px solid #283339}.broadcast-state{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em;color:#b9c3c7}
.broadcast-state i{width:8px;height:8px;border-radius:50%;background:#6d7b82}
.broadcast-state b{font-weight:900}.broadcast-state strong{color:var(--resident-accent);font-size:15px;letter-spacing:.02em}
.resident-broadcast-card.is-countdown .broadcast-state i{background:var(--resident-accent);box-shadow:0 0 0 4px rgba(239,40,81,.14)}
.resident-broadcast-card.is-live{border-color:var(--resident-accent);background:linear-gradient(90deg,rgba(239,40,81,.17),rgba(7,11,13,.96) 46%)}
.resident-broadcast-card.is-live .broadcast-state{color:#fff}
.resident-broadcast-card.is-live .broadcast-state i{background:var(--resident-accent);box-shadow:0 0 0 5px rgba(239,40,81,.16);animation:residentPulse 1.3s infinite}
.broadcast-main h3{font-size:16px;margin:8px 0 0;text-transform:uppercase}
.broadcast-next span,.broadcast-next strong,.broadcast-next a{display:block}.broadcast-next span{font-size:11px;color:var(--resident-muted);letter-spacing:.1em}.broadcast-next strong{font-size:14px;margin-top:5px}.broadcast-next a{font-size:12px;color:var(--resident-accent-soft);text-decoration:none;margin-top:7px;font-weight:800}
.resident-listen-button{display:inline-flex!important;width:max-content;margin-top:10px!important;border:1px solid var(--resident-accent)!important;color:#fff!important;padding:7px 10px;text-decoration:none;font-size:12px!important;letter-spacing:.08em}
@keyframes residentPulse{50%{box-shadow:0 0 0 9px rgba(239,40,81,0)}}

.resident-info-section{display:grid;grid-template-columns:1.12fr .88fr;gap:72px;padding-top:42px;padding-bottom:42px;border-bottom:1px solid var(--resident-line)}
.resident-info-section h2,.resident-section-head h2,.resident-upcoming h2{font-size:28px;letter-spacing:-.035em;text-transform:uppercase;margin:7px 0 18px}
.resident-long-copy{font-size:16px;line-height:1.8;color:#b5c0c4;max-width:690px}
.resident-on-320{padding-left:14px}.resident-show-mini{display:grid;grid-template-columns:95px minmax(0,1fr) 24px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--resident-line);text-decoration:none}
.resident-show-cover{width:95px;height:95px;background:#11191d center/cover no-repeat}
.resident-show-mini strong,.resident-show-mini span,.resident-show-mini small{display:block}.resident-show-mini strong{font-size:15px;text-transform:uppercase}.resident-show-mini span{font-size:13px;color:#95a2a8;margin-top:5px}.resident-show-mini small{font-size:12px;color:var(--resident-accent-soft);margin-top:7px}.resident-show-mini>b{font-size:17px;color:#718087}
.resident-muted{font-size:14px;color:var(--resident-muted)}

.resident-section{padding-top:34px;padding-bottom:38px;border-bottom:1px solid var(--resident-line)}
.resident-section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}.resident-section-head h2{margin-bottom:0}.resident-section-head>a{font-size:12px;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.resident-set-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.resident-set-card{min-width:0}.resident-set-art{height:220px;position:relative;background:linear-gradient(135deg,#12191d,#060809);overflow:hidden}.resident-set-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(118deg,transparent 0 22px,rgba(255,255,255,.035) 22px 24px)}
.resident-set-art>span{position:absolute;right:12px;bottom:8px;font-size:44px;font-weight:950;color:rgba(255,255,255,.06)}.resident-set-art button{position:absolute;left:14px;bottom:14px;width:40px;height:40px;border:1px solid #fff;border-radius:50%;background:rgba(0,0,0,.42);color:#fff}
.resident-set-card h3{font-size:15px;margin:10px 0 6px}.resident-set-card>div:last-child{display:flex;justify-content:space-between;color:#7f8d94;font-size:12px}

.resident-show-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;padding-top:40px;padding-bottom:40px;border-bottom:1px solid var(--resident-line)}
.resident-feature-art{min-height:370px;background:#0d1316 center/cover no-repeat;position:relative;display:flex;align-items:flex-end;padding:28px}.resident-feature-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.06))}
.resident-feature-art>div{position:relative;z-index:1}.resident-feature-art span{font-size:12px;color:var(--resident-accent);letter-spacing:.14em;font-weight:850}.resident-feature-art h2{font-size:44px;line-height:.92;text-transform:uppercase;margin:8px 0}.resident-feature-art p{font-size:14px;color:#c1c9cd}
.resident-date-list{border-top:1px solid var(--resident-line)}.resident-date-list a{display:grid;grid-template-columns:34px 36px 42px 110px minmax(0,1fr) 20px;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--resident-line);text-decoration:none}
.date-day{font-size:12px;color:var(--resident-accent);font-weight:900}.resident-date-list strong{font-size:22px}.date-month{font-size:12px}.resident-date-list time{font-size:13px;color:#a4afb4}.resident-date-list b{font-size:13px;text-transform:uppercase}.resident-date-list i{font-style:normal;color:#7e8c93}
.resident-outline-button{display:inline-block;margin-top:16px;border:1px solid #39464c;padding:9px 12px;text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:.08em}

.resident-more{padding-top:32px;padding-bottom:42px}
.resident-more-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px}.resident-more-grid>a{text-align:center;text-decoration:none}.resident-more-image{width:96px;height:96px;border-radius:50%;margin:0 auto 9px;background:#12191d center/cover no-repeat;overflow:hidden;display:grid;place-items:center;filter:saturate(.72);transition:.2s}.resident-more-image span{font-size:28px;color:#52626a}.resident-more-grid>a:hover .resident-more-image{filter:saturate(1);box-shadow:0 0 0 2px var(--resident-accent)}.resident-more-grid strong{font-size:13px;text-transform:uppercase}

@media(max-width:980px){
 .resident-hero-grid{grid-template-columns:1fr;min-height:auto}.resident-portrait-wrap{height:560px}.resident-hero-copy{padding:40px 0 50px}.resident-portrait{right:0}.resident-broadcast-card{right:0}
 .resident-info-section,.resident-show-feature{grid-template-columns:1fr;gap:34px}.resident-set-grid{grid-template-columns:repeat(2,1fr)}.resident-more-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:620px){
 .resident-shell,.resident-hero-grid{width:min(100% - 24px,1180px)}.resident-portrait-wrap{height:470px}.resident-hero-copy h1{font-size:58px}.resident-broadcast-card{grid-template-columns:1fr}.broadcast-main{border-right:0;border-bottom:1px solid #283339}
 .resident-info-section h2,.resident-section-head h2,.resident-upcoming h2{font-size:23px}.resident-set-grid{grid-template-columns:1fr 1fr;gap:10px}.resident-set-art{height:150px}.resident-show-feature{gap:24px}.resident-feature-art{min-height:280px}.resident-feature-art h2{font-size:34px}
 .resident-date-list a{grid-template-columns:28px 32px 34px 1fr 20px}.resident-date-list time{grid-column:4}.resident-date-list b{grid-column:4}.resident-date-list i{grid-column:5;grid-row:1/3}.resident-more-grid{grid-template-columns:repeat(3,1fr)}.resident-more-image{width:76px;height:76px}.resident-hero-watermark{display:none}
}

/* ==========================================================
   320 FM · Resident Remote DJ Set
   ========================================================== */

.resident-remote-set{
    padding-top:38px;
    padding-bottom:42px;
    border-bottom:1px solid var(--resident-line);
}

.resident-remote-player{
    display:grid;
    grid-template-columns:210px minmax(0,1fr);
    min-height:230px;

    overflow:hidden;

    border:1px solid rgba(70,166,203,.18);

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(39,174,226,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 80%,
            rgba(213,45,148,.08),
            transparent 31%
        ),
        #0a1014;
}

.resident-remote-art{
    position:relative;
    min-height:230px;

    background:
        linear-gradient(135deg,#17252e,#090e12)
        center/cover no-repeat;
}

.resident-remote-art:after{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 54%,
            #0a1014 100%
        ),
        linear-gradient(
            0deg,
            rgba(5,8,10,.62),
            transparent 58%
        );
}

.resident-remote-art>span{
    position:absolute;
    left:15px;
    bottom:14px;
    z-index:2;

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

    color:#fff;
}

.resident-remote-main{
    min-width:0;
    padding:26px 28px 22px;
}

.resident-remote-meta>span{
    color:#36b5e6;

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

.resident-remote-meta h3{
    margin:7px 0 4px;

    color:#fff;

    font-size:22px;
    line-height:1.08;
    text-transform:uppercase;
}

.resident-remote-meta p{
    margin:0;

    color:#8999a1;
    font-size:13px;
}


/* Waveform */

.resident-waveform{
    position:relative;

    height:74px;
    margin:22px 0 16px;

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

    overflow:hidden;

    cursor:pointer;
}

.resident-waveform>i{
    position:relative;
    z-index:1;

    flex:1 1 0;

    height:var(--peak);

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

    background:
        rgba(123,150,162,.36);

    border-radius:999px;
}

.resident-waveform>span{
    position:absolute;
    z-index:2;

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

    width:0;

    pointer-events:none;

    mix-blend-mode:screen;

    background:
        linear-gradient(
            90deg,
            rgba(213,45,148,.22),
            rgba(42,175,225,.22)
        );

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

.resident-waveform:focus-visible{
    outline:
        1px solid rgba(42,175,225,.65);

    outline-offset:5px;
}


/* Controls */

.resident-remote-controls{
    display:flex;
    align-items:center;
    gap:14px;
}

.resident-remote-play{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #d72e95,
            #bd277f
        );

    box-shadow:
        0 10px 24px rgba(213,45,148,.18);
}

.resident-remote-set.is-playing .resident-remote-play{
    background:
        linear-gradient(
            135deg,
            #2aafe1,
            #1788b6
        );
}

.resident-remote-time{
    color:#81919a;

    font-size:12px;

    font-variant-numeric:tabular-nums;
}

.resident-remote-controls>strong{
    margin-left:auto;

    color:#65777f;

    font-size:11px;
    letter-spacing:.12em;
}

.resident-remote-main audio{
    display:none;
}


/* ==========================================================
   Mehr Residents · rotating carousel
   ========================================================== */

.resident-more{
    overflow:hidden;
}

.resident-more-head{
    gap:18px;
}

.resident-more-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.resident-more-actions button{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border:
        1px solid #2e3b42;

    border-radius:50%;

    cursor:pointer;

    color:#dfe7ea;
    background:#0b1115;

    transition:
        border-color .18s,
        color .18s,
        transform .18s;
}

.resident-more-actions button:hover{
    color:#4bc0eb;
    border-color:#299fcf;
    transform:translateY(-1px);
}

.resident-more-actions>a{
    margin-left:7px;
}

.resident-more-viewport{
    overflow:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.resident-more-viewport::-webkit-scrollbar{
    display:none;
}

.resident-more-grid{
    display:flex !important;
    grid-template-columns:none !important;

    gap:18px;

    width:max-content;
}

.resident-more-grid>a{
    flex:
        0 0
        calc(
            (min(1180px, calc(100vw - 36px)) - 90px)
            / 6
        );

    min-width:0;

    text-align:center;
    text-decoration:none;
}

.resident-more-image{
    width:112px;
    height:112px;

    margin:0 auto 10px;

    border-radius:50%;

    background:
        #12191d
        center/cover
        no-repeat;

    overflow:hidden;

    display:grid;
    place-items:center;

    filter:
        saturate(.78);

    transition:
        .25s ease;
}

.resident-more-grid>a:hover .resident-more-image{
    filter:saturate(1.04);

    box-shadow:
        0 0 0 2px #2aafe1,
        0 10px 30px rgba(0,0,0,.18);

    transform:
        translateY(-2px);
}


@media(max-width:980px){

    .resident-remote-player{
        grid-template-columns:160px minmax(0,1fr);
    }

    .resident-more-grid>a{
        flex-basis:165px;
    }
}


@media(max-width:620px){

    .resident-remote-player{
        grid-template-columns:1fr;
    }

    .resident-remote-art{
        min-height:210px;
    }

    .resident-remote-art:after{
        background:
            linear-gradient(
                0deg,
                #0a1014,
                transparent 48%
            );
    }

    .resident-remote-main{
        padding:21px 18px;
    }

    .resident-waveform{
        height:62px;
    }

    .resident-remote-controls>strong{
        display:none;
    }

    .resident-more-actions>a{
        display:none;
    }

    .resident-more-grid>a{
        flex-basis:130px;
    }

    .resident-more-image{
        width:88px;
        height:88px;
    }
}