:root {
    --bg: #000000;
    --panel: #090909;
    --panel-2: #0b0b0b;
    --panel-3: #0b0b0b;

    --red: #fe0000;
    --red-dark: #fe0000;
    --red-soft: rgba(254,0,0,.15);

    --white: #ffffff;
    --gray: #a89fa0;
    --gray-light: #d1caca;

    --border: #2a1114;
    --border-strong: rgba(255,255,255,.18);

    --max: 1440px;
    --page: min(calc(100% - 48px), var(--max));
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--white);

    background:
        radial-gradient(
            circle at 78% 12%,
            rgba(254,0,0,.15),
            transparent 30%
        ),
        linear-gradient(90deg, #000000 0%, #ff0f0f 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


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

.site-header {
    width: var(--page);
    margin: 0 auto;

    min-height: 100px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;

    gap: 14px;
}

.brand-mark {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background: #000000;

    font-weight: 900;
    letter-spacing: .06em;

    box-shadow:
        0 12px 35px rgba(254,0,0,.22);
}

.brand-mark img {
    width: 76%;
    height: 76%;

    display: block;

    object-fit: contain;

    max-width: 100%;
    max-height: 100%;
}

.brand-copy {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.brand-copy strong {
    font-size: 14px;

    letter-spacing: .12em;
}

.brand-copy span {
    color: var(--gray);

    font-size: 11px;
}

.desktop-nav {
    display: flex;

    gap: 34px;
}

.desktop-nav a {
    position: relative;

    padding: 40px 0 34px;

    color: var(--gray-light);

    font-size: 12px;
    font-weight: 800;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: var(--white);
}

.desktop-nav a.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 27px;

    height: 3px;

    border-radius: 99px;

    background: var(--red);
}

.listen-live-button {
    justify-self: end;

    min-height: 48px;

    padding: 0 24px;

    border: 0;
    border-radius: 13px;

    color: var(--white);
    background: var(--red);

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 12px 32px rgba(254,0,0,.22);
}

.broadcast-icon {
    margin-right: 7px;
}


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

.hero {
    position: relative;

    width: var(--page);

    margin: 0 auto;

    min-height: 570px;

    display: grid;

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

    align-items: center;

    overflow: hidden;

    border-bottom: 1px solid var(--border);
}

.hero-content {
    position: relative;
    z-index: 3;

    max-width: 580px;

    padding: 70px 0;
}

.eyebrow {
    color: var(--red);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .16em;
}

.hero h1 {
    margin: 16px 0 4px;

    font-size: clamp(62px, 6.5vw, 94px);

    line-height: .88;

    letter-spacing: -.055em;
}

.hero h1 span {
    display: block;

    color: var(--red);
}

.hero h2 {
    margin: 16px 0 20px;

    font-size: 30px;

    letter-spacing: -.035em;
}

.hero p {
    max-width: 475px;

    margin: 0;

    color: var(--gray-light);

    font-size: 16px;

    line-height: 1.7;
}

.hero-buttons {
    margin-top: 30px;

    display: flex;

    gap: 14px;
}

.primary-button,
.secondary-button {
    min-height: 48px;

    padding: 0 24px;

    display: inline-flex;

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

    border-radius: 6px;

    font-size: 13px;
    font-weight: 900;
}

.primary-button {
    border: 0;

    color: var(--white);

    background: var(--red);

    cursor: pointer;
}

.secondary-button {
    border: 1px solid var(--border-strong);

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

.hero-socials {
    margin-top: 36px;

    display: flex;

    align-items: center;

    gap: 16px;

    color: var(--gray);
}

.hero-socials span {
    margin-right: 4px;

    font-size: 12px;
}

.hero-socials a {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    color: var(--white);

    font-size: 9px;
    font-weight: 900;
}

.hero-socials a svg,
.footer-socials a svg {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;
}


/* PODCASTS */

.podcasts-section {
    width: var(--page);
    margin: 0 auto;
    padding: 34px 0 54px;
}

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

.podcast-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
}

.podcast-artwork {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #080b10;
}

.podcast-artwork::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(2, 5, 10, 0.72) 100%
        );
    content: '';
}

.podcast-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-content {
    display: flex;
    min-height: 220px;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
}

.podcast-kicker {
    color: var(--red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.podcast-content h3 {
    margin: 7px 0 4px;
    color: var(--white);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.05;
}

.podcast-episode-title {
    color: var(--white);
    font-size: 12px;
    line-height: 1.35;
}

.podcast-meta {
    margin-top: 7px;
    color: var(--gray);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.podcast-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0 14px;
    color: var(--gray);
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.podcast-play-button {
    min-height: 34px;
    margin-top: auto;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    color: var(--white);
    background: var(--red);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
}

.podcast-play-button:hover,
.podcast-play-button:focus-visible {
    filter: brightness(1.08);
}

@media (max-width: 760px) {
    .podcasts-grid {
        grid-template-columns: 1fr;
    }

    .podcast-card {
        display: grid;
        grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
    }

    .podcast-artwork {
        height: 100%;
        aspect-ratio: auto;
    }

    .podcast-content {
        min-height: 210px;
        padding: 16px;
    }
}


/* HERO VISUAL */

.hero-visual {
    position: relative;
    height: 100%;
    min-height: 570px;
    overflow: hidden;

    /*
       NO BORDER HERE.
       The image should flow directly into
       the text side with no vertical line.
    */
    border: 0;

    background: #02050a;
}

.hero-main-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Later this can become a builder control
       for image focal position.
    */
    object-position: 62% center;

    z-index: 1;
}


/*
   AUTOMATIC STATION HERO FADE

   This is part of the webpage itself,
   NOT part of the uploaded image.

   Any station image uploaded here will
   automatically blend toward the text.
*/
.hero-image-fade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            #02050a 0%,
            rgba(2,5,10,.99) 5%,
            rgba(2,5,10,.97) 12%,
            rgba(2,5,10,.90) 20%,
            rgba(2,5,10,.76) 28%,
            rgba(2,5,10,.56) 36%,
            rgba(2,5,10,.34) 44%,
            rgba(2,5,10,.16) 52%,
            rgba(2,5,10,.05) 60%,
            rgba(2,5,10,0) 69%
        );
}


/*
   Soft top/bottom treatment makes arbitrary
   uploaded images feel like part of the page.
*/
.hero-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            rgba(2,5,10,.14) 0%,
            rgba(2,5,10,0) 24%,
            rgba(2,5,10,0) 72%,
            rgba(2,5,10,.28) 100%
        );
}


/* ==========================================================
   LIVE PLAYER
========================================================== */

.live-player-card {
    width: var(--page);

    margin: -1px auto 0;

    padding: 20px;

    border:
        1px solid
        var(--border-strong);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0a111c,
            #060b12
        );

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

.live-player-label {
    margin:
        0
        0
        12px
        4px;

    color: var(--red);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .13em;
}


/*
   EVERESTCAST PLAYER:
   compress the existing real player into
   the horizontal mockup-style block.
*/

#sc-player {
    width: 100%;
}

#sc-player .player-container {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;

    grid-template-columns:
        150px
        minmax(0,1fr) !important;

    align-items: center !important;

    gap: 10px;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

#sc-player .box-container {
    box-shadow:
        none !important;

    background:
        transparent !important;
}

#sc-player .image-container {
    width: 150px !important;

    min-width: 150px !important;

    background:
        transparent !important;
}

#sc-player .image-box {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}

#sc-player .image-box img {
    width: 132px !important;
    height: 132px !important;

    min-height: 0 !important;

    object-fit: cover;

    border-radius: 10px;
}

#sc-player .controls-container {
    min-height: 132px !important;

    padding:
        8px
        16px
        8px
        4px !important;

    display: flex !important;

    align-items: center !important;

    background:
        transparent !important;
}

#sc-player .controls-holder {
    width: 100%;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 8px;
}

#sc-player .track-container {
    font-size: 20px !important;

    line-height: 1.2 !important;

    font-weight: 900 !important;
}

#sc-player .dj-container {
    margin-bottom:
        6px !important;
}

#sc-player #play-button-container button {
    width: 54px !important;
    height: 54px !important;

    background:
        var(--red) !important;
}

#sc-player .history-table,
#sc-player #history-container,
#sc-player #share-network-list {
    display:
        none !important;
}


/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title-row {
    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.section-title-row h2 {
    margin: 0;

    font-size: 18px;

    letter-spacing: -.02em;
}

.section-title-row a {
    color: var(--red);

    font-size: 10px;

    font-weight: 900;
}


/* ==========================================================
   RECENT
========================================================== */

.recent-section {
    width: var(--page);

    margin: 0 auto;

    padding: 34px 0 0;
}

.recent-grid {
    display: grid;

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

    gap: 14px;
}

.recent-card {
    overflow: hidden;

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

    border-radius: 8px;

    background: var(--panel);

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

.recent-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(254,0,0,.60);
}

.recent-art {
    aspect-ratio: 1.35;

    overflow: hidden;

    background: #10141b;
}

.recent-art img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.recent-info {
    padding: 12px;
}

.recent-title {
    overflow: hidden;

    margin-bottom: 5px;

    color: var(--white);

    font-size: 13px;

    font-weight: 900;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.recent-meta {
    overflow: hidden;

    color: var(--theme-heading, var(--white));

    font-size: 11px;

    line-height: 1.5;
}

.recent-loading {
    grid-column:
        1 / -1;

    padding: 30px;

    text-align: center;

    color: var(--gray);
}


/* ==========================================================
   PROGRAMMING
========================================================== */

.programming-grid {
    width: var(--page);

    margin: 0 auto;

    padding: 26px 0 0;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        .9fr;

    gap: 16px;
}

.featured-show-card,
.schedule-card,
.community-card {
    min-height: 280px;

    padding: 24px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #0a111c,
            #060b12
        );
}

.featured-show-card {
    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    overflow: hidden;
}

.card-kicker {
    color: var(--red);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .12em;
}

.featured-show-card h2 {
    margin:
        12px
        0
        4px;

    font-size: 34px;
    line-height: 1.08;
}

.featured-show-card strong,
.show-time-large {
    display: block;

    margin-top: 7px;

    font-size: 15px;
    line-height: 1.35;
}

#featuredShowDJ {
    margin-top: 12px !important;

    font-size: 15px;

    line-height: 1.35;
}

#featuredShowImage {
    width: 200px !important;
    height: 200px !important;

    object-fit: contain !important;

    object-position: center;

    border-radius: 0 !important;

    margin: 0 auto;
}

.featured-show-card p {
    max-width: 340px;

    margin:
        18px
        0
        20px;

    color: var(--gray-light);

    font-size: 15px;

    line-height: 1.6;
}

