:root {
    --rr-charcoal: #1A1A1A;
    --rr-copper: #B85A34;
    --rr-copper-hover: #8F3F22;
    --rr-sand: #DCC8B1;
    --rr-off-white: #F6F3EF;
    --rr-taupe: #A69D94;
    --rr-slate: #4B4B4B;
    --rr-white: #FFFFFF;
    --rr-border: rgba(26,26,26,.12);

    --rr-display:
        "Playfair Display",
        Georgia,
        serif;

    --rr-body:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --rr-content: 1240px;
    --rr-text: 760px;
    --rr-gutter: clamp(1.25rem,4vw,4rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--rr-charcoal);
    background: var(--rr-off-white);
    font-family: var(--rr-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img,
iframe {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--rr-copper);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: .7rem 1rem;
    color: #fff;
    background: var(--rr-charcoal);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.episode-shell {
    width: min(
        calc(100% - (2 * var(--rr-gutter))),
        var(--rr-content)
    );
    margin-inline: auto;
}

.eyebrow,
.sidebar-eyebrow {
    margin: 0 0 .7rem;
    color: var(--rr-copper);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ==========================================================
   HEADER
   ========================================================== */

.episode-site-header {
    position: absolute;
    z-index: 50;
    inset: 0 0 auto;
    color: var(--rr-white);
}

.episode-site-header__inner {
    width: min(
        calc(100% - (2 * var(--rr-gutter))),
        var(--rr-content)
    );
    min-height: 84px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.episode-brand {
    color: var(--rr-white);
    text-decoration: none;
}

.episode-brand span {
    font-family: var(--rr-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.025em;
}

.episode-brand b {
    color: var(--rr-copper);
}

.episode-site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem,2.5vw,2rem);
    font-size: .92rem;
    font-weight: 600;
}

.episode-site-nav a {
    color: rgba(255,255,255,.86);
    text-decoration: none;
}

.episode-site-nav a:hover {
    color: var(--rr-sand);
}


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

.episode-hero {
    position: relative;
    isolation: isolate;
    min-height: min(780px,88svh);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--rr-white);

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.67) 38%,
            rgba(0,0,0,.25) 68%,
            rgba(0,0,0,.08) 100%
        ),
        url("/assets/images/rak-roll-desert-microphone.webp")
        67% center / cover no-repeat;
}

.episode-hero__shade {
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 45%;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0,0,0,.38)
        );
}

.episode-hero__inner {
    padding:
        9rem
        0
        clamp(7rem,11vw,10rem);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: clamp(2rem,5vw,4rem);
    color: rgba(255,255,255,.66);
    font-size: .82rem;
}

.breadcrumb a {
    color: rgba(255,255,255,.82);
}

.episode-hero__copy {
    max-width: 850px;
}

.episode-hero .eyebrow {
    color: var(--rr-sand);
}

.episode-hero h1 {
    max-width: 900px;
    margin: 0;
    font-family: var(--rr-display);
    font-size: clamp(3.2rem,6.7vw,6.6rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.episode-dek {
    max-width: 680px;
    margin: 1.6rem 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(1.08rem,1.8vw,1.4rem);
    line-height: 1.48;
}

.episode-people {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2rem;
}

.episode-person {
    display: grid;
    gap: .1rem;
}

.episode-person strong {
    color: var(--rr-white);
    font-size: 1rem;
}

.episode-person span {
    color: rgba(255,255,255,.65);
    font-size: .88rem;
}


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

.episode-body-shell {
    position: relative;
}

.episode-video-section {
    position: relative;
    z-index: 10;
    margin:
        clamp(-6rem,-7vw,-4rem)
        0
        clamp(3rem,6vw,5rem);
}

.youtube-facade,
.episode-poster {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    box-shadow:
        0 26px 70px rgba(26,26,26,.24);
}

.youtube-facade img,
.episode-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-facade__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: clamp(64px,7vw,86px);
    height: clamp(64px,7vw,86px);
    display: grid;
    place-items: center;
    transform: translate(-50%,-50%);
    color: #fff;
    background: rgba(26,26,26,.68);
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    cursor: pointer;
    transition:
        background-color .18s ease,
        transform .18s ease;
}

.youtube-facade__play:hover {
    background: var(--rr-copper);
    transform:
        translate(-50%,-50%)
        scale(1.04);
}

.youtube-facade iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.episode-video-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-top: .9rem;
    color: var(--rr-slate);
    font-size: .85rem;
}


/* ==========================================================
   MAIN TWO-COLUMN EDITORIAL LAYOUT
   ========================================================== */

