* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --black: #000000;
            --white: #ffffff;
            --neon-green: #00ff41;
            --grey-light: #f5f5f5;
            --grey-dark: #333333;
        }

        body {
            font-family: Visuelt,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
            background-color: var(--white);
            color: var(--black);
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        /* Header */
        header {
            position: sticky;
            top: 0;
            background-color: var(--white);
            border-bottom: 2px solid var(--black);
            z-index: 1000;
            padding: 1.5rem 2rem;
        }

        .header-container {
            max-width: 1600px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Archivo', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-circle {
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            animation: rotate 20s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        nav ul {
            display: flex;
            gap: 2.5rem;
            list-style: none;
            align-items: center;
        }

        nav a {
            text-decoration: none;
            color: var(--black);
            font-weight: 500;
            font-size: 0.95rem;
            letter-spacing: 0.01em;
            transition: opacity 0.2s ease;
            position: relative;
        }

        nav a:hover {
            opacity: 0.6;
        }

        .icon-links {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .icon-btn {
            width: 28px;
            height: 28px;
            /* border: 2px solid var(--black);
            border-radius: 50%; */
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .icon-btn:hover {
         border: 1px solid var(--black);
            border-radius: 70%;

            background: var(--black);
        }

        /* Now Playing Bar — Live Radio */
        .now-playing {
            background-color: var(--black);
            color: var(--white);
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            gap: 1.25rem;
            border-bottom: 2px solid var(--black);
            overflow: hidden;
        }

        .play-button {
            width: 44px;
            height: 44px;
            background-color: var(--white);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s;
            flex-shrink: 0;
        }

        .play-button:hover {
            transform: scale(1.1);
        }

        .play-button.disabled {
            opacity: 0.3;
            cursor: default;
            pointer-events: none;
        }

        .play-icon {
            width: 0;
            height: 0;
            border-left: 11px solid var(--black);
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            margin-left: 3px;
            transition: all .15s;
        }

        .play-icon.playing {
            width: 14px;
            height: 14px;
            border: none;
            margin-left: 0;
            border-left: 4px solid var(--black);
            border-right: 4px solid var(--black);
            border-top: none;
            border-bottom: none;
        }

        /* Status pill */
        .np-status-pill {
            display: flex;
            align-items: center;
            gap: .4rem;
            padding: .3rem .8rem;
            border-radius: 50px;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .08em;
            flex-shrink: 0;
            border: 1.5px solid rgba(255,255,255,.2);
        }

        .np-status-pill.live {
            border-color: #ff3b3b;
            color: #ff3b3b;
        }

        .np-status-pill.rotation {
            border-color: var(--neon-green);
            color: var(--neon-green);
        }

        .np-status-pill.off-air {
            border-color: rgba(255,255,255,.15);
            color: rgba(255,255,255,.4);
        }

        .np-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,.2);
            flex-shrink: 0;
        }

        .np-dot.live {
            background: #ff3b3b;
            animation: np-pulse 1.5s ease-in-out infinite;
        }

        .np-dot.on {
            background: var(--neon-green);
        }

        @keyframes np-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .3; }
        }

        .track-info {
            display: flex;
            gap: 3rem;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
        }

        .track-title {
            font-weight: 500;
            font-size: 0.9rem;
            animation: scroll-text 30s linear infinite;
        }

        @keyframes scroll-text {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Radio link button (replaces old calendar btn) */
        .np-radio-link {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid rgba(255,255,255,.2);
            border-radius: 50%;
            color: var(--white);
            flex-shrink: 0;
            transition: all .15s;
        }

        .np-radio-link:hover {
            border-color: var(--neon-green);
            color: var(--neon-green);
        }

        /* Next Up Section */
        .next-up {
            background-color: var(--neon-green);
            color: var(--black);
            padding: .85rem 2rem;
            display: flex;
            align-items: center;
            gap: 2rem;
            overflow-x: auto;
            border-bottom: 2px solid var(--black);
        }

        .next-up-label {
            background-color: var(--black);
            color: var(--white);
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.8rem;
            white-space: nowrap;
            letter-spacing: 0.02em;
        }

        .next-up-content {
            display: flex;
            gap: 3rem;
            font-size: 0.85rem;
            font-weight: 500;
            white-space: nowrap;
        }

        /* Main Content */
        main {
            max-width: 1600px;
            margin: 0 auto;
            padding: 3rem 2rem;
        }

        /* Hero Carousel */

.hero-carousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    border: 2.5px solid var(--black);
}