.small-outline-button {
    min-height: 40px;

    padding: 0 16px;

    display: inline-flex;

    align-items: center;

    border:
        1px solid
        var(--red);

    border-radius: 5px;

    font-size: 11px;

    font-weight: 900;
}

.featured-person {
    position: relative;

    display: grid;

    place-items: center;
}

.featured-person-circle {
    width: 200px;
    height: 200px;

    display: grid;

    place-items: center;

    background: transparent;

    border-radius: 0;

    color: rgba(255,255,255,.90);
}


/* SCHEDULE */

.card-heading {
    margin-bottom: 10px;

    display: flex;

    justify-content: space-between;
}

.card-heading h2 {
    margin: 0;

    font-size: 17px;
}

.card-heading a {
    color: var(--red);

    font-size: 9px;

    font-weight: 900;
}

.schedule-row {
    min-height: 52px;

    display: grid;

    grid-template-columns:
        84px
        1fr
        auto;

    align-items: center;

    border-bottom:
        1px solid
        var(--border);

    color: var(--gray-light);

    font-size: 11px;
}

.schedule-row:last-child {
    border-bottom: none;
}

.schedule-row strong {
    color: var(--white);
}

.schedule-row em {
    color: var(--theme-heading, var(--white));

    font-style: normal;
}

.schedule-row.active span,
.schedule-row.active em {
    color: var(--red);
}


/* REQUEST */

.right-stack {
    display: grid;

    gap: 14px;
}

.request-card {
    padding: 24px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #bd1825,
            #f22d3c
        );

    box-shadow:
        inset
        0 0 0 1px
        rgba(255,255,255,.15);
}

.request-icon {
    font-size: 26px;
}

.recent-card:hover {
    border-color: var(--theme-primary-accent, var(--red));
}

.schedule-row.active span,
.schedule-row.active em,
.host-show,
.tttrn-source-row.is-live-dj #tttrnSourceSub {
    color: var(--theme-primary-accent, var(--red)) !important;
}

.tttrn-source-avatar {
    background: linear-gradient(
        145deg,
        var(--theme-primary-accent, var(--red)),
        var(--theme-secondary-accent, #a91620)
    );
}

.tttrn-listeners strong::before {
    background: var(--theme-primary-accent, var(--red));
    box-shadow: var(--theme-small-glow, 0 0 8px rgba(254,0,0,.28));
}

.tttrn-source-row.is-live-dj .tttrn-source-avatar {
    border-color: var(--theme-primary-accent, var(--red)) !important;
    box-shadow: var(--theme-outline-glow, 0 0 0 3px rgba(254,0,0,.10));
}

.request-card h2 {
    margin:
        8px
        0;

    font-size: 21px;
}

.request-card p {
    margin:
        0
        0
        15px;

    font-size: 13px;
}

.request-button {
    width: 100%;

    min-height: 42px;

    border: 0;

    border-radius: 6px;

    color: #141414;

    background: var(--white);

    font-weight: 900;

    cursor: pointer;
}

.community-card {
    min-height: auto;
}

.community-card h3 {
    margin: 0 0 8px;

    font-size: 15px;
}

.community-card p {
    margin: 0 0 12px;

    color: var(--gray-light);

    font-size: 12px;

    line-height: 1.6;
}

.community-socials {
    display: flex;

    gap: 9px;
}

.community-socials a {
    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    font-size: 9px;

    font-weight: 900;
}


/* ==========================================================
   HOSTS
========================================================== */

.hosts-section {
    width: var(--page);

    margin: 0 auto;

    padding: 34px 0;
}

.hosts-grid {
    display: grid;

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

    gap: 14px;
}

.host-card {
    min-height: 165px;

    padding: 18px;

    display: grid;

    grid-template-columns:
        108px
        1fr;

    align-items: end;

    gap: 15px;

    overflow: hidden;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #0b111b,
            #070b12
        );
}

.host-photo {
    width: 108px;
    height: 145px;

    display: grid;

    place-items: center;

    border-radius:
        70px
        70px
        10px
        10px;

    background:
        linear-gradient(
            160deg,
            #4c1017,
            var(--red)
        );

    font-size: 26px;

    font-weight: 900;
}

.host-copy {
    padding-bottom: 12px;
}

.host-copy h3 {
    margin: 0 0 6px;

    font-size: 16px;
}

.host-copy span {
    color: var(--gray);

    font-size: 11px;
}


/* ==========================================================
   BENEFITS
========================================================== */

.benefits-strip {
    width: var(--page);

    margin: 0 auto 44px;

    display: grid;

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

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

    border-radius: 9px;

    background: #080d15;
}

.benefits-strip article {
    min-height: 112px;

    padding: 22px;

    display: flex;

    gap: 15px;

    border-right:
        1px solid
        var(--border);
}

.benefits-strip article:last-child {
    border-right: none;
}

.benefit-icon {
    color: var(--red);

    font-size: 26px;
}

.benefits-strip h3 {
    margin: 0 0 8px;

    font-size: 12px;
}

.benefits-strip p {
    margin: 0;

    color: var(--gray);

    font-size: 11px;

    line-height: 1.6;
}


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

.site-footer {
    width: var(--page);

    margin: 0 auto;

    padding: 42px 0;

    display: grid;

    grid-template-columns:
        1.5fr
        .8fr
        .8fr
        1fr;

    gap: 40px;

    border-top:
        1px solid
        var(--border);
}

.site-footer.contact-unavailable {
    grid-template-columns:
        1.5fr
        .8fr
        1fr;
}

.footer-brand {
    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;
}

.footer-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.footer-brand .brand-mark {
    width: 50px;
    height: 50px;
}

.footer-brand strong {
    font-size: 13px;

    letter-spacing: .10em;
}

.footer-brand p,
.footer-column p {
    max-width: 240px;

    margin: 0;

    color: var(--gray);

    font-size: 11px;

    line-height: 1.7;
}

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 9px;
}

.footer-column h4 {
    margin:
        0
        0
        5px;

    font-size: 11px;
}

.footer-column a {
    color: var(--gray);

    font-size: 11px;
}

.footer-socials {
    display: flex;

    gap: 8px;

    margin-top: 8px;
}

.footer-socials a {
    width: 28px;
    height: 28px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    color: var(--white);

    font-size: 8px;

    font-weight: 900;
}

.copyright {
    width: var(--page);

    margin: 0 auto;

    min-height: 58px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid
        var(--border);

    color: #656d7a;

    font-size: 10px;
}


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

@media (max-width: 1100px) {

    .site-header {
        grid-template-columns:
            1fr
            auto;
    }

    .desktop-nav {
        display: none;
    }

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

    .hero-visual {
        min-height: 400px;
    }

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

    .right-stack {
        grid-column:
            1 / -1;

        grid-template-columns:
            1fr
            1fr;
    }

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

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

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

}

@media (max-width: 720px) {

    :root {
        --page:
            calc(100% - 28px);
    }

    .site-header {
        min-height: 78px;
    }

    .brand-copy span {
        display: none;
    }

    .listen-live-button {
        padding:
            0
            15px;
    }

    .hero {
        min-height: 0;
    }

    .hero-content {
        padding:
            60px
            0
            30px;
    }

    .hero h1 {
        font-size: 58px;
    }

    .hero h2 {
        font-size: 24px;
    }

    .hero-visual {
        min-height: 330px;
    }

    .hero-main-image {
        object-position: 62% center;
    }

    .hero-radio-mark {
        right: 8%;
        top: 15%;

        width: 230px;
        height: 230px;
    }

    .hero-radio-mark span {
        font-size: 72px;
    }

    #sc-player .player-container {
        display: block !important;
    }

    #sc-player .image-container {
        width: 100% !important;

        min-width: 0 !important;
    }

    #sc-player .image-box img {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 1;

        border-radius: 8px;
    }

    #sc-player .controls-container {
        min-height: 220px !important;

        padding: 14px 10px !important;
    }

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

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

    .right-stack {
        grid-column: auto;

        grid-template-columns:
            1fr;
    }

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

    .benefits-strip {
        grid-template-columns:
            1fr;
    }

    .benefits-strip article {
        border-right: none;

        border-bottom:
            1px solid
            var(--border);
    }

    .benefits-strip article:last-child {
        border-bottom: none;
    }

    .site-footer {
        grid-template-columns:
            1fr
            1fr;
    }

    .site-footer.contact-unavailable {
        grid-template-columns:
            1fr
            1fr;
    }

}

/* ==========================================================
   TTTRN SEAMLESS HERO IMAGE
   Image lives underneath the WHOLE hero instead of
   beginning in a separate right-side column.
========================================================== */

.hero {
    position: relative !important;

    display: block !important;

    min-height: 570px;

    overflow: hidden;

    background: #02050a;
}


/*
   Keep all hero text/content above
   both the photo and automatic fade.
*/
.hero-content {
    position: relative !important;

    z-index: 10 !important;

    width: 48%;
    max-width: 590px;

    padding: 70px 0;
}


/*
   The visual now extends across the entire hero.

   There is no left edge / column boundary anymore,
   so there is nothing that can create that hard seam.
*/
.hero-visual {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    z-index: 1;

    border: 0 !important;

    overflow: hidden;

    background: #02050a;
}


.hero-main-image {
    position: absolute;

    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
       Push the important subject toward the right
       while allowing the unnecessary left-side
       image branding to disappear into the fade.
    */
    object-position: 76% center;

    z-index: 1;
}


/*
   AUTOMATIC HERO BLEND

   This sits over the ENTIRE hero picture rather than
   only the old right-hand image column.
*/
.hero-image-fade {
    position: absolute !important;

    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            #02050a 0%,
            #02050a 24%,

            rgba(2,5,10,.99) 31%,
            rgba(2,5,10,.96) 37%,
            rgba(2,5,10,.88) 43%,
            rgba(2,5,10,.73) 49%,
            rgba(2,5,10,.52) 55%,
            rgba(2,5,10,.30) 61%,
            rgba(2,5,10,.13) 67%,
            rgba(2,5,10,.04) 73%,
            rgba(2,5,10,0) 80%
        );
}


/*
   Slight darkening above/below keeps uploaded
   images integrated into the station theme.
*/
.hero-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            rgba(2,5,10,.12) 0%,
            rgba(2,5,10,0) 25%,
            rgba(2,5,10,0) 72%,
            rgba(2,5,10,.25) 100%
        );
}


@media (max-width: 900px) {

    .hero-content {
        width: 62%;
    }

    .hero-main-image {
        object-position: 72% center;
    }

}