.episode-layout {
    display: grid;
    grid-template-columns:
        minmax(230px,300px)
        minmax(0,1fr);
    gap: clamp(2rem,5vw,5rem);
    align-items: start;
    margin-bottom: clamp(4rem,8vw,7rem);
}

.episode-sidebar {
    min-width: 0;
}

.episode-sidebar__card {
    position: sticky;
    top: 1.5rem;
    overflow: hidden;
    background: var(--rr-white);
    border: 1px solid var(--rr-border);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(26,26,26,.06);
}

.sidebar-block {
    padding: 1.35rem;
}

.sidebar-block + .sidebar-block {
    border-top: 1px solid var(--rr-border);
}

.sidebar-block:first-child {
    border-top: 4px solid var(--rr-copper);
}

.sidebar-block h2,
.sidebar-guest h2 {
    margin: 0;
    font-family: var(--rr-display);
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.018em;
}

.sidebar-guest + .sidebar-guest {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rr-border);
}

.sidebar-role,
.sidebar-value {
    margin: .45rem 0 0;
    color: var(--rr-slate);
}

.sidebar-context {
    margin: .8rem 0 0;
    color: var(--rr-slate);
    font-size: .88rem;
}

.sidebar-external-link {
    display: inline-block;
    margin-top: .65rem;
    color: var(--rr-copper);
    font-size: .88rem;
    font-weight: 700;
}

.episode-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.episode-social-links a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .4rem .65rem;
    color: var(--rr-copper);
    background: rgba(184,90,52,.07);
    border: 1px solid rgba(184,90,52,.22);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
}

.episode-social-links a:hover {
    color: #fff;
    background: var(--rr-copper);
    border-color: var(--rr-copper);
}

.sidebar-topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-topic-list li {
    padding: .35rem .55rem;
    color: var(--rr-slate);
    background: var(--rr-off-white);
    border-radius: 999px;
    font-size: .76rem;
}


/* ==========================================================
   EDITORIAL SECTIONS
   ========================================================== */

.episode-main-column {
    min-width: 0;
}

.episode-section {
    max-width: none;
    margin: 0 0 1.2rem;
    padding: clamp(1.6rem,3vw,2.4rem);
    background: var(--rr-white);
    border: 1px solid var(--rr-border);
    border-radius: 12px;
}

.episode-main-column
> .episode-section:nth-child(even) {
    background:
        color-mix(
            in srgb,
            var(--rr-sand) 22%,
            var(--rr-off-white)
        );
}

.episode-section > h2 {
    max-width: 720px;
    margin: 0 0 1.25rem;
    font-family: var(--rr-display);

    /*
     * Deliberately restrained.
     * H2 is editorial hierarchy, not another hero.
     */
    font-size: clamp(1.8rem,2.7vw,2.65rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -.022em;
    text-wrap: balance;
}

.episode-prose {
    max-width: var(--rr-text);
}

.episode-prose p {
    margin: 0 0 1.15rem;
}

.episode-prose p:last-child {
    margin-bottom: 0;
}


/*
 * Business context is now visible in the left rail.
 * Keep underlying server-rendered data/template intact.
 */
.episode-overview .context-list {
    display: none;
}


/* ==========================================================
   TAKEAWAYS
   ========================================================== */

.takeaway-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: takeaway;
}

.takeaway-list li {
    position: relative;
    padding:
        1rem
        0
        1rem
        3rem;
    border-top: 1px solid var(--rr-border);
}

.takeaway-list li:last-child {
    border-bottom: 1px solid var(--rr-border);
}

.takeaway-list li::before {
    counter-increment: takeaway;
    content:
        counter(
            takeaway,
            decimal-leading-zero
        );

    position: absolute;
    top: 1rem;
    left: 0;
    color: var(--rr-copper);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
}


/* ==========================================================
   CHAPTERS
   ========================================================== */

.chapter-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chapter-list li {
    display: grid;
    grid-template-columns: 80px minmax(0,1fr);
    gap: 1rem;
    padding: .9rem 0;
    border-top: 1px solid var(--rr-border);
}

.chapter-list li:last-child {
    border-bottom: 1px solid var(--rr-border);
}