.hero-carousel-track {
    display: flex;
    transition: transform .45s ease;
}

.hero-carousel-slide {
    flex-shrink: 0;
}

.hero-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--black);
    color: var(--white);
    border: none;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
}

.hero-carousel-arrow:hover {
    opacity: .8;
}

.hero-carousel-prev { left: .75rem; }
.hero-carousel-next { right: .75rem; }

.hero-carousel-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    z-index: 2;
}

.hero-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--black);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
}

.hero-carousel-dot.active {
    background: var(--black);
}

        /* Featured Card Section */

.featured-card {
    background: #ff6a3d;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    padding: 1.5rem;
    height: 100%;
    box-sizing: border-box;
}

.featured-card--mix {
    text-decoration: none;
    color: inherit;
}

.featured-media {
    position: relative;
    border: 2px solid var(--black);
    overflow: hidden;
}

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

.featured-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-play span {
    width: 80px;
    height: 80px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured-play span:after {
    content: "";
    border-left: 18px solid white;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

.featured-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.featured-label {
    font-weight: 700;
    letter-spacing: .08em;
    font-size: .8rem;
}

.featured-title {
    font-family: Archivo;
    font-size: 3rem;
    font-weight: 700;
}

.featured-sub {
    font-family: Georgia, serif;
    font-size: 1.5rem;
}

.featured-tags {
    display: flex;
    gap: .75rem;
}

.featured-tag {
    border: 2px solid black;
    padding: .4rem 1rem;
    font-weight: 700;
    font-size: .7rem;
}

.featured-desc {
    max-width: 420px;
    line-height: 1.4;
}

.featured-read {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Mobile */

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

    .featured-title{
        font-size:2rem;
    }

    .hero-carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .hero-carousel-prev { left: .5rem; }
    .hero-carousel-next { right: .5rem; }
}

        .featured-header {
            background-color: var(--white);
            border: 2.5px solid var(--black);
            border-radius: 50px;
            padding: 1rem 2.5rem;
            display: inline-block;
            margin-bottom: 3rem;
            font-family: 'Archivo', sans-serif;
            font-weight: 700;
            font-size: 1.75rem;
            letter-spacing: -0.01em;
        }

        /* Shows Grid */
        .shows-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
        }

        .show-card {
            cursor: pointer;
            transition: transform 0.3s ease;
            animation: fadeIn 0.6s ease forwards;
            opacity: 0;
        }

        .show-card:nth-child(1) { animation-delay: 0.1s; }
        .show-card:nth-child(2) { animation-delay: 0.2s; }
        .show-card:nth-child(3) { animation-delay: 0.3s; }
        .show-card:nth-child(4) { animation-delay: 0.4s; }
        .show-card:nth-child(5) { animation-delay: 0.5s; }
        .show-card:nth-child(6) { animation-delay: 0.6s; }
        .show-card:nth-child(7) { animation-delay: 0.7s; }
        .show-card:nth-child(8) { animation-delay: 0.8s; }
        .show-card:nth-child(9) { animation-delay: 0.9s; }
        .show-card:nth-child(10) { animation-delay: 1s; }

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

        .show-card:hover {
            transform: translateY(-8px);
        }

        .show-image {
            width: 100%;
            aspect-ratio: 1;
            background-color: var(--grey-light);
            border: 2px solid var(--black);
            margin-bottom: 1rem;
            overflow: hidden;
            position: relative;
        }

        .show-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .placeholder-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.3);
        }

        .show-info h3 {
            font-weight: 600;
            font-size: 1.05rem;
            margin-bottom: 0.5rem;
            line-height: 1.4;
            letter-spacing: -0.01em;
        }

        .show-date {
            font-size: 0.9rem;
            color: var(--grey-dark);
            margin-bottom: 0.75rem;
        }

        .show-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            border: 1.5px solid var(--black);
            padding: 0.4rem 1rem;
            border-radius: 50px;
            font-size: 0.55rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.2s ease;
        }

        .tag:hover {
            background-color: var(--black);
            color: var(--white);
        }

        /* Footer */
        footer {
            background-color: var(--black);
            color: var(--white);
            padding: 2rem;
            text-align: center;
            margin-top: 5rem;
            border-top: 2px solid var(--black);
        }

        .chatroom-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background-color: var(--black);
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 50px;
            border: solid 2px #00ff41;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
            z-index: 999;
        }

        .chatroom-btn:hover {
            transform: scale(1.05);
        }

        /* Event Carousel */