@media (max-width: 720px) {

    .hero {
        min-height: 720px;
    }

    .hero-content {
        width: 100%;

        padding:
            55px
            0
            360px;
    }

    .hero-main-image {
        object-position: 70% bottom;
    }

    .hero-image-fade {
        background:
            linear-gradient(
                180deg,

                #02050a 0%,
                rgba(2,5,10,.98) 35%,
                rgba(2,5,10,.74) 50%,
                rgba(2,5,10,.22) 68%,
                rgba(2,5,10,0) 82%
            );
    }

}


/* ==========================================================
   HERO FINISHING TOUCHES
========================================================== */

.hero {
    border-radius: 0 0 18px 18px;
    margin-bottom: 24px;
}

.hero-visual {
    border-radius: 0 0 18px 18px;
}

.live-player-card {
    margin-top: 0 !important;
}


/* ==========================================================
   TTTRN COMPACT NOW PLAYING PLAYER
   Match the proportions of the approved mockup.
========================================================== */

.live-player-card {
    position: relative;

    width: var(--page);

    /*
       Compact horizontal player like the mockup.
    */
    height: 190px !important;
    min-height: 190px !important;

    margin: 0 auto !important;

    padding: 18px 20px !important;

    overflow: hidden !important;

    border: 1px solid var(--border-strong);

    border-radius: 18px !important;

    background:
        linear-gradient(
            135deg,
            #09111c 0%,
            #070d16 58%,
            #09101a 100%
        );

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


.live-player-label {
    position: absolute;

    top: 17px;
    left: 20px;

    z-index: 20;

    margin: 0 !important;

    color: var(--red);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .14em;
}


/*
   Keep EverestCast inside the compact shell.
*/
#sc-player {
    position: absolute !important;

    inset:
        36px
        18px
        12px
        18px;

    width: auto !important;
    height: auto !important;

    overflow: hidden !important;
}


#sc-player .player-container {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
        150px
        minmax(0,1fr) !important;

    align-items: center !important;

    gap: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;

    box-shadow: none !important;
}


#sc-player .box-container {
    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: hidden !important;
}


/* ALBUM ART */

#sc-player .image-container {
    width: 138px !important;
    height: 138px !important;

    min-width: 138px !important;
    min-height: 138px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: transparent !important;
}


#sc-player .image-box {
    width: 138px !important;
    height: 138px !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    border-radius: 10px !important;
}


#sc-player .image-box img {
    width: 138px !important;
    height: 138px !important;

    min-height: 0 !important;
    max-height: 138px !important;

    display: block !important;

    object-fit: cover !important;

    border-radius: 10px !important;
}


/* CONTROL SIDE */

#sc-player .controls-container {
    position: relative !important;

    width: 100% !important;
    height: 138px !important;

    min-height: 138px !important;
    max-height: 138px !important;

    margin: 0 !important;

    padding:
        4px
        8px !important;

    overflow: hidden !important;

    background: transparent !important;
}


#sc-player .controls-holder {
    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/*
   Prevent EverestCast's internal elements from
   forcing the player vertically taller.
*/
#sc-player .track-container,
#sc-player .dj-container,
#sc-player .progress-container,
#sc-player #play-button-container {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}


#sc-player #play-button-container button {
    width: 52px !important;
    height: 52px !important;

    min-width: 52px !important;
    min-height: 52px !important;

    margin: 0 !important;

    background: var(--red) !important;
}


/*
   Kill sections we do not want contributing
   extra height.
*/
#sc-player .history-table,
#sc-player #history-container,
#sc-player #share-network-list {
    display: none !important;
}


/* DESKTOP TARGET HEIGHT */

@media (min-width: 721px) {

    .live-player-card {
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }

}


/* MOBILE */

@media (max-width: 720px) {

    .live-player-card {
        height: auto !important;
        min-height: 390px !important;
        max-height: none !important;
    }

    #sc-player {
        position: relative !important;

        inset: auto !important;

        margin-top: 24px;

        overflow: visible !important;
    }

    #sc-player .player-container {
        display: block !important;

        height: auto !important;
    }

    #sc-player .image-container,
    #sc-player .image-box,
    #sc-player .image-box img {
        width: 150px !important;
        height: 150px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    #sc-player .controls-container {
        height: auto !important;
        min-height: 190px !important;
        max-height: none !important;

        margin-top: 12px !important;
    }

}


/* ==========================================================
   TTTRN CUSTOM PLAYER FACE
========================================================== */

.live-player-card {
    position: relative !important;

    height: 190px !important;
    min-height: 190px !important;

    padding: 18px 22px !important;

    overflow: hidden !important;
}


.tttrn-player {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        140px
        minmax(230px,.9fr)
        minmax(320px,1.4fr)
        minmax(185px,.62fr);

    align-items: center;

    gap: 20px;
}


/* ART */

.tttrn-player-art {
    width: 136px;
    height: 136px;

    overflow: hidden;

    border-radius: 10px;

    background: #121821;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.28);
}

.tttrn-player-art img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* TRACK INFO */

.tttrn-player-info {
    min-width: 0;
}

.tttrn-now-label {
    margin-bottom: 7px;

    color: var(--red);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .14em;
}

.tttrn-track-title {
    overflow: hidden;

    color: #fff;

    font-size: 23px;
    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -.035em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.tttrn-track-artist {
    margin-top: 5px;

    overflow: hidden;

    color: #aeb6c2;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* AUTOMIX / DJ */

.tttrn-source-row {
    margin-top: 14px;

    display: flex;

    align-items: center;

    gap: 9px;
}

.tttrn-source-avatar {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

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

    background:
        linear-gradient(
            145deg,
            #fe0000,
            #671019
        );

    color: #fff;

    font-size: 8px;
    font-weight: 900;
}

.tttrn-source-row strong {
    display: block;

    color: #fff;

    font-size: 11px;
}

.tttrn-source-row span {
    display: block;

    margin-top: 1px;

    color: #727c89;

    font-size: 9px;
}


/* CENTER */

.tttrn-player-center {
    min-width: 0;
}


/* LEVEL METER */

.tttrn-meter {
    height: 58px;

    display: flex;

    align-items: center;

    gap: 4px;

    overflow: hidden;

    padding: 4px 0;
}

.tttrn-meter span {
    width: 5px;

    height: var(--h);

    min-height: 8px;

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #ff4e5c,
            #fe0000
        );

    box-shadow:
        0 0 9px
        rgba(254,0,0,.20);

    transform-origin: center;

    animation:
        tttrnMeter
        .72s
        ease-in-out
        infinite alternate;
}

.tttrn-meter span:nth-child(2n) {
    animation-duration: .46s;
}

.tttrn-meter span:nth-child(3n) {
    animation-duration: .88s;
}

.tttrn-meter span:nth-child(5n) {
    opacity: .7;
}


@keyframes tttrnMeter {

    from {
        transform:
            scaleY(.38);
    }

    to {
        transform:
            scaleY(1);
    }

}


/* CONTROLS */

.tttrn-control-row {
    margin-top: 6px;

    display: flex;

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

    gap: 22px;
}

.tttrn-icon-button {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 0;

    color: #fff;

    background: transparent;

    cursor: pointer;

    font-size: 14px;

    opacity: .72;
}

.tttrn-icon-button:hover {
    opacity: 1;
}


.tttrn-main-play {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    padding: 0;

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

    border-radius: 50%;

    color: #fff;

    background: var(--red);

    cursor: pointer;

    font-size: 18px;

    box-shadow:
        0 8px 22px
        rgba(254,0,0,.24);
}


/*
   Voting controls are visually present now,
   but deliberately muted until the real
   EverestCast vote endpoint is wired.
*/
.tttrn-vote-button {
    opacity: .48;
}


/* RIGHT */

.tttrn-player-right {
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 12px;

    padding-left: 18px;

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


.tttrn-listeners {
    display: flex;

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

    gap: 10px;
}

.tttrn-listeners span {
    color: #87919e;

    font-size: 10px;
}

.tttrn-listeners strong {
    position: relative;

    color: #fff;

    font-size: 11px;
}

.tttrn-listeners strong::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 6px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 8px
        rgba(254,0,0,.60);
}


.tttrn-quality {
    width: fit-content;

    padding: 7px 12px;

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

    border-radius: 7px;

    color: #cdd3da;

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

    font-size: 10px;
    font-weight: 700;
}


.tttrn-volume-row {
    display: grid;

    grid-template-columns:
        22px
        1fr;

    align-items: center;

    gap: 8px;
}

.tttrn-volume-icon {
    font-size: 13px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}


#tttrnVolume {
    width: 100%;
    cursor: pointer;
}


/* REAL EVERESTCAST ENGINE IS HIDDEN, NOT REMOVED */

#tttrnEngine {
    position: absolute !important;

    left: -99999px !important;
    top: -99999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* TABLET */

@media (max-width: 1050px) {

    .tttrn-player {
        grid-template-columns:
            120px
            minmax(190px,1fr)
            minmax(260px,1.2fr);
    }

    .tttrn-player-right {
        display: none;
    }

    .tttrn-player-art,
    .tttrn-player-art img {
        width: 118px;
        height: 118px;
    }

}


/* MOBILE */