.chapter-time {
    color: var(--rr-copper);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.chapter-title {
    font-weight: 650;
}


/* ==========================================================
   TOPICS IN MAIN COLUMN
   ========================================================== */

.episode-topics {
    /*
     * Topics are already shown in the contextual sidebar.
     * Hide duplicate visual treatment while leaving the
     * underlying page data available to the template.
     */
    display: none;
}

.topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ==========================================================
   TRANSCRIPT
   ========================================================== */

.transcript-section {
    background: var(--rr-white);
}

.transcript-note {
    margin: -1rem 0 1.5rem;
    color: var(--rr-slate);
    font-size: .82rem;
}

.transcript {
    max-width: 780px;
}

.transcript p {
    margin-bottom: 1.25rem;
}


/* ==========================================================
   RELATED CONVERSATIONS — DARK FULL-WIDTH BAND
   ========================================================== */

.related-section {
    width: 100vw;
    max-width: none;
    margin:
        clamp(5rem,9vw,8rem)
        0
        0
        calc(50% - 50vw);

    padding:
        clamp(4rem,7vw,6rem)
        max(
            var(--rr-gutter),
            calc((100vw - var(--rr-content)) / 2)
        );

    color: var(--rr-white);
    background: var(--rr-charcoal);
    border: 0;
    border-radius: 0;
}

.related-section .eyebrow {
    color: var(--rr-sand);
}

.related-section > h2 {
    color: var(--rr-white);
    font-size: clamp(2rem,3vw,3rem);
}

.related-grid {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap: 1rem;
}

.related-card {
    overflow: hidden;
    color: var(--rr-charcoal);
    background: var(--rr-off-white);
    border: 0;
    border-radius: 10px;
}

.related-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-card__body {
    padding: 1.1rem;
}

.related-card h3 {
    margin: 0;
    font-family: var(--rr-display);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.08;
}

.related-card h3 a {
    text-decoration: none;
}

.related-card p {
    margin: .65rem 0 0;
    color: var(--rr-slate);
    font-size: .86rem;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.episode-footer {
    color: var(--rr-white);
    background:
        linear-gradient(
            90deg,
            #141414,
            var(--rr-charcoal)
        );
    border-top: 3px solid var(--rr-copper);
}

.episode-footer__inner {
    width: min(
        calc(100% - (2 * var(--rr-gutter))),
        var(--rr-content)
    );
    margin-inline: auto;
    padding: 3rem 0;
}

.episode-footer strong {
    font-family: var(--rr-display);
    font-size: 1.7rem;
}

.episode-footer p {
    max-width: 500px;
    color: rgba(255,255,255,.65);
}


/* ==========================================================
   ERRORS
   ========================================================== */

.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--rr-gutter);
}

.error-page > div {
    width: min(100%,700px);
}

.error-page h1 {
    margin: 0;
    font-family: var(--rr-display);
    font-size: clamp(2.8rem,7vw,5.5rem);
    font-weight: 400;
    line-height: .95;
}

.button {
    display: inline-flex;
    min-height: 46px;
    margin-top: 1rem;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem;
    color: #fff;
    background: var(--rr-copper);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 980px) {

    .episode-layout {
        grid-template-columns:
            minmax(210px,250px)
            minmax(0,1fr);
        gap: 2rem;
    }

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


@media (max-width: 760px) {

    .episode-site-header__inner {
        min-height: 70px;
    }

    .episode-site-nav {
        gap: .85rem;
        font-size: .82rem;
    }

    .episode-site-nav a:nth-child(3) {
        display: none;
    }

    .episode-hero {
        min-height: 82svh;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.35) 0%,
                rgba(0,0,0,.4) 32%,
                rgba(0,0,0,.82) 100%
            ),
            url("/assets/images/rak-roll-desert-microphone.webp")
            69% center / cover no-repeat;
    }

    .episode-hero__inner {
        padding:
            7rem
            0
            7rem;
    }

    .breadcrumb {
        margin-bottom: 2rem;
    }

    .episode-hero h1 {
        font-size: clamp(2.8rem,13vw,4.7rem);
    }

    .episode-dek {
        max-width: 32rem;
        font-size: 1.05rem;
    }

    .episode-video-section {
        margin-top: -4rem;
    }

    .episode-layout {
        display: flex;
        flex-direction: column;
    }

    /*
     * Editorial content appears before details on mobile.
     */
    .episode-main-column {
        order: 1;
    }

    .episode-sidebar {
        order: 2;
        width: 100%;
    }

    .episode-sidebar__card {
        position: static;
        display: grid;
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .sidebar-block + .sidebar-block {
        border-top: 0;
    }

    .sidebar-block {
        border-top: 1px solid var(--rr-border);
        border-right: 1px solid var(--rr-border);
    }

    .sidebar-block:first-child {
        border-top: 4px solid var(--rr-copper);
    }

    .related-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 520px) {

    .episode-brand span {
        font-size: 1.35rem;
    }

    .episode-site-nav a:nth-child(2) {
        display: none;
    }

    .episode-hero {
        min-height: 78svh;
    }

    .episode-hero h1 {
        font-size: clamp(2.7rem,13.5vw,4rem);
    }

    .episode-video-section {
        margin-top: -2.8rem;
    }

    .episode-section {
        padding: 1.25rem;
    }

    .episode-section > h2 {
        font-size: clamp(1.7rem,8vw,2.2rem);
    }

    .episode-sidebar__card {
        display: block;
    }

    .sidebar-block {
        border-right: 0;
    }

    .sidebar-block + .sidebar-block {
        border-top: 1px solid var(--rr-border);
    }

    .chapter-list li {
        grid-template-columns: 65px 1fr;
        gap: .75rem;
    }
}


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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* BEGIN RR F PATTERN POLISH */