.event-carousel {
    margin-top: 5rem;
    border: 2.5px solid var(--black);
    overflow: hidden;
    position: relative;
}

.event-track {
    display: flex;
    transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.event-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    max-height: 550px;
}

.event-content {
    background: #ffc928;
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    overflow: hidden;
    padding-left: 90px;
}

.event-pill {
    display: inline-block;
    border: 2px solid black;
    border-radius: 999px;
    padding: .3rem 1rem;
    font-weight: 700;
    width: fit-content;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.event-date {
    font-weight: 700;
    font-size: 1rem;
}

.event-title {
    font-family: Archivo;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-desc {
    max-width: 420px;
    font-size: .9rem;
    opacity: .8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-link {
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    font-size: .9rem;
    transition: opacity .2s;
}

.event-link:hover {
    opacity: .7;
}

.event-image {
    max-height: 920px;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Carousel Nav Arrows — overlaid on slide */
.carousel-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 2.5px solid var(--black);
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    transition: background .15s, color .15s;
    padding: 0;
    line-height: 1;
}

.carousel-arrow:hover {
    background: var(--black);
    color: var(--white);
}

.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }

/* Carousel Dots — bottom bar */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .8rem 1rem;
    background: var(--white);
    border-top: 2.5px solid var(--black);
}

.carousel-dots {
    display: flex;
    gap: .6rem;
    justify-content: center;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
}

.carousel-dot.active {
    background: black;
}

@media (max-width: 768px) {
    .event-slide {
        grid-template-columns: 1fr;
        max-height: none;
    }
    .event-image {
        height: 220px;
        max-height: 220px;
        order: -1;
    }
    .event-content {
        padding: 1.8rem;
    }
    .event-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }
    .carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: .9rem;
    }
    .carousel-prev { left: 8px; }
    .carousel-next { right: 8px; }
}
/* News Section */