@media (max-width: 720px) {

    .live-player-card {
        height: auto !important;
        min-height: 0 !important;

        padding: 18px !important;
    }

    .tttrn-player {
        grid-template-columns:
            92px
            1fr;

        gap: 14px;
    }

    .tttrn-player-art,
    .tttrn-player-art img {
        width: 92px;
        height: 92px;
    }

    .tttrn-player-center {
        grid-column:
            1 / -1;
    }

    .tttrn-player-right {
        grid-column:
            1 / -1;

        display: flex;

        height: auto;

        padding:
            12px
            0
            0;

        border-left: 0;

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

}



/* ==========================================================
   TTTRN PLAYER POLISH PASS
========================================================== */

.live-player-card {
    padding:
        16px
        20px !important;
}


.tttrn-player {
    grid-template-columns:
        136px
        minmax(265px, .95fr)
        minmax(390px, 1.65fr)
        200px !important;

    gap: 22px !important;
}


/* ART */

.tttrn-player-art,
.tttrn-player-art img {
    width: 132px !important;
    height: 132px !important;
}


/* TRACK */

.tttrn-player-info {
    align-self: center;

    padding-right: 8px;
}

.tttrn-now-label {
    margin-bottom: 6px;
}

.tttrn-track-title {
    font-size: 22px !important;
}

.tttrn-track-artist {
    margin-top: 4px !important;

    font-size: 11px !important;
}

.tttrn-source-row {
    margin-top: 12px !important;
}


/* ==========================================================
   METER AREA
========================================================== */

.tttrn-player-center {
    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.tttrn-meter {
    width: 100% !important;

    height: 58px !important;

    display: flex !important;

    align-items: center;

    gap: 3px !important;

    padding: 3px 2px !important;
}


.tttrn-meter span {
    /*
       Stretch the existing meter bars across
       the entire available center area.
    */
    width: auto !important;

    flex:
        1
        1
        0;

    max-width: 8px;

    min-width: 3px;

    height: var(--h);

    min-height: 7px;

    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #ff5362,
            #fe0000
        );

    /*
       Meter is idle until playback begins.
    */
    animation: none !important;

    transform:
        scaleY(.20);

    opacity: .35;

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


/*
   Animate ONLY while our player is playing.
*/
.tttrn-player.is-playing
.tttrn-meter span {
    opacity: 1;

    animation:
        tttrnLiveMeter
        .72s
        ease-in-out
        infinite alternate !important;
}

.tttrn-player.is-playing
.tttrn-meter span:nth-child(2n) {
    animation-duration:
        .45s !important;
}

.tttrn-player.is-playing
.tttrn-meter span:nth-child(3n) {
    animation-duration:
        .87s !important;
}

.tttrn-player.is-playing
.tttrn-meter span:nth-child(4n) {
    animation-duration:
        .58s !important;
}

.tttrn-player.is-playing
.tttrn-meter span:nth-child(5n) {
    animation-duration:
        .96s !important;
}


@keyframes tttrnLiveMeter {

    from {
        transform:
            scaleY(.24);
    }

    to {
        transform:
            scaleY(1);
    }

}


/* ==========================================================
   CENTER CONTROLS
========================================================== */

.tttrn-control-row {
    margin-top: 7px !important;

    gap: 26px !important;
}


.tttrn-main-play {
    width: 52px !important;
    height: 52px !important;

    flex: 0 0 52px;

    font-size: 17px !important;
}


.tttrn-icon-button {
    width: 34px !important;
    height: 34px !important;

    padding: 6px !important;

    color: #aeb6c2 !important;

    opacity: .78 !important;

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


.tttrn-icon-button svg {
    width: 20px;
    height: 20px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.tttrn-icon-button:hover {
    color: #fff !important;

    opacity: 1 !important;

    transform:
        translateY(-1px);
}


.tttrn-vote-button {
    opacity: .72 !important;
}


/* ==========================================================
   RIGHT SIDE
========================================================== */

.tttrn-player-right {
    gap: 10px !important;

    padding-left: 20px !important;
}


.tttrn-listeners {
    min-height: 24px;
}


.tttrn-quality {
    padding:
        6px
        11px !important;
}


.tttrn-volume-row {
    margin-top: 2px;
}


/* Custom volume track */

#tttrnVolume {
    appearance: none;
    height: 4px;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(
        90deg,
        var(--theme-player-volume, var(--red)) 0%,
        var(--theme-player-volume, var(--red)) 80%,
        rgba(255,255,255,.20) 80%,
        rgba(255,255,255,.20) 100%
    );
}

#tttrnVolume::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;

    border:
        2px solid
        #fff;

    border-radius: 50%;

    background:
        var(--red);

    cursor: pointer;
}


#tttrnVolume::-moz-range-thumb {
    width: 10px;
    height: 10px;

    border:
        2px solid
        #fff;

    border-radius: 50%;

    background:
        var(--red);

    cursor: pointer;
}


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

@media (max-width: 1180px) {

    .tttrn-player {
        grid-template-columns:
            126px
            minmax(230px,1fr)
            minmax(320px,1.3fr)
            180px !important;

        gap: 17px !important;
    }

}


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

@media (max-width: 720px) {

    .tttrn-player {
        grid-template-columns:
            94px
            1fr !important;
    }

    .tttrn-player-center {
        grid-column:
            1 / -1;
    }

    .tttrn-meter {
        height:
            48px !important;
    }

}


/* ==========================================================
   TTTRN METER POSITION / LENGTH FIX
   Meter centered evenly above play button.
========================================================== */

.tttrn-player {
    grid-template-columns:
        136px
        minmax(250px, .9fr)
        minmax(500px, 1.9fr)
        190px !important;

    gap: 20px !important;
}


.tttrn-player-center {
    position: relative;

    width: 100%;

    display: grid !important;

    grid-template-rows:
        64px
        54px;

    align-items: center;

    justify-items: center;

    min-width: 0;
}


/*
   Make meter much longer and center it
   directly over the controls.
*/
.tttrn-meter {
    width: min(100%, 560px) !important;
    max-width: 560px !important;

    height: 62px !important;

    margin: 0 auto !important;

    display: flex !important;

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

    gap: 4px !important;

    padding: 3px 0 !important;
}


/*
   Even distribution across the full meter.
*/
.tttrn-meter span {
    flex:
        1
        1
        0 !important;

    width: auto !important;

    max-width: 9px !important;
    min-width: 4px !important;
}


/*
   Keep controls directly centered
   beneath the meter.
*/
.tttrn-control-row {
    width: 100%;

    margin: 0 !important;

    display: flex !important;

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

    gap: 28px !important;
}


@media (max-width: 1180px) {

    .tttrn-player {
        grid-template-columns:
            126px
            minmax(220px,.9fr)
            minmax(400px,1.7fr)
            175px !important;
    }

    .tttrn-meter {
        width: min(100%, 470px) !important;
        max-width: 470px !important;
    }

}


/* ==========================================================
   TTTRN LONG METER
   Same centered position — more actual bars.
========================================================== */

.tttrn-meter {
    width: 100% !important;
    max-width: 610px !important;

    gap: 3px !important;
}

.tttrn-meter span {
    flex: 1 1 0 !important;

    width: auto !important;

    min-width: 3px !important;
    max-width: 7px !important;
}


/* ==========================================================
   TTTRN METER +50% LENGTH
========================================================== */

.tttrn-meter {
    width: 100% !important;
    max-width: 915px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    gap: 3px !important;
}

.tttrn-meter span {
    flex: 1 1 0 !important;

    min-width: 3px !important;
    max-width: 7px !important;
}


/* ==========================================================
   TTTRN FINAL METER WIDTH TWEAK
========================================================== */

.tttrn-meter {
    width: 100% !important;
    max-width: 1050px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   TTTRN METER TRUE WIDTH EXTENSION
   Allow meter to extend beyond center grid column
   while staying centered over controls.
========================================================== */

.tttrn-player-center {
    overflow: visible !important;
}

.tttrn-meter {
    position: relative !important;

    left: 50% !important;

    width: 125% !important;
    max-width: none !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;
}


/* ==========================================================
   TTTRN METER TRUE CENTERING
   Keep current length, center over play button.
========================================================== */

.tttrn-meter {
    position: relative !important;

    left: auto !important;

    width: 125% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    transform: none !important;

    justify-self: center !important;
}


/* ==========================================================
   TTTRN METER — EXACT CENTER LOCK
   Meter center = play button center.
========================================================== */

.tttrn-player-center {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-end !important;

    height: 118px !important;

    overflow: visible !important;
}


/*
   Absolute positioning is intentional:
   50% is the exact horizontal center of the
   same container that centers the play button.
*/
.tttrn-meter {
    position: absolute !important;

    top: 0 !important;
    left: 50% !important;

    width: 125% !important;
    max-width: none !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    justify-self: auto !important;

    overflow: visible !important;
}


/*
   Controls use the exact same parent center.
*/
.tttrn-control-row {
    width: 100% !important;

    margin: 0 !important;

    display: flex !important;

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

    gap: 28px !important;
}


/* ==========================================================
   TTTRN METER — FINAL LANE ALIGNMENT
   Center between track info and listener divider.
========================================================== */

.tttrn-player-center {
    position: relative !important;

    width: 100% !important;

    overflow: visible !important;
}


/*
   The meter now stays inside the actual center column.

   24px of space on each side gives equal breathing
   room between the track-info section and the
   listeners divider.
*/
.tttrn-meter {
    position: absolute !important;

    top: 0 !important;

    left: 24px !important;
    right: 24px !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    transform: none !important;

    justify-self: auto !important;
}


/*
   Keep the bars evenly distributed across
   the entire usable lane.
*/
.tttrn-meter span {
    flex: 1 1 0 !important;

    width: auto !important;

    min-width: 2px !important;
    max-width: 7px !important;
}



/* ==========================================================
   TTTRN REAL AUDIO-REACTIVE METER
========================================================== */

/*
   Disable every previous fake CSS animation.
   JavaScript now sets bar height from the
   actual EverestCast AnalyserNode.
*/
.tttrn-meter span,
.tttrn-player.is-playing .tttrn-meter span {
    animation: none !important;

    transform: none !important;

    opacity: 1 !important;

    transition:
        height .055s linear,
        opacity .10s ease !important;
}



/* ==========================================================
   TTTRN REAL VOTING STATES
========================================================== */

.tttrn-vote-button {
    cursor: pointer;
}

.tttrn-vote-button.is-active {
    color: var(--red) !important;
    opacity: 1 !important;
}

.tttrn-vote-button.already-voted {
    color: #8d96a3 !important;
    opacity: .55 !important;
}

.tttrn-vote-button:disabled {
    cursor: default;
    opacity: .32 !important;
}



/* ==========================================================
   TTTRN VOTE VISUAL BEHAVIOR
========================================================== */

.tttrn-vote-button {
    color: #737c89 !important;
    opacity: 1 !important;
}


/*
   Selected vote = WHITE.
*/
.tttrn-vote-button.is-active {
    color: #ffffff !important;
    opacity: 1 !important;
}


/*
   Current track has no EverestCast all_music_id.
*/
.tttrn-vote-button:disabled {
    color: #555d68 !important;
    opacity: .38 !important;

    cursor: default !important;
}


/*
   Avoid any red inherited active state.
*/
.tttrn-vote-button.is-active svg {
    stroke: #ffffff !important;
}



/* ==========================================================
   TTTRN VOTE / LIVE FALLBACK SWAP
========================================================== */

.tttrn-control-side {
    width: 58px;
    min-width: 58px;

    display: flex;

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


.tttrn-live-fallback {
    display: none;

    color: #8d96a3;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .12em;

    white-space: nowrap;
}


.tttrn-live-fallback-left {
    color: var(--red);
}


.tttrn-control-row.voting-unavailable
.tttrn-vote-button {
    display: none !important;
}


.tttrn-control-row.voting-unavailable
.tttrn-live-fallback {
    display: inline-flex;
}


.tttrn-control-row.voting-available
.tttrn-vote-button {
    display: grid !important;
}


.tttrn-control-row.voting-available
.tttrn-live-fallback {
    display: none !important;
}



/* ==========================================================
   TTTRN LIVE DJ / AUTOMIX DISPLAY
========================================================== */

.tttrn-source-avatar {
    overflow: hidden !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(255,255,255,.28) !important;

    background:
        #10151d !important;
}


.tttrn-source-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


.tttrn-source-row.is-live-dj
.tttrn-source-avatar {
    border-color:
        var(--red) !important;

    box-shadow:
        0 0 0 3px
        rgba(254,0,0,.10);
}


.tttrn-source-row.is-live-dj
#tttrnSourceSub {
    color:
        var(--red) !important;

    font-weight: 900;

    letter-spacing: .08em;
}


/* ==========================================================
   TTTRN LIVE DJ BLOCK — SIZE / HIERARCHY
========================================================== */

.tttrn-source-row {
    margin-top: 12px !important;

    gap: 11px !important;
}


/* Larger DJ / AutoMix image */

.tttrn-source-avatar {
    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;
    min-height: 38px !important;

    flex: 0 0 38px !important;
}


.tttrn-source-avatar img {
    width: 38px !important;
    height: 38px !important;

    object-fit: cover !important;
}


/* Default AutoMix name */

#tttrnSourceName {
    font-size: 12px !important;

    line-height: 1.15 !important;
}


/* Secondary line */

#tttrnSourceSub {
    margin-bottom: 3px;

    font-size: 9px !important;

    line-height: 1 !important;
}