/* ==========================================================
   DARK OUTER FRAME / EDITORIAL SHEET
   ========================================================== */

body {
    background: #131313;
}

.episode {
    background:
        linear-gradient(
            180deg,
            var(--rr-charcoal) 0%,
            #131313 100%
        );
}

.episode-body-shell {
    position: relative;
    background:
        linear-gradient(
            180deg,
            #F6F3EF 0%,
            #EFE8E1 100%
        );

    border-radius: 22px 22px 0 0;

    padding:
        0
        clamp(1rem,2.2vw,2rem)
        clamp(3rem,6vw,5rem);

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


/* ==========================================================
   SLIGHTLY MORE RESTRAINED TYPE
   ========================================================== */

.episode-hero h1 {
    font-size:
        clamp(3rem,5.8vw,5.8rem);
}

.episode-section > h2 {
    font-size:
        clamp(1.55rem,2.15vw,2.2rem);

    line-height: 1.08;
}

.sidebar-block h2,
.sidebar-guest h2 {
    font-size: 1.35rem;
}


/* ==========================================================
   DARK CONTEXT RAIL
   ========================================================== */

.episode-sidebar__card {
    color: var(--rr-white);

    background:
        linear-gradient(
            180deg,
            #242424,
            var(--rr-charcoal)
        );

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

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

.sidebar-block + .sidebar-block {
    border-top:
        1px solid rgba(255,255,255,.1);
}

.sidebar-block:first-child {
    border-top:
        4px solid var(--rr-copper);
}

.sidebar-block h2,
.sidebar-guest h2 {
    color: var(--rr-white);
}

.sidebar-eyebrow {
    color: var(--rr-sand);
}

.sidebar-role,
.sidebar-context,
.sidebar-value {
    color:
        rgba(255,255,255,.7);
}

.sidebar-external-link {
    color: var(--rr-sand);
}

.sidebar-external-link:hover {
    color: var(--rr-white);
}

.episode-social-links a {
    color: var(--rr-white);

    background:
        rgba(184,90,52,.22);

    border-color:
        rgba(220,200,177,.25);
}

.episode-social-links a:hover {
    background: var(--rr-copper);
}

.sidebar-topic-list li {
    color:
        rgba(255,255,255,.82);

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

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


/* ==========================================================
   F-PATTERN GRID
   ========================================================== */

.episode-main-column {
    display: grid;

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

    gap: 1.15rem;

    align-items: start;
}

.rr-f-card {
    margin: 0;

    position: relative;

    overflow: hidden;

    border-radius: 14px;

    box-shadow:
        0 12px 34px rgba(26,26,26,.07);

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


/*
 * Top horizontal stroke.
 */
.rr-f-overview {
    grid-column: 1 / -1;

    background: var(--rr-white);

    border-top:
        4px solid var(--rr-copper);
}


/*
 * Second horizontal stroke.
 */
.rr-f-takeaways {
    grid-column: 1 / span 9;

    background:
        var(--rr-sand);

    border-color:
        rgba(184,90,52,.15);
}


/*
 * Strong vertical continuation.
 */
.rr-f-discussion {
    grid-column: 1 / span 8;

    color: var(--rr-white);

    background:
        linear-gradient(
            135deg,
            #242424,
            var(--rr-charcoal)
        );

    border-color:
        rgba(255,255,255,.06);
}

.rr-f-discussion .eyebrow {
    color: var(--rr-sand);
}

.rr-f-discussion .episode-prose {
    color:
        rgba(255,255,255,.82);
}


/*
 * Two supporting cards can sit alongside each other.
 */
.rr-f-marketing {
    grid-column: 1 / span 6;

    background: var(--rr-white);
}

.rr-f-local {
    grid-column: 7 / -1;

    color: var(--rr-white);

    background:
        linear-gradient(
            135deg,
            var(--rr-copper),
            var(--rr-copper-hover)
        );

    border-color: transparent;
}

.rr-f-local .eyebrow {
    color:
        rgba(255,255,255,.75);
}

.rr-f-local .episode-prose {
    color:
        rgba(255,255,255,.9);
}


/*
 * If Marketing does not exist, keep Local Context aligned
 * to the left instead of leaving an empty half row.
 */
.episode-main-column:not(:has(.rr-f-marketing))
.rr-f-local {
    grid-column: 1 / span 7;
}


/*
 * Lower arm of the F.
 */
.rr-f-chapters {
    grid-column: 1 / span 9;

    background: var(--rr-white);
}


/*
 * Transcript returns to full width for long-form reading.
 */
.rr-f-transcript {
    grid-column: 1 / -1;

    margin-top: .4rem;

    background:
        #F3ECE5;
}


/* ==========================================================
   DETAILS INSIDE COLORED CARDS
   ========================================================== */

.rr-f-takeaways
.takeaway-list li {
    border-color:
        rgba(26,26,26,.16);
}

.rr-f-takeaways
.takeaway-list li::before {
    color:
        var(--rr-copper-hover);
}

.rr-f-local a {
    color: var(--rr-white);
}

.rr-f-chapters
.chapter-list li {
    border-color:
        rgba(26,26,26,.11);
}


/* ==========================================================
   SUBTLE INTERACTION
   ========================================================== */

@media
    (hover:hover)
    and (prefers-reduced-motion:no-preference) {

    .rr-f-card:hover {
        transform:
            translateY(-5px);

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

    .episode-sidebar__card {
        transition:
            transform .22s ease,
            box-shadow .22s ease;
    }

    .episode-sidebar__card:hover {
        transform:
            translateY(-3px);

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


/*
 * Progressive enhancement:
 * view-timeline animation only in browsers that support it.
 * No JS required.
 */
@supports (animation-timeline: view()) {

    @media (prefers-reduced-motion:no-preference) {

        .rr-f-card {
            animation:
                rr-card-enter
                linear
                both;

            animation-timeline:
                view();

            animation-range:
                entry 0%
                cover 20%;
        }

        @keyframes rr-card-enter {

            from {
                opacity: .55;

                transform:
                    translateY(18px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }
        }
    }
}


/* ==========================================================
   RELATED BAND
   ========================================================== */

.related-section {
    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.06);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

    .rr-f-takeaways,
    .rr-f-discussion,
    .rr-f-chapters {
        grid-column:
            1 / span 10;
    }
}


/* ==========================================================
   MOBILE — F PATTERN BECOMES SIMPLE READING FLOW
   ========================================================== */

@media (max-width: 760px) {

    .episode-body-shell {
        border-radius:
            18px 18px 0 0;

        padding-left:
            1rem;

        padding-right:
            1rem;
    }

    .episode-main-column {
        grid-template-columns:
            1fr;

        gap: 1rem;
    }

    .rr-f-overview,
    .rr-f-takeaways,
    .rr-f-discussion,
    .rr-f-marketing,
    .rr-f-local,
    .rr-f-chapters,
    .rr-f-transcript,
    .episode-main-column:not(:has(.rr-f-marketing))
    .rr-f-local {
        grid-column: 1;
    }

    .episode-sidebar__card {
        background:
            var(--rr-charcoal);
    }
}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 520px) {

    .episode-section > h2 {
        font-size:
            clamp(1.55rem,7vw,1.95rem);
    }

    .rr-f-card {
        border-radius: 10px;
    }
}

/* END RR F PATTERN POLISH */

/* ==========================================================
   FULL-BLEED EPISODE VIDEO
   ========================================================== */

.episode-body-shell {
    --episode-sheet-pad: clamp(1rem, 2.2vw, 2rem);
}

.episode-video-section {
    margin-left: calc(-1 * var(--episode-sheet-pad));
    margin-right: calc(-1 * var(--episode-sheet-pad));
}

.youtube-facade,
.episode-poster {
    width: 100%;
    border-radius: 20px 20px 12px 12px;
}

/*
 * Keep the utility information aligned with the editorial
 * content rather than pushing it to the extreme edges.
 */
.episode-video-meta {
    padding-left: var(--episode-sheet-pad);
    padding-right: var(--episode-sheet-pad);
}