.news-section {
    max-width: 1600px;
    margin: 5rem auto;
    padding: 0 2rem;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.news-header h2 {
    font-family: Georgia, serif;
    font-size: 3rem;
    font-weight: 400;
}

.radio-tz-label {
    font-size: .85rem;
    opacity: .5;
    font-weight: 600;
    letter-spacing: .3px;
}

.news-all {
    border: 2px solid black;
    border-radius: 50px;
    padding: .6rem 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}


.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.news-card {
    border: 2px solid black;
}

.news-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.news-meta {
    padding: 1rem;
}

.news-tags {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.news-tag {
    border: 2px solid black;
    padding: .3rem .8rem;
    font-size: .65rem;
    font-weight: 700;
}

.news-date {
    font-size: .9rem;
    margin-bottom: .5rem;
}

.news-title {
    font-family: Archivo;
    font-weight: 700;
    font-size: 1.2rem;
}
/* Become Member Section */

.member-section {
    width: 100%;
    margin-top: 6rem;
    padding: 6rem 2rem;
    background: radial-gradient(circle at center, #3b3bbd 0%, #1c1c3a 100%);
}

.member-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.member-title {
    font-family: Archivo;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.member-sub {
    color: white;
    max-width: 420px;
    margin-bottom: 2rem;
}

.member-btn {
    border: 2px solid white;
    background: transparent;
    color: white;
    padding: .75rem 2rem;
    font-weight: 700;
    cursor: pointer;
}

.member-btn:hover {
    background: white;
    color: black;
}
/* Upcoming Section */

.upcoming-section {
    width: 100%;
    padding: 5rem 2rem;
    background: white;
}

.upcoming-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.upcoming-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.upcoming-header h2 {
    font-size: 2rem;
    font-weight: 700;
}

.upcoming-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.upcoming-card {
    min-width: 260px;
    gap: 30px;
}

.upcoming-card img {
    width: 440px;
    max-width: 100%;
    height: 460px;
    object-fit: cover;
    border: 2px solid black;
     gap: 30px;
}

.upcoming-meta {
    margin-top: .75rem;
}

.upcoming-city {
    font-size: 29px;
    font-weight: 700;
}

.upcoming-location {
    font-size: .9rem;
    opacity: .7;
}
/* Newsletter Section */

.newsletter-section {
    width: 100%;
    padding: 6rem 2rem;
    background:
        radial-gradient(circle at center,
            #ffd12d 0%,
            #00ff41 35%,
            #00ff41 36%,
            #ffd12d 65%,
            #00ff41 66%,
            #ffd12d 100%
        );
    text-align: center;
}

.newsletter-inner {
    max-width: 900px;
    margin: 0 auto;
}

.newsletter-label {
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.newsletter-title {
    font-family: Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    margin-bottom: 1.5rem;
}

.newsletter-sub {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 0;
}

.newsletter-form input {
    padding: 0.9rem 1rem;
    width: 280px;
    border: 2px solid black;
    outline: none;
    font-size: 0.95rem;
}

.newsletter-form button {
    padding: 0.9rem 1.5rem;
    border: 2px solid black;
    border-left: none;
    background: black;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.newsletter-form button:hover {
    opacity: 0.9;
}

/* Brutalist Footer */

.iss-footer {
    background: black;
    color: white;
    margin-top: 0rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4rem 2rem;
    border-bottom: 1px solid white;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-logo img {
    max-width: 240px;
}

.footer-about {
    max-width: 420px;
    line-height: 1.5;
}

.footer-about a {
    display: inline-block;
    margin-top: 1rem;
    color: white;
    text-decoration: underline;
}

.footer-mid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
    border-bottom: 1px solid white;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-go {
    cursor: pointer;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    align-items: center;
}

.footer-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    font-size: .8rem;
    opacity: .7;
    max-width: 1600px;
    margin: 0 auto;
}

.footer-copyright {
    flex: 1;
}

/* Language Selector */
.language-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.language-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.language-options {
    display: flex;
    gap: 0.5rem;
}

.language-option {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 3px;
}

.language-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.language-option.active {
    background: white;
    color: black;
    border-color: white;
}

.flag-icon {
    font-size: 1rem;
    line-height: 1;
}

.lang-text {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

@media(max-width:900px){
    .footer-top,
    .footer-mid{
        grid-template-columns:1fr;
        gap:2rem;
    }

    .footer-links{
        justify-content:flex-start;
        flex-wrap:wrap;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .language-selector {
        flex-direction: column;
        gap: 0.8rem;
    }

    .language-options {
        justify-content: center;
    }
}

/* Mobile */

@media (max-width: 600px) {
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        border-left: 2px solid black;
    }

    .newsletter-form button {
        margin-top: 0.75rem;
    }
}



/* Mobile */

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

    .news-header h2{
        font-size:2rem;
    }
}

/* Mobile */

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

    .event-content {
        padding: 2rem;
    }
}


        /* Responsive */
        @media (max-width: 768px) {
            nav ul {
                display: none;
            }

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

            .track-info {
                gap: 1rem;
            }

            .next-up-content {
                gap: 1.5rem;
            }

            .np-status-pill {
                display: none;
            }

            header {
                padding: 1rem;
            }

            .now-playing {
                padding: .75rem 1rem;
                gap: .75rem;
            }

            .play-button {
                width: 38px;
                height: 38px;
            }

            .next-up {
                padding: .75rem 1rem;
            }

            main {
                padding: 2rem 1rem;
            }
        }
        /* Contact Page */

.contact-section {
    padding: 0 2rem 6rem;
}

.contact-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3 {
    font-family: Archivo;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.contact-info p {
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form input,
.contact-form textarea {
    border: 2px solid black;
    padding: .9rem 1rem;
    font-size: .95rem;
    font-family: inherit;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    border: 2px solid black;
    background: black;
    color: white;
    padding: .9rem;
    font-weight: 700;
    cursor: pointer;
}

.contact-form button:hover {
    opacity: .85;
}

@media(max-width:900px){

    .contact-inner {
        grid-template-columns: 1fr;
    }

}
/* About Page */

.about-section {
    padding: 0 2rem 6rem;
}

.about-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
}

.about-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid black;
}

.about-copy h3 {
    font-family: Archivo;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.about-copy p {
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

/* Values */

.about-values {
    padding: 0 2rem 6rem;
}

.about-values-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}

.value-card {
    border: 2px solid black;
    padding: 2rem;
}

.value-card h4 {
    font-family: Archivo;
    margin-bottom: .75rem;
}

/* Mobile */

@media(max-width:900px){

    .about-inner,
    .about-values-inner{
        grid-template-columns:1fr;
    }

}
/* About Hero */

.about-hero {
    width: 100%;
    border-bottom: 2px solid black;
}

.about-hero-image img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.about-hero-content {
    background: #ff4d4d;
    border-top: 2px solid black;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.about-hero-inner {
    padding: 3rem 2rem;
}

.about-kicker {
    font-weight: 700;
    margin-bottom: .75rem;
}

.about-hero-content h1 {
    font-family: Archivo;
    font-size: clamp(2.5rem,5vw,4rem);
    margin-bottom: 1rem;
}

.about-hero-sub {
    font-family: Georgia, serif;
    font-size: 1.8rem;
    max-width: 640px;
}

.about-share {
    margin-right: 2rem;
    border: 2px solid black;
    background: white;
    padding: .6rem 1.5rem;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
}

/* Mobile */

@media(max-width:900px){

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

    .about-share{
        margin:0 2rem 2rem;
    }

    .about-hero-sub{
        font-size:1.3rem;
    }

}
.news-card{
    color:black;
    text-decoration:none;
}

.news-card:hover img{
    opacity:.85;
}
/* Post Page */

.post-hero img{
    width:100%;
    height:60vh;
    object-fit:cover;
    display:block;
}

.post-wrap{
    padding:5rem 2rem;
}

.post-inner{
    max-width:800px;
    margin:0 auto;
}

.post-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:2rem;
}

.post-title{
    font-family:Archivo;
    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:1rem;
}

.post-intro{
    font-family:Georgia,serif;
    font-size:1.3rem;
    margin-bottom:2rem;
}

.post-body p{
    line-height:1.7;
    margin-bottom:1.5rem;
}

.post-body blockquote{
    border-left:4px solid black;
    padding-left:1rem;
    margin:2rem 0;
    font-style:italic;
}

.post-share{
    margin-top:3rem;
    position:relative;
}

.share-trigger{
    border:2px solid black;
    background:none;
    padding:.6rem 2rem;
    font-weight:700;
    cursor:pointer;
    font-size:.95rem;
    transition:background .2s, color .2s;
}

.share-trigger:hover{
    background:black;
    color:white;
}

.share-menu{
    display:none;
    position:absolute;
    left:0;
    bottom:110%;
    background:white;
    border:2px solid black;
    min-width:220px;
    z-index:200;
    max-width:90vw;
}

.share-menu.active{
    display:block;
}

.share-item{
    padding:.7rem 1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:.6rem;
    font-size:.95rem;
    font-weight:500;
    border-top:1px solid #eee;
    transition:background .15s;
}

.share-item:first-child{
    border-top:none;
}

.share-item:hover{
    background:#f0f0f0;
}

.share-icon{
    width:22px;
    text-align:center;
    font-weight:700;
    flex-shrink:0;
}

@media(max-width:768px){
    .post-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:1rem;
    }
}
/* Session Details */

.session-hero img{
    width:100%;
    height:70vh;
    object-fit:cover;
    display:block;
}

.session-details{
    padding:4rem 2rem;
}

.session-inner{
    max-width:800px;
    margin:0 auto;
}

.session-inner h1{
    font-family:Archivo;
    font-size:clamp(2.2rem,4vw,3.2rem);
    margin-bottom:.5rem;
}

.session-date{
    font-weight:700;
    margin-bottom:1.5rem;
}

.session-desc{
    line-height:1.7;
    margin-bottom:3rem;
}

.session-lineup h3{
    margin-bottom:1rem;
}

.session-lineup ul{
    list-style:none;
    padding:0;
}

.session-lineup li{
    border-bottom:1px solid black;
    padding:.75rem 0;
    font-weight:600;
}

/* Mobile */

@media(max-width:768px){

.session-hero img{
    height:50vh;
}

}
/* Members Page */

.members-filter{
    background:#ffffff;
    padding:3rem 2rem;
}

.members-filter-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:2rem;
    max-width:1600px;
    margin-inline:auto;
}

.members-filter h1{
    font-family:Georgia, serif;
    font-size:3rem;
}

.members-role{
    font-weight:700;
    padding:.75rem 1.25rem;
    border:2px solid black;
    background:#ffffff;
    cursor:pointer;
}

.members-cities{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    max-width:1600px;
    margin:0 auto;
}

.city-btn{
    border:2px solid black;
    background:#ffc928;
    padding:.5rem .9rem;
    font-weight:700;
    cursor:pointer;
}

.city-btn.active,
.city-btn:hover{
    background:black;
    color:white;
}

/* Members Grid */

.members-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:2rem;
    padding:4rem 2rem;
    max-width:1600px;
    margin:0 auto;
    background:#ffffff;
}

.member-card{
    border:2px solid black;
    background:#ffc928;
}

.member-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}

.member-name{
    padding:1rem;
    font-family:Archivo;
    font-size:1.2rem;
    font-weight:700;
}

/* Mobile */

@media(max-width:768px){

.members-filter-top{
    flex-direction:column;
    align-items:flex-start;
    gap:1.5rem;
}

.members-filter h1{
    font-size:2.2rem;
}

}
/* Member Profile */

.member-hero img{
    width:100%;
    height:70vh;
    object-fit:cover;
    display:block;
}

.member-details{
    padding:4rem 2rem;
}

.member-inner{
    max-width:1200px;
    margin:0 auto;
}

.member-inner h1{
    font-family:Archivo;
    font-size:clamp(2.2rem,4vw,3.2rem);
    margin-bottom:.5rem;
}

.member-meta{
    font-weight:700;
    margin-bottom:1.5rem;
}

.member-bio{
    line-height:1.7;
    margin-bottom:2rem;
}

.member-socials{
    display:flex;
    gap:1.5rem;
}

.member-socials a{
    border:2px solid black;
    padding:.5rem 1.25rem;
    text-decoration:none;
    font-weight:700;
    color:black;
}

.member-socials a:hover{
    background:black;
    color:white;
}

/* Mobile */

@media(max-width:768px){

.member-hero img{
    height:50vh;
}

}
/* Member Profile Layout */

.member-profile{
    display:flex;
    gap:3rem;
    align-items:flex-start;
}

.member-avatar{
    width:340px;
    height:340px;
    object-fit:cover;
    border:2px solid black;
    flex-shrink:0;
}

.member-text{
    max-width:520px;
}

.member-text h1{
    margin-top:0;
}

/* Mobile */

@media(max-width:768px){

.member-profile{
    flex-direction:column;
}

.member-avatar{
    width:280px;
    height:280px;
}

}

/* MIXES PAGE TEXT */

.shows-grid a {
    text-decoration: none;
    color: black;
}

/* Mix title */
.shows-grid .show-info h3 {
    font-family: Archivo;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .35rem;
}

/* Duration + city line */
.shows-grid .show-date {
    font-size: .85rem;
    font-weight: 500;
    opacity: .75;
    margin-bottom: .75rem;
}

/* Tags tighter + punchier */

.shows-grid .tag {
    font-size: .55rem;
    padding: .3rem .75rem;
    letter-spacing: .06em;
}

/* Hover feel */

.shows-grid .show-card:hover h3 {
    text-decoration: underline;
}

/* Card spacing */

.shows-grid .show-info {
    padding-top: .25rem;
}

/* Mobile tweaks */

@media(max-width:768px){

    .shows-grid .show-info h3{
        font-size:1rem;
    }

    .shows-grid .show-date{
        font-size:.8rem;
    }
}
/* Mix Details */

.mix-hero img{
    width:100%;
    height:70vh;
    object-fit:cover;
    display:block;
}

.mix-details{
    padding:4rem 2rem;
}

.mix-inner{
    max-width:800px;
    margin:0 auto;
}

.mix-inner h1{
    font-family:Archivo;
    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:.5rem;
}

.mix-meta{
    font-weight:700;
    margin-bottom:2rem;
}

.mix-player{
    margin-bottom:2rem;
}

.fake-player{
    border:2px solid black;
    padding:1rem 2rem;
    font-weight:700;
    width:fit-content;
    cursor:pointer;
}

.fake-player:hover{
    background:black;
    color:white;
}

.mix-desc{
    line-height:1.7;
    margin-bottom:3rem;
}

.mix-tracklist h3{
    margin-bottom:1rem;
}

.mix-tracklist ol{
    padding-left:1.25rem;
}

.mix-tracklist li{
    padding:.4rem 0;
    border-bottom:1px solid #ddd;
}

/* Mobile */

@media(max-width:768px){

.mix-hero img{
    height:50vh;
}

}
input, textarea {
    width:100%;
    padding:1rem;
    border:2px solid black;
    font-size:.95rem;
    outline:none;
}

input:focus, textarea:focus {
    background:#f5f5f5;
}

/* ── Member Detail Responsive ── */

@media(max-width:600px){

    .member-profile{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:2rem;
    }

    .member-avatar{
        width:200px;
        height:200px;
    }

    .member-text{
        max-width:100%;
    }

    .member-text h1{
        font-size:1.8rem;
    }

    .member-details{
        padding:2.5rem 1.25rem;
    }

    .member-socials{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:.6rem;
        width:100%;
    }

    .member-socials a{
        padding:.6rem 1rem;
        font-size:.85rem;
        text-align:center;
        display:block;
    }

    .member-bio{
        font-size:.95rem;
    }

    .member-meta{
        font-size:.9rem;
    }

}

@media(max-width:480px){

    .member-avatar{
        width:160px;
        height:160px;
    }

    .member-text h1{
        font-size:1.5rem;
    }

    .member-socials a{
        padding:.5rem .5rem;
        font-size:.8rem;
    }

}

/* ===== RADIO PLAYER ===== */

.radio-player-section {
    padding: 0 2rem 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.radio-player {
    border: 2.5px solid black;
    padding: 2rem;
}

.radio-now-info {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2rem;
}

.radio-cover-wrap {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border: 2px solid black;
    overflow: hidden;
}

.radio-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.radio-cover-placeholder {
    width: 100%;
    height: 100%;
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Archivo;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: .1em;
}

.radio-meta {
    flex: 1;
    min-width: 0;
}

.radio-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: black;
    color: white;
    padding: .2rem .7rem;
    font-size: .75rem;
    font-weight: 800;
    font-family: Archivo;
    letter-spacing: .08em;
    margin-bottom: .5rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0f0;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.radio-rotation-badge {
    display: inline-flex;
    background: white;
    color: black;
    border: 2px solid black;
    padding: .15rem .6rem;
    font-size: .7rem;
    font-weight: 700;
    font-family: Archivo;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}

.radio-show-name {
    font-family: Archivo;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 .4rem;
}

.radio-dj {
    font-size: 1rem;
    font-weight: 600;
    opacity: .7;
}

.radio-genre {
    font-size: .85rem;
    opacity: .45;
    margin-top: .2rem;
}

/* Controls */

.radio-controls {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.radio-play-btn {
    width: 52px;
    height: 52px;
    border: 2.5px solid black;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}

.radio-play-btn:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

.radio-play-btn:hover:not(:disabled) {
    background: black;
    color: white;
}

.radio-track-pos {
    font-size: .75rem;
    opacity: .5;
    text-align: center;
    margin-bottom: .5rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-family: Archivo, sans-serif;
}

.radio-progress-wrap {
    flex: 1;
    min-width: 0;
}

.radio-progress-bar {
    height: 6px;
    background: #e0e0e0;
    cursor: default;
    position: relative;
    pointer-events: none;
}

.radio-progress {
    height: 100%;
    background: black;
    width: 0;
    transition: width .1s linear;
}

.radio-time-row {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    opacity: .5;
    margin-top: .3rem;
    font-variant-numeric: tabular-nums;
}

.radio-volume-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.radio-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: #ccc;
    outline: none;
    cursor: pointer;
}

.radio-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: black;
    border-radius: 0;
    cursor: pointer;
}

/* Up Next */

.radio-up-next-grid {
    padding: 0 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.radio-next-card {
    border: 2px solid black;
    overflow: hidden;
}

.radio-next-cover {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-bottom: 2px solid black;
}

.radio-next-info {
    padding: 1.25rem;
}

.radio-next-info h3 {
    font-family: Archivo;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .4rem;
}

.radio-next-time {
    font-weight: 700;
    font-family: Archivo;
    font-size: .85rem;
    margin-bottom: .3rem;
}

.radio-next-dj {
    font-size: .85rem;
    opacity: .6;
    margin-bottom: .5rem;
}

.radio-next-tags {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Weekly Schedule */

.radio-schedule-section {
    padding: 0 2rem 5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.radio-schedule-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: black;
    border: 2.5px solid black;
}

.radio-day-col {
    background: white;
    min-height: 200px;
}

.radio-day-col.today {
    background: #fafafa;
}

.radio-day-header {
    padding: .75rem .5rem;
    font-weight: 800;
    font-family: Archivo;
    text-align: center;
    font-size: .85rem;
    background: black;
    color: white;
    letter-spacing: .03em;
}

.today-dot {
    color: #0f0;
    font-size: .6rem;
    vertical-align: middle;
}

.radio-day-empty {
    text-align: center;
    padding: 2rem .5rem;
    opacity: .2;
    font-size: .8rem;
}

.radio-show-slot {
    padding: .75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.radio-slot-time {
    font-weight: 700;
    font-family: Archivo;
    font-size: .8rem;
    margin-bottom: .2rem;
}

.radio-slot-name {
    font-weight: 600;
    font-size: .85rem;
}

.radio-slot-dj {
    font-size: .75rem;
    opacity: .5;
}

/* Live status kicker */

.about-kicker.live {
    color: #0f0;
}

/* Responsive */

@media (max-width: 768px) {

    .radio-now-info {
        flex-direction: column;
        text-align: center;
    }

    .radio-cover-wrap {
        width: 100px;
        height: 100px;
    }

    .radio-show-name {
        font-size: 1.3rem;
    }

    .radio-controls {
        flex-wrap: wrap;
    }

    .radio-volume-wrap {
        display: none;
    }

    .radio-schedule-grid {
        grid-template-columns: 1fr;
    }

    .radio-day-col {
        min-height: auto;
    }

    .radio-up-next-grid {
        grid-template-columns: 1fr;
    }
}