/*
   LIVE DJ hierarchy:
   small red LIVE DJ label on top,
   larger white DJ name underneath.
*/

.tttrn-source-row.is-live-dj {
    align-items: center;
}


.tttrn-source-row.is-live-dj
#tttrnSourceSub {
    color: var(--red) !important;

    font-size: 8px !important;
    font-weight: 900 !important;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.tttrn-source-row.is-live-dj
#tttrnSourceName {
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 900 !important;

    line-height: 1.15 !important;
}


/* ==========================================================
   TTTRN DJ IDENTITY BLOCK — LARGER + BOTTOM ALIGNED
========================================================== */

/*
   Give the whole source identity block more presence.
   Align it toward the bottom of the track-info area
   so the DJ avatar visually lines up with the bottom
   of the album artwork.
*/
.tttrn-source-row {
    position: relative !important;

    min-height: 48px !important;

    margin-top: 14px !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;
}


/* Larger circular DJ / AutoMix image */

.tttrn-source-avatar {
    width: 46px !important;
    height: 46px !important;

    min-width: 46px !important;
    min-height: 46px !important;

    flex: 0 0 46px !important;

    display: flex !important;

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

    overflow: hidden !important;

    border-radius: 50% !important;

    padding: 0 !important;
}


/*
   Force the uploaded image to always sit
   perfectly centered in the circle.
*/
.tttrn-source-avatar img {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    object-position: center center !important;

    border-radius: 50% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}


/*
   Text block gets more room and stays
   vertically centered beside the image.
*/
.tttrn-source-row > div:last-child {
    min-height: 46px;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: flex-start !important;
}


/* LIVE DJ label */

.tttrn-source-row.is-live-dj
#tttrnSourceSub {
    margin: 0 0 4px 0 !important;

    color: var(--red) !important;

    font-size: 9px !important;

    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: .14em !important;
}


/* DJ name */

.tttrn-source-row.is-live-dj
#tttrnSourceName {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 14px !important;

    font-weight: 900 !important;

    line-height: 1.05 !important;
}


/*
   AutoMix keeps the same larger proportions,
   but uses normal hierarchy.
*/
.tttrn-source-row:not(.is-live-dj)
#tttrnSourceName {
    margin: 0 0 3px 0 !important;

    font-size: 13px !important;

    font-weight: 900 !important;
}

.tttrn-source-row:not(.is-live-dj)
#tttrnSourceSub {
    margin: 0 !important;

    font-size: 9px !important;
}


/*
   Anchor the track-info content so the source block
   finishes close to the bottom edge of the artwork.
*/
.tttrn-player-info {
    height: 132px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: flex-start !important;
}

.tttrn-source-row {
    margin-top: auto !important;
}


/* ==========================================================
   TTTRN MOBILE TOP SECTION
   Header + Hero + Live Player
========================================================== */

@media (max-width: 720px) {

    :root {
        --page: calc(100% - 24px);
    }


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

    .site-header {
        width: var(--page);

        min-height: 82px;

        display: grid !important;

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

        gap: 10px;

        padding:
            10px
            0;

        align-items: center;
    }


    .desktop-nav {
        display: none !important;
    }


    .brand {
        min-width: 0;

        gap: 10px;
    }


    .brand-mark {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px;

        border-radius: 13px;
    }


    .brand-copy {
        min-width: 0;
    }


    .brand-copy strong {
        display: block;

        overflow: hidden;

        font-size: 11px !important;

        letter-spacing: .08em;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .brand-copy span {
        display: block !important;

        margin-top: 2px;

        font-size: 9px !important;
    }


    .listen-live-button {
        min-height: 42px !important;

        padding:
            0
            13px !important;

        border-radius: 10px;

        font-size: 10px !important;

        white-space: nowrap;
    }


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

    .hero {
        width: var(--page) !important;

        min-height: 700px !important;

        margin:
            0
            auto
            20px !important;

        border-radius:
            0
            0
            16px
            16px !important;

        overflow: hidden !important;
    }


    /*
       Text gets its own centered upper zone.
    */
    .hero-content {
        position: relative !important;

        z-index: 10 !important;

        width: 100% !important;
        max-width: none !important;

        padding:
            48px
            18px
            385px !important;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .eyebrow {
        font-size: 10px !important;
    }


    .hero h1 {
        margin:
            14px
            0
            6px !important;

        font-size:
            clamp(
                48px,
                15vw,
                66px
            ) !important;

        line-height: .90 !important;

        text-align: center;
    }


    .hero h1 span {
        display: block;
    }


    .hero h2 {
        margin:
            12px
            0
            15px !important;

        font-size: 22px !important;

        text-align: center;
    }


    .hero p {
        max-width: 390px;

        margin:
            0
            auto !important;

        font-size: 13px !important;

        line-height: 1.65;

        text-align: center;
    }


    .hero-buttons {
        width: 100%;

        margin-top: 23px !important;

        display: flex;

        justify-content: center;

        gap: 10px;
    }


    .primary-button,
    .secondary-button {
        min-height: 44px !important;

        padding:
            0
            16px !important;

        font-size: 10px !important;
    }


    .hero-socials {
        margin-top: 24px !important;

        justify-content: center;
    }


    /*
       Image lives underneath the text section.
    */
    .hero-visual {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;

        border-radius:
            0
            0
            16px
            16px !important;
    }


    .hero-main-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        /*
           Keep the person visible in mobile crop.
        */
        object-position:
            72%
            bottom !important;
    }


    /*
       Vertical fade protects text while allowing
       the image to become prominent lower down.
    */
    .hero-image-fade {
        background:
            linear-gradient(
                180deg,

                #02050a 0%,
                rgba(2,5,10,.99) 26%,
                rgba(2,5,10,.96) 39%,
                rgba(2,5,10,.78) 50%,
                rgba(2,5,10,.40) 61%,
                rgba(2,5,10,.10) 72%,
                rgba(2,5,10,0) 84%
            ) !important;
    }


    /* ======================================================
       PLAYER SHELL
    ====================================================== */

    .live-player-card {
        width: var(--page) !important;

        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        margin:
            0
            auto !important;

        padding:
            22px
            18px !important;

        overflow: hidden !important;

        border-radius: 16px !important;
    }


    .tttrn-player {
        width: 100%;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 0 !important;
    }


    /* ======================================================
       ALBUM ART
    ====================================================== */

    .tttrn-player-art {
        width: 150px !important;
        height: 150px !important;

        margin:
            0
            auto
            18px !important;

        flex: none !important;

        border-radius: 12px !important;
    }


    .tttrn-player-art img {
        width: 150px !important;
        height: 150px !important;

        object-fit: cover !important;

        border-radius: 12px !important;
    }


    /* ======================================================
       NOW PLAYING INFO
    ====================================================== */

    .tttrn-player-info {
        width: 100% !important;
        height: auto !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        text-align: center !important;
    }


    .tttrn-now-label {
        margin-bottom: 7px !important;

        text-align: center;
    }


    .tttrn-track-title {
        width: 100%;

        overflow: visible !important;

        font-size: 21px !important;

        line-height: 1.12 !important;

        text-align: center !important;

        white-space: normal !important;

        text-overflow: clip !important;
    }


    .tttrn-track-artist {
        width: 100%;

        margin-top: 6px !important;

        overflow: visible !important;

        font-size: 11px !important;

        line-height: 1.4;

        text-align: center !important;

        white-space: normal !important;

        text-overflow: clip !important;
    }


    /* ======================================================
       DJ / AUTOMIX IDENTITY
    ====================================================== */

    .tttrn-source-row {
        width: auto !important;

        min-height: 52px !important;

        margin:
            16px
            auto
            0 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 12px !important;
    }


    .tttrn-source-avatar {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;

        flex:
            0
            0
            48px !important;
    }


    .tttrn-source-avatar img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    .tttrn-source-row > div:last-child {
        min-height: 48px !important;

        align-items: flex-start !important;

        justify-content: center !important;

        text-align: left !important;
    }


    /* ======================================================
       AUDIO METER
    ====================================================== */

    .tttrn-player-center {
        position: relative !important;

        width: 100% !important;
        height: auto !important;

        margin-top: 22px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        overflow: visible !important;
    }


    .tttrn-meter {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 420px !important;

        height: 58px !important;

        margin:
            0
            auto
            14px !important;

        transform: none !important;

        display: flex !important;

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

        overflow: hidden !important;
    }


    .tttrn-meter span {
        flex:
            1
            1
            0 !important;

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

        gap: 0 !important;
    }


    /* ======================================================
       PLAY / VOTE / LIVE CONTROLS
    ====================================================== */

    .tttrn-control-row {
        width: 100% !important;

        margin: 0 !important;

        display: flex !important;

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

        gap: 24px !important;
    }


    .tttrn-control-side {
        width: 62px !important;
        min-width: 62px !important;

        display: flex;

        justify-content: center;
    }


    .tttrn-main-play {
        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;
        min-height: 56px !important;

        flex:
            0
            0
            56px !important;
    }


    .tttrn-live-fallback {
        font-size: 9px !important;
    }


    /* ======================================================
       LISTENERS / BITRATE / VOLUME
    ====================================================== */

    .tttrn-player-right {
        width: 100% !important;
        height: auto !important;

        margin-top: 22px !important;

        padding:
            18px
            0
            0 !important;

        display: grid !important;

        grid-template-columns:
            1fr
            auto !important;

        gap:
            14px
            15px !important;

        align-items: center !important;

        border-left: 0 !important;

        border-top:
            1px solid
            rgba(255,255,255,.08) !important;
    }


    .tttrn-listeners {
        min-height: 34px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 8px;
    }


    .tttrn-quality {
        justify-self: end;

        margin: 0 !important;
    }


    .tttrn-volume-row {
        grid-column:
            1 / -1;

        width: 100% !important;

        margin:
            2px
            0
            0 !important;

        display: grid !important;

        grid-template-columns:
            24px
            1fr !important;

        align-items: center;

        gap: 10px;
    }


    #tttrnVolume {
        width: 100% !important;
    }


    /* ======================================================
       SAFETY — NO HORIZONTAL OVERFLOW
    ====================================================== */

    .station-site,
    main,
    .hero,
    .live-player-card,
    .tttrn-player,
    .tttrn-player-info,
    .tttrn-player-center,
    .tttrn-player-right {
        max-width: 100% !important;
    }

}



/* ==========================================================
   MOBILE PLAY BUTTON TOUCH SAFETY
========================================================== */

@media (max-width: 720px) {

    #tttrnMainPlay {
        position: relative !important;

        z-index: 50 !important;

        pointer-events: auto !important;

        touch-action: manipulation !important;

        -webkit-tap-highlight-color:
            transparent;
    }

    .tttrn-control-row {
        position: relative !important;

        z-index: 40 !important;
    }

    .tttrn-meter {
        z-index: 1 !important;

        pointer-events: none !important;
    }

}



/* ==========================================================
   TTTRN EVERESTCAST ENGINE — MOBILE SAFE HIDDEN STATE
   Keep a real render box; hide visually only.
========================================================== */

#tttrnEngine {
    position: fixed !important;

    left: 0 !important;
    top: 0 !important;

    width: 320px !important;
    height: 240px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    z-index: -9999 !important;

    clip-path: inset(100%) !important;
}


/* ==========================================================
   TTTRN MOBILE VOLUME
   Use device hardware volume controls on mobile.
========================================================== */

@media (max-width: 720px) {

    .tttrn-volume-row {
        display: none !important;
    }

}

/* ============================================================
   TTTRN FEATURED SHOW — HERO IMAGE TREATMENT
============================================================ */

.featured-show-card {
    position: relative;

    display: block;

    min-height: 315px;

    overflow: hidden;

    isolation: isolate;
}

.featured-show-card > div:first-child {
    position: relative;

    z-index: 3;

    width: 56%;

    max-width: 380px;
}

.featured-show-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(6, 11, 18, 1) 0%,
            rgba(6, 11, 18, .98) 30%,
            rgba(6, 11, 18, .88) 48%,
            rgba(6, 11, 18, .48) 68%,
            rgba(6, 11, 18, .12) 100%
        );
}

.featured-person {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    pointer-events: none;
}

.featured-person-circle {
    width: 100%;
    height: 100%;

    display: block;

    background: transparent;

    border-radius: 0;
}

#featuredShowImage {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;

    object-position: 72% center;

    border-radius: 0 !important;

    margin: 0 !important;
}

#featuredShowInitials {
    display: none !important;
}


/* =========================================================
   TTTRN PREMIUM REQUEST CARD
   ========================================================= */

.right-stack {
    display: block;
    height: 100%;
}

.request-card {
    min-height: 100%;
    padding: 24px;
    border: 1px solid var(--theme-request-card-border, #2a1114);
    border-radius: 9px;
    background: var(--theme-request-card-bg, #0b0b0b);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.request-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.request-card-heading > div {
    min-width: 0;
}

.request-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 8px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--theme-secondary-accent, #a91620),
            var(--theme-request-button-bg, #fe0000)
        );
    font-size: 18px;
    box-shadow:
        0 8px 20px rgba(220, 28, 45, .18);
}

.request-card h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.request-card-status {
    min-height: 18px;
    color: var(--gray);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-align: right;
}

.request-search-label,
.request-submit-state label {
    display: block;
    margin-bottom: 7px;
    color: var(--gray);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .12em;
}

.request-search-input,
.request-form-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    color: var(--theme-heading, var(--white));
    background: var(--theme-request-card-bg, var(--panel));
    font-family: inherit;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.request-search-input {
    min-height: 44px;
    padding: 0 14px;
    margin-bottom: 16px;
    font-size: 12px;
}

.request-form-input {
    padding: 11px 12px;
    margin-bottom: 14px;
    font-size: 12px;
}

textarea.request-form-input {
    resize: vertical;
    min-height: 86px;
}

.request-search-input:focus,
.request-form-input:focus {
    border-color: var(--theme-primary-accent, var(--red));
    background: var(--theme-request-card-bg, var(--panel));
    box-shadow:
        0 0 0 3px rgba(239, 44, 61, .08);
}

.request-search-input::placeholder,
.request-form-input::placeholder {
    color: #66717f;
}

.request-results {
    display: grid;
    gap: 9px;
    min-height: 210px;
}

.request-loading,
.request-empty,
.request-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    padding: 20px;
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 8px;
    color: var(--gray);
    font-size: 11px;
    text-align: center;
}

.request-result {
    display: grid;
    grid-template-columns: 50px minmax(0,1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 62px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.request-result:hover {
    transform: translateY(-1px);
    border-color: rgba(239,44,61,.28);
    background: rgba(255,255,255,.04);
}

.request-result-artwork {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    background: #111923;
}

.request-result-copy {
    min-width: 0;
}

.request-result-title,
.request-result-artist {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-result-title {
    margin-bottom: 4px;
    color: var(--white);
    font-size: 12px;
    font-weight: 900;
}

.request-result-artist {
    color: var(--theme-heading, var(--white));
    font-size: 10px;
}

.request-result-button {
    min-width: 68px;
    min-height: 32px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #fe0000,
            #fe0000
        );
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
}

.request-pagination {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.request-page-button,
.request-back-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--gray-light);
    background: #0b121c;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    cursor: pointer;
}

.request-page-button:disabled {
    opacity: .35;
    cursor: default;
}

.request-submit-state {
    animation: tttrnRequestFade .18s ease;
}

.request-back-button {
    margin-bottom: 16px;
}

.request-selected-track {
    display: grid;
    grid-template-columns: 60px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
}

.request-selected-track img {
    width: 60px;
    height: 60px;
    border-radius: 7px;
    object-fit: cover;
    background: #111923;
}

.request-selected-track span {
    display: block;
    margin-bottom: 5px;
    color: var(--red);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.request-selected-track strong {
    display: block;
    margin-bottom: 4px;
    color: var(--white);
    font-size: 13px;
}

.request-selected-track small {
    display: block;
    color: var(--gray);
    font-size: 10px;
}

.request-character-count {
    margin: -5px 0 14px;
    color: var(--gray);
    font-size: 9px;
    text-align: right;
}

.request-send-button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            #fe0000,
            #fe0000
        );
    font-weight: 900;
    letter-spacing: .05em;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(220,28,45,.16);
}

.community-card {
    display: none !important;
}

@keyframes tttrnRequestFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   TTTRN HOSTS & DJS
   ========================================================= */

.host-photo {
    overflow: hidden;
}

.host-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.host-copy h3 {
    margin-bottom: 0;
}

.hosts-loading {
    grid-column: 1 / -1;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--gray);
    text-align: center;
    font-size: 12px;
}

/* =========================================================
   HOSTS & DJS — PROFILE IMAGE CLEANUP
   ========================================================= */

.host-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 138px;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: #09111b;
}

.host-photo {
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    min-width: 104px;
    border-radius: 10px !important;
    overflow: hidden;
    background: #101821 !important;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: none !important;
    color: #fff;
}

.host-photo::before,
.host-photo::after {
    display: none !important;
    content: none !important;
}

.host-photo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0 !important;
    object-fit: cover;
    object-position: center;
    background: transparent;
}

.host-copy {
    display: flex;
    align-items: center;
    min-width: 0;
}

.host-copy h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
}

@media (max-width: 700px) {
    .host-photo {
        flex-basis: 88px;
        width: 88px;
        height: 88px;
        min-width: 88px;
    }
}

.host-show {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cyan);
}

/* =========================================================
   TTTRN HOSTS & DJS CARD REDESIGN
   ========================================================= */

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


.host-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 320px;
    padding: 22px;
    gap: 14px;
}


.host-photo {
    width: 120px;
    height: 120px;
    border-radius: 14px;
    flex-shrink: 0;
}


.host-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.host-copy {
    width: 100%;
}


.host-copy h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}


.host-show {
    margin-top: 8px;
    color: #ff334d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}


.host-bio {
    margin-top: 12px;
    color: #9aa4b2;
    font-size: 13px;
    line-height: 1.6;
}


@media (max-width: 900px) {

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

}


/* =========================================================
   PREMIUM HOST PROFILE CARDS V1
   ========================================================= */

.host-card {
    justify-content: flex-start;
    min-height: 360px;
    background: #080d16;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 28px 22px;
    transition: transform .2s ease, border-color .2s ease;
}


.host-card:hover {
    transform: translateY(-4px);
    border-color: rgba(12,192,223,.35);
}


.host-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(12,192,223,.35);
    margin-bottom: 18px;
}


.host-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.host-copy h3 {
    font-size: 20px;
    margin: 0;
    letter-spacing: .02em;
}


.host-show {
    margin-top: 8px;
    color: #0cc0df;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}


.host-bio {
    margin-top: 16px;
    max-width: 260px;
    color: #a7b0bd;
    font-size: 13px;
    line-height: 1.7;
}


@media (max-width: 900px) {

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

}


/* =========================================================
   TTTRN HOST FEATURED CARDS V1
   ========================================================= */

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


.host-card {

    position:relative;

    overflow:hidden;

    min-height:260px;

    padding:28px 24px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    background:
        linear-gradient(
            180deg,
            rgba(12,192,223,.08),
            rgba(5,8,15,.98)
        );

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

    border-radius:18px;

    transition:
        transform .25s ease,
        border-color .25s ease;

}


.host-card:hover {

    transform:translateY(-6px);

    border-color:
        rgba(12,192,223,.65);

}


.host-card::before {

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0cc0df,
            transparent
        );

}


.host-photo {

    position:absolute;

    top:22px;
    left:24px;

    width:96px;
    height:96px;

    border-radius:18px;

    overflow:hidden;

    border:
        2px solid rgba(12,192,223,.45);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45);

}


.host-photo img {

    width:100%;
    height:100%;

    object-fit:cover;

}


.host-copy {

    margin-top:110px;

}


.host-copy h3 {

    margin:0;

    font-size:24px;

    font-weight:900;

    color:#ffffff;

}


.host-show {

    margin-top:8px;

    color:#0cc0df;

    font-size:11px;

    font-weight:800;

    letter-spacing:.18em;

    text-transform:uppercase;

}


.host-bio {

    margin-top:14px;

    color:#aab4c3;

    font-size:13px;

    line-height:1.6;

    max-width:260px;

}


@media(max-width:900px){

    .hosts-grid {

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    .hosts-grid {

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    .hosts-grid{

        grid-template-columns:1fr;

    }

}


/* =========================================================
   TTTRN HOST OVERLAY CARDS V1
   ========================================================= */

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


.host-card {

    position:relative;
    overflow:hidden;

    min-height:280px;

    border-radius:14px;

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

    background:#080d16;

}


.host-photo {

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    margin:0;

    border:0;

    border-radius:0;

}


.host-photo::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 20%,
            rgba(0,0,0,.85) 100%
        );

}


.host-photo img {

    width:100%;
    height:100%;

    object-fit:cover;

}


.host-copy {

    position:absolute;

    left:24px;
    right:24px;
    bottom:22px;

    z-index:2;

}


.host-copy h3 {

    margin:0;

    font-size:26px;

    font-weight:900;

    color:#fff;

}


.host-show {

    margin-top:6px;

    color:#0cc0df;

    font-size:11px;

    font-weight:900;

    letter-spacing:.15em;

}


.host-bio {

    margin-top:10px;

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

    font-size:13px;

    line-height:1.5;

}


@media(max-width:900px){

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

}


/* =========================================================
   TTTRN HOSTS & DJS — WEBSITE BUILDER PROFILE CARDS
   ========================================================= */

.hosts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.host-card {
    min-height: 390px;
    padding: 0;
    display: block;
    text-align: left;
    isolation: isolate;
}

.host-card::before {
    display: none;
}

.host-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(6, 11, 18, .10) 0%,
            rgba(6, 11, 18, .30) 30%,
            rgba(6, 11, 18, .88) 55%,
            rgba(6, 11, 18, .98) 72%,
            rgba(6, 11, 18, 1) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 5, 10, .14) 0%,
            rgba(2, 5, 10, 0) 24%,
            rgba(2, 5, 10, 0) 72%,
            rgba(2, 5, 10, .28) 100%
        );
}

.host-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0 !important;
}

.host-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform, object-position;
}

.host-copy {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 2;
    width: 62%;
    max-width: 260px;
    margin: 0;
    padding: 26px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.host-kicker {
    display: block;
    margin: 0 0 8px;
    line-height: 1.2;
}

.host-copy h3 {
    width: 100%;
    margin: 0;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.1;
    overflow-wrap: break-word;
    word-break: normal;
}

.host-show {
    width: 100%;
    margin-top: 8px;
    line-height: 1.35;
    overflow-wrap: break-word;
}

.host-bio {
    margin-top: 12px;
    max-width: 100%;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.55;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

@media (max-width: 900px) {
    .hosts-grid {
        grid-template-columns: 1fr;
    }

    .host-card {
        min-height: 360px;
    }

    .host-card::after {
        background:
            linear-gradient(
                90deg,
                rgba(6, 11, 18, .08) 0%,
                rgba(6, 11, 18, .32) 30%,
                rgba(6, 11, 18, .90) 58%,
                rgba(6, 11, 18, 1) 100%
            ),
            linear-gradient(
                180deg,
                rgba(2, 5, 10, .14) 0%,
                rgba(2, 5, 10, 0) 72%,
                rgba(2, 5, 10, .30) 100%
            );
    }

    .host-copy {
        top: 0;
        left: auto;
        width: 68%;
        max-width: 440px;
        padding: 24px 20px;
        justify-content: center;
    }

    .host-copy h3 {
        font-size: 26px;
    }
}

/* =========================================================
   TTTRN STATION BRAND APPEARANCE
   Semantic theme roles; layout and typography remain owned
   by the existing public-site rules above.
   ========================================================= */

:root {
    --panel: var(--theme-card-bg, #090909);
    --border: var(--theme-border, #2a1114);
    --gray-light: var(--theme-body, #d1caca);
}

body {
    color: var(--theme-heading, var(--white));
    background: var(--theme-body-background, var(--theme-page-background, linear-gradient(90deg, #000000 0%, #ff0f0f 100%)));
}

.site-header,
.site-footer,
.copyright {
    border-color: var(--theme-border, var(--border));
    background-color: var(--theme-card-bg, var(--panel));
}

.schedule-card,
.community-card,
.host-card {
    border-color: var(--theme-general-card-border, var(--border));
}

.schedule-card,
.community-card,
.host-card {
    background-color: var(--theme-general-card-bg, var(--panel));
}

h1, h2, h3, h4,
.brand-copy strong,
.footer-brand strong {
    color: var(--theme-heading, var(--white));
}

.brand-copy span,
.footer-column a,
.request-card-status,
.request-search-label,
.request-submit-state label {
    color: var(--theme-muted, var(--gray));
}

.eyebrow,
.podcast-kicker,
.tttrn-now-label,
.request-selected-track span {
    color: var(--theme-primary-accent, var(--red));
}

.desktop-nav a.active::after {
    background: var(--theme-nav-active, var(--red));
}

#tttrnHeroHeadlineText { color: var(--theme-hero-headline, var(--red)); }
#tttrnHeroAccent { color: var(--theme-hero-accent, var(--red)); }
#tttrnHeroSecondary { color: var(--theme-hero-secondary, var(--white)); }
#tttrnHeroDescription { color: var(--theme-hero-body, var(--gray-light)); }
.hero-image-fade { background: var(--theme-hero-overlay, linear-gradient(90deg, #000000 0%, rgba(0,0,0,.99) 31%, rgba(0,0,0,.73) 49%, rgba(0,0,0,.30) 61%, transparent 80%)) !important; }

@media (max-width: 720px) {
    .hero-image-fade { background: var(--theme-hero-overlay-mobile, linear-gradient(90deg, #000000 0%, rgba(0,0,0,.96) 39%, rgba(0,0,0,.40) 61%, transparent 84%)) !important; }
}

.listen-live-button,
.primary-button,
.podcast-play-button {
    color: var(--theme-primary-button-text, var(--white));
    background: var(--theme-primary-button-bg, var(--red));
}

/* Header CTA shares the tenant brand-mark surface and station glow. */
.listen-live-button {
    color: var(--theme-primary-button-text, #ffffff);
    background: var(--theme-brand-mark-bg, #000000);
}

.listen-live-button:hover {
    filter: brightness(1.14);
}

.listen-live-button:focus-visible {
    outline: 2px solid var(--theme-primary-accent, #fe0000);
    outline-offset: 3px;
}

.secondary-button {
    color: var(--theme-secondary-button-text, var(--white));
    border-color: var(--theme-secondary-button-border, #2a1114);
    background: var(--theme-secondary-button-bg, #0b0b0b);
}

.small-outline-button {
    color: var(--theme-muted-button-text, #cbd1da);
    border-color: var(--theme-muted-button-border, #2a1114);
    background: var(--theme-muted-button-bg, #0b0b0b);
}

.featured-show-card::after { background: var(--theme-featured-overlay, linear-gradient(90deg, #000000 0%, rgba(0,0,0,.88) 48%, rgba(0,0,0,.12) 100%)); }
.host-card::after { background: var(--theme-hosts-overlay, linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.88) 55%, #000000 100%)); }

.podcast-card {
    border-color: var(--theme-podcast-border, var(--border));
    background: var(--theme-podcast-bg, var(--panel));
}

.live-player-card {
    border-color: var(--theme-player-border, var(--border-strong));
    background: var(
        --theme-player-background,
        linear-gradient(135deg, #080808 0%, #240000 100%)
    );
}

.tttrn-main-play,
#sc-player #play-button-container button {
    color: var(--theme-player-play-text, #fff) !important;
    background: var(--theme-player-play-bg, var(--red)) !important;
}

.tttrn-player .tttrn-now-label,
.tttrn-quality {
    color: var(--theme-player-accent, var(--red));
}

.tttrn-meter span {
    background: var(--theme-player-progress, #98141e) !important;
}

#tttrnVolume {
    accent-color: var(--theme-player-volume, var(--red));
}

#tttrnVolume::-webkit-slider-thumb,
#tttrnVolume::-moz-range-thumb {
    background: var(--theme-player-volume, var(--red));
}

.request-result-button,
.request-send-button {
    color: var(--theme-request-button-text, #fff);
    background: linear-gradient(135deg, var(--theme-secondary-accent, #a91620), var(--theme-request-button-bg, #fe0000));
}

.request-page-button,
.request-back-button {
    color: var(--theme-request-nav-text, var(--gray-light));
    border-color: var(--theme-request-nav-border, var(--border));
    background: var(--theme-request-nav-bg, #0b0b0b);
}

.brand-mark {
    box-shadow: var(--theme-brand-glow, 0 0 28px rgba(254,0,0,.28));
}

/* Shared station glow: one Brand Appearance color/intensity source. */
.listen-live-button,
.tttrn-main-play,
#sc-player #play-button-container button {
    box-shadow: var(--theme-brand-glow, 0 0 28px rgba(254,0,0,.28));
}

/* Existing semantic accents own component color; defaults remain TTTRN red. */
.card-heading a,
.card-heading a:hover,
.card-heading a:focus-visible,
.benefit-icon {
    color: var(--theme-primary-accent, var(--red));
}

.request-icon {
    background: linear-gradient(
        135deg,
        var(--theme-secondary-accent, #a91620),
        var(--theme-request-button-bg, #fe0000)
    );
}

/* TTTRN Brand Appearance: general card surfaces */
.recent-card,
.benefits-strip {
    background: var(--theme-general-card-bg, var(--panel)) !important;
    border-color: var(--theme-general-card-border, var(--border)) !important;
}

.benefits-strip article {
    border-color: var(--theme-general-card-border, var(--border)) !important;
}

/* Brand Appearance: fully control Today's Lineup background */
.schedule-card {
    background: var(--theme-general-card-bg, var(--panel)) !important;
}

/* Brand Appearance: Featured Show uses General Card Border */
.featured-show-card {
    border-color: var(--theme-general-card-border, var(--border)) !important;
}

/* TTTRN polish: header/footer live directly on page background */
.site-header,
.site-footer,
.copyright {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove separate shell lines so these areas do not read as bars */
.site-header {
    border-bottom-color: transparent !important;
}

.site-footer,
.copyright {
    border-top-color: transparent !important;
}

/* TTTRN polish: hero artwork card gets matching top + bottom rounding */
.hero {
    overflow: hidden;
    border-radius: 12px;
}

.hero-visual,
.hero-main-image,
.hero-image-fade {
    border-radius: inherit;
}


/* TTTRN polish: subtle footer separation without a footer bar */
.site-footer {
    border-top: 1px solid var(--theme-border, var(--border)) !important;
}

.copyright {
    border-top-color: transparent !important;
}

/* TTTRN polish: give hero text/actions breathing room from card edge */
.hero-content {
    padding-left: 32px;
    padding-right: 24px;
}


/* =========================================================
   TTTRN FINAL PHONE POLISH
   Consolidated overrides for 375-430px phone layouts.
   ========================================================= */
@media (max-width: 720px) {

    :root {
        --page: calc(100% - 24px);
    }

    html,
    body,
    .station-site {
        max-width: 100%;
        overflow-x: clip;
    }

    .site-header {
        min-height: 72px;
        padding: 8px 0;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .brand {
        min-width: 0;
        gap: 9px;
    }

    .brand-mark {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        border-radius: 12px;
    }

    .brand-copy strong {
        max-width: 100%;
        font-size: 11px !important;
        line-height: 1.2;
    }

    .brand-copy span {
        display: none !important;
    }

    .listen-live-button {
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: 9px !important;
    }

    .hero {
        min-height: 620px !important;
        margin: 0 auto 18px !important;
        border-radius: 16px !important;
    }

    .hero-content {
        min-height: 620px;
        box-sizing: border-box;
        padding: 34px 20px 235px !important;
    }

    .hero h1 {
        margin: 12px 0 6px !important;
        font-size: clamp(40px, 12.5vw, 52px) !important;
        line-height: .94 !important;
    }

    .hero h2 {
        margin: 10px 0 12px !important;
        font-size: 20px !important;
        line-height: 1.18;
    }

    .hero p {
        max-width: 320px;
        font-size: 13px !important;
        line-height: 1.55;
    }

    .hero-buttons {
        max-width: 310px;
        margin-top: 18px !important;
        gap: 8px;
    }

    .hero-buttons .primary-button,
    .hero-buttons .secondary-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px !important;
        padding: 0 12px !important;
    }

    .hero-socials {
        max-width: 100%;
        margin-top: 18px !important;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .hero-visual,
    .hero-main-image,
    .hero-image-fade {
        border-radius: inherit !important;
    }

    .live-player-card {
        padding: 18px 16px !important;
        border-radius: 16px !important;
    }

    .tttrn-player-art,
    .tttrn-player-art img {
        width: 128px !important;
        height: 128px !important;
    }

    .tttrn-player-art {
        margin-bottom: 15px !important;
    }

    .tttrn-track-title {
        font-size: 19px !important;
        overflow-wrap: anywhere;
    }

    .tttrn-source-row {
        margin-top: 13px !important;
    }

    .tttrn-player-center {
        margin-top: 18px !important;
    }

    .tttrn-meter {
        height: 46px !important;
        margin-bottom: 12px !important;
    }

    .tttrn-control-row {
        gap: 18px !important;
    }

    .tttrn-player-right {
        margin-top: 18px !important;
        padding-top: 15px !important;
    }

    .recent-section {
        padding-top: 28px;
    }

    .recent-grid {
        gap: 10px;
    }

    .recent-card {
        min-width: 0;
        border-radius: 10px;
    }

    .recent-art {
        aspect-ratio: 1;
    }

    .recent-info {
        min-height: 78px;
        box-sizing: border-box;
        padding: 10px;
    }

    .recent-title {
        display: -webkit-box;
        min-height: 31px;
        white-space: normal;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .recent-meta {
        font-size: 10px;
        overflow-wrap: anywhere;
    }

    .programming-grid {
        padding-top: 22px;
        gap: 14px;
    }

    .featured-show-card,
    .schedule-card,
    .request-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 14px;
    }

    .featured-show-card {
        min-height: 420px;
    }

    .featured-show-card > div:first-child {
        width: 68%;
        max-width: 250px;
    }

    .featured-show-card h2 {
        font-size: clamp(27px, 8vw, 32px);
        overflow-wrap: anywhere;
    }

    .featured-show-card p {
        margin: 14px 0 16px;
        font-size: 13px;
        line-height: 1.5;
    }

    .card-heading {
        gap: 10px;
    }

    .card-heading h2 {
        min-width: 0;
        font-size: 18px;
    }

    .card-heading a {
        flex: 0 0 auto;
        text-align: right;
        white-space: normal;
    }

    .schedule-row {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 8px;
        font-size: 10px;
    }

    .schedule-row strong,
    .schedule-row em {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .request-card-heading {
        gap: 10px;
    }

    .request-search-input,
    .request-form-input,
    .request-results {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .request-result-button {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .request-pagination {
        gap: 8px;
    }

    .request-page-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 42px;
        padding: 0 8px;
    }

    .request-back-button,
    .request-send-button {
        min-height: 44px;
    }

    .hosts-section,
    .podcasts-section {
        padding-top: 28px;
        padding-bottom: 34px;
    }

    .hosts-grid,
    .podcasts-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
    }

    .host-card {
        min-height: 310px !important;
        border-radius: 16px;
    }

    .host-copy {
        width: 66%;
        padding: 20px 16px;
    }

    .host-copy h3 {
        font-size: clamp(21px, 6.5vw, 25px);
    }

    .host-bio {
        font-size: 12px;
        line-height: 1.45;
        -webkit-line-clamp: 6;
    }

    .podcast-card {
        min-width: 0;
        border-radius: 14px;
    }

    .podcast-content,
    .podcast-content h3,
    .podcast-content p {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .podcast-play-button {
        width: 100%;
        min-height: 42px;
    }

    .benefits-strip {
        margin-bottom: 32px;
        border-radius: 14px;
    }

    .benefits-strip article {
        min-height: 88px;
        padding: 16px;
        align-items: center;
    }

    .site-footer,
    .site-footer.contact-unavailable {
        padding: 30px 0 24px;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .footer-brand,
    .footer-column {
        min-width: 0;
    }

    .footer-brand p,
    .footer-column p {
        max-width: 100%;
    }

    .footer-socials {
        flex-wrap: wrap;
    }

    .footer-socials a {
        width: 36px;
        height: 36px;
    }

    .copyright {
        min-height: 64px;
        padding: 12px 0;
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 6px 16px;
    }
}

@media (max-width: 380px) {
    .hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-buttons {
        max-width: 100%;
    }

    .site-header {
        gap: 6px;
    }

    .listen-live-button {
        padding: 0 10px !important;
    }
}

/* =========================================================
   TTTRN HOST CARD TEXT FLOW SAFETY
   Keep the existing card treatment while ensuring each text
   role owns a separate line in the constrained copy column.
   ========================================================= */

.host-copy {
    min-width: 0;
}

.host-kicker,
.host-copy h3,
.host-show {
    position: static;
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
}

.host-kicker {
    margin: 0 0 8px;
}

.host-copy h3 {
    margin: 0;
    line-height: 1.12;
}

.host-show {
    margin: 8px 0 0;
    line-height: 1.35;
}

.host-bio {
    min-height: 0;
    flex: 0 1 auto;
}

/* ==========================================================
   TTTRN SECTION-SPECIFIC BRAND APPEARANCE
   New variables are optional. Every selector retains its exact
   legacy value when the corresponding variable is absent.
========================================================== */

.brand-copy strong {
    color: var(--theme-header-text, var(--theme-heading, var(--white)));
}

.brand-copy span {
    color: var(--theme-header-text, var(--theme-muted, var(--gray)));
}

.desktop-nav a {
    color: var(--theme-header-text, var(--gray-light));
}

#tttrnBrandMark {
    background: var(--theme-header-brand-mark-bg, var(--theme-brand-mark-bg, #000000));
    box-shadow: var(--theme-header-brand-glow, var(--theme-brand-glow, 0 0 28px rgba(254,0,0,.28)));
}

.listen-live-button {
    color: var(--theme-header-listen-live-text, var(--theme-primary-button-text, #ffffff));
    background: var(--theme-header-listen-live-bg, var(--theme-brand-mark-bg, #000000));
    box-shadow: var(--theme-header-brand-glow, var(--theme-brand-glow, 0 0 28px rgba(254,0,0,.28)));
}

.tttrn-track-title,
.tttrn-source-row #tttrnSourceName,
.tttrn-source-row.is-live-dj #tttrnSourceName,
.tttrn-listeners strong {
    color: var(--theme-player-primary-text, #ffffff) !important;
}

.tttrn-track-artist {
    color: var(--theme-player-secondary-text, #aeb6c2);
}

.tttrn-source-row #tttrnSourceSub {
    color: var(--theme-player-secondary-text, #727c89);
}

.tttrn-source-row.is-live-dj #tttrnSourceSub {
    color: var(--theme-player-secondary-text, var(--red)) !important;
}

.tttrn-listeners span {
    color: var(--theme-player-secondary-text, #87919e);
}

.tttrn-vote-button {
    color: var(--theme-player-icon-accent, #737c89) !important;
}

.tttrn-volume-icon {
    color: var(--theme-player-icon-accent, inherit);
}

.tttrn-listeners strong::before {
    background: var(--theme-player-accent, var(--red));
    box-shadow: var(--theme-player-small-glow, var(--theme-small-glow, 0 0 8px rgba(254,0,0,.28)));
}

.tttrn-main-play,
#sc-player #play-button-container button {
    box-shadow: var(--theme-player-brand-glow, var(--theme-brand-glow, 0 0 28px rgba(254,0,0,.28)));
}

#tttrnFooterBrandMark {
    box-shadow: var(--theme-footer-brand-glow, var(--theme-brand-glow, 0 0 28px rgba(254,0,0,.28)));
}

.footer-brand strong,
.footer-column h4 {
    color: var(--theme-footer-primary-text, var(--theme-heading, var(--white)));
}

.footer-column a {
    color: var(--theme-footer-primary-text, var(--theme-muted, var(--gray)));
}

.footer-socials a {
    color: var(--theme-footer-primary-text, var(--white));
}

.footer-column p {
    color: var(--theme-footer-secondary-text, var(--gray));
}

.copyright span {
    color: var(--theme-footer-primary-text, #656d7a);
}