/**
 * musick.com.au Stylesheet
 * National Australian Local Music Platform
 */

/* CSS Variables - Enhanced for better contrast and vibrancy */
:root {
    --yellow: #FF2D9B; /* was #FFE135 yellow — retired to brand hot-pink site-wide 2026-06-11 (#522). Var name kept: var(--yellow) is referenced across many pages; this recolours them all on-brand in one place. */
    --purple: #B794F6;
    --orange: #FF7849;
    --teal: #00E5DB;
    --pink: #FF69B4;
    --dark: #1a1a2e;
    --darker: #0f0f1a;
    --light: #f5f5f5;
    --spotify-green: #1DB954;
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-card: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.12);
    --focus-color: #B794F6;
    --green: #6BCB77;
    /* Aliases used by inline page styles */
    --card-bg: rgba(255, 255, 255, 0.08);
    --text-color: #ffffff;
    --purple-light: #a78bfa;

    /* Design Tokens — Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.35);

    /* Design Tokens — Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 50px;

    /* Design Tokens — Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Platform brand colors */
    --youtube-red: #FF0000;
    --youtube-hover: #cc0000;
    --spotify-hover: #1ed760;

    /* Semantic */
    --red: #ff4444;
    --bg-color: #0f0f1a;
}

[data-theme="light"] {
    --bg-primary: #e8e4f0;
    --bg-secondary: #f5f3f8;
    --bg-card: rgba(131, 56, 236, 0.08);
    --text-primary: #1a1a2e;
    --text-secondary: rgba(26, 26, 46, 0.8);
    --text-muted: rgba(26, 26, 46, 0.7);
    --darker: #ddd8e8;
    --border-color: rgba(131, 56, 236, 0.15);
    --focus-color: #7C3AED;
    /* Aliases */
    --card-bg: rgba(131, 56, 236, 0.08);
    --text-color: #1a1a2e;
    --purple-light: #7C3AED;

    /* Shadow overrides for light mode */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.15);

    --bg-color: #ffffff;
    --red: #d32f2f;
}

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

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

a {
    color: var(--purple);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--pink);
}

/* Main Navigation */
.main-nav {
    background: linear-gradient(135deg, #FF8C00 0%, #FF6B35 50%, #FF006E 100%);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo img {
    height: 99px;
    transition: transform 0.3s ease;
}

.nav-logo:hover img {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 4px;
    align-items: center;
}

.nav-link {
    color: var(--text-primary);
    font-weight: 600;
    padding: 7px 11px;
    border-radius: 20px;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.9rem;
}

.nav-link.active {
    background: var(--purple);
    color: white;
}

/* Only apply :hover on real pointer devices — prevents sticky highlight on touch */
@media (hover: hover) {
    .nav-link:hover {
        background: var(--purple);
        color: white;
    }
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--bg-primary);
    padding: 20px;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    border-top: 2px solid var(--purple);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mobile-menu.active {
    display: flex;
}

/* Mobile menu backdrop — tap outside to close */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.mobile-menu-backdrop.active {
    display: block;
}

/* Ensure mobile menu sits above backdrop */
.mobile-menu {
    z-index: 999;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}

.mobile-link {
    padding: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--bg-card);
}

/* Theme Toggle */
.theme-toggle {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1001;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    border: none;
    border-radius: 50px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 1.3rem;
    box-shadow: 0 4px 20px rgba(155, 123, 184, 0.4);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(255, 105, 180, 0.5);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
}

/* ============================================================
   Shared Page Hero Standard — applied to all listing pages
   ============================================================ */
.page-hero {
    position: relative;
    min-height: 250px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 50px 20px 40px !important;
    background-size: cover !important;
    background-position: center !important;
}
.page-hero .hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
}
.page-hero h1 {
    font-family: 'Bangers', cursive;
    font-size: 3.5rem !important;
    color: #ffffff !important;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
    letter-spacing: 2px;
    margin: 0 0 10px !important;
}
.page-hero .subtitle,
.page-hero > div > p,
.page-hero p:not(.hero-stats p) {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9) !important;
    margin: 0;
}
[data-theme="light"] .page-hero h1 { color: #ffffff !important; text-shadow: 3px 3px 0 rgba(0,0,0,0.4); }
[data-theme="light"] .page-hero .subtitle,
[data-theme="light"] .page-hero > div > p { color: rgba(255,255,255,0.92) !important; }
@media (max-width: 768px) {
    .page-hero { min-height: 180px !important; padding: 40px 20px 30px !important; }
    .page-hero h1 { font-size: 2.5rem !important; }
    .page-hero .subtitle { font-size: 1rem; }
}
/* Centered stat-row for the reusable page-header section (#524) */
.page-hero .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin-top: 18px; }
.page-hero .hero-stats .stat { display: flex; flex-direction: column; align-items: center; }
.page-hero .hero-stats .stat-value { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1; }
.page-hero .hero-stats .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.72); margin-top: 5px; }
@media (max-width: 480px) {
    .page-hero { min-height: 150px !important; }
    .page-hero h1 { font-size: 2rem !important; }
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg,
        rgba(155, 123, 184, 0.3) 0%,
        rgba(255, 107, 53, 0.2) 50%,
        rgba(255, 105, 180, 0.3) 100%),
        var(--bg-primary);
    padding: 50px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Hero Text Box — contrasting background for readability over any image */
.hero-text-box {
    display: inline-block;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px 36px;
    max-width: 800px;
    margin: 0 auto;
}

.hero-text-box h1,
.hero-text-box .hero-tagline {
    color: #ffffff !important;
    text-shadow: none !important;
}

.hero-text-box p,
.hero-text-box .subtitle,
.hero-text-box .hero-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .hero-text-box {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .hero-text-box h1,
[data-theme="light"] .hero-text-box .hero-tagline {
    color: var(--dark) !important;
    text-shadow: none !important;
}

[data-theme="light"] .hero-text-box p,
[data-theme="light"] .hero-text-box .subtitle,
[data-theme="light"] .hero-text-box .hero-subtitle {
    color: var(--dark) !important;
}

[data-theme="light"] .hero {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 50%, var(--pink) 100%);
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.1) 10px,
        rgba(255,255,255,0.1) 20px
    );
    animation: shimmer 20s linear infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) translateY(-50%) rotate(360deg); }
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-family: 'Bangers', cursive;
    font-size: clamp(3rem, 10vw, 6rem);
    color: #ffffff;
    text-shadow: 4px 4px 0 var(--purple), 8px 8px 0 var(--pink);
    letter-spacing: 4px;
}

.hero .subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 10px;
    font-weight: 600;
}

/* Light mode hero - dark text for contrast */
[data-theme="light"] .hero h1 {
    color: var(--dark);
    text-shadow: 4px 4px 0 #fff, 8px 8px 0 var(--purple);
}

[data-theme="light"] .hero .subtitle {
    color: var(--dark);
}

.hero-logo {
    max-width: 300px;
    margin-bottom: 20px;
}

.cassette {
    font-size: 4rem;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Year Selector */
.year-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 10px;
    flex-wrap: wrap;
}

.year-btn {
    padding: 12px 24px;
    border: 2px solid var(--yellow);
    background: transparent;
    color: var(--yellow);
    border-radius: 30px;
    font-family: 'Bangers', cursive;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.year-btn:hover {
    background: rgba(255, 225, 53, 0.2);
    transform: scale(1.05);
}

.year-btn.active {
    background: var(--yellow);
    color: var(--dark);
}

.year-btn.all-years {
    border-color: var(--pink);
    color: var(--pink);
}

.year-btn.all-years:hover {
    background: rgba(255, 105, 180, 0.2);
}

.year-btn.all-years.active {
    background: var(--pink);
    color: white;
}

/* Year Selector in Hero - More prominent placement */
.hero-year-selector {
    margin: 25px 0 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-year-selector .year-btn {
    padding: 10px 20px;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .hero-year-selector {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 20px -10px 10px;
        padding: 12px 15px;
        flex-wrap: nowrap;
    }

    .hero-year-selector::-webkit-scrollbar {
        display: none;
    }

    .hero-year-selector .year-btn {
        flex-shrink: 0;
        padding: 10px 18px;
        font-size: 1rem;
    }
}

/* ==========================================
   COUNTDOWN FILTERS - Enhanced Styling
   ========================================== */

/* Main filter container */
.countdown-filters {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px 24px 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Top row: Year dropdown, Search, Page size */
.filters-top-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Year Dropdown - Beautified select */
.year-selector {
    flex-shrink: 0;
}

.year-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: linear-gradient(135deg, rgba(131, 56, 236, 0.2), rgba(255, 0, 110, 0.15));
    border: 2px solid var(--purple);
    color: var(--text-primary);
    padding: 12px 44px 12px 18px;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238338EC' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    min-width: 140px;
}

.year-dropdown:hover {
    border-color: var(--pink);
    background: linear-gradient(135deg, rgba(131, 56, 236, 0.3), rgba(255, 0, 110, 0.25));
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(131, 56, 236, 0.3);
}

.year-dropdown:focus {
    outline: none;
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255, 225, 53, 0.2);
}

.year-dropdown option {
    background: var(--bg-primary, #1a1a2e);
    color: var(--text-primary);
    padding: 12px;
}

/* Search container with icon */
.search-container {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-container .search-icon {
    position: absolute;
    left: 16px;
    opacity: 0.5;
    pointer-events: none;
}

.search-container .search-input {
    width: 100%;
    padding-left: 48px;
}

/* Page size buttons */
.page-size-compact {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.page-size-compact .size-btn {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-size-compact .size-btn:hover {
    background: rgba(131, 56, 236, 0.2);
    border-color: var(--purple);
    color: var(--text-primary);
}

.page-size-compact .size-btn.active {
    background: var(--purple);
    border-color: var(--purple);
    color: white;
}

/* Genre scroll container */
.genre-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -8px;
    padding: 0 8px 12px;
}

.genre-scroll-container::-webkit-scrollbar {
    display: none;
}

.genre-tags {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

.genre-tags .genre-tag {
    white-space: nowrap;
    flex-shrink: 0;
}

.genre-count {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 4px;
}

/* Results info text */
.results-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

/* Song list spacing from filters */
.song-list {
    margin-top: 8px;
}

/* Light theme adjustments */
[data-theme="light"] .countdown-filters {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .year-dropdown {
    background: white;
    color: var(--dark);
    border: 2px solid #d0c5e0;
}

[data-theme="light"] .year-dropdown:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    outline: none;
}

[data-theme="light"] .year-dropdown option {
    background: white;
    color: var(--dark);
}

[data-theme="light"] .page-size-compact .size-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--dark);
}

[data-theme="light"] .page-size-compact .size-btn:hover {
    background: rgba(131, 56, 236, 0.1);
}

[data-theme="light"] .page-size-compact .size-btn:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

[data-theme="light"] .results-info {
    color: rgba(0, 0, 0, 0.65);
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .countdown-filters {
        padding: 16px;
        margin-bottom: 20px;
    }

    .filters-top-row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .year-dropdown {
        width: 100%;
        padding: 14px 44px 14px 18px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .search-container {
        min-width: 100%;
    }

    .page-size-compact {
        justify-content: center;
    }

    .page-size-compact .size-btn {
        flex: 1;
        text-align: center;
    }

    .genre-scroll-container {
        margin: 0 -16px;
        padding: 0 16px 12px;
    }
}

/* City Gigs Strip */
.city-gigs-strip {
    margin: 0 0 24px;
    background: #16162a;
    border-radius: 10px;
    overflow: hidden;
}
.city-gigs-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.city-gigs-strip-header h2 {
    font-size: 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}
.city-gigs-strip-all {
    color: #FF006E;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.city-gigs-strip-all:hover { text-decoration: underline; }
.city-gigs-strip-list { padding: 4px 0; }
.city-gig-strip-item {
    display: grid;
    grid-template-columns: 56px 1fr 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.12s;
}
.city-gig-strip-item:last-child { border-bottom: none; }
.city-gig-strip-item:hover { background: rgba(255,255,255,0.04); }
.cgs-date {
    color: #FF006E;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.cgs-title {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cgs-venue {
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cgs-ticket {
    background: #FF006E;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.cgs-ticket--free { background: #10b981; }
@media (max-width: 600px) {
    .city-gig-strip-item { grid-template-columns: 44px 1fr auto; }
    .cgs-venue { display: none; }
}

/* Section Navigation */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 30px 0;
    position: sticky;
    top: 70px;
    background: rgba(26, 26, 46, 0.95);
    padding: 20px;
    z-index: 100;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.nav-tab {
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--purple);
    color: var(--text-primary);
}

.nav-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(155, 123, 184, 0.4);
}

.nav-tab.active {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
    color: var(--dark);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, var(--purple) 0%, #7B5EA7 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: var(--shadow-md);
}

.stat-card:hover {
    transform: translateY(-5px) rotate(1deg);
    box-shadow: var(--shadow-hover);
}

.stat-card.gold {
    background: linear-gradient(135deg, var(--yellow) 0%, var(--orange) 100%);
    color: var(--dark);
}

.stat-card.teal {
    background: linear-gradient(135deg, var(--teal) 0%, #008B8B 100%);
}

.stat-card.pink {
    background: linear-gradient(135deg, var(--pink) 0%, #FF1493 100%);
}

.stat-card.green {
    background: linear-gradient(135deg, var(--spotify-green) 0%, #1aa34a 100%);
}

.stat-card.purple {
    background: linear-gradient(135deg, var(--purple) 0%, #7b5a9e 100%);
}

.stat-number {
    font-family: 'Bangers', cursive;
    font-size: 2.5rem;
    letter-spacing: 2px;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 5px;
}

/* Section Headers with Icon */
.section > h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.section > h2 .icon {
    opacity: 0.85;
    flex-shrink: 0;
}

/* Search Bar */
.search-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 15px 25px;
    border-radius: 50px;
    border: 2px solid var(--purple);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-color: var(--yellow);
    box-shadow: 0 0 20px rgba(255, 225, 53, 0.3);
}

.search-input::placeholder {
    color: var(--text-secondary);
}

/* Genre Filter */
.genre-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.genre-tag {
    padding: 8px 16px;
    border-radius: 20px;
    border: 2px solid var(--purple);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.genre-tag:hover, .genre-tag.active {
    background: var(--purple);
    transform: scale(1.05);
}

.genre-tag[data-genre="rock"].active { background: #e74c3c; border-color: #e74c3c; }
.genre-tag[data-genre="indie"].active { background: #9b59b6; border-color: #9b59b6; }
.genre-tag[data-genre="pop"].active { background: #ff69b4; border-color: #ff69b4; }
.genre-tag[data-genre="punk"].active { background: #2ecc71; border-color: #2ecc71; }
.genre-tag[data-genre="electronic"].active { background: #00ced1; border-color: #00ced1; }
.genre-tag[data-genre="hip-hop"].active { background: #f39c12; border-color: #f39c12; }
.genre-tag[data-genre="folk"].active { background: #8b4513; border-color: #8b4513; }

/* Song List - Single column for proper ranking display */
.song-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==========================================
   SONG ITEM - ALIGNED GRID LAYOUT
   Fixed-width columns ensure vertical alignment across all rows
   ========================================== */
.song-item {
    display: grid;
    /* Fixed columns: rank(50px) | art(55px) | info(flex) | actions(200px) */
    grid-template-columns: 50px 55px 1fr 200px;
    align-items: center;
    gap: var(--space-sm) var(--space-lg); /* row-gap | column-gap */
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    min-height: 70px; /* Consistent row height */
}

.song-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-left-color: var(--yellow);
}

.song-item.top-10 {
    background: linear-gradient(90deg, rgba(255, 225, 53, 0.15) 0%, var(--bg-card) 100%);
    border-left-color: var(--yellow);
}

/* Position/Rank Column - Fixed width, right-aligned for number alignment */
.position {
    font-family: 'Bangers', cursive;
    font-size: 1.3rem;
    color: var(--yellow);
    text-align: right;
    width: 50px;
    padding-right: 5px;
}

.song-item.top-10 .position {
    color: var(--orange);
    font-size: 1.5rem;
}

.song-item.top-10 .song-info {
    padding-left: 10px;
}

/* Source badges for national countdown - inline with title */
.source-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.source-badge.all-time {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    color: #1a1a2e;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}
.source-badge.annual {
    background: linear-gradient(135deg, #3A86FF, #8338EC);
    color: white;
    box-shadow: 0 2px 6px rgba(131, 56, 236, 0.25);
}

/* Album Art Column - Fixed size, strict dimensions */
.album-art {
    width: 55px;
    height: 55px;
    min-width: 55px;
    max-width: 55px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.album-art:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* Song Info Column - Flexible, with left padding for spacing from art */
.song-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0; /* Allow text truncation */
    overflow: hidden;
    padding-left: 4px; /* Extra spacing from album art */
}

/* Title Row - Title + Optional Badges */
.song-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.song-title-row .song-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

/* Meta Row - Artist + Genre + Year */
.song-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* Song Title Styling */
.song-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-title:hover {
    color: var(--yellow);
}

/* Artist Name Styling */
.artist-name {
    color: #E9D5FF; /* Light purple - readable on dark backgrounds */
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.artist-name:hover {
    color: var(--pink);
}

/* Ensure artist name is always readable */
[data-theme="dark"] .artist-name,
html:not([data-theme="light"]) .artist-name {
    color: #E9D5FF; /* Light purple for dark mode */
}

/* Genre Tag */
.song-genre {
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(155, 123, 184, 0.25);
    border-radius: 8px;
    display: inline-block;
    white-space: nowrap;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Year Tag */
.song-year {
    font-size: 0.7rem;
    color: var(--teal) !important;
    opacity: 0.8;
    flex-shrink: 0;
}

/* ==========================================
   SONG ACTIONS - Fixed Width for Alignment
   Width: 200px to fit heart + video + play/find
   ========================================== */
.song-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
}

/* Heart/Playlist Button - Fixed Size */
.playlist-add-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.playlist-add-btn:hover {
    background: rgba(255, 0, 110, 0.3);
    transform: scale(1.05);
}

.playlist-add-btn.in-playlist {
    background: rgba(255, 0, 110, 0.4);
}

.playlist-add-btn .heart {
    color: var(--pink);
}

/* Action Button Base */
.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Spotify/Play Button - Fixed Width */
.spotify-btn {
    background: var(--spotify-green);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 70px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.spotify-btn:hover {
    background: var(--spotify-hover);
    transform: scale(1.02);
    color: white;
}

/* YouTube/Video Button - Fixed Width */
.youtube-btn {
    background: var(--youtube-red);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    min-width: 70px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.youtube-btn:hover {
    background: var(--youtube-hover);
    transform: scale(1.02);
    color: white;
}

.youtube-btn.small {
    padding: 6px 10px;
    font-size: 0.75rem;
    min-width: 60px;
}

/* Placeholder for missing video button - preserves alignment */
.song-actions .btn-placeholder {
    width: 70px;
    min-width: 70px;
    visibility: hidden;
}

/* Artist Leaderboard */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 50px 1fr 80px 100px;
    align-items: center;
    gap: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.02);
}

.leaderboard-item.gold {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.3) 0%, var(--bg-card) 100%);
    border: 2px solid gold;
}

.leaderboard-item.silver {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.3) 0%, var(--bg-card) 100%);
    border: 2px solid silver;
}

.leaderboard-item.bronze {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.3) 0%, var(--bg-card) 100%);
    border: 2px solid #cd7f32;
}

.rank {
    font-family: 'Bangers', cursive;
    font-size: 1.5rem;
    text-align: center;
}

.leaderboard-item.gold .rank { color: gold; }
.leaderboard-item.silver .rank { color: silver; }
.leaderboard-item.bronze .rank { color: #cd7f32; }

.song-count {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--yellow);
    text-align: center;
}

/* City Cards (Homepage) */
.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.city-card {
    background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
    border-radius: var(--radius-xl);
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,0.1);
}

.city-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(155, 123, 184, 0.4);
}

.city-card.coming-soon {
    background: var(--bg-card);
    opacity: 0.7;
}

.city-card h2 {
    font-family: 'Bangers', cursive;
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: white;
}

.city-card p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.city-card .btn {
    background: white;
    color: var(--dark);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.city-card .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.coming-soon-badge {
    background: var(--yellow);
    color: var(--dark);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Footer */
.main-footer {
    background: var(--darker);
    padding: 60px 0 30px;
    margin-top: 60px;
    border-top: 2px solid var(--purple);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3,
.footer-section h4 {
    color: var(--yellow);
    margin-bottom: 20px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
}

.footer-section p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--yellow);
}

.footer-links .coming-soon {
    color: var(--text-secondary);
    opacity: 0.5;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-social a {
    color: var(--text-secondary);
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    color: var(--yellow);
    transform: scale(1.2);
}

/* Footer city strip — was a column, now a horizontal utility row.
   Lists capital-city hubs inline; '+N more' reveals long-tail cities. */
.footer-cities {
    margin: -16px 0 30px;
    padding: 14px 0;
    border-top: 1px solid var(--bg-card);
    border-bottom: 1px solid var(--bg-card);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    font-size: 0.85rem;
}
.footer-cities-label { color: var(--text-secondary); flex: 0 0 auto; }
.footer-cities-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer-cities-list li { display: inline; }
.footer-cities-list a { color: var(--text-color); text-decoration: none; }
.footer-cities-list a:hover { color: var(--pink); }
.footer-cities-more { flex: 0 0 auto; }
.footer-cities-more summary { cursor: pointer; color: var(--pink); font-weight: 600; user-select: none; }
.footer-cities-more summary:hover { opacity: 0.8; }
.footer-cities-more[open] { width: 100%; }
.footer-cities-more[open] summary { margin-bottom: 8px; }
.footer-cities-list--all { gap: 4px 12px; opacity: 0.85; }

.footer-legal-links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 0.78rem; }
.footer-legal-links li { display: inline; }
.footer-legal-links a { color: var(--text-secondary); text-decoration: none; }
.footer-legal-links a:hover { color: var(--pink); }

.footer-bottom {
    border-top: 1px solid var(--bg-card);
    padding-top: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.footer-credits {
    font-size: 0.85rem;
    margin-top: 10px;
}

.footer-credits-row {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-sa-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.footer-sa-badge span {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.6;
}
.footer-built-by {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.6;
}
.footer-built-by a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    opacity: 0.8;
}
.footer-built-by a:hover {
    opacity: 1;
    color: var(--pink);
}

.footer-cookie-manage {
    margin-top: 8px;
}
.footer-cookie-manage a {
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-decoration: underline;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.footer-cookie-manage a:hover {
    opacity: 1;
    color: var(--pink);
}

/* Ad Containers */
.ad-container {
    text-align: center;
    margin: 20px 0;
}

.ad-footer {
    background: var(--darker);
    padding: 20px;
}

/* Light Theme Overrides */
[data-theme="light"] .hero h1 {
    color: var(--dark);
}

[data-theme="light"] .nav-tabs {
    background: linear-gradient(180deg, #f8f9fa, #f0edf5);
    border-bottom: 1px solid rgba(131, 56, 236, 0.1);
}

[data-theme="light"] .main-nav {
    background: linear-gradient(180deg, #ede8f8 0%, #e4dcf2 100%);
    border-bottom: 1px solid rgba(131, 56, 236, 0.18);
    box-shadow: 0 2px 12px rgba(131, 56, 236, 0.1);
}

[data-theme="light"] .song-item,
[data-theme="light"] .leaderboard-item {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .search-input {
    background: rgba(0, 0, 0, 0.05);
    border-color: #d0c5e0;
    color: var(--dark);
}

[data-theme="light"] .search-input:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

[data-theme="light"] .search-input::placeholder {
    color: rgba(26, 26, 46, 0.55);
}

[data-theme="light"] .main-footer {
    background: #e9ecef;
}

[data-theme="light"] .main-footer h3,
[data-theme="light"] .main-footer h4 {
    color: #1a1a2e;
}

[data-theme="light"] .main-footer p,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-bottom p {
    color: #2a2a2a;
}

[data-theme="light"] .footer-links a:hover {
    color: var(--purple);
}

[data-theme="light"] .footer-social a {
    color: #333333;
}

[data-theme="light"] .footer-social a:hover {
    color: var(--pink);
}

.footer-credit-text { color: rgba(255,255,255,0.5); }
.footer-credit-link { color: rgba(255,255,255,0.6); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
[data-theme="light"] .footer-credit-text { color: rgba(0,0,0,0.45); }
[data-theme="light"] .footer-credit-link { color: rgba(0,0,0,0.55); border-bottom-color: rgba(0,0,0,0.15); }

/* Light Theme - Navigation Contrast Fixes */
[data-theme="light"] .nav-tab {
    color: #1a1a2e !important;
}

[data-theme="light"] .nav-tab:hover,
[data-theme="light"] .nav-tab.active {
    color: #7C3AED !important;
}

[data-theme="light"] .main-nav a {
    color: #1a1a2e;
}

/* Light Theme - Song Item Text Contrast */
[data-theme="light"] .song-title {
    color: #1a1a2e;
}

[data-theme="light"] .artist-name {
    color: #6B21A8; /* Darker purple for better contrast */
}

[data-theme="light"] .position {
    color: #7C3AED;
}

/* Light Theme - Album Art Styling */
[data-theme="light"] .album-art {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}

/* Light Theme - City Cards Text Readability */
[data-theme="light"] .city-card h2,
[data-theme="light"] .city-card p,
[data-theme="light"] .city-card .city-stats {
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Light Theme - Stat Cards */
[data-theme="light"] .stat-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Light Theme - Hero Text Shadow for Readability */
[data-theme="light"] .hero h1,
[data-theme="light"] .hero .subtitle {
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

/* Light Theme - Buttons */
[data-theme="light"] .spotify-btn {
    background: #1DB954;
    color: white;
}

[data-theme="light"] .playlist-add-btn {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #1a1a2e;
}

[data-theme="light"] .playlist-add-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Light Theme - Genre Tags */
[data-theme="light"] .genre-tag {
    background: #f0f0f0;
    color: #1a1a2e;
    border: 1px solid #ddd;
}

[data-theme="light"] .genre-tag.active,
[data-theme="light"] .genre-tag:hover {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

/* Light Theme - Year Buttons */
[data-theme="light"] .year-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a2e;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .year-btn.active,
[data-theme="light"] .year-btn:hover {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

/* Nav dropdown — dark background, white text (reinforced for all contexts) */
.dropdown-menu {
    background: #1a1a2e !important;
    color: #fff;
}
.dropdown-menu a,
.dropdown-item {
    color: #fff !important;
}
.dropdown-menu a:hover,
.dropdown-item:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Native <select> option styling — ensure visibility in dark theme */
select option {
    background: #1a1a2e;
    color: #fff;
}

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

    .mobile-menu-toggle {
        display: flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    /* Mobile menu animation */
    .mobile-menu {
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    /* Reduced header height on mobile */
    .main-nav {
        padding: 10px 0;
    }

    .nav-logo img {
        height: 73px;
    }

    /* CRITICAL: Mobile song list - maintain alignment */
    .song-item {
        grid-template-columns: 40px 45px 1fr 120px;
        padding: 10px 12px;
        gap: 8px 12px; /* row-gap | column-gap for alignment */
        min-height: 60px;
    }

    .song-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
        width: 120px;
        min-width: 120px;
        justify-content: flex-end;
    }

    /* Compact buttons on mobile - icons only */
    .song-actions .playlist-add-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 8px;
    }

    .song-actions .action-text {
        display: none;
    }

    /* Icon-only buttons on mobile */
    .song-actions .spotify-btn,
    .song-actions .youtube-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        font-size: 0;
        border-radius: 8px;
    }

    .song-actions .spotify-btn::before {
        content: "🎧";
        font-size: 1.1rem;
    }

    .song-actions .youtube-btn::before {
        content: "🎬";
        font-size: 1.1rem;
    }

    /* Find button variant */
    .song-actions .spotify-btn[style*="opacity"]::before {
        content: "🔍";
    }

    /* Hide button text on mobile */
    .song-actions .spotify-btn .btn-text,
    .song-actions .spotify-btn .text {
        display: none;
    }

    /* Touch-friendly minimum targets (44px) */
    button, .btn, a.btn, .genre-tag, .year-btn,
    .filter-btn, .nav-tab, .playlist-add-btn,
    .remove-btn, .mobile-link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Genre filter horizontal scroll */
    .genre-filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding: 8px 0 12px;
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .genre-filter::-webkit-scrollbar {
        display: none;
    }

    .genre-tag {
        padding: 12px 18px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Year selector horizontal scroll */
    .year-selector {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding: 0 15px 12px;
        margin: 0 -15px;
    }

    .year-selector::-webkit-scrollbar {
        display: none;
    }

    .year-btn {
        flex-shrink: 0;
        padding: 12px 20px;
    }

    /* Nav tabs horizontal scroll */
    .nav-tabs {
        top: 56px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding: 12px 15px;
        gap: 8px;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tab {
        flex-shrink: 0;
        padding: 10px 18px;
    }

    .leaderboard-item {
        grid-template-columns: 40px 1fr 60px;
    }

    .leaderboard-item .avg-position {
        display: none;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 18px 15px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .theme-toggle {
        top: auto;
        bottom: 20px;
        right: 20px;
    }

    .cities-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .city-card {
        padding: 30px 25px;
    }

    /* Remove button touch-friendly */
    .remove-btn {
        padding: 12px;
    }

    /* Playlist add button touch-friendly */
    .playlist-add-btn {
        padding: 12px;
    }

    /* Venue badge touch-friendly */
    .venue-badge {
        padding: 10px 16px;
    }

    /* Album art size on mobile */
    .album-art {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .position {
        font-size: 1.2rem;
        text-align: right;
        width: 40px;
        padding-right: 4px;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 15px 12px;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    /* Song item - compact with aligned actions */
    .song-item {
        grid-template-columns: 35px 40px 1fr 100px;
        gap: 6px 8px; /* row-gap | column-gap for alignment */
        padding: 10px 12px;
        min-height: 56px;
    }

    .song-actions {
        gap: 4px;
        width: 100px;
        min-width: 100px;
    }

    /* Smaller action buttons on 480px */
    .song-actions .playlist-add-btn,
    .song-actions .spotify-btn,
    .song-actions .youtube-btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
    }

    /* Icon-only buttons */
    .song-actions .spotify-btn,
    .song-actions .youtube-btn {
        font-size: 0;
    }

    .song-actions .spotify-btn::before {
        content: "🎧";
        font-size: 1rem;
    }

    .song-actions .youtube-btn::before {
        content: "🎬";
        font-size: 1rem;
    }

    /* For Find buttons */
    .song-actions .spotify-btn[style*="opacity"]::before {
        content: "🔍";
    }

    .song-actions .playlist-add-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .position {
        font-size: 1rem;
        text-align: right;
        width: 35px;
        padding-right: 3px;
    }

    .album-art {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
    }

    .song-title {
        font-size: 0.9rem;
        color: #ffffff;
        font-weight: 600;
    }

    .artist-name {
        font-size: 0.8rem;
        color: #E9D5FF !important; /* Light purple - ensure readable */
    }

    .song-genre {
        display: none; /* Hide genre tag on very small screens */
    }

    /* Better song card spacing */
    .song-item {
        margin-bottom: 8px;
        border-radius: 10px;
    }

    /* Hero adjustments */
    .hero {
        padding: 30px 16px;
    }

    .hero h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }

    .hero .subtitle {
        font-size: 1rem;
    }

    /* Hero text box mobile */
    .hero-text-box {
        padding: 16px 20px;
        border-radius: 12px;
        max-width: 100%;
    }

    /* Container padding */
    .container {
        padding: 12px 12px;
    }

    /* Footer grid single column */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease;
}

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    overflow-y: auto;
    padding: 20px;
}

.modal.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-content {
    background: var(--dark);
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    margin: 40px auto;
    position: relative;
    animation: modalSlide 0.3s ease;
}

@keyframes modalSlide {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    background: linear-gradient(135deg, var(--purple), var(--pink));
    padding: 40px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.modal-header h2 {
    font-family: 'Bangers', cursive;
    font-size: 2.5rem;
    color: white;
    margin-bottom: 10px;
}

.modal-body {
    padding: 30px;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: white;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.close-modal:hover {
    opacity: 1;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 3000;
    animation: toastSlide 0.3s ease;
}

@keyframes toastSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Loading Spinner */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-card);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Section */
.section {
    margin-bottom: 24px;
}

/* Tight spacing for first section after hero */
.section-tight {
    margin-top: 0;
    padding-top: 8px;
}

.section h2 {
    font-family: 'Bangers', cursive;
    font-size: 2rem;
    color: var(--yellow);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* All Years Statistics */
.allyears-section {
    background: var(--bg-card);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
}

.allyears-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.winners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.winner-card {
    background: linear-gradient(135deg, var(--purple), var(--pink));
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    color: white;
}

.winner-card:hover {
    transform: scale(1.03);
}

.winner-year {
    font-family: 'Bangers', cursive;
    font-size: 2.5rem;
    color: var(--yellow);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.winner-song {
    font-size: 1.3rem;
    font-weight: bold;
    margin: 10px 0 5px;
}

.winner-artist {
    opacity: 0.9;
    font-size: 1.1rem;
}

/* Map Styles */
#map {
    height: 500px;
    border-radius: 15px;
    margin: 20px 0;
}

.map-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

.map-sidebar {
    background: var(--bg-card);
    border-radius: 15px;
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.map-sidebar h3 {
    color: var(--yellow);
    margin-bottom: 15px;
    font-family: 'Bangers', cursive;
}

.location-group {
    padding: 10px 0;
    border-bottom: 1px solid var(--bg-card);
}

.location-name {
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-count {
    background: var(--purple);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

.location-artists {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 5px;
}

@media (max-width: 768px) {
    .map-container {
        grid-template-columns: 1fr;
    }

    #map {
        height: 350px;
    }

    .map-sidebar {
        max-height: 300px;
    }
}

/* ==========================================
   LIGHT THEME OVERRIDES
   ========================================== */

[data-theme="light"] {
    --yellow-text: #b8860b; /* Dark goldenrod for better contrast */
}

/* Yellow text needs to be darker in light mode */
[data-theme="light"] .hero h1,
[data-theme="light"] .section h2,
[data-theme="light"] .map-sidebar h3,
[data-theme="light"] .year-btn.active {
    color: var(--purple) !important;
}

[data-theme="light"] .hero .subtitle,
[data-theme="light"] .hero-content p {
    color: var(--dark) !important;
}

/* Stat cards in light mode - VIBRANT colors matching dark mode energy */
[data-theme="light"] .stat-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
}

[data-theme="light"] .stat-card.gold {
    background: linear-gradient(135deg, #FFE135 0%, #FF7849 100%) !important;
    box-shadow: 0 8px 25px rgba(255,120,73,0.4);
}

[data-theme="light"] .stat-card.gold .stat-number {
    color: #1a1a2e !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

[data-theme="light"] .stat-card.pink {
    background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%) !important;
    box-shadow: 0 8px 25px rgba(255,20,147,0.4);
}

[data-theme="light"] .stat-card.pink .stat-number {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-theme="light"] .stat-card.teal {
    background: linear-gradient(135deg, #00E5DB 0%, #008B8B 100%) !important;
    box-shadow: 0 8px 25px rgba(0,139,139,0.4);
}

[data-theme="light"] .stat-card.teal .stat-number {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-theme="light"] .stat-card.green {
    background: linear-gradient(135deg, #6BCB77 0%, #1DB954 100%) !important;
    box-shadow: 0 8px 25px rgba(29,185,84,0.4);
}

[data-theme="light"] .stat-card.green .stat-number {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-theme="light"] .stat-card.purple {
    background: linear-gradient(135deg, #B794F6 0%, #8338EC 100%) !important;
    box-shadow: 0 8px 25px rgba(131,56,236,0.4);
}

[data-theme="light"] .stat-card.purple .stat-number {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

[data-theme="light"] .stat-card .stat-label {
    color: rgba(255,255,255,0.95) !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

[data-theme="light"] .stat-card.gold .stat-label {
    color: rgba(26,26,46,0.9) !important;
    text-shadow: none;
}

/* Coming soon city cards - fix the white text on light gray */
[data-theme="light"] .city-card.coming-soon {
    background: #e8e8e8 !important;
    opacity: 1;
    border: 2px dashed #aaa;
}

[data-theme="light"] .city-card.coming-soon h2,
[data-theme="light"] .city-card.coming-soon p,
[data-theme="light"] .city-card.coming-soon .city-state {
    color: #444444 !important;
}

[data-theme="light"] .coming-soon-badge {
    background: #888;
    color: white;
}

/* Active city cards in light mode */
[data-theme="light"] .city-card:not(.coming-soon) h2,
[data-theme="light"] .city-card:not(.coming-soon) p {
    color: white !important;
}

/* Song list items */
[data-theme="light"] .song-item {
    background: white;
    border: 1px solid #d0c5e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .song-item:hover {
    background: #fafafa;
}

[data-theme="light"] .song-item .song-title,
[data-theme="light"] .song-item .artist-name,
[data-theme="light"] .song-item .position {
    color: var(--dark) !important;
}

[data-theme="light"] .song-item .song-genre {
    color: #333333 !important;
    background: rgba(131, 56, 236, 0.15);
}

[data-theme="light"] .source-badge.all-time {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    color: #1a1a2e;
}

[data-theme="light"] .source-badge.annual {
    background: linear-gradient(135deg, #3A86FF, #8338EC);
    color: white;
}

/* Leaderboard */
[data-theme="light"] .leaderboard-item {
    background: white;
    border: 1px solid #d0c5e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .leaderboard-item h3,
[data-theme="light"] .leaderboard-item .song-count,
[data-theme="light"] .leaderboard-item .rank {
    color: var(--dark) !important;
}

/* Year buttons */
[data-theme="light"] .year-btn {
    background: white;
    border-color: var(--purple);
    color: var(--purple);
}

[data-theme="light"] .year-btn:hover {
    background: #f0e6f6;
}

[data-theme="light"] .year-btn.active {
    background: var(--purple);
    color: white !important;
}

[data-theme="light"] .year-btn.all-years {
    border-color: var(--pink);
    color: var(--pink);
}

[data-theme="light"] .year-btn.all-years.active {
    background: var(--pink);
    color: white !important;
}

/* Genre tags */
[data-theme="light"] .genre-tag {
    background: white;
    border: 1px solid #ddd;
    color: var(--dark);
}

[data-theme="light"] .genre-tag.active,
[data-theme="light"] .genre-tag:hover {
    background: var(--purple);
    color: white;
    border-color: var(--purple);
}

/* Search input */
[data-theme="light"] .search-input {
    background: white;
    border: 2px solid #d0c5e0;
    color: var(--dark);
}

[data-theme="light"] .search-input:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

[data-theme="light"] .search-input::placeholder {
    color: #888;
}

/* Nav tabs */
[data-theme="light"] .nav-tab {
    color: var(--dark);
}

[data-theme="light"] .nav-tab.active {
    background: var(--purple);
    color: white;
}

/* Winner cards */
[data-theme="light"] .winner-card {
    background: white;
    border: 2px solid #7C3AED;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.12);
}

[data-theme="light"] .winner-card .winner-song,
[data-theme="light"] .winner-card .winner-artist,
[data-theme="light"] .winner-card .winner-year {
    color: var(--dark);
}

/* Allyears section */
[data-theme="light"] .allyears-section {
    background: white;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .allyears-section h2,
[data-theme="light"] .allyears-section p {
    color: var(--dark);
}

/* ================================
   NEW COMPONENTS - All Years, Playlist, Gigs, Venues, Album Art
   ================================ */

/* Album Art */
.album-art {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--purple), var(--pink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background-size: cover;
    background-position: center;
}

.song-item.top-10 .album-art {
    width: 55px;
    height: 55px;
    min-width: 55px;
    max-width: 55px;
}

/* Song Actions */
.song-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.playlist-add-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s;
    padding: 5px;
}

.playlist-add-btn .heart {
    color: var(--pink);
}

.playlist-add-btn.in-playlist .heart {
    color: #ff1744;
}

.playlist-add-btn:hover {
    transform: scale(1.2);
}

.spotify-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #1DB954;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.spotify-btn:hover {
    background: var(--spotify-hover);
    transform: translateY(-2px);
}

.spotify-btn.big-btn {
    padding: 12px 24px;
    font-size: 1rem;
}

/* Song Genre Tag */
.song-genre {
    display: inline;
    padding: 2px 8px;
    background: var(--purple);
    color: white;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 8px;
    white-space: nowrap;
    width: fit-content;
}

/* Playlist Section */
.playlist-builder {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 20px;
}

.playlist-items {
    min-height: 100px;
}

.empty-playlist {
    text-align: center;
    opacity: 0.6;
    padding: 40px 20px;
}

.playlist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.playlist-item:hover {
    background: rgba(255,255,255,0.1);
}

.playlist-position {
    font-weight: bold;
    color: var(--yellow);
    font-size: 1.1rem;
    min-width: 30px;
}

.playlist-info {
    flex: 1;
}

.playlist-title {
    font-weight: 600;
    display: block;
}

.playlist-artist {
    opacity: 0.7;
    font-size: 0.9rem;
}

.playlist-original {
    color: var(--teal);
    font-size: 0.85rem;
}

.remove-btn {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;
    transition: transform 0.2s;
}

.remove-btn:hover {
    transform: scale(1.2);
}

.playlist-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-secondary {
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.2);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--purple, #8338EC), var(--pink, #FF006E));
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
    opacity: 0.88;
    box-shadow: 0 4px 15px rgba(131,56,236,0.4);
    color: #fff;
    text-decoration: none;
}
.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

/* All Years Statistics Section - Enhanced */
#allyears {
    padding-top: 10px;
}

#allyears h2 {
    margin-bottom: 24px;
}

.allyears-subsection {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.allyears-subsection h3 {
    color: var(--yellow);
    margin-bottom: 20px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.allyears-subsection > p {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.allyears-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.allyears-stat-card {
    background: linear-gradient(135deg, rgba(131, 56, 236, 0.08), rgba(255, 0, 110, 0.05));
    border-radius: 14px;
    padding: 18px;
    border-left: 4px solid var(--pink);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.allyears-stat-card:hover {
    background: linear-gradient(135deg, rgba(131, 56, 236, 0.15), rgba(255, 0, 110, 0.1));
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(131, 56, 236, 0.2);
    border-left-color: var(--yellow);
}

.allyears-stat-card h4 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.allyears-stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.allyears-stat-card .stat-details {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 8px;
    color: var(--text-secondary);
}

.year-badges {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.year-badge {
    background: linear-gradient(135deg, var(--purple), #6a1b9a);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(131, 56, 236, 0.25);
    transition: all 0.2s ease;
}

.year-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(131, 56, 236, 0.4);
}

/* Light theme adjustments for All Years */
[data-theme="light"] .allyears-subsection {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .allyears-subsection h3 {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .allyears-stat-card {
    background: linear-gradient(135deg, rgba(131, 56, 236, 0.05), rgba(255, 0, 110, 0.03));
    border-top-color: rgba(0, 0, 0, 0.06);
    border-right-color: rgba(0, 0, 0, 0.04);
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .allyears-stat-card:hover {
    background: linear-gradient(135deg, rgba(131, 56, 236, 0.1), rgba(255, 0, 110, 0.05));
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Gigs Section */
.gigs-grid {
    display: grid;
    gap: 15px;
}

.gig-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xl);
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border-left: 4px solid var(--teal);
    transition: all 0.2s;
    position: relative;
}

.gig-card:hover {
    background: rgba(255,255,255,0.08);
}

.gig-card--featured {
    border-left-color: var(--yellow);
    background: rgba(255, 215, 0, 0.04);
}

.gig-featured-badge {
    position: absolute;
    top: -1px;
    right: 14px;
    background: var(--yellow);
    color: #1a1a2e;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 0 0 6px 6px;
}

.gig-date {
    text-align: center;
    min-width: 60px;
}

.gig-day {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--yellow);
}

.gig-month {
    display: block;
    font-size: 0.9rem;
    color: var(--teal);
    font-weight: 600;
}

.gig-details {
    flex: 1;
}

.gig-details h3 {
    color: white;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.gig-venue {
    color: var(--pink);
    font-weight: 600;
    margin-bottom: 5px;
}

.gig-address,
.gig-time,
.gig-price {
    opacity: 0.8;
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.gig-btn {
    align-self: center;
}

/* Venues Section */
.venues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.venue-card {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 20px;
    border-top: 4px solid var(--pink);
    transition: all 0.2s;
}

.venue-card:hover {
    background: rgba(255,255,255,0.08);
}

.venue-name {
    color: var(--yellow);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.venue-address {
    opacity: 0.8;
    margin-bottom: 10px;
}

.venue-desc {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 15px;
    line-height: 1.5;
}

.venue-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.venue-link {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    color: white;
    text-decoration: none;
    border-radius: 15px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.venue-link:hover {
    background: var(--purple);
}

/* Light theme overrides for new components */
[data-theme="light"] .playlist-item,
[data-theme="light"] .gig-card,
[data-theme="light"] .venue-card,
[data-theme="light"] .playlist-builder {
    background: white;
    border: 1px solid #e0e0e0;
}

[data-theme="light"] .playlist-item:hover,
[data-theme="light"] .gig-card:hover,
[data-theme="light"] .venue-card:hover {
    background: #f8f8f8;
}

[data-theme="light"] .playlist-title,
[data-theme="light"] .gig-details h3 {
    color: var(--dark);
}

[data-theme="light"] .allyears-stat-card h4 {
    color: var(--dark);
}

[data-theme="light"] .btn-secondary {
    background: #f0f0f0;
    color: var(--dark);
    border-color: #ddd;
}

[data-theme="light"] .btn-secondary:hover {
    background: #e0e0e0;
}

[data-theme="light"] .venue-link {
    background: #f0f0f0;
    color: var(--dark);
}

[data-theme="light"] .venue-link:hover {
    background: var(--purple);
    color: white;
}

[data-theme="light"] .venue-name {
    color: var(--purple);
}

/* Mobile Responsiveness for new components */
@media (max-width: 768px) {
    .song-actions {
        flex-direction: column;
        gap: 5px;
    }

    .spotify-btn {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .allyears-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .allyears-subsection {
        padding: 18px;
        margin-bottom: 24px;
    }

    .allyears-subsection h3 {
        font-size: 1.1rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
    }

    .allyears-stat-card {
        padding: 14px;
    }

    .allyears-stat-card .stat-value {
        font-size: 1.3rem;
    }

    .allyears-stat-card h4 {
        font-size: 0.95rem;
    }

    .year-badges {
        gap: 4px;
        margin-top: 10px;
    }

    .year-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .gig-card {
        flex-direction: column;
        text-align: center;
    }

    .gig-date {
        display: flex;
        gap: 5px;
        justify-content: center;
    }

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

    .playlist-item {
        flex-wrap: wrap;
    }

    .playlist-original {
        width: 100%;
        text-align: right;
    }
}

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

    .album-art {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

/* ================================
   CONTRIBUTE SECTION - HERO STYLE
   ================================ */

.contribute-hero {
    position: relative;
    margin: 0;
    padding: 60px 20px;
    overflow: hidden;
}

.contribute-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FF006E 0%, #8338EC 50%, #3A86FF 100%);
    z-index: 0;
}

.contribute-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.contribute-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.contribute-hero h2 {
    font-family: 'Bangers', cursive;
    font-size: 3rem;
    color: white !important;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.contribute-tagline {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.95) !important;
    margin-bottom: 35px;
}

.contribute-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.contribute-card {
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: 30px 20px;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    border: none;
}

/* Colorful card variants */
.contribute-card.card-band {
    background: linear-gradient(160deg, #FF3385 0%, #FF006E 40%, #B80050 100%);
    box-shadow: 0 10px 30px rgba(255,0,110,0.5);
}
.contribute-card.card-venue {
    background: linear-gradient(160deg, #33E0FF 0%, #00B4D8 40%, #007A94 100%);
    box-shadow: 0 10px 30px rgba(0,180,216,0.5);
}
.contribute-card.card-gig {
    background: linear-gradient(160deg, #FFE566 0%, #FFD93D 40%, #E6A800 100%);
    box-shadow: 0 10px 30px rgba(255,217,61,0.5);
}
.contribute-card.card-gig h3 { color: #1a1a2e !important; }
.contribute-card.card-gig p { color: rgba(0,0,0,0.75) !important; }
.contribute-card.card-photographer {
    background: linear-gradient(160deg, #FF8C42 0%, #FF6B00 40%, #CC5500 100%);
    box-shadow: 0 10px 30px rgba(255,107,0,0.5);
}
.contribute-card.card-snap {
    background: linear-gradient(160deg, #A855F7 0%, #8338EC 40%, #6D28D9 100%);
    box-shadow: 0 10px 30px rgba(131,56,236,0.5);
}
.contribute-card.card-countdown {
    background: linear-gradient(160deg, #4ADE80 0%, #22C55E 40%, #15803D 100%);
    box-shadow: 0 10px 30px rgba(34,197,94,0.5);
}

.contribute-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    filter: brightness(1.1);
}

.contribute-icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    display: block;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
}

.contribute-card h3 {
    color: #FFD93D !important;
    margin-bottom: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.contribute-card p {
    color: rgba(255,255,255,0.9) !important;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}

/* Light theme - keep the gradient, it works for both */
[data-theme="light"] .contribute-hero {
    /* Same gradient looks great in light mode too */
}

[data-theme="light"] .contribute-card h3 {
    color: #FFD93D !important;
}

/* 4 cards → 2×2 at tablet */
@media (max-width: 860px) {
    .contribute-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .contribute-hero {
        padding: 40px 20px;
        margin: 0;
    }

    .contribute-hero h2 {
        font-size: 2.2rem;
    }

    .contribute-tagline {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }

    .contribute-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .contribute-card {
        padding: 20px 15px;
    }

    .contribute-icon {
        font-size: 2.5rem;
    }

    .contribute-card h3 {
        font-size: 1.1rem;
    }

    .contribute-card p {
        font-size: 0.85rem;
    }
}

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

    .contribute-card {
        padding: 25px 20px;
    }
}

/* ==========================================
   ENHANCED MOBILE RESPONSIVENESS
   ========================================== */

/* Small phones (320px - 480px) */
@media (max-width: 480px) {
    .search-input {
        min-width: 100%;
        padding: 12px 20px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .search-form {
        flex-direction: column;
    }

    .search-form .btn {
        width: 100%;
    }

    .cities-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

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

    .hero p {
        font-size: 0.95rem;
    }

    .container {
        padding: 0 15px;
    }

    /* Touch-friendly buttons */
    .btn, button, a.btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    /* Newsletter form */
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input[type="email"] {
        min-width: 100% !important;
        margin-bottom: 10px;
    }

    /* Song items more compact - keep alignment */
    .song-item {
        grid-template-columns: 35px 40px 1fr 90px;
        padding: 8px 12px;
        gap: 8px;
    }

    .song-rank {
        font-size: 1rem;
    }

    .album-art {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .song-title {
        font-size: 0.9rem;
    }

    .artist-name {
        font-size: 0.8rem;
    }

    .song-actions {
        width: 90px;
        min-width: 90px;
    }
}

/* Very small phones (< 360px) */
@media (max-width: 360px) {
    .nav-logo img {
        height: 40px;
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .hero .subtitle {
        font-size: 0.9rem;
    }

    .stat-card {
        padding: 12px 10px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    /* Very compact song items - maintain alignment */
    .song-item {
        grid-template-columns: 28px 35px 1fr 80px;
        gap: 6px;
        padding: 8px 10px;
        min-height: 50px;
    }

    .position {
        font-size: 0.9rem;
    }

    .album-art {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }

    .song-actions {
        width: 80px;
        min-width: 80px;
        gap: 4px;
    }

    .song-actions .playlist-add-btn,
    .song-actions .spotify-btn,
    .song-actions .youtube-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .song-title {
        font-size: 0.8rem;
        /* Allow some wrapping on tiny screens instead of aggressive truncation */
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .artist-name {
        font-size: 0.7rem;
    }

    /* Touch-friendly buttons - minimum 44px for accessibility */
    .song-actions .spotify-btn {
        padding: 8px 10px;
        min-width: 44px;
        min-height: 44px;
    }

    .song-actions .playlist-add-btn {
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    .song-actions {
        gap: 8px;
    }

    /* Stats in single column on tiny screens */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Year buttons smaller */
    .year-btn {
        padding: 10px 16px;
        font-size: 1rem;
    }

    /* Nav tabs smaller */
    .nav-tab {
        padding: 8px 14px;
        font-size: 0.8rem;
    }

    /* Genre tags smaller */
    .genre-tag {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
}

/* Tablet landscape and iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    .cities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* ==========================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================== */

/* Focus states for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Skip to content link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--purple);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --bg-card: rgba(255, 255, 255, 0.15);
        --text-secondary: rgba(255, 255, 255, 0.95);
        --border-color: rgba(255, 255, 255, 0.3);
    }

    .btn {
        border: 2px solid currentColor;
    }
}

/* ==========================================
   ENHANCED MOBILE VIBRANCY
   ========================================== */

/* Make cards more visible on mobile */
@media (max-width: 768px) {
    .card,
    .song-item,
    .city-card,
    .stat-card,
    .gig-card,
    .venue-card,
    .artist-card {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid var(--border-color);
    }

    /* Increase text contrast on mobile */
    .text-secondary,
    .artist-name,
    .meta,
    .subtitle {
        color: var(--text-secondary);
    }

    /* Make gradients more vibrant on mobile */
    .hero {
        background: linear-gradient(135deg,
            var(--bg-primary) 0%,
            rgba(155, 123, 184, 0.2) 50%,
            var(--bg-secondary) 100%);
    }

    /* Increase button visibility */
    .btn-primary {
        background: linear-gradient(135deg, var(--purple), var(--pink));
        box-shadow: 0 4px 15px rgba(155, 123, 184, 0.4);
    }

    /* Song list stripe for better readability */
    .song-item:nth-child(odd) {
        background: rgba(255, 255, 255, 0.06);
    }

    .song-item:nth-child(even) {
        background: rgba(255, 255, 255, 0.03);
    }
}

/* ==========================================
   MOBILE SIDEBAR REORDERING & STICKY CTA
   ========================================== */

/* Move sidebar CTAs above fold on mobile */
@media (max-width: 900px) {
    /* Flex column for two-column layouts */
    .artist-layout,
    .venue-layout,
    .gig-layout,
    .genre-layout,
    .content-with-sidebar {
        display: flex;
        flex-direction: column;
    }

    /* Move key sidebar CTAs to top - match all sidebar class variants */
    .sidebar .ticket-card,
    .sidebar .streaming-links,
    .sidebar .rsvp-card,
    .sidebar .booking-card,
    .sidebar .cta-card,
    .artist-sidebar .sidebar-card:first-child,
    .venue-sidebar .sidebar-card:first-child,
    .gig-sidebar .sidebar-card:first-child,
    .genre-sidebar .sidebar-card:first-child {
        order: -1;
    }

    /* All sidebar variants become full width on mobile */
    .sidebar,
    .artist-sidebar,
    .venue-sidebar,
    .gig-sidebar,
    .genre-sidebar {
        width: 100%;
        order: 1; /* After main content by default */
    }

    /* Main content areas full width */
    .main-content,
    .artist-main,
    .venue-main,
    .gig-main,
    .genre-main {
        width: 100%;
        order: 0;
    }
}

/* Sticky bottom CTA bar for key actions */
.mobile-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        z-index: 100;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    }

    .mobile-sticky-cta .btn {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Add padding to body when sticky CTA is present */
    body.has-sticky-cta {
        padding-bottom: 70px;
    }

    /* Light theme sticky CTA */
    [data-theme="light"] .mobile-sticky-cta {
        background: #fff;
        border-top-color: #e0e0e0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }
}

/* ==========================================
   IMPROVED GIG INFO CARDS MOBILE
   ========================================== */

@media (max-width: 600px) {
    .gig-info-cards {
        grid-template-columns: 1fr;
    }

    .gig-info-cards .info-card {
        padding: 15px;
    }
}

/* ==========================================
   IMPROVED FILTER ROWS
   ========================================== */

.filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        margin: 0 -15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .filter-row::-webkit-scrollbar {
        display: none;
    }

    .filter-row .filter-btn,
    .filter-row button {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ==========================================
   MOBILE-FRIENDLY MODALS
   ========================================== */

@media (max-width: 768px) {
    .modal-content {
        margin: 20px 10px;
        max-width: calc(100% - 20px);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    .modal-header {
        padding: 25px 20px;
    }

    .modal-header h2 {
        font-size: 1.8rem;
    }

    .modal-body {
        padding: 20px;
    }

    .close-modal {
        top: 10px;
        right: 15px;
        font-size: 1.5rem;
    }
}

/* ==========================================
   TOUCH-FRIENDLY INTERACTIVE ELEMENTS
   ========================================== */

/* Larger tap areas for links in lists */
@media (max-width: 768px) {
    .footer-links li {
        margin-bottom: 0;
    }

    .footer-links a {
        display: block;
        padding: 10px 0;
        min-height: 44px;
    }

    /* Mobile menu links */
    .mobile-link {
        display: block;
        padding: 15px;
        min-height: 50px;
    }

    /* Social links larger */
    .footer-social a {
        padding: 10px;
        font-size: 1.3rem;
    }

    /* Dropdown/select elements */
    select {
        min-height: 44px;
        padding: 10px 15px;
        font-size: 16px; /* Prevents iOS zoom */
    }
}

/* ===== Branded Artist Placeholder ===== */
.musick-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.musick-placeholder__pattern {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image:
        repeating-linear-gradient(
            var(--rotation, 15deg),
            transparent,
            transparent 18px,
            rgba(255,255,255,0.3) 18px,
            rgba(255,255,255,0.3) 20px
        );
    transform: translateX(var(--offset, 0px));
}

.musick-placeholder__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 10px;
}

.musick-placeholder__name {
    font-family: 'Bangers', cursive;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
    line-height: 1.2;
    word-break: break-word;
    max-width: 90%;
    text-align: center;
}

.musick-placeholder__brand {
    font-family: 'Bangers', cursive;
    color: rgba(255,255,255,0.4);
    letter-spacing: 3px;
    text-transform: lowercase;
}

.musick-placeholder__cta {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 200px;
    margin: 8px auto 0;
}

/* Size: large (artist page hero) */
.musick-placeholder--large .musick-placeholder__name { font-size: 2rem; }
.musick-placeholder--large .musick-placeholder__brand { font-size: 1.2rem; margin-top: 4px; }

/* "Image coming soon" text */
.musick-placeholder__coming-soon {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    font-weight: 500;
}
.musick-placeholder--large .musick-placeholder__coming-soon { font-size: 0.8rem; }
.musick-placeholder--small .musick-placeholder__coming-soon { display: none; }

/* Size: medium (cards) */
.musick-placeholder--medium .musick-placeholder__name { font-size: 1rem; }
.musick-placeholder--medium .musick-placeholder__brand { font-size: 0.7rem; margin-top: 2px; }

/* Size: small (similar artists, avatars) */
.musick-placeholder--small .musick-placeholder__name { font-size: 0.75rem; }
.musick-placeholder--small .musick-placeholder__brand { font-size: 0.55rem; margin-top: 1px; }

/* Light theme */
[data-theme="light"] .musick-placeholder__name { color: rgba(255,255,255,0.95); }
[data-theme="light"] .musick-placeholder__brand { color: rgba(255,255,255,0.5); }
[data-theme="light"] .musick-placeholder__cta { color: rgba(255,255,255,0.8); }

/* ==========================================================================
   Past Gig Revival Features — Setlist, Quiz, Night That Was, YouTube
   ========================================================================== */

/* ── Shared section intro text ─────────────────────────────────────────────── */
.section-intro {
    color: var(--text-muted);
    margin: -8px 0 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ── Crowd-sourced Setlist ──────────────────────────────────────────────────── */
.past-setlist-section {}

.setlist-tap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.setlist-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: inherit;
    min-height: 80px;
    justify-content: center;
}

.setlist-tile:hover {
    border-color: var(--purple);
    background: rgba(131, 56, 236, 0.12);
    transform: translateY(-1px);
}

.setlist-tile.selected {
    border-color: var(--pink);
    background: rgba(255, 0, 110, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.2);
}

.setlist-tile-art {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}

.setlist-tile-title {
    font-weight: 600;
    line-height: 1.3;
}

.setlist-tile-year {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.setlist-submit-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.setlist-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.setlist-voters-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.setlist-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setlist-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setlist-result-art {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.setlist-result-info {
    flex: 1;
    min-width: 0;
}

.setlist-result-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setlist-bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

[data-theme="light"] .setlist-bar-wrap {
    background: rgba(0, 0, 0, 0.08);
}

.setlist-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--pink));
    border-radius: 3px;
    transition: width 0.6s ease;
}

.setlist-vote-pct {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
    min-width: 34px;
    text-align: right;
}

.setlist-msg-error {
    color: #f87171;
    font-size: 0.85rem;
    margin-top: 8px;
}

/* Setlist Corrections */
.setlist-correction-wrap {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.setlist-correction-toggle {
    font-size: 0.85rem;
    padding: 8px 18px;
    color: var(--purple, #8338ec);
    border: 1px solid rgba(131, 56, 236, 0.3);
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.setlist-correction-toggle:hover {
    background: rgba(131, 56, 236, 0.1);
}
.setlist-correction-form {
    margin-top: 16px;
    padding: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
[data-theme="light"] .setlist-correction-form {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}
.correction-intro {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 16px;
}
[data-theme="light"] .correction-intro { color: #666; }
.correction-add-section,
.correction-remove-section {
    margin-bottom: 16px;
}
.correction-add-section h4,
.correction-remove-section h4 {
    font-size: 0.9rem;
    margin: 0 0 8px;
    color: rgba(255,255,255,0.85);
}
[data-theme="light"] .correction-add-section h4,
[data-theme="light"] .correction-remove-section h4 { color: #333; }
.correction-hint {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    margin: 0 0 10px;
}
[data-theme="light"] .correction-hint { color: #888; }
.correction-remove-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.correction-remove-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.9rem;
}
.correction-remove-item:hover {
    background: rgba(255,255,255,0.05);
}
[data-theme="light"] .correction-remove-item:hover {
    background: rgba(0,0,0,0.03);
}
.correction-remove-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #e63946;
}
.correction-message {
    margin-top: 12px;
    font-size: 0.9rem;
}
.correction-message.success { color: #7dd89a; }
.correction-message.error { color: #ff6b6b; }
[data-theme="light"] .correction-message.success { color: #28a745; }
[data-theme="light"] .correction-message.error { color: #dc3545; }
/* ── The Night That Was ─────────────────────────────────────────────────────── */
.night-section {}

.night-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.night-card {
    display: block;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.night-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.night-card-image {
    height: 110px;
    background: linear-gradient(135deg, rgba(131,56,236,0.4), rgba(255,0,110,0.3));
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.night-card-city {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 20px;
}

.night-card-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.night-card-info strong {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.night-card-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── YouTube sidebar card ───────────────────────────────────────────────────── */
.youtube-card {}

.youtube-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}

.youtube-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ── Upcoming Shows sidebar card ────────────────────────────────────────────── */
.upcoming-shows-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.upcoming-show-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: var(--text-primary);
    transition: color 0.2s;
}

[data-theme="light"] .upcoming-show-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

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

.upcoming-show-row:hover { color: var(--purple); }

.upcoming-show-date {
    min-width: 36px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pink);
    text-align: center;
    line-height: 1.2;
}

.upcoming-show-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.upcoming-show-venue {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-show-city {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.upcoming-show-price {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .setlist-tap-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .night-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .setlist-submit-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   What's On Section — Homepage
   ══════════════════════════════════════════════════════════════════════════════ */

.home-whats-on {
    background: #0d0d1a;
    padding: 40px 0;
}
.whats-on-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.whats-on-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.whats-on-header h2 {
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.whats-on-view-all {
    color: #FF006E;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.whats-on-view-all:hover { text-decoration: underline; }
.whats-on-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.whats-on-card {
    text-decoration: none;
    background: #16162a;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    display: block;
}
.whats-on-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(255,0,110,0.2);
}
.whats-on-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.whats-on-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.whats-on-featured {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FF006E;
    color: #fff;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}
.whats-on-info {
    padding: 12px 14px;
}
.whats-on-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.whats-on-venue {
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.whats-on-ticket {
    display: inline-block;
    background: #FF006E;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}
.whats-on-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.whats-on-city-link {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.82rem;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 14px;
    border-radius: 20px;
    transition: all 0.15s;
}
.whats-on-city-link:hover {
    color: #fff;
    border-color: #FF006E;
    background: rgba(255,0,110,0.1);
}
@media (max-width: 768px) {
    .whats-on-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .whats-on-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Brand Film Section — Homepage
   ══════════════════════════════════════════════════════════════════════════════ */

.brand-film-section {
    position: relative;
    margin: 0 -20px;
    padding: 70px 20px 80px;
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1150 40%, #1a0a2e 100%);
    overflow: hidden;
}

.brand-film-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.brand-film-bg::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 55%;
    height: 120%;
    background: radial-gradient(ellipse at 30% 40%,
        rgba(131,56,236,0.14) 0%,
        rgba(255,0,110,0.05) 50%,
        transparent 75%);
}

.brand-film-bg::after {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 55%;
    height: 80%;
    background: radial-gradient(ellipse at 70% 50%,
        rgba(255,0,110,0.1) 0%,
        rgba(131,56,236,0.06) 40%,
        transparent 70%);
}

/* Top/bottom fades to blend with page bg (dark mode) */
.brand-film-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to bottom, #1a0a2e, transparent);
    z-index: 1;
    pointer-events: none;
}

.brand-film-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, #1a0a2e, transparent);
    z-index: 1;
    pointer-events: none;
}

/* Light mode: keep dark bg, adapt fades */
[data-theme="light"] .brand-film-section {
    background: #0f0f1a;
}

[data-theme="light"] .brand-film-section::before {
    /* Hero above is dark — no white bleed needed at top */
    background: none;
}

[data-theme="light"] .brand-film-section::after {
    /* Fade dark section into white page content below */
    background: linear-gradient(to top, #ffffff, transparent);
    height: 80px;
}

.brand-film-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ── Text Column ──────────────────────────────────────────────────────────── */
.brand-film-text {}

.brand-film-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--purple, #8338ec);
    margin-bottom: 14px;
}

.brand-film-headline {
    font-family: 'Bangers', cursive;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.08;
    color: #fff;
    text-shadow: 1px 2px 12px rgba(0,0,0,0.4);
    margin-bottom: 18px;
}

.brand-film-headline .film-accent {
    background: linear-gradient(90deg, #8338ec, #ff006e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.brand-film-sub {
    font-size: 0.95rem;
    color: rgba(232,232,240,0.65);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 400px;
}

.brand-film-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background: linear-gradient(135deg, #8338ec, #ff006e);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(131,56,236,0.35);
}

.brand-film-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(131,56,236,0.5);
    color: #fff;
}

.brand-film-play-icon {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-film-play-icon svg {
    width: 14px; height: 14px;
    margin-left: 2px;
}

/* ── Visual Column ────────────────────────────────────────────────────────── */
.brand-film-visual {}

.brand-film-video-wrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow:
        0 0 0 1px rgba(131,56,236,0.2),
        0 20px 60px rgba(0,0,0,0.55),
        0 0 40px rgba(131,56,236,0.12);
}

.brand-film-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* YouTube facade — loads thumbnail only until clicked */
.yt-facade {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: 12px;
}
.yt-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
}
.yt-facade:hover .yt-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.brand-film-poster-link {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        0 0 0 1px rgba(131,56,236,0.2),
        0 20px 60px rgba(0,0,0,0.55),
        0 0 40px rgba(131,56,236,0.12);
}

.brand-film-poster-link:hover {
    transform: scale(1.015);
    box-shadow:
        0 0 0 1px rgba(131,56,236,0.35),
        0 24px 70px rgba(0,0,0,0.65),
        0 0 60px rgba(131,56,236,0.2);
}

.brand-film-poster {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Play button overlay */
.brand-film-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    transition: background 0.25s;
}

.brand-film-poster-link:hover .brand-film-play-overlay {
    background: rgba(0,0,0,0.18);
}

.brand-film-play-btn {
    width: 68px; height: 68px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.25s;
}

.brand-film-poster-link:hover .brand-film-play-btn {
    background: rgba(131,56,236,0.75);
}

.brand-film-play-btn svg {
    width: 26px; height: 26px;
    margin-left: 3px;
    fill: #fff;
}

/* Pulsing ring */
.brand-film-play-btn::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    animation: film-play-pulse 2s ease-out infinite;
}

.brand-film-poster-link:hover .brand-film-play-btn::before {
    animation: none;
    border-color: rgba(131,56,236,0.5);
}

@keyframes film-play-pulse {
    0%   { transform: scale(1);    opacity: 0.8; }
    70%  { transform: scale(1.35); opacity: 0;   }
    100% { transform: scale(1.35); opacity: 0;   }
}

/* Duration badge */
.brand-film-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .brand-film-content {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Visual stacks first on mobile */
    .brand-film-visual {
        order: -1;
    }

    .brand-film-video-wrap {
        width: calc(100% - 32px);
        max-width: 560px;
        margin: 0 auto;
    }

    .brand-film-text {
        text-align: center;
    }

    .brand-film-sub {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .brand-film-cta {
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .brand-film-section {
        padding: 50px 16px 60px;
        margin: 0 -16px;
    }

    .brand-film-headline {
        font-size: 1.9rem;
    }

    .brand-film-play-btn {
        width: 54px; height: 54px;
    }

    .brand-film-play-btn svg {
        width: 20px; height: 20px;
    }
}

/* ── Affiliate cards (Partnerize) ─────────────────────────────────────── */
.btn-outline {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--pink, #FF006E);
    color: var(--pink, #FF006E);
    border-radius: 8px;
    padding: 9px 14px;
    text-decoration: none;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--pink, #FF006E); color: #fff; text-decoration: none; }
.btn-outline.btn-block { display: block; width: 100%; box-sizing: border-box; }
.btn-outline.btn-sm { padding: 7px 12px; font-size: 0.82rem; }

.affiliate-card { border-top: 2px solid rgba(255,255,255,0.06); }
.affiliate-card h3 { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 10px; }
.affiliate-note { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 8px; }
.affiliate-secondary-link {
    display: block; margin-top: 10px; font-size: 0.8rem;
    color: var(--text-muted); text-decoration: none; text-align: center;
}
.affiliate-secondary-link:hover { color: var(--text-primary); text-decoration: underline; }
.affiliate-card-subtle { background: transparent; box-shadow: none; border: none; padding: 6px 0; }
.affiliate-text-link {
    display: block; font-size: 0.78rem; color: var(--text-muted);
    text-decoration: none; text-align: center; padding: 4px 0;
}
.affiliate-text-link:hover { color: var(--text-primary); text-decoration: underline; }

/* ── The Pit — Post Card (shared across the-pit.php and the-pit-profile.php) ── */
.pit-post { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 12px; transition: border-color 0.15s; }
.pit-post:hover { border-color: rgba(131,56,236,0.3); }
.pit-post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pit-post-avatar img, .pit-post-avatar .pit-avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pit-post-meta { flex: 1; }
.pit-post-handle { font-weight: 700; color: var(--text-primary); text-decoration: none; font-size: 0.95rem; }
.pit-post-handle:hover { color: var(--purple); }
.pit-bot-badge { font-size: 0.7rem; font-weight: 600; color: var(--purple); background: rgba(131,56,236,0.1); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.pit-post-time { font-size: 0.78rem; color: var(--text-muted); }
.pit-post-body { color: var(--text-primary); line-height: 1.6; font-size: 0.97rem; white-space: pre-wrap; word-break: break-word; margin-bottom: 14px; }
.pit-post-anchor { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--purple); background: rgba(131,56,236,0.08); border-radius: 20px; padding: 3px 10px; margin-bottom: 12px; text-decoration: none; }
.pit-post-anchor:hover { background: rgba(131,56,236,0.15); }
.pit-reactions { display: flex; gap: 6px; flex-wrap: wrap; }
.pit-reaction-btn { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border-color); background: none; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); transition: all 0.15s; }
.pit-reaction-btn:hover { border-color: var(--purple); background: rgba(131,56,236,0.08); color: var(--text-primary); }
.pit-reaction-btn.active { border-color: var(--purple); background: rgba(131,56,236,0.12); color: var(--purple); font-weight: 600; }
.pit-reaction-count { min-width: 12px; }
.pit-link { color: var(--purple); text-decoration: none; word-break: break-all; }
.pit-link:hover { text-decoration: underline; }
.pit-post-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pit-post-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pit-action-btn { background: none; border: none; padding: 4px 8px; border-radius: 6px; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s; }
.pit-action-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.pit-delete-btn:hover { color: #ef4444; }
.pit-edit-area { margin-top: 8px; }
.pit-edit-textarea { width: 100%; border: 1.5px solid var(--purple); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); padding: 10px 12px; font-size: 0.97rem; font-family: inherit; line-height: 1.6; resize: none; outline: none; min-height: 80px; }
.pit-edit-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pit-edit-count { font-size: 0.8rem; color: var(--text-muted); }
.pit-save-btn { color: var(--purple); font-weight: 600; }
.pit-save-btn:hover { color: var(--purple); background: rgba(131,56,236,0.1); }
.pit-post-image { margin-top: 10px; border-radius: var(--radius-lg); overflow: hidden; }
.pit-post-image img { display: block; width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius-lg); }
.pit-load-more { display: block; width: 100%; padding: 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-xl); color: var(--purple); font-weight: 600; cursor: pointer; font-size: 0.95rem; transition: background 0.15s; }
.pit-load-more:hover { background: rgba(131,56,236,0.06); }
.pit-caught-up { text-align: center; padding: 32px; color: var(--text-muted); font-size: 0.9rem; }
.pit-empty { text-align: center; padding: 60px; color: var(--text-muted); }
.pit-avatar-placeholder { background: var(--purple); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; }
.pit-avatar-sm { width: 28px !important; height: 28px !important; font-size: 0.75rem !important; }

/* ── Pit post right-actions (reply toggle + edit/delete) ── */
.pit-post-right-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pit-reply-toggle { background: none; border: none; padding: 4px 8px; border-radius: 20px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s; display: flex; align-items: center; gap: 4px; }
.pit-reply-toggle:hover { color: var(--text-primary); background: var(--bg-secondary); }
.pit-reply-count { min-width: 12px; }
.pit-share-btn { background: none; border: none; padding: 4px 8px; border-radius: 20px; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s; display: flex; align-items: center; font-size: 0.78rem; }
.pit-share-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }

/* ── Reply thread ── */
.pit-reply-thread { border-top: 1px solid var(--border-color); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.pit-reply-loading { font-size: 0.85rem; color: var(--text-muted); padding: 8px 0; }
.pit-reply { display: flex; gap: 10px; }
.pit-reply-avatar img, .pit-reply-avatar .pit-avatar-placeholder { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pit-reply-body { flex: 1; }
.pit-reply-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pit-reply-header .pit-post-handle { font-size: 0.88rem; }
.pit-reply-header .pit-post-time { font-size: 0.75rem; }
.pit-reply-text { font-size: 0.9rem; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ── Reply composer ── */
.pit-reply-composer { border-top: 1px dashed var(--border-color); padding-top: 10px; margin-top: 4px; }
.pit-reply-textarea { width: 100%; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); padding: 8px 12px; font-size: 0.9rem; font-family: inherit; resize: none; outline: none; transition: border-color 0.15s; }
.pit-reply-textarea:focus { border-color: var(--purple); }
.pit-reply-composer-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pit-reply-charcount { font-size: 0.78rem; color: var(--text-muted); }
.pit-reply-status { font-size: 0.8rem; margin-top: 4px; min-height: 16px; }
.pit-reply-gate { font-size: 0.85rem; color: var(--text-muted); padding: 8px 0; margin: 0; }
.pit-reply-delete-btn { font-size: 0.72rem; padding: 2px 6px; margin-left: auto; }
.pit-reply-delete-btn:hover { color: #ef4444; }

/* ── Follow button ── */
.pit-follow-btn { min-width: 90px; }
.pit-follow-btn.following { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
.pit-follow-btn.following:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.06); }
.pit-profile-actions { margin-left: auto; flex-shrink: 0; }

/* Light mode overrides for replies/follows */
[data-theme="light"] .pit-reply-textarea { background: #f8f9fa; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .pit-reply-thread { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .pit-follow-btn.following { background: #f5f5f5; border-color: rgba(0,0,0,0.15); color: #555; }

/* ===========================================
   MOBILE RESPONSIVE FIXES
   musick.com.au - January 2026
   84% of traffic is mobile - these fixes are critical
   =========================================== */

/* ============================================
   PHASE 1: CRITICAL FIXES
   ============================================ */

/* 1.1 Touch Targets - Minimum 44px for all interactive elements */
@media (max-width: 768px) {
    /* Global touch target minimums */
    button,
    .btn,
    a.btn,
    .genre-tag,
    .year-btn,
    .filter-btn,
    .nav-tab,
    .playlist-add-btn,
    .remove-btn,
    .venue-badge,
    .city-link,
    .tab-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Genre tags - larger padding for touch */
    .genre-tag {
        padding: 12px 18px;
        font-size: 0.9rem;
    }

    /* Filter buttons */
    .filter-btn,
    .year-btn {
        padding: 12px 16px;
    }

    /* Playlist buttons */
    .playlist-add-btn {
        padding: 12px;
    }

    /* Remove buttons */
    .remove-btn {
        padding: 12px;
    }

    /* Venue badges */
    .venue-badge {
        padding: 10px 16px;
    }

    /* 1.1b HERO TEXT - CRITICAL: Make readable on dark backgrounds */
    .hero h1,
    .hero-content h1,
    section.hero h1 {
        color: #ffffff !important;
        text-shadow: 2px 2px 0 #8338EC,
                     4px 4px 0 #FF006E,
                     0 0 20px rgba(0,0,0,0.9) !important;
    }

    .hero .subtitle,
    .hero p,
    .hero-content .subtitle,
    .hero-content p {
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,0.9) !important;
        opacity: 1 !important;
    }
}

/* 1.1c HIDE SOURCE BADGES ON ALL MOBILE/TABLET - use color-coded position instead */
@media (max-width: 1024px) {
    .song-item .source-badge,
    .song-item .source-badge.all-time,
    .song-item .source-badge.annual {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Color-coded position numbers for National countdown (tablet) */
    .song-item.source-all-time .position {
        color: #FFD700 !important; /* Gold for All Time */
        text-shadow: 0 1px 2px rgba(255, 140, 0, 0.5);
    }

    .song-item.source-annual .position {
        color: #3A86FF !important; /* Blue for Hottest 100 */
        text-shadow: 0 1px 2px rgba(131, 56, 236, 0.5);
    }
}

/* 1.2 SONG CARDS - REDESIGNED FOR MOBILE */
/* Layout: [Album Art with Rank Overlay] [Song Info] [Vertical Icons] */
@media (max-width: 768px) {
    .song-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        background: var(--bg-card, rgba(30, 30, 50, 0.8));
        border-radius: 12px;
        margin-bottom: 8px;
        min-height: auto;
        position: relative;
    }

    /* Album art wrapper - contains art + rank overlay */
    .song-item .album-art-wrapper,
    .song-item .song-image {
        position: relative;
        flex-shrink: 0;
    }

    /* Album art - 80px square */
    .song-item .album-art {
        display: flex !important;
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        aspect-ratio: 1/1 !important;
        flex-shrink: 0;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        background-color: rgba(131, 56, 236, 0.3);
    }

    /* Position/Rank - overlay on album art top-left */
    /* Note: Position is at left:12px padding + 4px offset = 16px, top:10px padding + 4px = 14px */
    .song-item .position {
        position: absolute !important;
        top: 14px;
        left: 16px;
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 6px;
        z-index: 2;
        color: #ffffff;
    }

    /* Color-coded position for National countdown */
    .song-item.source-all-time .position {
        color: #FFD700 !important; /* Gold for All Time */
        background: rgba(0, 0, 0, 0.85);
    }

    .song-item.source-annual .position {
        color: #3A86FF !important; /* Blue for Hottest 100 */
        background: rgba(0, 0, 0, 0.85);
    }

    /* Hide source badges on mobile - position color indicates source */
    .song-item .source-badge {
        display: none !important;
    }

    /* Song info - fills remaining space */
    .song-item .song-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
        padding-right: 4px;
    }

    /* Song title - white, allow wrap to 2 lines max */
    .song-item .song-title {
        font-size: 1rem;
        font-weight: 600;
        color: #ffffff !important;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Artist name - light purple */
    .song-item .artist-name {
        font-size: 0.85rem;
        color: #E9D5FF !important;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Genre badge - hide on mobile */
    .song-item .song-genre {
        display: none !important;
    }

    /* Year - subtle, below artist */
    .song-item .song-year {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.5);
        display: block;
    }

    /* Song title row - keep compact */
    .song-item .song-title-row {
        display: block;
        line-height: 1.25;
    }

    /* Song meta row - single line */
    .song-item .song-meta-row {
        display: block;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Actions - VERTICAL column on right */
    .song-item .song-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
    }

    /* Compact action buttons on mobile — icons only, no text */
    .song-item .playlist-add-btn,
    .song-item .spotify-btn,
    .song-item .youtube-btn,
    .song-item .btn-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 8px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 0; /* Hide text labels */
        border: none;
    }

    .song-item .spotify-btn,
    .song-item .youtube-btn {
        background: rgba(131, 56, 236, 0.3);
    }

    /* Hide SVG icons — emoji ::before provides the compact icon */
    .song-item .spotify-btn svg,
    .song-item .youtube-btn svg {
        display: none;
    }

    .song-item .spotify-btn::before {
        content: "🎧";
        font-size: 1.1rem;
    }

    .song-item .youtube-btn::before {
        content: "▶️";
        font-size: 1rem;
    }

    /* Find/search button variant */
    .song-item .spotify-btn[style*="opacity"]::before,
    .song-item .search-btn::before {
        content: "🔍";
        font-size: 1rem;
    }
}

/* Even smaller screens - reduce album art to 60px */
@media (max-width: 380px) {
    .song-item {
        gap: 10px !important;
        padding: 8px 10px !important;
    }

    .song-item .album-art {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }

    /* Adjust position overlay for smaller padding */
    .song-item .position {
        top: 12px;
        left: 14px;
        font-size: 0.65rem;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
    }

    .song-item .song-title {
        font-size: 0.9rem;
    }

    .song-item .artist-name {
        font-size: 0.8rem;
    }

    .song-item .spotify-btn,
    .song-item .youtube-btn,
    .song-item .btn-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
}

/* 1.3 Reduced Header Height on Mobile */
@media (max-width: 768px) {
    .main-nav,
    .site-header {
        height: 56px !important;
        min-height: 56px !important;
    }

    .nav-logo img {
        height: 32px;
    }

    /* Nav tabs - horizontal scroll instead of stacking */
    .nav-tabs {
        position: relative;
        top: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        padding: 8px 16px;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .tab-btn,
    .nav-tabs .nav-tab {
        display: inline-flex;
        flex-shrink: 0;
    }
}

/* ============================================
   PHASE 2: LAYOUT IMPROVEMENTS
   ============================================ */

/* 2.1 Grid Minimums - Prevent horizontal scroll on small screens */
@media (max-width: 480px) {
    /* Cities grid - single column on very small screens */
    .cities-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Stats grid - 2 columns on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* Gig info cards - single column */
    .gig-info-cards {
        grid-template-columns: 1fr !important;
    }

    /* Similar artists grid */
    .similar-artists-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Venue grid */
    .venues-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 600px) {
    /* Cities grid - allow smaller cards */
    .cities-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* City cards - smaller padding */
    .city-card {
        padding: 24px 16px;
    }

    .city-card h3 {
        font-size: 1.25rem;
    }

    /* Stat cards - smaller padding */
    .stat-card {
        padding: 16px 12px;
    }

    .stat-card h4 {
        font-size: 1.5rem;
    }
}

/* 2.2 Sidebar Content Reordering - CTAs above fold on mobile */
@media (max-width: 900px) {
    .artist-layout,
    .venue-layout,
    .gig-layout,
    .page-layout {
        display: flex;
        flex-direction: column;
    }

    /* Move important CTAs to top */
    .sidebar .ticket-card,
    .sidebar .streaming-links,
    .sidebar .rsvp-card,
    .sidebar .cta-card {
        order: -1;
    }

    .sidebar {
        order: -1;
        margin-bottom: 24px;
    }
}

/* 2.3 Horizontal Scroll for Filters */
@media (max-width: 768px) {
    .genre-filter,
    .filter-row,
    .year-filter,
    .tabs-container {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 8px;
        flex-wrap: nowrap;
    }

    .genre-filter::-webkit-scrollbar,
    .filter-row::-webkit-scrollbar,
    .year-filter::-webkit-scrollbar,
    .tabs-container::-webkit-scrollbar {
        display: none;
    }

    .genre-filter > *,
    .filter-row > *,
    .year-filter > * {
        flex-shrink: 0;
    }
}

/* ============================================
   PHASE 3: POLISH & ENHANCEMENTS
   ============================================ */

/* 3.1 Mobile Menu - Full screen scrollable overlay */
@media (max-width: 768px) {
    .mobile-menu {
        position: fixed;
        top: 56px; /* Below header */
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary, #0a0a1a);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
        z-index: 999;
        padding: 20px;
        padding-bottom: 100px; /* Extra space at bottom for safe area */
    }

    .mobile-menu.active {
        transform: translateX(0);
    }

    /* Prevent body scroll when menu open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        top: 0;
        left: 0;
        right: 0;
        touch-action: none !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* Ensure mobile menu captures all touch events */
    .mobile-menu.active {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-menu-overlay {
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* 3.2 Improved Typography for Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.15rem;
    }

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

    .page-title {
        font-size: 1.5rem;
    }

    /* Container padding */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 3.3 Cards and Content Blocks */
@media (max-width: 768px) {
    .card,
    .content-card,
    .info-card {
        padding: 16px;
        border-radius: 12px;
    }

    /* Gig cards */
    .gig-card {
        padding: 14px;
    }

    .gig-card .gig-title {
        font-size: 1rem;
    }

    /* Artist cards */
    .artist-card {
        padding: 12px;
    }

    /* Venue cards */
    .venue-card {
        padding: 14px;
    }
}

/* 3.4 Tables - Horizontal scroll */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 500px;
    }

    th, td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
}

/* 3.5 Forms on Mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* 3.6 Modal/Dialog on Mobile */
@media (max-width: 768px) {
    .modal,
    .dialog {
        width: 95%;
        max-width: none;
        margin: 16px;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ============================================
   SPECIFIC PAGE FIXES
   ============================================ */

/* Homepage */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 16px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

/* City Page */
@media (max-width: 768px) {
    .city-header {
        padding: 24px 16px;
    }

    .countdown-section {
        padding: 16px;
    }

    /* Hero title size for city pages */
    .hero h1 {
        font-size: 1.8rem !important;
    }

    /* Year links in subtitle */
    .hero .subtitle a,
    .hero p a {
        color: #FFD93D !important;
        text-decoration: underline;
    }
}

/* Artist Gig Hero Strip */
.artist-gig-hero-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.artist-next-gig {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 24px;
    padding: 7px 14px;
    text-decoration: none;
    color: #fff;
    font-size: 0.82rem;
    transition: background 0.15s;
    backdrop-filter: blur(6px);
}
.artist-next-gig:hover { background: rgba(255,255,255,0.18); }
.ang-label {
    color: #FF006E;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}
.ang-date { font-weight: 700; }
.ang-venue {
    color: rgba(255,255,255,0.75);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ang-more {
    background: rgba(255,0,110,0.2);
    color: #FF006E;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}
.ang-tickets {
    background: #FF006E;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.ang-tickets:hover { background: #d4005d; }

/* Artist Page */
@media (max-width: 768px) {
    .artist-header {
        flex-direction: column;
        text-align: center;
    }

    .artist-image {
        width: 150px;
        height: 150px;
        margin: 0 auto 16px;
    }

    .artist-bio {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Gig Page */
@media (max-width: 768px) {
    .gig-header {
        padding: 20px 16px;
    }

    .gig-details {
        font-size: 0.95rem;
    }

    .ticket-btn {
        width: 100%;
        padding: 16px;
        font-size: 1.1rem;
    }
}

/* Charts Page */
@media (max-width: 768px) {
    .chart-item {
        padding: 12px;
    }

    .chart-position {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-gap-sm {
        gap: 8px !important;
    }

    .mobile-p-sm {
        padding: 12px !important;
    }
}

/* Hide on desktop, show on mobile */
.show-mobile,
.show-mobile-flex {
    display: none;
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */

html, body {
    overflow-x: clip;
    max-width: 100vw;
}

@media (max-width: 768px) {
    * {
        max-width: 100%;
    }

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

    pre, code {
        overflow-x: auto;
        max-width: 100%;
    }
}

/* ============================================
   PHASE 4: VISUAL POLISH (WP2)
   ============================================ */

/* 4.1 Artist Hero Text Contrast — stronger shadow for mobile readability */
@media (max-width: 900px) {
    .artist-hero h1 {
        text-shadow:
            2px 2px 0 rgba(0,0,0,0.5),
            0 0 20px rgba(0,0,0,0.8),
            0 0 40px rgba(0,0,0,0.4) !important;
    }

    .artist-location {
        text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    }

    .artist-hero-stats .hero-stat {
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* 4.2 Filter Bar — fade edges as scroll indicators */
.filter-row,
.genre-filter,
.year-filter,
.countdown-filters .filters-top-row {
    position: relative;
}

@media (max-width: 768px) {
    /* Fade-edge scroll indicator wrapper */
    .filter-scroll-wrapper {
        position: relative;
        overflow: hidden;
    }

    .filter-scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, var(--bg-primary, #1a1a2e));
        pointer-events: none;
        z-index: 2;
    }

    [data-theme="light"] .filter-scroll-wrapper::after {
        background: linear-gradient(to right, transparent 20%, var(--bg-primary, #e8e4f0));
    }

    /* Apply fade to filter rows that scroll horizontally */
    .filter-row {
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }
}

/* 4.3 Card Spacing Consistency — unified padding and gap rhythm */
@media (max-width: 768px) {
    .gig-card,
    .venue-card,
    .artist-card,
    .post-card,
    .card {
        padding: 16px;
        border-radius: 12px;
    }

    /* Consistent card grid gaps */
    .gigs-list,
    .venue-grid,
    .artists-grid,
    .posts-grid {
        gap: 12px;
    }

    /* Card image containers — consistent aspect ratio */
    .gig-card .gig-image,
    .venue-card .venue-image,
    .post-card .post-image {
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 8px;
    }

    .gig-card .gig-image img,
    .venue-card .venue-image img,
    .post-card .post-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Artist card images — square aspect ratio */
    .artist-card .artist-image,
    .artist-card .card-image {
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 8px;
    }

    .artist-card .artist-image img,
    .artist-card .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* 4.4 Blog Card Headlines — ensure semibold, no italic, good line height */
.post-content h2 {
    font-weight: 600;
    font-style: normal;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .post-content h2 {
        font-size: 1.1rem;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 4.5 Image Aspect Ratios — prevent layout shift */
.city-card img,
.venue-card img:not(.icon),
.post-card .post-image img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.artist-card img:not(.icon) {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* 4.6 Touch-friendly spacing for interactive lists */
@media (max-width: 768px) {
    .gig-card + .gig-card,
    .venue-card + .venue-card {
        margin-top: 8px;
    }

    /* Ensure link areas are large enough */
    .gig-card a,
    .venue-card a {
        display: block;
        padding: 4px 0;
    }
}

/* ============================================
   MOBILE POLISH - Global CSS Fixes
   Added 2026-02-23
   ============================================ */

/* iOS Safe Area */
body {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* mobile-sticky-cta is the gig page's bottom action bar — class name
   diverges from .sticky-cta but the safe-area need is identical
   (iPhones with home indicator otherwise render the buttons UNDER
   the indicator, half-tappable). */
.site-footer, .bottom-nav, .sticky-cta, .mobile-sticky-cta {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
    /* Bump tiny fonts to readable size */
    * { -webkit-text-size-adjust: 100%; }
    
    /* 0.7rem (11.2px) → 0.8rem */
    .meta-text, .source-badge, .time-ago, .stat-label,
    .gig-meta small, .artist-meta small, .venue-meta small,
    .badge-sm, .tag-sm { font-size: 0.8rem !important; }
    
    /* 0.75rem (12px) → 0.85rem */  
    .breadcrumb, .breadcrumb a, .pagination .page-info,
    .chart-label, .legend-text { font-size: 0.85rem !important; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.8rem !important; }
    .hero h1, .hero-content h1 { font-size: 2rem !important; }
    h2 { font-size: 1.4rem !important; }
    .subtitle { font-size: 0.95rem !important; }
    
    [style*="font-size: 4rem"],
    [style*="font-size: 3.5rem"],
    [style*="font-size: 3rem"] {
        font-size: 2rem !important;
    }
    [style*="font-size: 2.5rem"] {
        font-size: 1.6rem !important;
    }
}

@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .container, .content, main, section { max-width: 100%; overflow-x: hidden; }
    img, video, iframe { max-width: 100%; height: auto; }
    pre, code { overflow-x: auto; max-width: 100%; word-break: break-all; }
    table { display: block; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 768px) {
    /* Card spacing */
    .gig-card, .artist-card, .venue-card, .festival-card, .blog-card {
        margin-bottom: 12px;
    }
    
    /* List item spacing for fat fingers */
    .gig-list-item, .artist-list-item, .venue-list-item {
        padding: 14px 16px;
        margin-bottom: 4px;
    }
    
    /* Links in text need breathing room */
    .content-body a, .post-body a {
        padding: 2px 0;
    }
}

@media (max-width: 768px) {
    .page-content, main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .two-col, .three-col,
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    
    .flex-row-desktop {
        flex-direction: column;
    }
}

/* === City page & Artists page mobile fixes === */
@media (max-width: 480px) {
    /* City page: artist grid single column */
    .featured-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .featured-grid .artist-card {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Artists list: hide genre and stats columns, shrink city */
    .artist-row__genre {
        display: none;
    }
    
    .artist-row__stats {
        display: none;
    }
    
    .artist-row__city {
        width: auto;
        flex-shrink: 0;
        font-size: 0.8rem;
        max-width: 80px;
        text-align: right;
    }
    
    .artist-row {
        padding: 10px 14px;
    }
    
    .artist-row__name {
        font-size: 0.9rem;
    }
    
    .artist-row--header .artist-row__genre,
    .artist-row--header .artist-row__stats {
        display: none;
    }
    
    /* Featured grid 2-col on tablet, will be 1-col at 480px above */
    .featured-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .featured-grid .artist-card {
        min-width: 0;
    }
    
    .featured-grid .artist-card img {
        height: 140px;
        object-fit: cover;
    }
    
    /* Alpha letter navigation: scrollable */
    .alpha-nav, .letter-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 8px;
    }
}

/* ══════════════════════════════════════════════
   SVG Icon System — musick.com.au
   Inline SVGs inherit currentColor for theme support.
   ══════════════════════════════════════════════ */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

/* Size variants */
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* Filled variant */
.icon-filled {
    stroke: none;
    fill: currentColor;
}

/* Icon in navigation links — ensure alignment */
.nav-link .icon,
.mobile-link .icon,
.dropdown-item .icon {
    margin-right: 6px;
    opacity: 0.85;
}

/* Icon in quick links */
.ql-icon .icon {
    vertical-align: -2px;
}

/* Icon in section headers */
h2 .icon,
h3 .icon {
    margin-right: 8px;
    vertical-align: -3px;
}

/* Icon in stat/badge contexts — slightly larger */
.contribute-icon .icon {
    width: 32px;
    height: 32px;
}

/* Icon color utilities */
.icon-pink { color: var(--pink, #FF006E); }
.icon-purple { color: var(--purple, #8338EC); }
.icon-teal { color: #14b8a6; }
.icon-gold { color: #f59e0b; }
.icon-green { color: #10b981; }
.icon-muted { opacity: 0.6; }

/* Animated icon states */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

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

/* Badge icon containers */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(131, 56, 236, 0.15);
}

.icon-badge .icon {
    color: var(--purple, #8338EC);
}

.icon-badge-pink {
    background: rgba(255, 0, 110, 0.15);
}

.icon-badge-pink .icon {
    color: var(--pink, #FF006E);
}

/* Mobile touch target — ensures icons in buttons meet 44px minimum */
@media (max-width: 768px) {
    button .icon,
    a .icon {
        /* Icon itself stays small, parent element handles touch target */
    }
}

/* ══════════════════════════════════════════════
   Musick Marketplace
   ══════════════════════════════════════════════ */

/* Layout */
.mp-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* Breadcrumb */
.mp-breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.mp-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.mp-breadcrumb a:hover { color: var(--purple); }
.mp-breadcrumb-sep { margin: 0 6px; opacity: 0.5; }

/* Form shared */
.mp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.mp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mp-label { font-size: 0.88rem; font-weight: 600; color: var(--text-secondary); }
.mp-required { color: var(--pink, #FF006E); }
.mp-input, .mp-select, .mp-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.93rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.mp-input:focus, .mp-select:focus, .mp-textarea:focus { border-color: var(--purple); }
.mp-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.mp-textarea { resize: vertical; min-height: 100px; }
.mp-input-prefix-wrap { display: flex; align-items: stretch; }
.mp-input-prefix { padding: 10px 12px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-color); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); color: var(--text-muted); font-size: 0.93rem; }
.mp-input-price { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.mp-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; margin-top: 4px; }
.mp-checkbox-label input { accent-color: var(--purple); }
.mp-field-hint { font-size: 0.78rem; color: var(--text-muted); }
.mp-field-hint-inline { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }
.mp-file-input { font-size: 0.85rem; color: var(--text-muted); }
.mp-form-error { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 16px; }
.mp-form-footer { margin-top: 8px; }
.mp-form-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 10px; }

/* ── Hub Hero ── */
.mp-hero { background: linear-gradient(135deg, rgba(131,56,236,0.15) 0%, rgba(255,0,110,0.1) 100%); border: 1px solid rgba(131,56,236,0.2); border-radius: var(--radius-xl); padding: 48px 32px; margin-bottom: 40px; text-align: center; }
.mp-hero-title { font-size: 2rem; font-weight: 700; margin: 0 0 12px; }
.mp-hero-sub { color: var(--text-muted); font-size: 1.05rem; margin: 0 0 24px; line-height: 1.5; }
.mp-hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.mp-login-link { font-size: 0.88rem; color: var(--text-muted); text-decoration: none; }
.mp-login-link:hover { color: var(--purple); }
.mp-hero-stat { font-size: 0.85rem; color: var(--text-muted); margin: 16px 0 0; }

/* ── Section ── */
.mp-section { margin-bottom: 48px; }
.mp-section-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 20px; }
.mp-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mp-section-header .mp-section-title { margin: 0; }

/* ── Category Grid ── */
.mp-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.mp-category-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); transition: border-color 0.2s, transform 0.15s, background 0.2s; position: relative; text-align: center; }
.mp-category-card:hover { border-color: var(--purple); background: rgba(131,56,236,0.08); transform: translateY(-2px); color: var(--text-primary); text-decoration: none; }
.mp-category-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; background: rgba(131,56,236,0.12); border-radius: var(--radius-md); color: var(--purple); transition: background 0.2s, color 0.2s; }
.mp-category-card:hover .mp-category-icon { background: rgba(131,56,236,0.22); }
.mp-category-label { font-size: 0.82rem; font-weight: 600; line-height: 1.3; }
.mp-category-count { position: absolute; top: 8px; right: 8px; font-size: 0.7rem; background: rgba(131,56,236,0.25); color: var(--purple); padding: 2px 6px; border-radius: 20px; font-weight: 600; }

/* ── Listing Grid ── */
.mp-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* ── Listing Card ── */
.mp-listing-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--text-primary); transition: border-color 0.2s, transform 0.15s; }
.mp-listing-card:hover { border-color: var(--purple); transform: translateY(-2px); color: var(--text-primary); text-decoration: none; }
.mp-listing-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: rgba(255,255,255,0.05); }
.mp-listing-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-listing-img-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.5rem; opacity: 0.4; }
.mp-listing-badge { position: absolute; top: 8px; left: 8px; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.03em; text-transform: uppercase; }
.mp-badge-free { background: #10b981; color: #fff; }
.mp-badge-barter { background: #f59e0b; color: #fff; }
.mp-badge-wanted { background: #6366f1; color: #fff; }
.mp-badge-private { background: rgba(100,116,139,0.75); color: #fff; }
.mp-badge-retail { background: #0ea5e9; color: #fff; }
.mp-badge-affiliate { background: #FF9900; color: #fff; }
.mp-listing-info { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mp-listing-category { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mp-listing-title { font-size: 0.9rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-listing-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mp-listing-price { font-size: 0.95rem; font-weight: 700; color: var(--purple); }
.mp-listing-cond { font-size: 0.75rem; color: var(--text-muted); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 10px; }
.mp-listing-location { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; }

/* ── Empty ── */
.mp-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.mp-empty p { font-size: 1.05rem; margin-bottom: 16px; }
.mp-view-all { text-align: center; margin-top: 24px; }

/* ── Band callout ── */
.mp-band-callout { background: linear-gradient(135deg, rgba(255,0,110,0.08), rgba(131,56,236,0.08)); border: 1px solid rgba(131,56,236,0.15); border-radius: var(--radius-xl); padding: 24px 28px; }
.mp-band-callout-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mp-band-icon { font-size: 2rem; flex-shrink: 0; }
.mp-band-callout-inner > div { flex: 1; min-width: 200px; }
.mp-band-callout-inner h3 { margin: 0 0 4px; font-size: 1.05rem; }
.mp-band-callout-inner p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

/* ── Affiliate Widget ── */
.mp-affiliate-section { margin-bottom: 40px; }
.mp-affiliate-hub-section { margin-bottom: 32px; }
.mp-affiliate-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mp-affiliate-header .mp-affiliate-label { font-size: 1rem; font-weight: 700; }
.mp-affiliate-hub-section .mp-section-header { align-items: center; }
.mp-affiliate-disclosure, .mp-affiliate-hub-disclosure { font-size: 0.72rem; font-weight: 600; color: #FF9900; background: rgba(255,153,0,0.1); border: 1px solid rgba(255,153,0,0.3); padding: 2px 8px; border-radius: 20px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.mp-affiliate-grid { /* inherits mp-listing-grid */ }
.mp-affiliate-card { border-color: rgba(255,153,0,0.2); }
.mp-affiliate-card:hover { border-color: #FF9900; box-shadow: 0 4px 20px rgba(255,153,0,0.15); }
.mp-affiliate-card .mp-listing-img { background: #fff; }
.mp-affiliate-card .mp-listing-img img { object-fit: contain; padding: 8px; }
.mp-affiliate-brand { color: #FF9900 !important; font-weight: 600 !important; }
.mp-affiliate-cond { background: rgba(255,153,0,0.12) !important; color: #b96b00 !important; }
[data-theme="light"] .mp-affiliate-cond { color: #b96b00 !important; }
.mp-affiliate-cta { font-size: 0.82rem; font-weight: 700; color: #FF9900; margin-top: auto; padding-top: 6px; }

/* ── Category Page ── */
.mp-cat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.mp-cat-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.mp-cat-desc { color: var(--text-muted); font-size: 0.93rem; margin: 0; }
.mp-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.mp-filter-search { flex: 1; min-width: 180px; padding: 9px 14px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.88rem; outline: none; }
.mp-filter-search:focus { border-color: var(--purple); }
.mp-filter-select { padding: 9px 32px 9px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.88rem; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.mp-filter-select:focus { border-color: var(--purple); }
.mp-filter-clear { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; padding: 4px 8px; }
.mp-filter-clear:hover { color: var(--text-primary); }
.mp-cat-stats { font-size: 0.83rem; color: var(--text-muted); margin-bottom: 16px; }
.mp-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 32px; justify-content: center; }
.mp-page-btn { padding: 7px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: 0.88rem; transition: all 0.15s; }
.mp-page-btn:hover, .mp-page-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; text-decoration: none; }
/* ── Category page two-column body ── */
.mp-cat-body { display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: start; }
.mp-cat-main { min-width: 0; }
.mp-cat-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }

/* Sidebar blocks */
.mp-sidebar-block { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; }
.mp-sidebar-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 12px; }

/* Sidebar category list */
.mp-sidebar-cats { display: flex; flex-direction: column; gap: 2px; }
.mp-sidebar-cat { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-md); font-size: 0.88rem; color: var(--text-secondary); text-decoration: none; transition: background 0.15s, color 0.15s; }
.mp-sidebar-cat:hover { background: var(--bg-secondary); color: var(--text-primary); text-decoration: none; }
.mp-sidebar-cat.active { background: rgba(131,56,236,0.1); color: var(--purple); font-weight: 600; }
.mp-sidebar-cat-icon { flex-shrink: 0; opacity: 0.7; }
.mp-sidebar-cat.active .mp-sidebar-cat-icon { opacity: 1; }
.mp-sidebar-cat-label { flex: 1; }
.mp-sidebar-cat-count { font-size: 0.72rem; color: var(--text-muted); background: var(--bg-secondary); padding: 1px 6px; border-radius: 10px; }
.mp-sidebar-cat.active .mp-sidebar-cat-count { background: rgba(131,56,236,0.15); color: var(--purple); }

/* Post CTA block */
.mp-sidebar-post { text-align: center; }
.mp-sidebar-post p { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 10px; }
.btn-block { width: 100%; justify-content: center; }

/* Collapse sidebar to bottom on narrow screens */
@media (max-width: 860px) {
    .mp-cat-body { grid-template-columns: 1fr; }
    .mp-cat-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    .mp-sidebar-block { flex: 1; min-width: 200px; }
}

/* ── New Listing Form ── */
.mp-new-form-wrap { max-width: 680px; margin: 0 auto; }
.mp-new-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; }
.mp-new-sub { color: var(--text-muted); font-size: 0.93rem; margin: 0 0 28px; }
.mp-new-form { display: flex; flex-direction: column; }
.btn-lg { padding: 13px 32px; font-size: 1rem; }
.btn-sm { padding: 7px 16px; font-size: 0.83rem; }

/* ── Posted Banner ── */
.mp-lifecycle-banner { border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 24px; font-size: 0.93rem; }
.mp-lifecycle-banner a { font-weight: 600; text-decoration: underline; }
.mp-lifecycle-sold { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); color: var(--text-primary); }
.mp-lifecycle-expired { background: rgba(100,116,139,0.08); border: 1px solid rgba(100,116,139,0.25); color: var(--text-muted); }
.mp-detail-inactive { opacity: 0.75; pointer-events: none; }
.mp-detail-inactive .mp-detail-price { text-decoration: line-through; color: var(--text-muted); }
.mp-posted-banner { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(131,56,236,0.1)); border: 1px solid rgba(16,185,129,0.3); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 24px; font-size: 0.93rem; }

/* ── Listing Detail ── */
.mp-listing-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.mp-detail-gallery { position: sticky; top: 80px; }
.mp-gallery-main { border-radius: var(--radius-lg); overflow: hidden; background: rgba(255,255,255,0.04); aspect-ratio: 4/3; }
.mp-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mp-gallery-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: 0.6; border: 2px solid transparent; transition: opacity 0.15s, border-color 0.15s; }
.mp-gallery-thumb.active, .mp-gallery-thumb:hover { opacity: 1; border-color: var(--purple); }
.mp-detail-no-image { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.mp-detail-category { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.mp-detail-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 10px; line-height: 1.2; }
.mp-detail-price { font-size: 1.5rem; font-weight: 700; color: var(--purple); margin-bottom: 16px; }
.mp-detail-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.mp-detail-meta-item { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--text-muted); }
.mp-band-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mp-band-tag { padding: 4px 12px; background: rgba(131,56,236,0.15); border: 1px solid rgba(131,56,236,0.25); border-radius: var(--radius-pill); font-size: 0.82rem; color: var(--purple); }
.mp-detail-description { font-size: 0.93rem; color: var(--text-secondary); line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin-bottom: 24px; }
.mp-owner-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ── Enquiry Form ── */
.mp-enquiry-form { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; margin-top: 8px; }
.mp-enquiry-form h3 { font-size: 1rem; font-weight: 700; margin: 0 0 16px; }
.mp-enquiry-sent { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); border-radius: var(--radius-md); padding: 14px 18px; font-size: 0.93rem; margin-top: 8px; }

/* ── My Listings ── */
.mp-my-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.mp-my-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.mp-status-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mp-status-pending { background: rgba(245,158,11,0.2); color: #fcd34d; }
.mp-status-active { background: rgba(16,185,129,0.2); color: #6ee7b7; }
.mp-status-sold { background: rgba(99,102,241,0.2); color: #a5b4fc; }
.mp-status-expired { background: rgba(107,114,128,0.2); color: #9ca3af; }
.mp-status-rejected { background: rgba(239,68,68,0.2); color: #fca5a5; }
.mp-listing-rows { display: flex; flex-direction: column; gap: 12px; }
.mp-listing-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px; transition: border-color 0.15s; }
.mp-listing-row:hover { border-color: rgba(131,56,236,0.3); }
.mp-listing-row-thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; overflow: hidden; flex-shrink: 0; }
.mp-listing-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mp-listing-row-info { min-width: 0; }
.mp-listing-row-title { font-size: 0.93rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-listing-row-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-listing-row-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.mp-sold-notice { background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.88rem; margin-bottom: 20px; }
.mp-no-listings { text-align: center; padding: 48px 20px; }
.mp-no-listings p { color: var(--text-muted); margin-bottom: 20px; }

/* ── Light mode overrides ── */
[data-theme="light"] .mp-hero { background: linear-gradient(135deg, rgba(131,56,236,0.07) 0%, rgba(255,0,110,0.05) 100%); border-color: rgba(131,56,236,0.15); }
[data-theme="light"] .mp-input, [data-theme="light"] .mp-select, [data-theme="light"] .mp-textarea { background: #fff; border-color: rgba(0,0,0,0.15); color: #1a1a2e; }
[data-theme="light"] .mp-filter-search, [data-theme="light"] .mp-filter-select { background: #fff; border-color: rgba(0,0,0,0.12); color: #1a1a2e; }
[data-theme="light"] .mp-input-prefix { background: #f5f5f5; border-color: rgba(0,0,0,0.15); color: #666; }
[data-theme="light"] .mp-listing-card { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .mp-listing-card:hover { border-color: var(--purple); }
[data-theme="light"] .mp-category-card { background: #fff; border-color: rgba(0,0,0,0.1); color: #1a1a2e; }
[data-theme="light"] .mp-category-card:hover { background: rgba(131,56,236,0.06); border-color: var(--purple); }
[data-theme="light"] .mp-enquiry-form { background: #f8f8fc; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .mp-listing-row { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .mp-other-cat { background: #f5f5f5; border-color: rgba(0,0,0,0.1); color: #444; }
[data-theme="light"] .mp-page-btn { background: #f0f0f5; border-color: rgba(0,0,0,0.1); color: #444; }
[data-theme="light"] .mp-filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0,0,0,0.35)'/%3E%3C/svg%3E"); }
[data-theme="light"] .mp-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(0,0,0,0.35)'/%3E%3C/svg%3E"); }
[data-theme="light"] .mp-band-callout { background: linear-gradient(135deg, rgba(255,0,110,0.04), rgba(131,56,236,0.04)); border-color: rgba(131,56,236,0.12); }

/* ── Responsive ── */
@media (max-width: 900px) {
    .mp-listing-detail { grid-template-columns: 1fr; }
    .mp-detail-gallery { position: static; }
}
@media (max-width: 640px) {
    .mp-hero { padding: 32px 20px; }
    .mp-hero-title { font-size: 1.5rem; }
    .mp-category-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .mp-listing-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .mp-field-row { grid-template-columns: 1fr; }
    .mp-listing-detail { gap: 20px; }
    .mp-cat-header { flex-direction: column; align-items: flex-start; }
    .mp-detail-title { font-size: 1.3rem; }
    .mp-listing-row { grid-template-columns: 52px 1fr auto; }
}

/* ── Discover Musick Strip ───────────────────────────────────────────── */
.discover-strip {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1150 50%, #1a0a2e 100%);
    padding: 48px 20px 56px;
    margin: 40px 0 0;
}
.discover-strip-inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.discover-strip-heading {
    font-family: 'Bangers', cursive;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: 2px;
    color: #fff;
    margin: 0 0 8px;
}
.discover-strip-sub {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    margin: 0 0 32px;
}
.discover-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.discover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.discover-card:hover {
    background: rgba(131,56,236,0.2);
    border-color: rgba(131,56,236,0.5);
    transform: translateY(-2px);
}
.discover-card-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.discover-card-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}
.discover-card-desc {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 1.3;
}
@media (max-width: 700px) {
    .discover-strip { padding: 40px 16px 48px; }
    .discover-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Weekly Charts ===== */
.weekly-charts-section { padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.weekly-charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.weekly-chart-card { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: var(--card-bg); border-radius: 12px; text-decoration: none; color: var(--text-color); border: 1px solid rgba(255,255,255,0.06); transition: transform 0.2s, border-color 0.2s; }
.weekly-chart-card:hover { transform: translateY(-2px); border-color: var(--pink); }
.weekly-chart-card--verified { border-color: rgba(255,0,204,0.25); }
.weekly-chart-card--verified:hover { border-color: #ff00cc; }
.weekly-chart-card-inner { display: flex; align-items: center; gap: 14px; }
.weekly-chart-logo { height: 44px; width: 44px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.weekly-chart-card h3 { margin: 0; font-size: 1rem; }
.weekly-chart-meta { font-size: 0.82rem; opacity: 0.6; margin-top: 3px; }
.weekly-chart-cta { font-size: 0.85rem; color: var(--pink); margin-top: 14px; }

/* Chart entries list */
.chart-entries-list { display: flex; flex-direction: column; gap: 2px; }
.chart-entry { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card-bg); border-radius: 8px; }
.chart-position { width: 32px; text-align: center; font-weight: 700; font-size: 1.1rem; color: rgba(255,255,255,0.5); flex-shrink: 0; }
.chart-position.top3 { color: #ffd700; font-size: 1.25rem; }
.chart-movement { width: 40px; text-align: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
.chart-movement-new { color: #2dd4bf; }
.chart-movement-up { color: #22c55e; }
.chart-movement-down { color: #ef4444; }
.chart-movement-hold { color: #6b7280; }
.chart-movement-re-entry { color: #a78bfa; }
.chart-entry-info { flex: 1; min-width: 0; }
.chart-entry-artist { font-weight: 600; font-size: 0.95rem; }
.chart-entry-artist a { color: var(--text-color); text-decoration: none; }
.chart-entry-artist a:hover { color: var(--pink); }
.chart-entry-title { font-size: 0.85rem; opacity: 0.7; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-entry-location { font-size: 0.78rem; opacity: 0.5; flex-shrink: 0; }
.chart-entry-weeks { font-size: 0.72rem; opacity: 0.4; flex-shrink: 0; }

/* Chart source page */
.chart-source-logo { height: 120px; width: 120px; object-fit: contain; margin: 0 auto 14px; border-radius: 0; display: block; background: transparent; }
@media (max-width: 600px) { .chart-source-logo { height: 88px; width: 88px; } }
.chart-latest { margin-bottom: 30px; }
.chart-latest-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.chart-latest-header h2 { margin: 0; font-size: 1.3rem; }
.chart-attribution { text-align: center; padding: 20px; margin-top: 20px; font-size: 0.82rem; opacity: 0.5; border-top: 1px solid rgba(255,255,255,0.08); }
.chart-attribution a { color: var(--pink); text-decoration: none; }

/* Chart week page */
.chart-week-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.chart-week-header h1 { margin: 0; font-size: 1.5rem; }
.chart-week-date { font-size: 0.95rem; opacity: 0.6; margin-top: 4px; }
.chart-week-nav { display: flex; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.chart-nav-link { color: var(--pink); text-decoration: none; font-size: 0.9rem; }
.chart-nav-link:hover { text-decoration: underline; }

/* Prominent prev/next-week buttons (added 2026-05-04) */
.chart-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    flex: 1;
    max-width: 280px;
}
.chart-nav-btn:hover { background: rgba(255,56,128,0.12); border-color: var(--pink); }
.chart-nav-btn:active { transform: scale(0.98); }
.chart-nav-prev { justify-content: flex-start; }
.chart-nav-next { justify-content: flex-end; margin-left: auto; }
.chart-nav-arrow { font-size: 1.6rem; color: var(--pink); line-height: 1; }
.chart-nav-label { display: flex; flex-direction: column; line-height: 1.2; }
.chart-nav-prev .chart-nav-label { text-align: left; }
.chart-nav-next .chart-nav-label { text-align: right; }
.chart-nav-direction { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.6; }
.chart-nav-date { font-size: 0.95rem; font-weight: 600; }
[data-theme="light"] .chart-nav-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .chart-nav-btn:hover { background: rgba(255,56,128,0.08); }

/* Sticky floating week-nav arrows on chart-week pages (2026-05-04) */
.chart-sticky-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,56,128,0.85);
    color: white !important;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    user-select: none;
    opacity: 0.9;
}
.chart-sticky-nav:hover {
    background: var(--pink);
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}
.chart-sticky-nav:active { transform: translateY(-50%) scale(0.95); }
.chart-sticky-prev { left: 16px; }
.chart-sticky-next { right: 16px; }
@media (max-width: 768px) {
    .chart-sticky-nav { width: 44px; height: 44px; font-size: 1.4rem; }
    .chart-sticky-prev { left: 8px; }
    .chart-sticky-next { right: 8px; }
}
@media (max-width: 480px) {
    /* hide on phones — nav buttons at top/bottom of chart suffice */
    .chart-sticky-nav { display: none; }
}

/* Chart leaderboards (added 2026-05-04) */
.chart-leaderboards { margin-top: 40px; }
.chart-leaderboards h2 { font-size: 1.4rem; margin-bottom: 4px; }
.chart-leaderboards-sub { font-size: 0.9rem; opacity: 0.65; margin-bottom: 18px; }
.chart-leaderboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.chart-leaderboard-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 18px 20px;
}
[data-theme="light"] .chart-leaderboard-card {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
.chart-leaderboard-card h3 {
    font-size: 1rem;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pink);
}
.chart-leaderboard-icon { font-size: 1.2rem; }
.chart-leaderboard-list { list-style: decimal; padding-left: 24px; margin: 0; }
.chart-leaderboard-list li {
    padding: 6px 0;
    font-size: 0.9rem;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.chart-leaderboard-list li:last-child { border-bottom: none; }
[data-theme="light"] .chart-leaderboard-list li { border-bottom-color: rgba(0,0,0,0.06); }
.chart-leaderboard-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.chart-leaderboard-row a { color: inherit; text-decoration: none; font-weight: 600; }
.chart-leaderboard-row a:hover { color: var(--pink); }
.chart-leaderboard-row em { font-style: normal; opacity: 0.85; }
.chart-leaderboard-loc { display: inline-block; margin-left: 6px; font-size: 0.75rem; opacity: 0.55; }
.chart-leaderboard-stat { flex-shrink: 0; font-size: 0.8rem; color: var(--pink); font-weight: 600; white-space: nowrap; }

/* Chart embed promo (verified partners) */
.chart-embed-promo { margin-top: 40px; padding: 24px; background: var(--card-bg); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); }
.chart-embed-promo h2 { font-size: 1.3rem; margin: 0 0 6px; }
.chart-embed-sub { font-size: 0.9rem; opacity: 0.7; margin: 0 0 18px; line-height: 1.5; }
.chart-embed-preview { background: #0e0e10; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.chart-embed-preview iframe { display: block; border: 0; width: 100%; }
.chart-embed-snippet-label { display: block; font-size: 0.78rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.chart-embed-snippet-row { display: flex; gap: 8px; align-items: stretch; }
.chart-embed-snippet { flex: 1 1 auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; padding: 10px 12px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: var(--text-color); resize: vertical; min-height: 64px; line-height: 1.4; word-break: break-all; }
.chart-embed-copy-btn { flex: 0 0 auto; padding: 0 18px; background: var(--pink); color: #fff; border: 0; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 0.85rem; transition: opacity 0.15s; }
.chart-embed-copy-btn:hover { opacity: 0.85; }

/* Chart history */
.chart-history { margin-top: 40px; }
.chart-history h2 { font-size: 1.2rem; margin-bottom: 16px; }
.chart-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.chart-history-card { display: block; padding: 16px; background: var(--card-bg); border-radius: 8px; text-decoration: none; color: var(--text-color); text-align: center; border: 1px solid rgba(255,255,255,0.06); transition: border-color 0.2s; }
.chart-history-card:hover { border-color: var(--pink); }
.chart-history-date { font-weight: 600; font-size: 0.95rem; }
.chart-history-meta { font-size: 0.78rem; opacity: 0.5; margin-top: 4px; }

/* Light mode overrides */
[data-theme="light"] .weekly-chart-card { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .weekly-chart-card:hover { border-color: var(--pink); }
[data-theme="light"] .chart-entry { background: #fff; }
[data-theme="light"] .chart-position { color: rgba(0,0,0,0.35); }
[data-theme="light"] .chart-entry-artist a { color: #333; }
[data-theme="light"] .chart-history-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .chart-attribution { border-top-color: rgba(0,0,0,0.08); }

@media (max-width: 600px) {
    .weekly-charts-grid { grid-template-columns: 1fr; }
    .chart-entry { padding: 10px 12px; gap: 8px; }
    .chart-position { width: 26px; font-size: 0.95rem; }
    .chart-movement { width: 32px; font-size: 0.7rem; }
    .chart-entry-location { display: none; }
    .chart-week-header { flex-direction: column; gap: 10px; }
    .chart-history-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Verified Partner badge — Atomic pink brand colour */
.chart-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(255,0,204,0.18), rgba(180,0,255,0.12));
    border: 1.5px solid rgba(255,0,204,0.55);
    color: #ff00cc;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: 0 2px 12px rgba(255,0,204,0.18);
}
.chart-verified-badge svg { width: 18px; height: 18px; fill: #ff00cc; stroke: #ff00cc; flex-shrink: 0; }
@media (max-width: 600px) {
    .chart-verified-badge { font-size: 0.85rem; padding: 6px 12px; }
    .chart-verified-badge svg { width: 14px; height: 14px; }
}

/* Vote CTA banner — Atomic brand colours (#FF00CC) */
.chart-vote-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, rgba(255,0,204,0.12), rgba(180,0,255,0.08));
    border: 1px solid rgba(255,0,204,0.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 20px;
}
.chart-vote-cta-text { flex: 1; min-width: 0; }
.chart-vote-cta-text strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text-color); }
.chart-vote-cta-text span { font-size: 0.82rem; opacity: 0.65; }
.chart-vote-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FF00CC, #9900CC);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.chart-vote-cta-btn:hover { opacity: 0.88; color: white; }
.chart-vote-cta-btn svg { width: 14px; height: 14px; fill: white; }

/* Per-entry listen link */
.chart-entry-listen {
    font-size: 0.75rem;
    color: var(--pink);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.15s;
}
.chart-entry-listen:hover { opacity: 1; text-decoration: underline; }

.chart-entry-video-btn {
    background: rgba(255,0,0,0.15);
    border: 1px solid rgba(255,0,0,0.3);
    color: #ff6666;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    padding-left: 2px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.chart-entry-video-btn:hover { background: rgba(255,0,0,0.35); color: #fff; }

/* Partner tagline in hero */
.chart-partner-tagline {
    font-size: 1rem;
    font-style: italic;
    opacity: 0.85;
    margin: 4px 0 0;
    color: rgba(255,255,255,0.9);
}

/* Partner brand band — verified partners with their own atom-X + wordmark cover.
   Renders as a black band above the chart hero, matching the embed widget so
   the partner page and the iframe feel cohesive. */
.chart-partner-band {
    background: #000;
    padding: 28px 20px;
    text-align: center;
    border-bottom: 2px solid #FF00CC;
}
.chart-partner-band-cover {
    display: block;
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .chart-partner-band { padding: 20px 16px; }
    .chart-partner-band-cover { max-width: 320px; }
}

/* Hero variant for partner-branded sources — drops the random gradient
   in favour of solid black with a soft pink glow, so the page reads as
   a cohesive Atomic-on-musick experience instead of two competing skins. */
.chart-source-hero--partner {
    background: radial-gradient(ellipse at center top, rgba(255,0,204,0.12), transparent 70%), #000 !important;
}
.chart-source-hero--partner .hero-content h1 { font-size: 2.2rem; letter-spacing: 0.5px; }
@media (max-width: 600px) {
    .chart-source-hero--partner .hero-content h1 { font-size: 1.6rem; }
}

[data-theme="light"] .chart-verified-badge { background: rgba(255,0,204,0.08); border-color: rgba(255,0,204,0.3); }
[data-theme="light"] .chart-vote-cta { background: rgba(255,0,204,0.05); border-color: rgba(255,0,204,0.2); }

@media (max-width: 600px) {
    .chart-vote-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
    .chart-vote-cta-btn { width: 100%; justify-content: center; }
    .chart-entry-listen { display: none; }
}

/* ============================================================
   MUSICK RADIO — Player Bar & Landing Page
   ============================================================ */

/* --- Persistent Player Bar --- */
.radio-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2500;
    background: var(--dark, #1a1a2e);
    border-top: 1px solid rgba(131, 56, 236, 0.3);
    padding: 0 16px;
    height: 56px;
}
[data-theme="light"] .radio-player-bar {
    background: #f8f7fc;
    border-top: 1px solid rgba(131, 56, 236, 0.15);
}
.radio-player-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}
.radio-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #8338EC, #FF006E);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.radio-play-btn:hover { transform: scale(1.08); }
.radio-play-btn .icon-pause { display: none; }
.radio-play-btn.playing .icon-play { display: none; }
.radio-play-btn.playing .icon-pause { display: block; }

.radio-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.radio-station-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(131, 56, 236, 0.2);
    color: #8338EC;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.radio-track-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color, #e0e0e0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.radio-artist-name {
    font-size: 0.8rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.radio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.radio-mute-btn {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    cursor: pointer;
    padding: 4px;
    display: flex;
}
.radio-mute-btn .icon-muted { display: none; }
.radio-mute-btn.muted .icon-vol { display: none; }
.radio-mute-btn.muted .icon-muted { display: block; }

.radio-volume {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(131, 56, 236, 0.3);
    border-radius: 2px;
    outline: none;
}
.radio-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8338EC;
    cursor: pointer;
}
.radio-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #8338EC;
    cursor: pointer;
    border: none;
}

/* Body padding when player is present */
body.radio-player-active { padding-bottom: 56px; }

/* Pop-out button */
.radio-popup-btn {
    background: none;
    border: 1px solid rgba(131, 56, 236, 0.35);
    border-radius: 6px;
    color: var(--text-muted, #aaa);
    cursor: pointer;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.radio-popup-btn:hover {
    color: #8338EC;
    border-color: #8338EC;
    background: rgba(131, 56, 236, 0.08);
}
.radio-popup-btn-label { letter-spacing: 0.02em; }

/* "Playing in pop-out" indicator — replaces play button */
.radio-popup-indicator {
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #8338EC;
    font-weight: 600;
    flex-shrink: 0;
}
.radio-popup-indicator svg { flex-shrink: 0; }

@media (max-width: 600px) {
    .radio-controls { display: none; }
    .radio-station-badge { display: none; }
    .radio-track-info { flex-direction: column; align-items: flex-start; gap: 1px; }
}

/* --- Radio Landing Page --- */
.radio-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d1548 50%, #1a1a2e 100%);
    padding: 80px 20px 60px;
    text-align: center;
}
[data-theme="light"] .radio-hero {
    background: linear-gradient(135deg, #f0eef8 0%, #e4dcf2 50%, #f0eef8 100%);
}
.radio-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #8338EC, #FF006E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px;
}
.radio-hero-badge {
    display: inline-block;
    background: #e63946;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 12px;
    border-radius: 12px;
    margin-bottom: 16px;
    animation: radio-pulse 2s infinite;
}
@keyframes radio-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.radio-hero-tagline {
    font-size: 1.2rem;
    color: var(--text-muted, #aaa);
    margin: 0 0 16px;
    font-style: italic;
}
.radio-hero-description {
    max-width: 600px;
    margin: 0 auto 32px;
    color: var(--text-muted, #aaa);
    line-height: 1.6;
}
.radio-now-playing-hero {
    background: rgba(131, 56, 236, 0.1);
    border: 1px solid rgba(131, 56, 236, 0.2);
    border-radius: 12px;
    padding: 16px 24px;
    max-width: 400px;
    margin: 0 auto 32px;
}
.radio-now-playing-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8338EC;
    font-weight: 700;
    margin-bottom: 6px;
}
.radio-now-playing-track {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color, #e0e0e0);
}
.radio-now-playing-artist {
    font-size: 0.9rem;
    color: var(--text-muted, #aaa);
}
.radio-hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.radio-hero-play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.radio-section {
    padding: 60px 20px;
}
.radio-section-alt {
    background: rgba(131, 56, 236, 0.03);
}
[data-theme="light"] .radio-section-alt {
    background: rgba(131, 56, 236, 0.04);
}
.radio-section h2 {
    text-align: center;
    margin-bottom: 32px;
    font-size: 1.8rem;
}
.radio-about-rex {
    display: flex;
    gap: 24px;
    max-width: 700px;
    margin: 0 auto;
    align-items: flex-start;
}
.radio-rex-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8338EC, #FF006E);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.radio-rex-bio p {
    color: var(--text-muted, #aaa);
    line-height: 1.7;
    margin: 0 0 12px;
}
.radio-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}
.radio-feature { text-align: center; }
.radio-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(131, 56, 236, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #8338EC;
}
.radio-feature h3 { margin: 0 0 8px; font-size: 1.1rem; }
.radio-feature p { color: var(--text-muted, #aaa); line-height: 1.6; font-size: 0.9rem; }

@media (max-width: 768px) {
    .radio-hero h1 { font-size: 2.2rem; }
    .radio-hero { padding: 60px 16px 40px; }
    .radio-about-rex { flex-direction: column; align-items: center; text-align: center; }
    .radio-features-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SET TIMES / WHATS-ON PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.whats-on-hero {
    padding: 44px 0 32px;
    min-height: 180px;
    display: flex;
    align-items: center;
}
.whats-on-hero .container { width: 100%; }
.whats-on-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.hero-subtitle { color: rgba(255,255,255,0.78); margin: 0 0 16px; font-size: 1rem; }
.hero-subtitle strong { color: #fff; }

/* Date / city filter pills */
.date-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.date-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(4px);
    transition: all 0.18s;
}
.date-pill:hover, .date-pill.active {
    background: linear-gradient(135deg, var(--purple, #8338EC), var(--pink, #FF006E));
    border-color: transparent;
    color: #fff;
}

/* Main content grid: main + sidebar */
.whats-on-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    padding-top: 28px;
    padding-bottom: 48px;
    align-items: start;
}
.whats-on-main { min-width: 0; }
.whats-on-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Date sections */
.date-section { margin-bottom: 32px; }
.date-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255,255,255,0.07);
}
.date-day { font-size: 1.2rem; font-weight: 700; color: #fff; }
.date-full { font-size: 0.88rem; color: rgba(255,255,255,0.42); }
.date-count { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-left: auto; }

/* Gig card list */
.gig-cards { display: flex; flex-direction: column; gap: 8px; }

/* Override the global .gig-card for this list layout */
.whats-on-page .gig-card {
    display: flex;
    align-items: stretch;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    border-left: none;
    overflow: hidden;
    padding: 0;
    gap: 0;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    position: relative;
}
.whats-on-page .gig-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(131,56,236,0.28);
    transform: translateY(-1px);
}
.gig-card-link {
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.gig-card-image {
    width: 144px;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    align-self: center;
    margin: 8px 0 8px 8px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.05);
    background-size: cover;
    background-position: center;
}
.gig-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(131,56,236,0.18), rgba(255,0,110,0.1));
    color: rgba(255,255,255,0.25);
}
.gig-card-content {
    flex: 1;
    padding: 11px 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.gig-card-title {
    font-size: 0.93rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.gig-card-venue {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}
.venue-suburb { color: rgba(255,255,255,0.32); }
.venue-suburb::before { content: ', '; }
.gig-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.76rem;
}
.meta-date { color: rgba(255,255,255,0.35); }
.meta-time { color: var(--teal, #00F5D4); font-weight: 600; }
.meta-free { color: #52B788; font-weight: 600; }
.meta-price { color: rgba(255,255,255,0.45); }
.gig-card-ticket-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    border-left: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.gig-card-ticket-btn:hover {
    color: var(--pink, #FF006E);
    background: rgba(255,0,110,0.06);
}

/* Sidebar */
.sidebar-card {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 18px 20px;
}
.sidebar-card h3 { font-size: 0.92rem; font-weight: 700; margin: 0 0 12px; color: rgba(255,255,255,0.88); letter-spacing: 0.01em; }
.sidebar-card p { font-size: 0.84rem; color: rgba(255,255,255,0.55); margin: 0 0 12px; }
.city-links { display: flex; flex-wrap: wrap; gap: 6px; }
.city-link {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.81rem;
    transition: all 0.15s;
    border: 1px solid rgba(255,255,255,0.07);
}
.city-link:hover { background: rgba(131,56,236,0.22); color: #fff; border-color: rgba(131,56,236,0.3); }
.venue-list { list-style: none; padding: 0; margin: 0; }
.venue-list li { border-bottom: 1px solid rgba(255,255,255,0.05); }
.venue-list li:last-child { border-bottom: none; }
.venue-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.84rem;
    transition: color 0.15s;
}
.venue-list a:hover { color: var(--pink, #FF006E); }
.venue-gig-count {
    font-size: 0.7rem;
    background: rgba(255,255,255,0.07);
    padding: 1px 7px;
    border-radius: 10px;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
}
.sidebar-link { display: block; margin-top: 10px; font-size: 0.82rem; color: var(--pink, #FF006E); text-decoration: none; }
.sidebar-link:hover { text-decoration: underline; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 9px 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item summary { font-size: 0.84rem; color: rgba(255,255,255,0.75); cursor: pointer; font-weight: 500; line-height: 1.4; }
.faq-item p { font-size: 0.81rem; color: rgba(255,255,255,0.5); margin: 7px 0 0; line-height: 1.6; }

/* No-gigs empty state */
.no-gigs-card { text-align: center; padding: 48px 24px; background: rgba(255,255,255,0.04); border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); }
.no-gigs-icon { font-size: 2.5rem; margin-bottom: 14px; opacity: 0.5; }
.no-gigs-card h2 { font-size: 1.25rem; margin: 0 0 8px; color: rgba(255,255,255,0.82); }
.no-gigs-card p { color: rgba(255,255,255,0.45); margin: 0 0 20px; font-size: 0.9rem; }
.no-gigs-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* "View all city" link row */
.view-all-city-row { text-align: center; margin-top: 10px; }

/* Light mode overrides */
[data-theme="light"] .whats-on-page .gig-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .whats-on-page .gig-card:hover { background: #f8f7ff; border-color: rgba(131,56,236,0.2); }
[data-theme="light"] .gig-card-title { color: #1a1a2e; }
[data-theme="light"] .gig-card-venue { color: rgba(0,0,0,0.5); }
[data-theme="light"] .gig-card-placeholder { background: linear-gradient(135deg, rgba(131,56,236,0.08), rgba(255,0,110,0.05)); }
[data-theme="light"] .date-heading { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .date-day { color: #1a1a2e; }
[data-theme="light"] .sidebar-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sidebar-card h3 { color: #1a1a2e; }
[data-theme="light"] .city-link { background: #f3f0ff; color: #5b21b6; border-color: transparent; }
[data-theme="light"] .gig-card-ticket-btn { color: rgba(0,0,0,0.45); border-left-color: rgba(0,0,0,0.07); }

/* Responsive */
@media (max-width: 960px) {
    .whats-on-content { grid-template-columns: 1fr; }
    .whats-on-sidebar { position: static; }
}
@media (max-width: 640px) {
    .gig-card-image { width: 96px; margin: 6px 0 6px 6px; border-radius: 6px; }
    .gig-card-title { font-size: 0.9rem; white-space: normal; line-height: 1.25; }
    .gig-card-content { padding: 8px 10px; gap: 3px; }
    .gig-card-venue { font-size: 0.78rem; flex-wrap: wrap; }
    .gig-card-meta { font-size: 0.74rem; gap: 6px; }
    .whats-on-hero h1 { font-size: 1.6rem; }
    .whats-on-content { gap: 24px; padding-top: 20px; }
    .gig-card-ticket-btn { display: none; }
}

/* ── Email Signup Component ─────────────────────────────────────────────────── */
.email-signup-card {
  background: linear-gradient(135deg, rgba(131,56,236,0.15), rgba(255,0,110,0.08));
  border: 1px solid rgba(131,56,236,0.3);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 28px 0;
}
.email-signup-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.email-signup-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.email-signup-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}
.email-signup-sub {
  color: #aaa;
  font-size: 13px;
  margin: 0;
  line-height: 1.4;
}
.email-signup-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.email-signup-input,
.email-signup-select {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.email-signup-input::placeholder { color: #777; }
.email-signup-input:focus,
.email-signup-select:focus { border-color: #8338ec; }
.email-signup-select option { background: #1a1a2e; color: #fff; }
.email-signup-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #8338ec, #ff006e);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.email-signup-btn:hover { opacity: 0.9; }
.email-signup-btn:disabled { opacity: 0.6; cursor: default; }
.email-signup-msg {
  margin-top: 10px;
  font-size: 13px;
  min-height: 18px;
  line-height: 1.4;
}
.email-signup-msg.success { color: #4ade80; }
.email-signup-msg.error   { color: #f87171; }
@media (max-width: 480px) {
  .email-signup-card { padding: 16px; }
  .email-signup-fields { flex-direction: column; }
  .email-signup-input,
  .email-signup-select,
  .email-signup-btn { width: 100%; box-sizing: border-box; }
}

/* ── Pub Quiz Landing Page ────────────────────────────────────────────────── */
.quiz-landing { max-width: 100%; }
.quiz-hero { text-align: center; padding: 80px 20px 60px; }
.quiz-hero-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 3px; color: var(--purple, #9B7BB8); margin-bottom: 8px; }
.quiz-hero-title { font-size: 3.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 16px; }
[data-theme="dark"] .quiz-hero-title { color: #fff; }
.quiz-hero-subtitle { font-size: 1.2rem; opacity: 0.7; margin-bottom: 32px; }
.quiz-btn { display: inline-block; padding: 14px 32px; border-radius: 10px; font-weight: 700; font-size: 1.1rem; text-decoration: none; transition: all 0.2s; }
.quiz-btn-primary { background: var(--pink, #FF69B4); color: #fff; }
.quiz-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.quiz-how-it-works { padding: 60px 20px; }
.quiz-how-it-works h2 { text-align: center; font-size: 2rem; margin-bottom: 32px; }
.quiz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.quiz-step { text-align: center; padding: 24px; }
.quiz-step-number { width: 48px; height: 48px; border-radius: 50%; background: var(--purple, #9B7BB8); color: #fff; font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.quiz-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.quiz-step p { font-size: 0.9rem; opacity: 0.7; }
.quiz-categories { padding: 40px 20px 60px; }
.quiz-categories h2 { text-align: center; font-size: 2rem; margin-bottom: 24px; }
.quiz-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 700px; margin: 0 auto; }
.quiz-cat-card { padding: 16px; border-radius: 10px; text-align: center; font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; gap: 6px; }
[data-theme="dark"] .quiz-cat-card { background: #1a1a2e; }
[data-theme="light"] .quiz-cat-card { background: #f3f0f8; }
.quiz-cat-emoji { font-size: 1.8rem; }
.quiz-for-pubs { padding: 40px 20px 60px; text-align: center; }
.quiz-for-pubs h2 { font-size: 2rem; margin-bottom: 16px; }
.quiz-for-pubs p { max-width: 600px; margin: 0 auto; opacity: 0.8; }
.quiz-leaderboard { padding: 40px 20px 60px; }
.quiz-leaderboard h2 { text-align: center; font-size: 2rem; margin-bottom: 8px; }
.quiz-lb-meta { text-align: center; font-size: 0.9rem; opacity: 0.6; margin-bottom: 24px; }
.quiz-lb-list { max-width: 600px; margin: 0 auto; }
.quiz-lb-row { display: flex; align-items: center; gap: 10px; padding: 13px 18px; margin-bottom: 6px; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; font-size: 1rem; }
[data-theme="dark"] .quiz-lb-row { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.quiz-lb-row:first-child { border-color: rgba(183,148,246,0.4); background: rgba(183,148,246,0.06); }
.quiz-lb-rank { min-width: 36px; font-weight: 700; color: var(--accent-color, #8B5CF6); font-size: 1rem; }
.quiz-lb-emoji { font-size: 1.3rem; }
.quiz-lb-name { flex: 1; font-weight: 600; }
.quiz-lb-venue { font-size: 0.8rem; opacity: 0.5; margin-right: 4px; }
.quiz-lb-score { font-weight: 700; color: var(--accent-color, #8B5CF6); }
@media (max-width: 768px) {
  .quiz-hero-title { font-size: 2.5rem; }
  .quiz-steps { grid-template-columns: 1fr; gap: 16px; }
  .quiz-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .quiz-lb-venue { display: none; }
}

/* Trust signals — Phase A.5 verified badge + rail */
.verified-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d97a;
  box-shadow: 0 0 6px rgba(0, 217, 122, 0.7);
  vertical-align: middle;
  animation: verified-pulse 2.6s ease-in-out infinite;
}
@keyframes verified-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.stat-pill-verified {
  background: rgba(0, 200, 120, 0.18) !important;
  border-color: rgba(0, 220, 130, 0.35) !important;
}
.verified-stat {
  color: rgba(255, 255, 255, 0.85);
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme="light"] .verified-stat {
  color: rgba(40, 30, 60, 0.78);
}

.report-link-wrap {
  margin: 32px 0 0;
  text-align: right;
  font-size: 0.85rem;
}
.report-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}
.report-link:hover {
  color: #ffd93d;
  border-bottom-color: #ffd93d;
}
[data-theme="light"] .report-link {
  color: rgba(40, 30, 60, 0.55);
  border-bottom-color: rgba(40, 30, 60, 0.3);
}
[data-theme="light"] .report-link:hover {
  color: #8338ec;
  border-bottom-color: #8338ec;
}
/* Owner self-serve nudge in the report-an-error block (claim-and-fix-it-yourself) */
.claim-nudge {
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(135deg, rgba(131, 56, 236, 0.12), rgba(255, 0, 110, 0.08));
  border: 1px solid rgba(131, 56, 236, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 14px;
}
.claim-nudge-title {
  display: block;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.claim-nudge-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #ffd93d;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 217, 61, 0.5);
}
.claim-nudge-link:hover { color: #fff; border-bottom-color: #fff; }
.report-link-line { margin: 0; text-align: right; }
[data-theme="light"] .claim-nudge {
  color: rgba(40, 30, 60, 0.85);
  background: linear-gradient(135deg, rgba(131, 56, 236, 0.08), rgba(255, 0, 110, 0.05));
}
[data-theme="light"] .claim-nudge-title { color: #2a1f3c; }
[data-theme="light"] .claim-nudge-link { color: #8338ec; border-bottom-color: rgba(131, 56, 236, 0.4); }
[data-theme="light"] .claim-nudge-link:hover { color: #ff006e; border-bottom-color: #ff006e; }

.ticket-link-warning {
  margin: 10px 0 0;
  padding: 8px 10px;
  font-size: 0.85rem;
  background: rgba(255, 169, 77, 0.12);
  border: 1px solid rgba(255, 169, 77, 0.35);
  border-radius: 6px;
  color: #ffc078;
}
.ticket-link-warning a {
  color: #ffc078;
  text-decoration: underline;
  margin-left: 4px;
}
[data-theme="light"] .ticket-link-warning {
  background: rgba(232, 130, 40, 0.12);
  border-color: rgba(232, 130, 40, 0.45);
  color: #8a4a00;
}
[data-theme="light"] .ticket-link-warning a {
  color: #8a4a00;
}

/* "Near me" geolocation button on gig filter (Phase B.4) */
.near-me-btn {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(131, 56, 236, 0.18);
  border: 1px solid rgba(131, 56, 236, 0.4);
  color: inherit;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.near-me-btn:hover { background: rgba(131, 56, 236, 0.32); }
.near-me-btn:active { transform: scale(0.96); }
.near-me-btn:disabled { opacity: 0.6; cursor: wait; }
[data-theme="light"] .near-me-btn { color: #4a2a8a; }

/* "Last Night" recap rail (Phase C) — subtle after-dark tint distinguishes
   it from evergreen editorial cards. */
.hp-recap-section .hp-editorial-header h2 { display: inline-flex; align-items: center; gap: 8px; }
.hp-recap-card {
  position: relative;
  border-left: 3px solid rgba(131, 56, 236, 0.4);
}
.hp-recap-card .hp-editorial-date { color: rgba(131, 56, 236, 0.85); font-weight: 500; }
[data-theme="light"] .hp-recap-card .hp-editorial-date { color: #6b35d4; }

/* Per-city editorial intro (Phase D.1) — scene voice under the hero. */
.city-editor-intro {
  max-width: 820px;
  margin: 24px auto 32px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(131, 56, 236, 0.08) 0%, rgba(255, 107, 157, 0.05) 100%);
  border-left: 4px solid #8338ec;
  border-radius: 10px;
}
.city-editor-tagline {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.95);
  font-style: italic;
}
.city-editor-body {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}
.city-editor-byline {
  margin-top: 16px;
  margin-bottom: 0;
  opacity: 0.7;
  font-size: 0.9rem;
  font-style: italic;
}
[data-theme="light"] .city-editor-tagline { color: rgba(40, 30, 60, 0.95); }
[data-theme="light"] .city-editor-body { color: rgba(40, 30, 60, 0.85); }

/* Regional towns homepage module (added 2026-04-21) */
.hp-regional { padding: 48px 20px; background: linear-gradient(180deg, rgba(131,56,236,0.04), transparent); border-top: 1px solid rgba(131,56,236,0.1); }
.hp-regional-inner { max-width: 1200px; margin: 0 auto; }
.hp-regional-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.hp-regional-header h2 { margin: 0; font-size: 1.7rem; }
.hp-regional-sub { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.95rem; }
.hp-regional-search { position: relative; margin-bottom: 28px; }
.hp-regional-search input { width: 100%; padding: 14px 18px; font-size: 1rem; border: 2px solid rgba(131,56,236,0.3); border-radius: 10px; background: var(--card-bg); color: var(--text-primary); box-sizing: border-box; transition: border-color 0.15s; }
.hp-regional-search input:focus { outline: none; border-color: #8338ec; }
.hp-regional-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--card-bg); border: 1px solid rgba(131,56,236,0.2); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 50; overflow: hidden; }
.hp-regional-result { display: flex; justify-content: space-between; padding: 10px 16px; text-decoration: none; color: var(--text-primary); border-bottom: 1px solid rgba(131,56,236,0.08); }
.hp-regional-result:last-child { border-bottom: 0; }
.hp-regional-result:hover { background: rgba(131,56,236,0.1); }
.hp-regional-result span { color: var(--text-secondary); font-size: 0.9rem; }
.hp-regional-no-match { padding: 14px 16px; margin: 0; color: var(--text-secondary); }
.hp-regional-no-match a { color: #8338ec; }
.hp-regional-top-label { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.hp-regional-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hp-regional-chip { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--card-bg); border: 1px solid rgba(131,56,236,0.15); border-radius: 10px; text-decoration: none; color: var(--text-primary); transition: border-color 0.15s, transform 0.15s; }
.hp-regional-chip:hover { border-color: #8338ec; transform: translateY(-1px); }
.hp-regional-chip strong { font-size: 0.98rem; }
.hp-regional-chip-meta { font-size: 0.82rem; color: var(--text-secondary); }
[data-theme="light"] .hp-regional { background: linear-gradient(180deg, rgba(131,56,236,0.05), transparent); }
[data-theme="light"] .hp-regional-search input { background: #fff; }
[data-theme="light"] .hp-regional-search-results { background: #fff; }
[data-theme="light"] .hp-regional-chip { background: #fff; }

/* Regional hero (added 2026-04-21) — dedicated clean hero for
   /regional/, /regional/{slug}/, /regional/{slug}/{when}/.
   Does NOT inherit .page-hero's Bangers display font or centred flex
   layout. Text-aligned left, normal body font, readable sizes. */
.regional-hero {
    padding: 10px 0 4px;
    text-align: left;
    background: none;
    min-height: 0;
    display: block;
    overflow: visible;
}
.regional-hero h1 {
    font-family: inherit;
    font-size: 2.1rem;
    line-height: 1.2;
    color: var(--text-primary);
    text-shadow: none;
    letter-spacing: 0;
    margin: 0 0 6px;
    font-weight: 700;
}
.regional-hero p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 10px;
    text-shadow: none;
}
.regional-hero .pill-nav {
    margin-top: 14px;
}
.town-editor-intro {
    max-width: 70ch;
    margin: 14px 0 18px;
    color: var(--text-primary);
    line-height: 1.6;
}
.town-editor-intro p {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0 0 10px;
}
@media (max-width: 768px) {
    .regional-hero h1 { font-size: 1.7rem; }
}
[data-theme="light"] .regional-hero h1 { color: #1a1630; text-shadow: none; }
[data-theme="light"] .regional-hero p { color: rgba(26,22,48,0.75); }
[data-theme="light"] .town-editor-intro p { color: #1a1630; }

/* Regional redirect banner + search submit button (added 2026-04-21) */
.regional-redirect-note {
    margin: 10px 0 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(131,56,236,0.08);
    border: 1px solid rgba(131,56,236,0.22);
    color: var(--text-primary);
    font-size: 0.95rem;
}
.regional-redirect-note a { color: #8338ec; text-decoration: underline; }
[data-theme="light"] .regional-redirect-note { background: rgba(131,56,236,0.06); color: #1a1630; }

.hp-regional-search { display: flex; gap: 8px; align-items: stretch; }
.hp-regional-search input { flex: 1; }
.hp-regional-search-submit {
    padding: 0 22px;
    border: 2px solid #8338ec;
    background: #8338ec;
    color: #fff;
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.12s;
}
.hp-regional-search-submit:hover { transform: translateX(2px); }
.hp-regional-fallback {
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(131,56,236,0.04);
    border-top: 1px solid rgba(131,56,236,0.08);
}
[data-theme="light"] .hp-regional-fallback { background: rgba(131,56,236,0.04); }

/* ═══════════════════════════════════════════════════════════════════
   Regional UI polish (2026-04-21) — dedicated, scoped rules under
   .regional-page so nothing else on the site is affected. Everything
   below is additive.
   ═══════════════════════════════════════════════════════════════════ */

/* State accent colors — each state gets its own hero gradient + chip tint.
   Values chosen for "music/cultural vibe" not state-team colors. */
.regional-page { --rg-accent: #8338ec; --rg-accent-2: #5eead4; --rg-glow: rgba(131,56,236,0.35); }
.regional-page--sa  { --rg-accent: #ff5e5b; --rg-accent-2: #ffd166; --rg-glow: rgba(255,94,91,0.35); }
.regional-page--vic { --rg-accent: #5eead4; --rg-accent-2: #8338ec; --rg-glow: rgba(94,234,212,0.35); }
.regional-page--nsw { --rg-accent: #3a86ff; --rg-accent-2: #ff006e; --rg-glow: rgba(58,134,255,0.35); }
.regional-page--qld { --rg-accent: #ffbe0b; --rg-accent-2: #fb5607; --rg-glow: rgba(255,190,11,0.35); }
.regional-page--wa  { --rg-accent: #e36414; --rg-accent-2: #ffd166; --rg-glow: rgba(227,100,20,0.35); }
.regional-page--tas { --rg-accent: #06a77d; --rg-accent-2: #d5e8d4; --rg-glow: rgba(6,167,125,0.35); }
.regional-page--nt  { --rg-accent: #d4a373; --rg-accent-2: #2ec4b6; --rg-glow: rgba(212,163,115,0.35); }
.regional-page--act { --rg-accent: #8338ec; --rg-accent-2: #3a86ff; --rg-glow: rgba(131,56,236,0.35); }
.regional-page--index { --rg-accent: #ff006e; --rg-accent-2: #ffbe0b; --rg-glow: rgba(255,0,110,0.35); }

.regional-page { padding: 0; margin: 0; }
.regional-page-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }

/* Breadcrumb — tighter, more refined than the default */
.regional-breadcrumb { margin: 16px 0 20px; font-size: 13px; color: var(--text-secondary); letter-spacing: 0.02em; }
.regional-breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.12s; }
.regional-breadcrumb a:hover { color: var(--rg-accent); }
.regional-breadcrumb span { margin: 0 8px; opacity: 0.5; }
.regional-breadcrumb strong { color: var(--text-primary); font-weight: 600; }

/* Redirect note refinement */
.regional-redirect-note { display: flex; gap: 10px; align-items: baseline; }
.regional-redirect-note__pin { font-size: 1.1rem; line-height: 1; }

/* ─── HERO ─────────────────────────────────────────────────────── */
.regional-hero {
    position: relative;
    padding: 36px 32px 32px;
    margin: 0 0 32px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.00) 100%),
                radial-gradient(ellipse at top left, color-mix(in srgb, var(--rg-accent) 18%, transparent) 0%, transparent 60%),
                radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--rg-accent-2) 14%, transparent) 0%, transparent 60%),
                linear-gradient(180deg, #15122a 0%, #0e0b1f 100%);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.regional-hero__accent {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--rg-accent), var(--rg-accent-2));
    box-shadow: -8px 0 24px var(--rg-glow);
}
.regional-hero__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rg-accent);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.regional-hero__state { }
.regional-hero__sep { opacity: 0.4; }
.regional-hero__tagline { color: rgba(255,255,255,0.7); letter-spacing: 0.04em; text-transform: none; font-size: 0.85rem; font-weight: 400; }
.regional-hero__title {
    margin: 0 0 18px;
    line-height: 1;
    font-weight: 700;
}
.regional-hero__kicker {
    display: block;
    font-size: 1.15rem;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}
.regional-hero__town {
    display: block;
    font-family: 'Bangers', 'Poppins', sans-serif;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    color: #fff;
    letter-spacing: 0.025em;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--rg-accent) 25%, #fff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.regional-hero__title--big .regional-hero__town { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.regional-hero__lede { max-width: 68ch; color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height: 1.55; margin: 0 0 22px; }

/* Stats row — big numbers with soft cards */
.regional-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin: 20px 0 22px;
    max-width: 640px;
}
.regional-stat {
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    backdrop-filter: blur(6px);
}
.regional-stat__num {
    font-size: 1.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.regional-stat__unit { font-size: 0.65em; color: rgba(255,255,255,0.55); margin-left: 2px; font-weight: 500; }
.regional-stat__label { font-size: 0.72rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.regional-stat--radius .regional-stat__num { color: var(--rg-accent); }

/* Pill-nav — colored buttons, active state, icons */
.regional-pill-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.regional-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px 9px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: all 0.15s;
    position: relative;
}
.regional-pill:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--rg-accent);
    transform: translateY(-1px);
}
.regional-pill__icon { font-size: 1rem; line-height: 1; }
.regional-pill__count {
    margin-left: 4px;
    background: var(--rg-accent);
    color: #fff;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}
.regional-pill--active {
    background: linear-gradient(135deg, var(--rg-accent), var(--rg-accent-2));
    border-color: transparent;
    box-shadow: 0 4px 14px var(--rg-glow);
}

/* ─── EDITOR INTRO with drop cap ──────────────────────────────────── */
.town-editor-intro {
    max-width: 68ch;
    margin: 0 0 40px;
    padding: 24px 26px 20px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--rg-accent);
    border-radius: 0 14px 14px 0;
    position: relative;
}
.town-editor-intro::before {
    content: '"';
    position: absolute;
    top: -8px;
    left: 18px;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--rg-accent);
    opacity: 0.35;
}
.town-editor-intro p { color: var(--text-primary); font-size: 1.02rem; line-height: 1.65; margin: 0 0 12px; }
.town-editor-intro p:last-child { margin-bottom: 0; }
.town-editor-intro__first::first-letter {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--rg-accent);
    float: left;
    line-height: 1;
    margin: 4px 8px 0 0;
    padding: 0;
    font-family: 'Bangers', 'Poppins', sans-serif;
    letter-spacing: 0.02em;
}

/* ─── SECTION TITLE — accent bar ─────────────────────────────────── */
.regional-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--text-primary);
}
.regional-section-title__accent {
    display: inline-block;
    width: 6px;
    height: 28px;
    background: linear-gradient(180deg, var(--rg-accent), var(--rg-accent-2));
    border-radius: 3px;
    box-shadow: 0 0 10px var(--rg-glow);
    flex-shrink: 0;
}
.regional-section-title__count { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; margin-left: 4px; }

/* ─── MAP ────────────────────────────────────────────────────────── */
.regional-map-section { margin: 0 0 40px; }
.regional-map-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.regional-map-header .regional-section-title { margin: 0; }
.regional-map-meta { font-size: 0.88rem; color: var(--text-secondary); }
.regional-map {
    height: 360px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    background: #0e0b1f;
}
.regional-map .leaflet-popup-content a { color: var(--rg-accent); font-weight: 600; }

/* ─── DAY + GIG CARDS ───────────────────────────────────────────── */
.regional-gigs { margin: 0 0 48px; }
.regional-day { display: flex; gap: 20px; margin: 0 0 26px; }
.regional-day__badge {
    flex-shrink: 0;
    width: 76px;
    padding: 12px 8px 10px;
    border-radius: 14px;
    text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    align-self: flex-start;
    position: sticky;
    top: 16px;
    transition: transform 0.2s;
}
.regional-day:hover .regional-day__badge { transform: translateY(-2px); }
.regional-day__badge--today {
    background: linear-gradient(135deg, var(--rg-accent), var(--rg-accent-2));
    border-color: transparent;
    box-shadow: 0 8px 24px var(--rg-glow);
}
.regional-day__dow { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.regional-day__badge--today .regional-day__dow { color: rgba(255,255,255,0.85); }
.regional-day__num { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.regional-day__badge--today .regional-day__num { color: #fff; }
.regional-day__mon { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; color: rgba(255,255,255,0.6); margin-top: 4px; }
.regional-day__badge--today .regional-day__mon { color: rgba(255,255,255,0.85); }
.regional-day__content { flex: 1; min-width: 0; }
.regional-day__label { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.regional-day__tag { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(255,255,255,0.06); color: var(--text-primary); letter-spacing: 0.04em; }
.regional-day__tag--live { background: var(--rg-accent); color: #fff; animation: rg-pulse 2s ease-in-out infinite; }
@keyframes rg-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--rg-glow); } 50% { box-shadow: 0 0 0 6px transparent; } }
.regional-day__count { font-size: 0.82rem; color: var(--text-secondary); }

.regional-gig-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.regional-gig-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    align-items: center;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.regional-gig-card:hover {
    transform: translateX(2px);
    border-color: var(--rg-accent);
    background: rgba(255,255,255,0.05);
}
.regional-gig-card__time {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-right: 14px;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.regional-gig-card__time-num { display: block; font-size: 1.35rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.regional-gig-card__time-ampm { font-size: 0.7rem; color: var(--text-secondary); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; display: block; }
.regional-gig-card__time-tba { display: inline-block; font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.regional-gig-card__body { min-width: 0; }
.regional-gig-card__title {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.12s;
}
.regional-gig-card__title:hover { color: var(--rg-accent); }
.regional-gig-card__artists { font-size: 0.85rem; color: var(--text-secondary); margin-top: 3px; }
.regional-gig-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; font-size: 0.82rem; color: var(--text-secondary); }
.regional-gig-card__venue { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); text-decoration: none; }
.regional-gig-card__venue:hover { color: var(--rg-accent); }
.regional-icon { width: 13px; height: 13px; flex-shrink: 0; }
.regional-gig-card__suburb { opacity: 0.85; }
.regional-gig-card__dist {
    padding: 2px 8px;
    background: rgba(131,56,236,0.12);
    color: var(--rg-accent);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
}
.regional-gig-card__action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.regional-gig-card__price { font-size: 0.84rem; color: var(--text-primary); font-weight: 600; }

.regional-badge { padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; }
.regional-badge--free { background: linear-gradient(135deg, #10b981, #5eead4); color: #0b1f1a; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }

.regional-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.regional-btn--primary {
    background: linear-gradient(135deg, var(--rg-accent), var(--rg-accent-2));
    color: #fff;
    box-shadow: 0 3px 10px var(--rg-glow);
}
.regional-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--rg-glow); }
.regional-btn--ghost {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255,255,255,0.08);
}
.regional-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--rg-accent); }

/* ─── VENUES grid ────────────────────────────────────────────────── */
.regional-venues { margin: 0 0 48px; }
.regional-venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.regional-venue-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.regional-venue-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--rg-accent), var(--rg-accent-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}
.regional-venue-card:hover { border-color: var(--rg-accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.regional-venue-card:hover::before { transform: scaleX(1); }
.regional-venue-card__name { font-weight: 600; color: var(--text-primary); font-size: 1.02rem; }
.regional-venue-card__suburb { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--text-secondary); }
.regional-venue-card__stats { display: flex; gap: 10px; margin-top: 6px; font-size: 0.78rem; }
.regional-venue-card__dist { color: var(--rg-accent); font-weight: 600; }
.regional-venue-card__gigs { color: var(--text-secondary); }
.regional-venue-card__gigs strong { color: var(--text-primary); }

/* ─── NEARBY towns strip ──────────────────────────────────────── */
.regional-nearby { margin: 0 0 40px; }
.regional-nearby__strip { display: flex; flex-wrap: wrap; gap: 8px; }
.regional-nearby__chip {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 10px 16px 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.92rem;
    transition: all 0.15s;
}
.regional-nearby__chip:hover { background: var(--rg-accent); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 14px var(--rg-glow); }
.regional-nearby__name { font-weight: 500; }
.regional-nearby__dist { font-size: 0.8rem; opacity: 0.7; }
.regional-nearby__chip:hover .regional-nearby__dist { opacity: 0.9; }

/* ─── Empty state ───────────────────────────────────────────── */
.regional-empty {
    text-align: center;
    padding: 60px 30px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 20px;
    margin: 0 0 30px;
}
.regional-empty__icon { font-size: 3.5rem; margin-bottom: 12px; }
.regional-empty h2 { margin: 0 0 10px; font-size: 1.35rem; }
.regional-empty p { color: var(--text-secondary); margin: 4px 0; }
.regional-empty a { color: var(--rg-accent); }
.regional-empty__links { margin-top: 16px; }
.regional-empty__links span { margin: 0 8px; opacity: 0.4; }

/* ─── INDEX PAGE towns grid ──────────────────────────────────── */
.regional-state-block { margin: 0 0 48px; }
.regional-town-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.regional-town-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.regional-town-card::after {
    content: '→';
    position: absolute;
    bottom: 14px;
    right: 18px;
    font-size: 1.1rem;
    color: var(--rg-accent);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s;
}
.regional-town-card:hover { border-color: var(--rg-accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.regional-town-card:hover::after { opacity: 1; transform: translateX(0); }
.regional-town-card--quiet { opacity: 0.55; }
.regional-town-card--quiet:hover { opacity: 0.9; }
.regional-town-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.regional-town-card__name { font-weight: 700; font-size: 1.08rem; color: var(--text-primary); }
.regional-town-card__pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    background: linear-gradient(135deg, var(--rg-accent), var(--rg-accent-2));
    color: #fff;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px var(--rg-glow);
}
.regional-town-card__tagline { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }
.regional-town-card__foot { font-size: 0.78rem; color: var(--text-secondary); margin-top: 4px; letter-spacing: 0.02em; }
.regional-town-card__quiet-label { font-style: italic; opacity: 0.75; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
    .regional-hero { padding: 24px 20px; border-radius: 16px; }
    .regional-hero__town { font-size: clamp(2rem, 9vw, 3rem); }
    .regional-hero__kicker { font-size: 1rem; }
    .regional-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .regional-stat__num { font-size: 1.5rem; }
    .regional-day { gap: 12px; }
    .regional-day__badge { width: 58px; padding: 8px 4px 6px; }
    .regional-day__num { font-size: 1.6rem; }
    .regional-gig-card { grid-template-columns: 56px 1fr; padding: 12px; gap: 12px; }
    .regional-gig-card__action { grid-column: 2; flex-direction: row; justify-content: flex-start; margin-top: 4px; }
    .regional-gig-card__time-num { font-size: 1.1rem; }
    .town-editor-intro { padding: 20px 20px 16px; }
    .town-editor-intro::before { font-size: 3.5rem; left: 10px; }
    .regional-map { height: 280px; }
}

/* ─── Light theme adaptations ────────────────────────────────── */
[data-theme="light"] .regional-hero {
    background: linear-gradient(135deg, #fff 0%, #faf7ff 100%),
                radial-gradient(ellipse at top left, color-mix(in srgb, var(--rg-accent) 12%, transparent) 0%, transparent 60%);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 20px 60px rgba(131,56,236,0.12);
}
[data-theme="light"] .regional-hero__town {
    background: linear-gradient(180deg, #1a1630 0%, var(--rg-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
[data-theme="light"] .regional-hero__kicker { color: rgba(26,22,48,0.6); }
[data-theme="light"] .regional-hero__lede { color: rgba(26,22,48,0.75); }
[data-theme="light"] .regional-stat { background: rgba(26,22,48,0.04); border-color: rgba(26,22,48,0.06); }
[data-theme="light"] .regional-stat__num { color: #1a1630; }
[data-theme="light"] .regional-stat__label { color: rgba(26,22,48,0.6); }
[data-theme="light"] .regional-pill { background: rgba(26,22,48,0.05); border-color: rgba(26,22,48,0.08); color: #1a1630; }
[data-theme="light"] .town-editor-intro { background: rgba(26,22,48,0.03); }
[data-theme="light"] .town-editor-intro p { color: #1a1630; }
[data-theme="light"] .regional-gig-card { background: #fff; border-color: rgba(26,22,48,0.08); box-shadow: 0 2px 8px rgba(26,22,48,0.04); }
[data-theme="light"] .regional-gig-card__title { color: #1a1630; }
[data-theme="light"] .regional-gig-card__time { border-right-color: rgba(26,22,48,0.08); }
[data-theme="light"] .regional-gig-card__time-num { color: #1a1630; }
[data-theme="light"] .regional-day__badge { background: #fff; border-color: rgba(26,22,48,0.08); }
[data-theme="light"] .regional-day__num { color: #1a1630; }
[data-theme="light"] .regional-venue-card { background: #fff; border-color: rgba(26,22,48,0.08); }
[data-theme="light"] .regional-venue-card__name { color: #1a1630; }
[data-theme="light"] .regional-nearby__chip { background: #fff; border-color: rgba(26,22,48,0.08); color: #1a1630; }
[data-theme="light"] .regional-empty { background: rgba(26,22,48,0.03); border-color: rgba(26,22,48,0.12); }
[data-theme="light"] .regional-town-card { background: #fff; border-color: rgba(26,22,48,0.08); box-shadow: 0 2px 8px rgba(26,22,48,0.04); }
[data-theme="light"] .regional-town-card__name { color: #1a1630; }
[data-theme="light"] .regional-map { border-color: rgba(26,22,48,0.12); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .regional-day__tag--live { animation: none; }
    .regional-gig-card, .regional-venue-card, .regional-town-card, .regional-nearby__chip, .regional-pill, .regional-day__badge, .regional-btn { transition: none; }
}

/* Editor-intro card — redesign (2026-04-21) ──────────────────────────
   Overrides the earlier .town-editor-intro rules. Removes the floating
   giant quote mark that was competing with the drop-cap, adds an
   eyebrow label, beefs up the drop-cap, justifies the body with
   hyphens, adds a subtle waveform signature. Centred in its column. */

.town-editor-intro {
    max-width: 68ch;
    margin: 0 auto 44px;
    padding: 28px 34px 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--rg-accent);
    border-radius: 0 16px 16px 0;
    position: relative;
    overflow: hidden;
}
/* kill the earlier ::before quote glyph by overriding */
.town-editor-intro::before { content: none; }

/* Eyebrow */
.town-editor-intro__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--rg-accent);
}
.town-editor-intro__eyebrow-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent);
    opacity: 0.5;
}
.town-editor-intro__eyebrow-label {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

/* Body text */
.town-editor-intro__body p {
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: 1.72;
    margin: 0 0 14px;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.town-editor-intro__body p:last-child { margin-bottom: 0; }

/* Big drop-cap — the real LHS anchor */
.town-editor-intro__first::first-letter {
    font-size: 4.2rem;
    font-weight: 700;
    color: var(--rg-accent);
    float: left;
    line-height: 0.85;
    margin: 6px 14px -2px -2px;
    padding: 0;
    font-family: 'Bangers', 'Poppins', sans-serif;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px var(--rg-glow);
}

/* Bottom-right waveform signature */
.town-editor-intro__wave {
    position: absolute;
    bottom: 12px;
    right: 14px;
    width: 110px;
    height: 20px;
    color: var(--rg-accent);
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 720px) {
    .town-editor-intro { padding: 22px 22px 18px; border-radius: 0 12px 12px 0; }
    .town-editor-intro__body p { font-size: 0.98rem; line-height: 1.65; text-align: left; hyphens: none; }
    .town-editor-intro__first::first-letter { font-size: 3.2rem; margin: 4px 10px -2px -2px; }
    .town-editor-intro__eyebrow-label { font-size: 0.68rem; letter-spacing: 0.18em; }
    .town-editor-intro__wave { width: 80px; opacity: 0.25; }
}

[data-theme="light"] .town-editor-intro {
    background: linear-gradient(180deg, #fff, #faf7ff);
    border-color: rgba(26,22,48,0.08);
}
[data-theme="light"] .town-editor-intro__body p { color: #1a1630; }

/* ═══════════════════════════════════════════════════════════════════
   Admin button loading + press feedback (2026-04-22)
   Scoped-enough via .is-loading and .pressed class names that they
   don't collide with anything site-wide. Applied globally in admin
   via footer.php's delegated listeners.
   ═══════════════════════════════════════════════════════════════════ */

/* Immediate press feedback — slight inset shadow + scale-down so clicks
   feel tactile. Used on every .btn/button for the first 250ms of click. */
.btn.pressed, button.pressed {
    transform: translateY(1px) scale(0.98);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.25) !important;
    transition: transform 0.08s, box-shadow 0.08s;
}

/* Loading state — disabled button with spinner + "Working…" label.
   Keeps the width stable via min-width set by JS. */
.btn.is-loading, button.is-loading {
    pointer-events: none;
    cursor: progress;
    opacity: 0.85;
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn.is-loading .btn-loading-label, button.is-loading .btn-loading-label {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Inline spinner glyph */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-spinner { animation-duration: 2s; }
    .btn.pressed, button.pressed { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   State of Live Music Report (2026-04-22)
   Scoped under .report — long-form magazine layout with sticky TOC.
   ═══════════════════════════════════════════════════════════════════ */
.report { --r-accent: #ff006e; --r-accent-2: #ffbe0b; --r-warn: #ff5e5b; --r-up: #28a745; --r-down: #ff5e5b; }
.report { position: relative; color: var(--text-primary); padding: 0 0 80px; }
.report-page-bg { position: absolute; top: 0; left: 0; right: 0; height: 520px; background: radial-gradient(ellipse at top, rgba(255,0,110,0.14), transparent 60%), radial-gradient(ellipse at top right, rgba(255,190,11,0.08), transparent 60%); pointer-events: none; z-index: 0; }

/* Hero */
.report-hero { position: relative; z-index: 1; padding: 60px 20px 44px; max-width: 1200px; margin: 0 auto; }
.report-hero__inner { max-width: 960px; margin: 0 auto; text-align: center; }
.report-hero__eyebrow { display: inline-flex; gap: 10px; align-items: center; padding: 7px 18px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(255,0,110,0.12); border: 1px solid rgba(255,0,110,0.3); color: var(--r-accent); margin-bottom: 26px; }
.report-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--r-accent); animation: r-pulse 1.8s ease-in-out infinite; }
@keyframes r-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,110,0.6); } 50% { box-shadow: 0 0 0 8px rgba(255,0,110,0); } }
.report-hero__title { margin: 0 0 20px; line-height: 0.95; font-weight: 800; }
.report-hero__kicker { display: block; font-size: 1.35rem; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; margin-bottom: 10px; }
.report-hero__main { display: block; font-family: 'Bangers', 'Poppins', sans-serif; font-size: clamp(2.8rem, 8vw, 5.5rem); letter-spacing: 0.025em; background: linear-gradient(135deg, #fff 0%, var(--r-accent) 60%, var(--r-accent-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.report-hero__subtitle { font-size: 1.2rem; line-height: 1.5; color: rgba(255,255,255,0.78); max-width: 60ch; margin: 0 auto 20px; }
.report-hero__meta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-size: 0.88rem; color: rgba(255,255,255,0.55); margin-bottom: 22px; }
.report-hero__meta strong { color: rgba(255,255,255,0.85); font-weight: 600; }
.report-hero__share { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.report-share-btn { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); text-decoration: none; cursor: pointer; font-size: 0.86rem; font-family: inherit; transition: all 0.15s; }
.report-share-btn:hover { background: rgba(255,0,110,0.15); border-color: var(--r-accent); transform: translateY(-1px); }

/* Layout — TOC left, body right */
.report-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 1200px; margin: 0 auto; padding: 20px; gap: 40px; }
@media (max-width: 940px) { .report-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } .report-toc, .report-body { min-width: 0; } }

.report-toc__sticky { position: sticky; top: 80px; font-size: 0.9rem; }
.report-toc__heading { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--r-accent); font-weight: 700; margin-bottom: 12px; }
.report-toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid rgba(255,255,255,0.08); }
.report-toc li { margin: 0; }
.report-toc a { display: block; padding: 8px 14px; color: rgba(255,255,255,0.6); text-decoration: none; border-left: 2px solid transparent; margin-left: -2px; transition: all 0.15s; line-height: 1.35; }
.report-toc a:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.report-toc a.is-active { color: var(--r-accent); border-left-color: var(--r-accent); background: rgba(255,0,110,0.06); font-weight: 600; }
@media (max-width: 940px) { .report-toc__sticky { position: static; margin-bottom: 28px; } .report-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; border: none; } .report-toc a { border-radius: 6px; border: none; padding: 8px 12px; margin: 0; background: rgba(255,255,255,0.03); } }

/* Body */
.report-body { max-width: 780px; font-size: 1.02rem; line-height: 1.7; }
.report-section { margin: 0 0 64px; scroll-margin-top: 80px; }
.report-section__label { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255,0,110,0.12); color: var(--r-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.report-section h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 22px; font-weight: 700; line-height: 1.15; color: var(--text-primary); }
.report-section h3 { font-size: 1.22rem; margin: 30px 0 12px; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.report-section h4 { font-size: 1.02rem; margin: 18px 0 6px; font-weight: 600; color: var(--r-accent); }
.report-section p { margin: 0 0 14px; }
.report-section ul, .report-section ol { margin: 0 0 14px; padding-left: 22px; }
.report-section li { margin-bottom: 6px; }
.report-lede { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,0.85); }

/* Stat cards */
.report-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; }
.report-stat-grid--compact { margin: 16px 0 22px; }
.report-stat-card { padding: 18px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; border-left: 4px solid var(--r-accent); }
.report-stat-card--warn { border-left-color: var(--r-warn); }
.report-stat-card__num { font-size: 2.2rem; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.report-stat-card__label { font-size: 0.78rem; color: rgba(255,255,255,0.7); line-height: 1.4; }
.report-stat-card__label sup a { color: var(--r-accent); text-decoration: none; font-weight: 700; }

/* Pull-quotes */
.report-pullquote { margin: 30px -10px; padding: 22px 26px 22px 30px; border-left: 4px solid var(--r-accent); background: rgba(255,0,110,0.05); border-radius: 0 12px 12px 0; font-size: 1.22rem; line-height: 1.5; font-style: italic; color: #fff; position: relative; }
.report-pullquote cite { display: block; margin-top: 10px; font-size: 0.86rem; font-style: normal; color: rgba(255,255,255,0.6); }
.report-pullquote--big { font-size: 1.55rem; line-height: 1.35; padding: 32px; border-left-width: 6px; }

/* Data table */
.report-table-wrap { overflow-x: auto; margin: 20px -6px 14px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.report-table th { text-align: left; padding: 12px 14px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.08); }
.report-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
.report-table td.up { color: var(--r-up); font-weight: 600; }
.report-table td.down { color: var(--r-down); font-weight: 600; }
.report-table__total td { background: rgba(255,0,110,0.04); font-weight: 700; }
.report-table__caption { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.5); margin-top: 10px; font-style: italic; }

/* Festival timeline */
.report-timeline { margin: 24px 0 16px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,0.1); }
.report-timeline__item { padding: 14px 0 14px 20px; position: relative; font-size: 0.97rem; }
.report-timeline__item::before { content: ''; position: absolute; left: -6px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 2px solid #15122a; }
.report-timeline__item--emphasis { background: rgba(255,94,91,0.06); border-left: 2px solid var(--r-warn); margin-left: -2px; padding-left: 22px; border-radius: 0 10px 10px 0; }
.report-timeline__item--emphasis::before { background: var(--r-warn); box-shadow: 0 0 0 4px rgba(255,94,91,0.2); }
.report-timeline__year { display: inline-block; padding: 3px 10px; border-radius: 6px; background: rgba(255,0,110,0.15); color: var(--r-accent); font-size: 0.78rem; font-weight: 700; margin-right: 10px; font-variant-numeric: tabular-nums; }

.report-verdict { margin: 30px 0; padding: 18px 24px; font-size: 1.24rem; font-weight: 600; color: var(--r-warn); background: rgba(255,94,91,0.08); border: 1px solid rgba(255,94,91,0.25); border-radius: 12px; text-align: center; }

/* Forces (Part 4) */
.report-force { margin: 18px 0; padding: 18px 22px; background: rgba(255,255,255,0.03); border-radius: 12px; border-left: 3px solid rgba(255,255,255,0.2); }
.report-force h3 { margin-top: 0; }
.report-force--critical { border-left-color: var(--r-warn); background: rgba(255,94,91,0.05); }

/* Recommendations list (Part 5) */
.report-recs { list-style: none; counter-reset: rec; padding: 0; }
.report-recs li { position: relative; padding: 12px 0 12px 56px; counter-increment: rec; border-bottom: 1px solid rgba(255,255,255,0.06); }
.report-recs li::before { content: counter(rec); position: absolute; left: 0; top: 12px; width: 40px; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(135deg, var(--r-accent), var(--r-accent-2)); border-radius: 50%; font-weight: 800; color: #fff; font-size: 1rem; }

/* Hero paradox (Part 8) */
.report-section--hero { padding: 40px 0; }

/* Musick section (Part 10) */
.report-section--musick h3 { border-top: 2px solid rgba(255,0,110,0.2); padding-top: 22px; margin-top: 36px; }
.report-section--musick h4 { color: var(--text-primary); }

/* Vision box */
.report-vision { margin: 36px -20px 0; padding: 32px 28px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,0,110,0.12), rgba(255,190,11,0.06)); border: 1px solid rgba(255,0,110,0.25); }
.report-vision h3 { margin-top: 0 !important; border-top: none !important; padding-top: 0 !important; color: var(--r-accent) !important; }
.report-vision p:last-of-type { font-weight: 500; color: #fff; }
.report-vision__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.report-btn { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.15s; }
.report-btn--primary { background: linear-gradient(135deg, var(--r-accent), var(--r-accent-2)); color: #fff; box-shadow: 0 4px 14px rgba(255,0,110,0.35); }
.report-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,0,110,0.5); }
.report-btn--ghost { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; }
.report-btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--r-accent); }

/* Citations */
.report-citations { margin-top: 60px; padding-top: 40px; border-top: 2px solid rgba(255,255,255,0.08); }
.report-citations__list { padding-left: 20px; font-size: 0.92rem; line-height: 1.55; }
.report-citations__list li { margin-bottom: 12px; color: rgba(255,255,255,0.75); scroll-margin-top: 80px; }
.report-citations__list li:target { background: rgba(255,0,110,0.1); padding: 6px 10px; margin-left: -10px; border-radius: 6px; }
.report-citations__list a { color: var(--r-accent); }
.report-citations__footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 0.86rem; color: rgba(255,255,255,0.55); font-style: italic; }

/* Inline footnote refs */
.report-section sup a { color: var(--r-accent); text-decoration: none; font-weight: 700; padding: 0 2px; }
.report-section sup a:hover { text-decoration: underline; }

/* Light theme */
[data-theme="light"] .report { color: #1a1630; }
[data-theme="light"] .report-hero__kicker { color: rgba(26,22,48,0.6); }
[data-theme="light"] .report-hero__main { background: linear-gradient(135deg, #1a1630 0%, var(--r-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="light"] .report-hero__subtitle { color: rgba(26,22,48,0.75); }
[data-theme="light"] .report-hero__meta { color: rgba(26,22,48,0.55); }
[data-theme="light"] .report-hero__meta strong { color: #1a1630; }
[data-theme="light"] .report-share-btn { background: #fff; border-color: rgba(26,22,48,0.1); color: #1a1630; }
[data-theme="light"] .report-toc a { color: rgba(26,22,48,0.6); }
[data-theme="light"] .report-toc a:hover { color: #1a1630; background: rgba(26,22,48,0.03); }
[data-theme="light"] .report-lede { color: rgba(26,22,48,0.85); }
[data-theme="light"] .report-section h2, [data-theme="light"] .report-section h3 { color: #1a1630; }
[data-theme="light"] .report-stat-card { background: #fff; border-color: rgba(26,22,48,0.08); }
[data-theme="light"] .report-stat-card__num { color: #1a1630; }
[data-theme="light"] .report-stat-card__label { color: rgba(26,22,48,0.7); }
[data-theme="light"] .report-pullquote { background: rgba(255,0,110,0.04); color: #1a1630; }
[data-theme="light"] .report-table th { background: rgba(26,22,48,0.04); color: rgba(26,22,48,0.7); }
[data-theme="light"] .report-force { background: #fff; }
[data-theme="light"] .report-citations__list li { color: rgba(26,22,48,0.8); }

/* Mobile refinements (2026-04-23) — negative margins, typography, spacing, chart legibility */
@media (max-width: 720px) {
  .report { padding: 0 0 48px; }
  .report-page-bg { height: 360px; }

  .report-hero { padding: 24px 16px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px; }
  .report-hero__eyebrow { font-size: 0.62rem; letter-spacing: 0.14em; padding: 5px 11px; margin-bottom: 14px; }
  .report-hero__kicker { font-size: 0.92rem; margin-bottom: 4px; color: rgba(255,255,255,0.55); }
  .report-hero__title { margin: 0 0 12px; line-height: 0.95; }
  .report-hero__main { font-size: clamp(2rem, 10vw, 3.6rem); letter-spacing: 0.015em; overflow-wrap: break-word; word-break: break-word; hyphens: none; }
  .report-hero__subtitle { font-size: 0.94rem; line-height: 1.45; margin-bottom: 12px; max-width: 100%; }
  .report-hero__meta { font-size: 0.74rem; gap: 4px 8px; margin-bottom: 14px; }
  .report-hero__share { gap: 6px; display: grid; grid-template-columns: 1fr 1fr; }
  .report-share-btn { font-size: 0.76rem; padding: 8px 10px; text-align: center; justify-content: center; }

  .report-layout { padding: 16px; gap: 20px; }
  .report-toc__sticky { margin-bottom: 14px; }
  .report-toc ol { grid-template-columns: 1fr; gap: 3px; }
  .report-toc a { padding: 10px 14px; font-size: 0.92rem; }

  .report-body { font-size: 1rem; line-height: 1.65; }
  .report-section { margin: 0 0 44px; scroll-margin-top: 70px; }
  .report-section__label { font-size: 0.66rem; letter-spacing: 0.12em; padding: 3px 10px; margin-bottom: 10px; }
  .report-section h2 { margin: 0 0 14px; }
  .report-section h3 { font-size: 1.1rem; margin: 22px 0 8px; }
  .report-section h4 { font-size: 0.98rem; margin: 16px 0 4px; }
  .report-section ul, .report-section ol { padding-left: 20px; }
  .report-lede { font-size: 1.05rem; line-height: 1.55; }

  .report-stat-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; margin: 18px 0; }
  .report-stat-card { padding: 13px 14px; border-radius: 12px; border-left-width: 3px; }
  .report-stat-card__num { font-size: 1.65rem; }
  .report-stat-card__label { font-size: 0.72rem; }

  /* Drop risky negative margins that can cause horizontal overflow on narrow viewports */
  .report-pullquote { margin: 22px 0; padding: 18px 18px 18px 20px; font-size: 1.05rem; line-height: 1.5; border-radius: 0 10px 10px 0; }
  .report-pullquote--big { font-size: 1.18rem; line-height: 1.35; padding: 20px 20px; border-left-width: 4px; }
  .report-pullquote cite { font-size: 0.78rem; margin-top: 8px; }

  .report-table-wrap { margin: 16px 0 10px; }
  .report-table { font-size: 0.85rem; }
  .report-table th { padding: 9px 10px; font-size: 0.66rem; letter-spacing: 0.05em; }
  .report-table td { padding: 9px 10px; }
  .report-table__caption { font-size: 0.76rem; }

  .report-timeline { padding-left: 4px; margin: 18px 0 10px; }
  .report-timeline__item { padding: 12px 0 12px 16px; font-size: 0.93rem; }
  .report-timeline__item::before { top: 18px; }
  .report-timeline__item--emphasis { padding-left: 18px; }
  .report-timeline__year { font-size: 0.72rem; padding: 2px 8px; margin-right: 8px; }

  .report-verdict { margin: 22px 0; padding: 14px 16px; font-size: 1.05rem; line-height: 1.35; }

  .report-force { margin: 14px 0; padding: 14px 16px; }
  .report-force h3 { font-size: 1.08rem; }

  .report-recs li { padding: 10px 0 10px 46px; }
  .report-recs li::before { width: 32px; height: 32px; line-height: 32px; font-size: 0.88rem; top: 10px; }

  .report-section--hero { padding: 16px 0; }
  .report-section--musick h3 { padding-top: 18px; margin-top: 28px; }

  .report-vision { margin: 28px 0 0; padding: 22px 18px; border-radius: 16px; }
  .report-vision__cta { flex-direction: column; gap: 8px; margin-top: 16px; }
  .report-vision__cta .report-btn { width: 100%; justify-content: center; }
  .report-btn { padding: 11px 18px; font-size: 0.92rem; }

  /* Chart SVG — bump inline font attributes so labels are legible on small screens */
  .report-chart svg { width: 100%; height: auto; display: block; }
  .report-chart svg text { font-size: 16px; font-weight: 600; }
  .report-chart__title { font-size: 0.95rem; }
  .report-chart__note { font-size: 0.78rem; line-height: 1.4; }

  .report-citations { margin-top: 40px; padding-top: 28px; }
  .report-citations__list { padding-left: 18px; font-size: 0.88rem; }
  .report-citations__footer { font-size: 0.8rem; }
}

@media (max-width: 420px) {
  .report-hero { padding: 20px 14px 22px; }
  .report-hero__kicker { font-size: 0.85rem; }
  .report-hero__main { font-size: clamp(1.75rem, 9.5vw, 2.6rem); }
  .report-hero__subtitle { font-size: 0.9rem; }
  .report-hero__meta { gap: 4px 6px; font-size: 0.72rem; }
  .report-hero__meta span:nth-child(2), .report-hero__meta span:nth-child(4) { display: none; }
  .report-share-btn { font-size: 0.72rem; padding: 7px 8px; }
  .report-stat-grid { grid-template-columns: 1fr 1fr; }
  .report-stat-card { padding: 12px 12px; }
  .report-stat-card__num { font-size: 1.45rem; }
  .report-stat-card__label { font-size: 0.68rem; }
  .report-pullquote { font-size: 1rem; padding: 16px 16px 16px 18px; }
  .report-pullquote--big { font-size: 1.08rem; padding: 18px 16px; }
  .report-timeline__year { display: block; width: fit-content; margin: 0 0 6px; }
  .report-recs li { padding: 10px 0 10px 42px; }
  .report-recs li::before { width: 28px; height: 28px; line-height: 28px; font-size: 0.8rem; top: 12px; }
  .report-verdict { font-size: 0.98rem; padding: 12px 14px; }
}

/* Homepage report banner — appears above .home-hero */
.hp-report-banner { display: block; text-decoration: none; background: linear-gradient(90deg, rgba(255,0,110,0.18), rgba(255,190,11,0.12) 60%, rgba(255,0,110,0.06)); border-bottom: 1px solid rgba(255,0,110,0.25); position: relative; overflow: hidden; transition: all 0.15s; }
.hp-report-banner::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: hp-shine 4s ease-in-out infinite; }
@keyframes hp-shine { 0%, 60% { left: -100%; } 100% { left: 100%; } }
.hp-report-banner:hover { background: linear-gradient(90deg, rgba(255,0,110,0.25), rgba(255,190,11,0.15) 60%, rgba(255,0,110,0.1)); }
.hp-report-banner__inner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hp-report-banner__label { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; background: rgba(255,0,110,0.25); border-radius: 999px; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
.hp-report-banner__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: r-pulse 1.8s ease-in-out infinite; }
.hp-report-banner__title { font-weight: 700; color: #fff; font-size: 1rem; }
.hp-report-banner__sub { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-left: auto; }
@media (max-width: 720px) { .hp-report-banner__sub { margin-left: 0; width: 100%; } }
[data-theme="light"] .hp-report-banner { background: linear-gradient(90deg, rgba(255,0,110,0.1), rgba(255,190,11,0.06) 60%, rgba(255,0,110,0.04)); border-bottom-color: rgba(255,0,110,0.2); }
[data-theme="light"] .hp-report-banner__title, [data-theme="light"] .hp-report-banner__sub { color: #1a1630; }

/* ── Homepage feature — data-driven announcement above the hero (reusable) ── */
.hp-feature { display: flex; align-items: stretch; max-width: 1200px; margin: 18px auto 0; border-radius: 16px; overflow: hidden; text-decoration: none; background: linear-gradient(110deg, #14101f 0%, #1b1430 55%, #241a3d 100%); border: 1px solid rgba(131,56,236,0.35); box-shadow: 0 10px 40px rgba(0,0,0,0.35); position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hp-feature::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation: hp-shine 4s ease-in-out infinite; pointer-events: none; }
.hp-feature:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(131,56,236,0.28); border-color: rgba(255,0,110,0.5); }
.hp-feature__media { flex: 0 0 38%; max-width: 38%; overflow: hidden; }
.hp-feature__media img { width: 100%; height: 100%; min-height: 128px; object-fit: cover; object-position: center 20%; display: block; }
.hp-feature__body { flex: 1; min-width: 0; padding: 13px 24px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.hp-feature__label { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, #ff006e, #8338ec); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.hp-feature__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: r-pulse 1.8s ease-in-out infinite; }
.hp-feature__title { color: #fff; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.hp-feature__sub { color: rgba(255,255,255,0.8); font-size: .98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-feature__cta { align-self: flex-start; margin-top: 4px; color: #fff; font-weight: 700; font-size: .95rem; border-bottom: 2px solid #ff006e; padding-bottom: 2px; }
@media (max-width: 760px) { .hp-feature { flex-direction: column; margin: 12px 12px 0; } .hp-feature__media, .hp-feature__media img { max-width: 100%; flex-basis: auto; } .hp-feature__media img { height: 200px; min-height: 0; } .hp-feature__title { font-size: 1.25rem; } .hp-feature__body { padding: 18px 20px; } }
[data-theme="light"] .hp-feature { background: linear-gradient(110deg, #ede8f8, #e4dcf2); border-color: rgba(131,56,236,0.25); box-shadow: 0 8px 30px rgba(131,56,236,0.12); }
[data-theme="light"] .hp-feature__title { color: #1a1a2e; }
[data-theme="light"] .hp-feature__sub { color: rgba(26,26,46,0.78); }
[data-theme="light"] .hp-feature__cta { color: #1a1a2e; }

/* Report figures + SVG chart */
.report-figure { margin: 28px -20px; }
.report-figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.report-figure figcaption { margin-top: 10px; padding: 0 4px; font-size: 0.86rem; color: rgba(255,255,255,0.6); font-style: italic; line-height: 1.5; text-align: center; }
.report-figure--paradox { margin-bottom: 14px; }

.report-chart { margin: 28px -20px 36px; padding: 22px 24px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; }
.report-chart__title { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--r-accent); margin-bottom: 14px; font-style: normal; text-align: left; }
.report-chart svg { display: block; width: 100%; height: auto; max-height: 320px; }
.report-chart__note { margin-top: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.5); font-style: italic; line-height: 1.5; }

@media (max-width: 720px) {
    .report-figure, .report-chart { margin-left: 0; margin-right: 0; }
}

[data-theme="light"] .report-figure figcaption { color: rgba(26,22,48,0.65); }
[data-theme="light"] .report-chart { background: #fff; border-color: rgba(26,22,48,0.1); }
[data-theme="light"] .report-chart svg text[fill^="rgba(255"] { fill: rgba(26,22,48,0.75) !important; }

/* Artist page — "Charted on" sidebar (GH #193) */
.artist-charts-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.artist-chart-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.artist-chart-item:last-child { border-bottom: none; padding-bottom: 0; }
.artist-chart-link { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.86rem; font-weight: 600; }
.artist-chart-link:hover { color: var(--pink); text-decoration: underline; }
.artist-chart-meta { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
[data-theme="light"] .artist-chart-link { color: rgba(26,22,48,0.85); }
[data-theme="light"] .artist-chart-meta { color: rgba(26,22,48,0.55); }
[data-theme="light"] .artist-chart-item { border-bottom-color: rgba(26,22,48,0.08); }

/* ── Reusable city typeahead (includes/city-typeahead.php) ──────────────────── */
.city-typeahead { max-width: 460px; margin: 22px auto 0; position: relative; }
.city-typeahead-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.city-typeahead-wrap { display: flex; align-items: stretch; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.4); border-radius: 999px; overflow: hidden; backdrop-filter: blur(6px); transition: border-color 0.15s, box-shadow 0.15s; }
.city-typeahead-wrap:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.city-typeahead-icon { display: flex; align-items: center; padding: 0 8px 0 16px; color: rgba(255,255,255,0.85); }
.city-typeahead-input { flex: 1; min-width: 0; padding: 12px 8px; font-size: 1rem; background: transparent; border: 0; outline: none; color: #fff; }
.city-typeahead-input::placeholder { color: rgba(255,255,255,0.65); }
.city-typeahead-go { padding: 0 18px; background: rgba(255,255,255,0.22); border: 0; color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.city-typeahead-go:hover { background: rgba(255,255,255,0.32); }
.city-typeahead-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 14px 32px rgba(0,0,0,0.35); z-index: 30; max-height: 320px; overflow-y: auto; }
.city-typeahead-list[hidden] { display: none; }
.city-typeahead-list li { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; }
.city-typeahead-list li:hover, .city-typeahead-list li.active { background: rgba(131,56,236,0.16); }
.city-typeahead-name { font-weight: 600; color: var(--text-primary); }
.city-typeahead-state { font-size: 0.78rem; color: var(--text-muted); margin-left: 12px; }
.city-typeahead-fallback { margin-top: 14px; }
.city-typeahead-fallback summary { cursor: pointer; font-size: 0.85rem; color: rgba(255,255,255,0.55); padding: 6px 0; user-select: none; }
.city-typeahead-fallback summary:hover { color: rgba(255,255,255,0.85); }
.city-typeahead-fallback[open] summary { color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.city-typeahead-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 4px; }
.city-typeahead-pill { font-size: 0.82rem; padding: 6px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; color: rgba(255,255,255,0.6); text-decoration: none; transition: all 0.15s; }
.city-typeahead-pill:hover { background: rgba(131,56,236,0.15); border-color: rgba(131,56,236,0.3); color: #fff; }
[data-theme="light"] .city-typeahead-pill { background: #f0f0f0; border-color: #ddd; color: #555; }
[data-theme="light"] .city-typeahead-pill:hover { background: rgba(131,56,236,0.1); border-color: rgba(131,56,236,0.3); color: var(--purple); }
[data-theme="light"] .city-typeahead-fallback summary { color: rgba(0,0,0,0.55); }
[data-theme="light"] .city-typeahead-fallback summary:hover { color: rgba(0,0,0,0.85); }
@media (max-width: 560px) {
    .city-typeahead { max-width: 100%; }
    .city-typeahead-input { font-size: 0.95rem; padding: 11px 6px; }
}

/* ── Footer "Gig Locations" expander ────────────────────────────────────────── */
.footer-locations-details summary { cursor: pointer; font-size: 0.84rem; color: rgba(255,255,255,0.55); padding: 4px 0; user-select: none; }
.footer-locations-details summary:hover { color: rgba(255,255,255,0.8); }
.footer-locations-details[open] summary { color: rgba(255,255,255,0.8); margin-bottom: 6px; }
.footer-links--locations { columns: 2; column-gap: 14px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.footer-links--locations li { break-inside: avoid; }
.footer-links--locations a { font-size: 0.78rem; }

/* ── Nav city picker (Phase 3) ──────────────────────────────────────────────── */
.nav-city-picker { margin-left: 4px; }
.nav-city-pill {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 6px 12px !important;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
}
.nav-city-pill:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.3); }
.nav-city-pill .nav-city-label { white-space: nowrap; }
[data-theme="light"] .nav-city-pill {
    background: rgba(131,56,236,0.08);
    border-color: rgba(131,56,236,0.22);
    color: var(--purple, #8338EC) !important;
}
[data-theme="light"] .nav-city-pill:hover {
    background: rgba(131,56,236,0.16);
    border-color: rgba(131,56,236,0.4);
}
.nav-city-picker .dropdown-menu { min-width: 200px; }
.nav-city-picker .dropdown-item.active::after {
    content: "✓";
    margin-left: auto;
    padding-left: 8px;
    color: var(--purple, #8338EC);
    font-weight: 700;
}

/* ── Album-art <img> inside .album-art container ────────────────────────────
   The .album-art rules (lines 1109, 2677, 5263) size a 50/55/80px square
   but never sized the <img> inside it. On the artist-tour song list the
   artwork-proxy returns the full-resolution WebP, which then overflowed
   the box in all directions and stacked the cover images on top of the
   song titles. Constrain img to the parent box. */
.album-art {
    overflow: hidden;
}
.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ==========================================================================
   Homepage hero + sections — moved from index.php inline <style> block to
   eliminate FOUC. Browser was painting hero HTML before parsing the inline
   stylesheet at the bottom of index.php's body, causing a visible flash of
   unstyled content. Loading these rules from the head-positioned style.css
   means hero renders styled on first paint.
   ========================================================================== */
/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-hero {
    position: relative;
    padding: 80px 20px 60px;
    text-align: center;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Carousel slides */
.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }

/* Fallback video */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.72;
}

/* Scrim — heavy at bottom to anchor text, lighter at top */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom,
            rgba(8,8,15,0.55) 0%,
            rgba(8,8,15,0.25) 40%,
            rgba(8,8,15,0.55) 70%,
            rgba(8,8,15,0.85) 100%);
    pointer-events: none;
}

.home-hero .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}
@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-tagline {
    font-family: 'Bangers', cursive;
    font-size: 2.8rem;
    font-weight: 400;
    color: white;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    letter-spacing: 2px;
    margin: 0 0 10px;
    line-height: 1.15;
}
.tagline-accent {
    background: linear-gradient(90deg, var(--pink, #FF006E), #ff9f43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    display: inline-block;
}
.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin: 0 0 14px;
}
.hero-tonight {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
/* Single fast fade-in — no staggered delays (was causing visible "flicker
   through layers" as each hero element appeared separately over 1.3s). */
.hero-tagline,
.hero-subtitle,
.hero-tonight { animation: hero-fade-in 0.28s ease-out 0.05s both; }
@media (prefers-reduced-motion: reduce) {
    .hero-tagline, .hero-subtitle, .hero-tonight { animation: none; }
}
.hero-tonight-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.hero-tonight-city {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 0.82rem;
    color: #fff;
    text-decoration: none;
    transition: background 0.15s;
}
.hero-tonight-city:hover { background: rgba(255,0,204,0.3); border-color: rgba(255,0,204,0.5); }
.hero-tonight-count {
    background: rgba(255,0,204,0.7);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Carousel UI — caption + dots + city picker */
.hero-carousel-ui {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.hero-carousel-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero-caption {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    padding: 8px 18px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
    max-width: 480px;
}
.hero-caption:hover { background: rgba(131,56,236,0.35); border-color: rgba(131,56,236,0.5); }
.hero-caption-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.hero-caption-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
@keyframes captionFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-caption.caption-in { animation: captionFade 0.4s ease both; }
.hero-dots {
    display: flex;
    gap: 7px;
    align-items: center;
}
.hero-dot {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, transform 0.25s;
}
.hero-dot.active {
    background: white;
    transform: scale(1.3);
}
.hero-dot:hover { background: rgba(255,255,255,0.7); }

/* City picker */
.hero-city-picker {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hero-city-picker-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.hero-city-picker select {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-family: inherit;
    padding: 4px 10px;
    cursor: pointer;
    outline: none;
    appearance: auto;
    transition: background 0.15s, border-color 0.15s;
}
.hero-city-picker select:hover,
.hero-city-picker select:focus {
    background: rgba(255,0,204,0.2);
    border-color: rgba(255,0,204,0.5);
}
[data-theme="light"] .hero-city-picker-label { color: rgba(255,255,255,0.7); }
[data-theme="light"] .hero-city-picker select { color: white; border-color: rgba(255,255,255,0.4); }

@media (max-width: 768px) {
    /*
     * Mobile hero layout:
     *   [text at top — on solid dark bg]
     *   [image visible in middle — scrim window]
     *   [carousel caption + controls at bottom — dark bg]
     *
     * hero-content becomes a column flex so margin-top:auto on
     * hero-carousel-ui pushes it to the bottom of the stretched container.
     * Desktop is unaffected — all rules live inside this breakpoint.
     */
    .home-hero {
        min-height: 580px;
        align-items: stretch;   /* hero-content fills full hero height */
        padding: 0 16px 0;
    }
    .home-hero .hero-content {
        display: flex;
        flex-direction: column;
        padding-top: 28px;
    }
    /* Push carousel UI (caption + dots + city picker) to the bottom */
    .hero-carousel-ui {
        margin-top: auto;
        padding-bottom: 18px;
    }
    /*
     * Scrim acts as a 3-zone mask:
     *   0-32%   solid dark  → opaque background behind title text
     *   32-44%  fade out    → transition into image zone
     *   44-72%  transparent → image fully visible
     *   72-84%  fade in     → transition into controls zone
     *   84-100% solid dark  → opaque background behind caption/dots
     */
    .hero-scrim {
        background: linear-gradient(to bottom,
            rgba(8,8,15,1.00) 0%,
            rgba(8,8,15,0.98) 30%,
            rgba(8,8,15,0.35) 40%,
            rgba(8,8,15,0.04) 46%,
            rgba(8,8,15,0.04) 70%,
            rgba(8,8,15,0.72) 82%,
            rgba(8,8,15,0.97) 92%,
            rgba(8,8,15,1.00) 100%);
    }
    /* Show the upper-mid of carousel photos (stage/artist zone) */
    .hero-slide { background-position: center 35%; }
    .hero-tagline { font-size: 1.35rem; }
    .hero-subtitle { font-size: 0.85rem; }
    /* Tonight pills: compact on mobile */
    .hero-tonight-city { padding: 4px 10px; font-size: 0.78rem; }
    /* Caption: constrain to viewport width */
    .hero-caption { max-width: calc(100vw - 32px); }
    .hero-caption-title,
    .hero-caption-meta { max-width: calc(100vw - 68px); }
    /* Dots: transparent 28px button + 8px ::after visual dot */
    .hero-dot {
        background: transparent !important;
        transform: none !important;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-dot::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: background 0.25s, transform 0.25s;
        flex-shrink: 0;
        display: block;
    }
    .hero-dot.active::after { background: white; transform: scale(1.3); }
    .hero-dot:hover::after { background: rgba(255,255,255,0.7); }
    .hero-dots { gap: 0; }
}
@media (max-width: 480px) {
    .home-hero { min-height: 540px; }
    .hero-tagline { font-size: 1.2rem; letter-spacing: 0.5px; }
    .hero-subtitle { font-size: 0.82rem; }
    /* Tonight pills: horizontal scroll to prevent ragged multi-row wrapping */
    .hero-tonight {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        mask-image: linear-gradient(to right, transparent 0, black 4px, black calc(100% - 20px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 4px, black calc(100% - 20px), transparent 100%);
    }
    .hero-tonight::-webkit-scrollbar { display: none; }
    .hero-tonight-label { flex-shrink: 0; }
    .hero-tonight-city { flex-shrink: 0; }
    /* Caption text wraps naturally on small screens */
    .hero-caption-title { white-space: normal; font-size: 0.8rem; }
    .hero-caption-meta { white-space: normal; font-size: 0.7rem; }
    /* Dots + city picker row */
    .hero-carousel-footer { gap: 10px; }
    .hero-city-picker select { font-size: 0.72rem; padding: 4px 8px; }
}
[data-theme="light"] .hero-tagline { color: #1a1a2e; text-shadow: 2px 2px 0 rgba(255,255,255,0.5); }
[data-theme="light"] .hero-subtitle { color: #2d2d44; }
[data-theme="light"] .hero-scrim { background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.4) 70%, rgba(255,255,255,0.75) 100%); }

/* ── Set Times (lead feature) ─────────────────────────────────────────────── */
.hp-set-times {
    background: linear-gradient(135deg, rgba(131,56,236,0.12), rgba(255,0,110,0.08));
    border-top: 1px solid rgba(131,56,236,0.2);
    border-bottom: 1px solid rgba(131,56,236,0.15);
    padding: 48px 20px;
}
.hp-set-times-inner {
    max-width: 680px;
    margin: 0 auto;
}
.hp-sts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.hp-sts-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pink, #FF006E);
    margin: 0 0 6px;
}
.hp-sts-h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: white;
}
.hp-sts-sub {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    margin: 0;
}
.hp-sts-stat {
    text-align: right;
    flex-shrink: 0;
}
.hp-sts-stat-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--pink, #FF006E);
    line-height: 1;
}
.hp-sts-stat-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sts-input-wrap {
    position: relative;
    margin-bottom: 0;
}
.sts-input-wrap input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    padding: 14px 20px 14px 46px;
    color: var(--text-color, #e0e0e0);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sts-input-wrap input::placeholder { color: rgba(255,255,255,0.35); }
.sts-input-wrap input:focus {
    border-color: rgba(131,56,236,0.6);
    box-shadow: 0 0 20px rgba(131,56,236,0.15);
}
.sts-input-icon {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.45;
    pointer-events: none;
}
.sts-results { max-width: 100%; margin: 14px 0 0; }
@media (max-width: 600px) {
    .hp-sts-header { flex-direction: column; gap: 12px; }
    .hp-sts-stat { text-align: left; }
    .hp-sts-h2 { font-size: 1.3rem; }
}
[data-theme="light"] .hp-set-times { background: linear-gradient(135deg, rgba(131,56,236,0.06), rgba(255,0,110,0.04)); border-color: rgba(131,56,236,0.12); }
[data-theme="light"] .hp-sts-h2 { color: #1a1a2e; }
[data-theme="light"] .hp-sts-sub { color: rgba(0,0,0,0.45); }
[data-theme="light"] .sts-input-wrap input { background: #f5f5f5; border-color: #ddd; color: #333; }
[data-theme="light"] .sts-input-wrap input::placeholder { color: #aaa; }

/* ── Set time result cards (shared with old STS widget) ───────────────────── */
.sts-result-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
    color: inherit;
}
.sts-result-card:hover { background: rgba(131,56,236,0.1); border-color: rgba(131,56,236,0.3); transform: translateY(-2px); }
.sts-result-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.sts-result-title { font-weight: 700; font-size: 1rem; }
.sts-result-date { font-size: 0.78rem; background: rgba(131,56,236,0.15); padding: 3px 10px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; color: var(--purple, #B794F6); font-weight: 600; }
.sts-result-venue { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; }
.sts-set-times-row { display: flex; flex-wrap: wrap; gap: 7px; }
.sts-set-chip { background: rgba(131,56,236,0.12); border: 1px solid rgba(131,56,236,0.2); border-radius: 10px; padding: 5px 11px; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
.sts-set-chip.headline { background: rgba(255,0,110,0.12); border-color: rgba(255,0,110,0.25); }
.sts-set-chip .chip-time { font-weight: 700; color: var(--pink, #FF006E); }
.sts-set-chip .chip-est, .sts-set-chip .chip-tba { font-size: 0.7rem; opacity: 0.55; }
.sts-no-results { text-align: center; padding: 18px; color: var(--text-muted); font-size: 0.9rem; }
.sts-no-results a { color: var(--pink); }
.sts-loading { text-align: center; padding: 18px; color: var(--text-muted); }

/* ── What's On ───────────────────────────────────────────────────────────── */
.home-whats-on { padding: 48px 20px; }
.whats-on-inner { max-width: 1200px; margin: 0 auto; }
.whats-on-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.whats-on-header h2 { margin: 0; font-size: 1.3rem; }
.whats-on-view-all { font-size: 0.88rem; color: var(--pink, #FF006E); text-decoration: none; font-weight: 600; }
.whats-on-view-all:hover { text-decoration: underline; }
.whats-on-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.whats-on-card { text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); transition: transform 0.2s, border-color 0.2s; display: block; }
.whats-on-card:hover { transform: translateY(-3px); border-color: rgba(131,56,236,0.3); }
.whats-on-img { height: 160px; background-size: cover; background-position: center; position: relative; }
.whats-on-date { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; }
.whats-on-featured { position: absolute; top: 10px; right: 10px; background: var(--pink, #FF006E); color: white; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; text-transform: uppercase; }
.whats-on-info { padding: 14px 16px; }
.whats-on-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 4px; line-height: 1.3; }
.whats-on-venue { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 8px; }
.whats-on-ticket { display: inline-block; font-size: 0.78rem; background: rgba(131,56,236,0.15); color: var(--purple, #B794F6); border-radius: 8px; padding: 3px 10px; font-weight: 600; }
.whats-on-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.whats-on-city-link { font-size: 0.82rem; padding: 6px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; color: rgba(255,255,255,0.6); text-decoration: none; transition: all 0.15s; }
.whats-on-city-link:hover { background: rgba(131,56,236,0.15); border-color: rgba(131,56,236,0.3); color: white; }
[data-theme="light"] .whats-on-card { background: #f9f9f9; border-color: #eee; }
[data-theme="light"] .whats-on-city-link { background: #f0f0f0; border-color: #ddd; color: #555; }

/* ── Trending ─────────────────────────────────────────────────────────────── */
.trending-widget { background: linear-gradient(135deg, rgba(255,0,110,0.08), rgba(131,56,236,0.12)); border: 1px solid rgba(255,0,110,0.18); border-radius: 20px; padding: 35px 30px; text-align: center; }
.trending-widget h2 { margin: 0 0 6px; font-size: 1.4rem; }
.trending-subtitle { color: var(--text-muted); margin: 0 0 24px; font-size: 0.9rem; }
.trending-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: left; }
.trending-col h3 { font-size: 0.95rem; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.trending-list { list-style: none; padding: 0; margin: 0; }
.trending-list li { margin-bottom: 4px; }
.trending-list li a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: var(--text-color, #e0e0e0); transition: background 0.2s; font-size: 0.88rem; min-width: 0; }
.trending-list li a:hover { background: rgba(255,255,255,0.05); }
.trending-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.trending-views { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.quick-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; color: var(--text-color,#e0e0e0); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: all 0.2s; }
.quick-link:hover { background: rgba(131,56,236,0.15); border-color: rgba(131,56,236,0.3); }
@media (max-width: 768px) {
    .trending-columns { grid-template-columns: 1fr; gap: 18px; }
    .trending-widget { padding: 24px 18px; }
    /* Allow names to wrap in single-column layout instead of truncating */
    .trending-name { white-space: normal; overflow: hidden; text-overflow: clip; }
    .trending-list li a { align-items: flex-start; }
}
[data-theme="light"] .trending-widget { background: linear-gradient(135deg, rgba(255,0,110,0.05), rgba(131,56,236,0.07)); border-color: rgba(131,56,236,0.12); }
[data-theme="light"] .trending-col h3 { border-bottom-color: rgba(0,0,0,0.1); }
[data-theme="light"] .quick-link { background: #f5f5f5; border-color: #e0e0e0; color: #333; }

/* ── Brand film ──────────────────────────────────────────────────────────── */
.hp-film {
    background: #0a0a14;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 60px 20px;
}
.hp-film-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 52px;
    align-items: center;
}
.hp-film-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pink, #FF006E);
    margin: 0 0 12px;
}
.hp-film-headline {
    font-family: 'Bangers', cursive;
    font-size: 2.8rem;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.1;
    color: white;
    margin: 0 0 16px;
}
.hp-film-accent {
    background: linear-gradient(90deg, var(--pink, #FF006E), #ff9f43);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hp-film-sub {
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
    font-size: 0.95rem;
    margin: 0 0 28px;
}
.hp-film-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--purple,#8338EC), var(--pink,#FF006E));
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: opacity 0.2s, transform 0.2s;
}
.hp-film-cta:hover { opacity: 0.9; transform: translateY(-2px); }
.hp-film-play { width: 14px; height: 14px; flex-shrink: 0; }
.hp-film-embed {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.yt-facade {
    position: relative;
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s;
}
.yt-facade:hover .yt-play-btn { transform: translate(-50%, -50%) scale(1.1); }
@media (max-width: 860px) {
    .hp-film-inner { grid-template-columns: 1fr; gap: 32px; }
    .hp-film-headline { font-size: 2.2rem; }
}
@media (max-width: 480px) {
    .hp-film { padding: 40px 16px; }
    .hp-film-headline { font-size: 1.8rem; }
}
[data-theme="light"] .hp-film { background: #f5f0ff; border-color: rgba(131,56,236,0.1); }
[data-theme="light"] .hp-film-headline { color: #1a1a2e; }
[data-theme="light"] .hp-film-sub { color: rgba(0,0,0,0.5); }

/* ── Editorial strip ─────────────────────────────────────────────────────── */
.hp-editorial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.hp-editorial-header h2 { margin: 0; font-size: 1.3rem; }
.hp-editorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.hp-editorial-card {
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    transition: transform 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}
.hp-editorial-card:hover { transform: translateY(-3px); border-color: rgba(131,56,236,0.3); }
.hp-editorial-img { height: 150px; background-size: cover; background-position: center top; }
.hp-editorial-body { padding: 14px 16px; flex: 1; }
.hp-editorial-date { font-size: 0.72rem; color: var(--text-muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.hp-editorial-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.hp-editorial-excerpt { font-size: 0.82rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
[data-theme="light"] .hp-editorial-card { background: #f9f9f9; border-color: #eee; }

/* ── Photographer community ──────────────────────────────────────────────── */
.hp-photos-section { background: #0c0c1a; border-top: 1px solid rgba(131,56,236,0.15); border-bottom: 1px solid rgba(131,56,236,0.1); padding: 56px 20px; overflow: hidden; }
.hp-photos-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }
.hp-photos-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pink, #FF006E); margin: 0 0 8px; }
.hp-photos-h2 { font-size: 1.7rem; font-weight: 800; color: white; margin: 0 0 10px; line-height: 1.2; }
.hp-photos-sub { color: rgba(255,255,255,0.5); line-height: 1.6; font-size: 0.9rem; margin: 0 0 22px; }
.hp-photos-ctas { display: flex; flex-direction: column; gap: 10px; }
.hp-photos-cta-primary { display: inline-block; background: linear-gradient(135deg, var(--purple,#8338EC), var(--pink,#FF006E)); color: white; text-decoration: none; padding: 11px 22px; border-radius: 10px; font-weight: 600; font-size: 0.88rem; transition: opacity 0.2s, transform 0.2s; align-self: flex-start; }
.hp-photos-cta-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.hp-photos-cta-secondary { display: inline-block; color: rgba(255,255,255,0.5); text-decoration: none; font-size: 0.82rem; transition: color 0.15s; }
.hp-photos-cta-secondary:hover { color: white; }
.hp-photos-grid { columns: 3; column-gap: 8px; }
.hp-photo-tile { position: relative; border-radius: 8px; overflow: hidden; break-inside: avoid; margin-bottom: 8px; display: block; text-decoration: none; }
.hp-photo-tile img { width: 100%; display: block; transition: transform 0.35s; }
.hp-photo-tile:hover img { transform: scale(1.07); }
.hp-photo-tile-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.25s; display: flex; align-items: flex-end; padding: 8px; opacity: 0; }
.hp-photo-tile:hover .hp-photo-tile-overlay { background: rgba(0,0,0,0.5); opacity: 1; }
.hp-photo-tile-overlay span { font-size: 0.7rem; color: rgba(255,255,255,0.9); font-weight: 600; }
@media (max-width: 960px) { .hp-photos-inner { grid-template-columns: 1fr; } }
@media (max-width: 500px) { .hp-photos-grid { columns: 2; } .hp-photos-h2 { font-size: 1.4rem; } }
[data-theme="light"] .hp-photos-section { background: #f8f5ff; }
[data-theme="light"] .hp-photos-h2 { color: #1a1a2e; }
[data-theme="light"] .hp-photos-sub { color: rgba(0,0,0,0.5); }

/* ── Authority bar ───────────────────────────────────────────────────────── */
.hp-authority {
    padding: 40px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 20px;
}
.hp-authority-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.hp-authority-stat {
    text-align: center;
    padding: 12px 28px;
    flex-shrink: 0;
}
.hp-auth-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 4px;
}
.hp-auth-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.hp-authority-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .hp-authority-inner { gap: 0; }
    .hp-authority-stat { padding: 10px 16px; }
    .hp-auth-num { font-size: 1.2rem; }
    .hp-authority-divider { display: none; }
}
[data-theme="light"] .hp-auth-num { color: #1a1a2e; }
[data-theme="light"] .hp-authority-divider { background: rgba(0,0,0,0.1); }
[data-theme="light"] .hp-authority { border-top-color: rgba(0,0,0,0.07); }

/* ─── Save Gig button (#257) — global heart toggle ─────────────────────── */
.save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.save-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,107,157,0.6); }
.save-btn--saved { background: rgba(255,107,157,0.18); border-color: #ff6b9d; color: #ff6b9d; }
.save-btn--saved:hover { background: rgba(255,107,157,0.28); }
.save-btn--just-toggled { transform: scale(0.92); }
.save-btn .save-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
.save-btn .save-btn-label { font-weight: 600; }

/* Hero variant — sits below <h1> on /gig/{slug}/ */
.gig-hero-save {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

/* Nav count badge — "My Saved (N)" */
.nav-count { font-weight: 600; opacity: 0.85; margin-left: 0.15em; }

/* Save button on gig cards (#257 — listings get hearts so users can save
   without opening the detail page). Positioned absolute so the existing
   horizontal flex layout of .gig-card stays untouched. The heart-icon
   sizing inside is overridden below so the outline reads as a heart at
   a glance, not as a featureless dot (user feedback 2026-05-07). */
.gig-card { position: relative; }
.save-btn--card {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;                           /* heart stroke = currentColor */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Bigger heart inside the card-style save button — 22px on 40px reads
   as "heart" instantly; the previous 18px on 38px scanned as a dot. */
.save-btn--card .save-btn-icon { width: 22px; height: 22px; stroke-width: 2.4; }
.save-btn--card:hover {
  background: rgba(0, 0, 0, 0.78);
  color: #ff6b9d;
  border-color: rgba(255, 107, 157, 0.7);
}
.save-btn--card.save-btn--saved {
  background: rgba(255, 107, 157, 0.95);
  border-color: rgba(255, 107, 157, 1);
  color: #fff;
}
[data-theme="light"] .save-btn--card {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .save-btn--card:hover { color: #ff006e; border-color: rgba(255, 0, 110, 0.4); }

/* Phase 3 — additional listing wrappers that need position:relative
   to anchor the absolute save button (#271). Each pair adds the
   anchoring rule + tweaks button placement when the card is small. */
.set-times-gig,
.regional-gig-card,
.search-result-card-wrap { position: relative; }
.set-times-gig .save-btn--card,
.regional-gig-card .save-btn--card { top: 8px; right: 8px; width: 32px; height: 32px; }
.search-result-card-wrap .save-btn--card { top: 8px; right: 8px; width: 32px; height: 32px; }
.search-result-card-wrap { display: block; } /* keep grid layout intact */

/* Reminder bell on /my-gigs/ cards (#271 web push). Sits inline with
   the save button + Details link in .my-gig-card-actions; toggles to
   filled red when a push reminder is scheduled. */
.bell-btn {
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.bell-btn:hover { color: var(--text-primary); border-color: var(--purple); }
.bell-btn--active {
  background: rgba(255, 107, 157, 0.18);
  color: #ff6b9d;
  border-color: #ff6b9d;
}
.bell-btn--active:hover { background: rgba(255, 107, 157, 0.28); }
.bell-btn:disabled { opacity: 0.5; cursor: wait; }

/* ────────────────────────────────────────────────────────────────────
   Touch-target floor (Refs #46 mobile UX polish).
   Several existing dense action buttons sit at ~24-28px tall — under
   Apple HIG's 44pt and WCAG 2.5.5 AAA's 44px. Bumping each to 44px
   would push dense rows (5 reactions per Pit post, multiple Follow
   chips per gig page) off-screen, so we use a 36px floor: real
   improvement without forcing layout changes.

   Targets:
   - .pit-action-btn         (Pit post edit/delete/etc)
   - .pit-share-btn          (Pit share button)
   - .pit-reply-toggle       (Pit reply count toggle)
   - .follow-btn-inline      (artist follow chip on gig pages)
   - .past-extra-link        (past-gig "Setlist / I was there" links)
   ──────────────────────────────────────────────────────────────────── */
.pit-action-btn,
.pit-share-btn,
.pit-reply-toggle {
  min-height: 36px;
  padding: 8px 10px;
}
.follow-btn-inline {
  min-height: 32px;          /* slightly lower since this lives inline beside an artist name */
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 768px) {
  .follow-btn-inline {
    min-height: 32px;
    padding: 7px 12px;
    font-size: 0.78rem;
  }
}
.past-extra-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
}

/* ────────────────────────────────────────────────────────────────────
   Mobile tap feel (Refs #46).

   1. touch-action: manipulation — disables the 300ms double-tap-zoom
      delay that mobile Safari/Chrome impose on tap-target elements.
      Free latency win on every interactive surface.
   2. -webkit-tap-highlight-color — overrides the default gray flash
      iOS draws on every link/button tap with a low-opacity brand
      purple. Premium feel, no other UX change.
   ──────────────────────────────────────────────────────────────────── */
a, button, [role="button"], input[type="button"], input[type="submit"],
input[type="reset"], summary, label, select, [onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(131, 56, 236, 0.18); /* var(--purple) at 18% */
}

/* ─────────────────────────────────────────────────────────────────────
   Shared bottom-sheet filter (Refs #46).
   Used by gigs.php (inline duplicate predates this), artists.php, and
   venues.php. Mobile-only — desktop pages keep their inline filter
   rows visible. Each page provides:
     - .filter-sheet-trigger button (mobile-shown)
     - .filter-sheet wrapper containing .filter-sheet-panel with form
   The shared JS in assets/js/filter-sheet.js handles open/close +
   active-pill sync.
   ───────────────────────────────────────────────────────────────────── */
.filter-sheet-trigger { display: none; }
@media (max-width: 768px) {
    .filter-sheet-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        margin-top: 14px;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .filter-sheet-trigger:hover { background: rgba(0, 0, 0, 0.6); border-color: rgba(255, 0, 110, 0.5); }
    .filter-sheet-trigger-badge {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 22px; height: 22px;
        padding: 0 7px;
        background: linear-gradient(135deg, #FF006E, #8338EC);
        border-radius: 999px;
        font-size: 0.78rem; font-weight: 700;
        margin-left: 4px;
    }
}
.filter-sheet[hidden] { display: none; }
.filter-sheet {
    position: fixed; inset: 0;
    z-index: 9998;
    display: flex; align-items: flex-end;
}
.filter-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: fsFadeIn 0.18s ease-out;
}
.filter-sheet-panel {
    position: relative;
    width: 100%;
    max-height: 88vh;
    background: var(--bg-card, #1a1a2e);
    color: var(--text-primary, #fff);
    border-radius: 18px 18px 0 0;
    padding: 0 0 max(20px, env(safe-area-inset-bottom));
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.4);
    animation: fsSlideUp 0.22s ease-out;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.filter-sheet-handle {
    width: 44px; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    margin: 10px auto 4px;
    flex-shrink: 0;
}
.filter-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 4px;
    flex-shrink: 0;
}
.filter-sheet-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.filter-sheet-close {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
}
.filter-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 20px;
    flex: 1;
}
.filter-sheet-section { margin-top: 18px; }
.filter-sheet-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.filter-sheet-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.filter-sheet-pill {
    display: inline-flex; align-items: center;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    font-size: 0.88rem; font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.filter-sheet-pill input { position: absolute; opacity: 0; pointer-events: none; }
.filter-sheet-pill.active {
    background: linear-gradient(135deg, rgba(131,56,236,0.22), rgba(255,0,110,0.18));
    border-color: rgba(255, 0, 110, 0.55);
    color: #fff;
}
.filter-sheet-select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.filter-sheet-actions {
    display: flex; gap: 10px;
    padding: 16px 0 4px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.filter-sheet-clear, .filter-sheet-apply {
    flex: 1;
    text-align: center;
    border-radius: 999px !important;
    padding: 13px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 700;
}
[data-theme="light"] .filter-sheet-panel { background: #fff; color: #1a1a2e; }
[data-theme="light"] .filter-sheet-trigger { background: rgba(255, 255, 255, 0.92); color: #1a1a2e; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .filter-sheet-pill { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #1a1a2e; }
[data-theme="light"] .filter-sheet-select { background: #f6f4fa; color: #1a1a2e; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .filter-sheet-close { color: #1a1a2e; border-color: rgba(0,0,0,0.1); }
@keyframes fsFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fsSlideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }

/* Hide page-specific inline filter forms on mobile when the
   bottom-sheet trigger is shown (Refs #46). */
@media (max-width: 768px) {
    /* /artists/ inline filter row */
    .filters-section .filters-form { display: none; }
    /* /venues/ inline filter bar */
    .filter-bar { display: none; }
    /* /{city}/this-weekend/ etc — date pill row */
    .date-filters { display: none; }
    /* /regional/{town}/{when}/ — date pill row */
    .regional-pill-nav { display: none; }
}

/* Past-gig actionable CTA (#281). Replaces the passive past-event-notice
   text with two intent-driven buttons (Next at venue / Next by artist)
   above the fold on past-gig pages — the dominant landing surface for
   organic search (66% of traffic). */
.past-event-cta {
    background: rgba(131, 56, 236, 0.08);
    border: 1px solid rgba(131, 56, 236, 0.22);
    border-radius: 10px;
    padding: 14px 18px 16px;
    margin: 0 0 22px;
}
.past-event-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    margin-bottom: 12px;
}
.past-event-label svg { opacity: 0.7; }
.past-event-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.past-event-action {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.12s ease;
    min-height: 56px; /* meets the 44px touch target floor with padding */
}
.past-event-action:hover { transform: translateY(-1px); }
.past-event-action--primary {
    background: linear-gradient(135deg, #8338ec, #6c2dd0);
    color: #fff;
}
.past-event-action--primary:hover { background: linear-gradient(135deg, #9748ff, #7d39e6); text-decoration: none; }
.past-event-action--secondary {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.past-event-action--secondary:hover { background: rgba(255, 255, 255, 0.10); text-decoration: none; }
.past-event-action__lead {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}
.past-event-action__meta {
    font-size: 0.82rem;
    opacity: 0.85;
    line-height: 1.3;
}
/* Ticketed forward-target on past-gig pages (#conv-pastgig 2026-06-06).
   ~half of gig views land on past events; when the next gig at the same
   venue/by the same artist is buyable, lift that action visually so the
   trapped traffic converts onto monetisable inventory instead of bouncing. */
.past-event-action--ticketed {
    box-shadow: 0 4px 14px rgba(131, 56, 236, 0.32);
    outline: 1px solid rgba(255, 255, 255, 0.16);
    outline-offset: -1px;
}
.past-event-action--ticketed .past-event-action__lead {
    display: flex;
    align-items: center;
    gap: 6px;
}
.past-event-action--ticketed .past-event-action__lead svg { opacity: 0.95; }
.past-event-action__price {
    display: inline-block;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
/* Artist page: upcoming-gigs hoisted to the top for touring artists
   (#conv-artist 2026-06-06). Subtle accent so the buy path reads as the
   primary action above the bio, plus a per-date price pill. */
.artist-upcoming-first {
    border: 1px solid rgba(131, 56, 236, 0.22);
    border-radius: 12px;
    padding: 16px 18px;
    background: rgba(131, 56, 236, 0.05);
}
.artist-upcoming-first > h2 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
.gig-item-price {
    display: inline-block;
    margin-left: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--purple, #8338ec);
}
[data-theme="light"] .artist-upcoming-first { background: rgba(131, 56, 236, 0.04); }
/* Venue page: same hoist + accent for venues with upcoming shows (#conv-venue). */
.venue-upcoming-first {
    border: 1px solid rgba(131, 56, 236, 0.22);
    border-radius: 12px;
    padding: 16px 18px;
    background: rgba(131, 56, 236, 0.05);
}
.venue-upcoming-first > h2 { margin-top: 0; display: flex; align-items: center; gap: 8px; }
[data-theme="light"] .venue-upcoming-first { background: rgba(131, 56, 236, 0.04); }

/* Photo credit byline on /news/ post hero — surfaces photographer attribution
   when blog-image-sourcer matched a photographer photo (tier 1) or external
   attributable source (Wikimedia). 2026-05-22 photographer pivot. */
.post-hero-credit {
    margin-top: 10px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.75);
}
.post-hero-credit a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}
.post-hero-credit a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

/* ============================================
   HOMEPAGE HERO — BOTTOM-LEFT PANEL REBALANCE
   2026-05-29: reposition .hero-text-box from a centred wall
   covering the carousel image to a corner panel anchored
   bottom-left. The carousel image becomes the dominant focal
   point; the text remains fully legible inside its own panel.
   Desktop only — mobile already has its own 3-zone scrim
   layout that anchors text at the top (see media query at
   line ~9427). SEO-neutral: DOM order, H1, content unchanged.
   ============================================ */
@media (min-width: 769px) {
    /* Override the centred flex layout — let .hero-content fill
       the hero vertically so we can anchor children top + bottom */
    .home-hero {
        align-items: stretch;
        text-align: left;
    }
    .home-hero .hero-content {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
    }
    /* Push the carousel UI (caption + dots + city picker) to bottom-centre.
       Stays centred via the existing default alignment of its inner items. */
    .home-hero .hero-carousel-ui {
        margin-top: auto;
    }
    /* Pin the text panel to bottom-left, out of the flex flow so it
       doesn't push the carousel UI around. */
    .home-hero .hero-text-box {
        position: absolute;
        bottom: 90px;
        left: clamp(20px, 4vw, 56px);
        max-width: min(520px, calc(100vw - 40px));
        margin: 0;
        padding: 22px 28px;
        text-align: left;
        background: rgba(8, 8, 15, 0.62);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 14px;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
    }
    /* Tighter tagline so it fits the corner panel cleanly */
    .home-hero .hero-tagline {
        font-size: clamp(1.8rem, 2.6vw, 2.4rem);
        text-align: left;
        margin-bottom: 8px;
    }
    .home-hero .hero-subtitle {
        text-align: left;
        margin-bottom: 12px;
    }
    /* Left-align the Tonight: city pills to match panel */
    .home-hero .hero-tonight {
        justify-content: flex-start;
        gap: 6px;
    }
}

/* Venue page — "show all upcoming gigs" overflow toggle (#389) */
.venue-more-gigs { margin-top: 12px; }
.venue-more-gigs > summary {
    cursor: pointer;
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pink, #FF006E);
    border: 1px solid rgba(255,0,110,0.4);
    border-radius: 8px;
    user-select: none;
    list-style: none;
}
.venue-more-gigs > summary::-webkit-details-marker { display: none; }
.venue-more-gigs > summary:hover { background: rgba(255,0,110,0.08); }
.venue-more-gigs[open] > summary { margin-bottom: 12px; }
.venue-more-gigs[open] > summary::after { content: " ▲"; font-size: 0.7em; }
.venue-more-gigs:not([open]) > summary::after { content: " ▼"; font-size: 0.7em; }

/* ════════════════════════════════════════════════════════════════════
   Split Stage hero (2026-06) — ADDITIVE redesign of the home above-fold.
   Text column on one side, framed gig reel on the other. Activated by
   `.home-hero--split` on the <section>. The original `.home-hero` rules
   higher up are left untouched (used by the <3-gig video fallback and for
   an instant revert — just drop the modifier class). Reuses the existing
   .hero-carousel / .hero-slide / .hero-caption / .hero-dot / .hero-tonight
   / .hero-city-picker styling; everything below only overrides for the
   split layout.
   ════════════════════════════════════════════════════════════════════ */
.home-hero.home-hero--split {
    display: block;
    text-align: left;
    min-height: 0;
    padding: 56px 24px 64px;
}
.hero-split {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 48px;
    transition: opacity 0.22s ease;
}
.hero-split.is-flipped .hero-split-text { order: 2; }
.hero-split.is-flipped .hero-split-card { order: 1; }
.hero-split.is-swapping { opacity: 0; }

/* ── Text column ── */
.hero-split-text { animation: hero-fade-in 0.4s ease-out both; }
.home-hero--split .hero-tagline {
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    line-height: 1.04;
    margin: 0 0 16px;
}
.home-hero--split .hero-subtitle { font-size: 1.05rem; margin: 0 0 20px; }
.home-hero--split .hero-tonight { justify-content: flex-start; margin: 0 0 26px; }
.hero-split-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(95deg, var(--pink, #FF006E), #ff7a18);
    box-shadow: 0 10px 30px -8px rgba(255,0,110,0.6);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -8px rgba(255,0,110,0.7);
}
.hero-cta span { transition: transform 0.18s ease; }
.hero-cta:hover span { transform: translateX(4px); }

/* ── Card column — framed gig reel ── */
.hero-split-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.hero-card-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 60px -18px rgba(0,0,0,0.75),
                0 0 0 1px rgba(255,0,110,0.10),
                0 8px 40px -12px rgba(131,56,236,0.35);
    background: #08080f;
}
/* Slow Ken-Burns drift on the active slide */
.hero-split-card .hero-slide { background-position: center; transform: scale(1.04); }
.hero-split-card .hero-slide.active { animation: hero-card-zoom 6s ease-out both; }
@keyframes hero-card-zoom {
    from { transform: scale(1.02); }
    to   { transform: scale(1.10); }
}
/* Broken/missing slide image → branded gradient placeholder (JS adds
   .is-broken after an image preflight 404s) instead of a black frame */
.hero-split-card .hero-slide.is-broken {
    background-image:
        radial-gradient(circle at 28% 24%, rgba(255,0,110,0.38), transparent 58%),
        radial-gradient(circle at 78% 82%, rgba(131,56,236,0.40), transparent 55%),
        linear-gradient(135deg, #1a1030, #2a1140 55%, #3a1320);
    background-size: cover;
    transform: none !important;
    animation: none !important;
}
.hero-split-card .hero-slide.is-broken::after {
    content: "\266B";          /* ♫ — faint watermark */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    color: rgba(255,255,255,0.15);
    pointer-events: none;
}
.hero-card-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(8,8,15,0.92) 0%,
        rgba(8,8,15,0.45) 28%,
        rgba(8,8,15,0.0) 55%);
}
.hero-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(8,8,15,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.16);
}
.hero-card-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff2d75;
    animation: hero-badge-pulse 2s ease-out infinite;
}
@keyframes hero-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,45,117,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255,45,117,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,45,117,0); }
}
/* Caption pinned to the bottom of the card (left-aligned over the scrim) */
.hero-split-card .hero-caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    align-items: flex-start;
    text-align: left;
    max-width: none;
    background: rgba(8,8,15,0.35);
}
.hero-split-card .hero-caption-title,
.hero-split-card .hero-caption-meta { max-width: 100%; }
.hero-split-card .hero-caption-title { font-size: 1rem; }
.home-hero--split .hero-dots { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .hero-split,
    .hero-split-text { animation: none; transition: none; }
    .hero-split-card .hero-slide.active { animation: none; transform: none; }
    .hero-card-badge-dot { animation: none; }
}

/* ── Mobile: stack card over text, no side-swap reflow ── */
@media (max-width: 820px) {
    .home-hero.home-hero--split { padding: 28px 16px 40px; }
    .hero-split {
        grid-template-columns: 1fr;
        gap: 26px;
        text-align: center;
    }
    .hero-split .hero-split-card { order: 1 !important; }
    .hero-split .hero-split-text { order: 2 !important; }
    /* Pills wrap & centre on the stacked layout (override the base
       ≤480 nowrap horizontal-scroll strip, which fights a centred column) */
    .home-hero--split .hero-tonight {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .hero-split-actions { justify-content: center; }
    .hero-card-frame { aspect-ratio: 16 / 10; }
    .home-hero--split .hero-tagline {
        font-size: clamp(1.4rem, 6.2vw, 2.2rem);
        letter-spacing: 0.5px;
        overflow-wrap: break-word;
    }
    .home-hero--split .hero-caption-title { font-size: 0.9rem; }
}

/* ── Universal search widget (GH #396, Phase 1) ──────────────────────────── */
.usearch{position:relative;max-width:640px;margin:0 auto;width:100%;}
.usearch-box{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 16px;transition:border-color .15s,box-shadow .15s;}
.usearch-box:focus-within{border-color:#8338ec;box-shadow:0 0 0 3px rgba(131,56,236,.25);}
.usearch-icon{display:flex;opacity:.7;flex:none;}
.usearch-input{flex:1;background:transparent;border:0;outline:0;color:inherit;font-size:1.05rem;min-width:0;}
.usearch-input::placeholder{color:rgba(255,255,255,.45);}
.usearch-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:#1a1626;border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;max-height:60vh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:left;}
.usearch-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06);}
.usearch-item:last-child{border-bottom:0;}
.usearch-item:hover,.usearch-item.is-active{background:rgba(131,56,236,.18);}
.usearch-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.usearch-item-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.usearch-item-meta{font-size:.82rem;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.usearch-badge{flex:none;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:6px;background:rgba(131,56,236,.25);color:#c9a8ff;}
.usearch-badge-gig{background:rgba(255,94,148,.22);color:#ff9ec0;}
.usearch-badge-venue{background:rgba(94,200,255,.18);color:#9fe0ff;}
.usearch-badge-song{background:rgba(120,220,160,.18);color:#a8e8c4;}
.usearch-badge-news{background:rgba(255,200,90,.18);color:#ffd98a;}
.usearch-loading,.usearch-empty{padding:16px;opacity:.65;font-size:.92rem;}
.usearch-empty a{color:#c9a8ff;}
.usearch-hints{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;opacity:.8;}
.usearch-hint{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:inherit;border-radius:999px;padding:4px 12px;cursor:pointer;font-size:.85rem;}
.usearch-hint:hover{background:rgba(131,56,236,.25);}
[data-theme="light"] .usearch-box{background:#fff;border-color:rgba(131,56,236,.2);}
[data-theme="light"] .usearch-input::placeholder{color:rgba(0,0,0,.4);}
[data-theme="light"] .usearch-results{background:#fff;border-color:rgba(131,56,236,.18);box-shadow:0 20px 50px rgba(80,40,140,.18);}
[data-theme="light"] .usearch-item{border-bottom-color:rgba(0,0,0,.06);}
[data-theme="light"] .usearch-item:hover,[data-theme="light"] .usearch-item.is-active{background:rgba(131,56,236,.1);}
[data-theme="light"] .usearch-hint{background:rgba(131,56,236,.08);border-color:rgba(131,56,236,.18);}

/* Universal search — attach-mode floating dropdown (GH #396). JS sets top/left/width. */
.usearch-results.usearch-floating{position:absolute;top:0;left:0;right:auto;z-index:9999;}
.usearch-badge-album{background:rgba(255,150,90,.2);color:#ffc08a;}
[data-theme="light"] .usearch-badge-album{background:rgba(220,120,40,.14);color:#9a5a1e;}

/* ── Redesign refinement pass 2 (2026-06): recap headshot framing ── */
/* "Last Night" recap images anchored center-top → portrait headshots got
   sliced at the forehead. Bias focal point to ~28% (where faces sit) and
   give a touch more height so the full face stays in frame. */
.home-redesign .hp-editorial-img{height:200px!important;background-position:center 35%!important;}

/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE REDESIGN (2026-06) — scoped reskin, preview-flag gated.
   Active ONLY inside <div class="home-redesign"> that index.php emits when
   ?preview=redesign is set. Zero effect on the live homepage. Direction:
   "bolder but done well" — Anton display face, purple/pink gradient demoted
   to deliberate accents, neutral-dark surfaces, one radius scale + restrained
   shadows. To fully revert: delete this block + the index.php wrapper.
   ════════════════════════════════════════════════════════════════════════ */
.home-redesign{
  --rd-bg:#0b0b11; --rd-surface:#14141d; --rd-surface2:#1b1b27;
  --rd-line:rgba(255,255,255,.08); --rd-line2:rgba(255,255,255,.14);
  --rd-text:#f5f4f8; --rd-muted:#a3a2b4; --rd-faint:#6f6e80;
  --rd-purple:#8b5cf6; --rd-deep:#7c3aed; --rd-magenta:#ec4899; --rd-lime:#c4f042;
  --rd-grad:linear-gradient(115deg,#7c3aed,#a855f7 42%,#ec4899);
  background:var(--rd-bg);
}
.home-redesign h1,.home-redesign h2,.home-redesign h3,
.home-redesign .hero-tagline,.home-redesign .hp-sts-h2,
.home-redesign .whats-on-header h2,.home-redesign .email-signup-title,
.home-redesign .trending-widget h2,.home-redesign .hp-regional-header h2{
  font-family:'Anton',sans-serif!important;font-weight:400!important;
  letter-spacing:.6px;text-transform:uppercase;
}
.home-redesign .hp-sts-eyebrow,.home-redesign .hp-regional-top-label{
  color:var(--rd-purple)!important;letter-spacing:2.4px!important;
  text-transform:uppercase;font-weight:700!important;font-size:12px!important;
}
/* HERO */
.home-redesign .home-hero,.home-redesign .home-hero--split{background:var(--rd-bg)!important;}
.home-redesign .hero-tagline{font-size:clamp(40px,5.4vw,66px)!important;line-height:.97!important;color:var(--rd-text)!important;}
.home-redesign .tagline-accent{background:var(--rd-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;}
.home-redesign .hero-subtitle{color:var(--rd-muted)!important;}
.home-redesign .hero-tonight-city{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:50px!important;color:var(--rd-text)!important;}
.home-redesign .hero-tonight-count{background:var(--rd-deep)!important;color:#fff!important;}
.home-redesign .hero-cta{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:10px!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
.home-redesign .hero-card-frame{border-radius:18px!important;border:1px solid var(--rd-line2)!important;box-shadow:0 24px 60px -18px rgba(0,0,0,.75)!important;}
.home-redesign .hero-card-badge{background:rgba(11,11,17,.7)!important;border:1px solid var(--rd-line2)!important;border-radius:30px!important;text-transform:uppercase!important;letter-spacing:1.4px!important;}
.home-redesign .hero-card-badge-dot{background:var(--rd-lime)!important;box-shadow:0 0 9px var(--rd-lime)!important;}
.home-redesign .hero-caption-title{font-family:'Anton',sans-serif!important;text-transform:uppercase;letter-spacing:.5px;}
.home-redesign .hero-dot.active{background:var(--rd-purple)!important;}
.home-redesign .hero-city-picker select{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:8px!important;color:var(--rd-text)!important;}
/* SET TIMES */
.home-redesign .hp-set-times{background:var(--rd-surface)!important;border-top:1px solid var(--rd-line)!important;border-bottom:1px solid var(--rd-line)!important;}
.home-redesign .hp-sts-stat-num{color:var(--rd-purple)!important;font-family:'Anton',sans-serif!important;}
.home-redesign .sts-input-wrap{background:var(--rd-bg)!important;border:1px solid var(--rd-line2)!important;border-radius:10px!important;}
/* WHAT'S ON */
.home-redesign .whats-on-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:12px!important;box-shadow:none!important;transition:transform .15s,border-color .15s;}
.home-redesign .whats-on-card:hover{transform:translateY(-4px);border-color:var(--rd-line2)!important;box-shadow:0 16px 40px -14px rgba(0,0,0,.6)!important;}
.home-redesign .whats-on-title{color:var(--rd-text)!important;}
.home-redesign .whats-on-venue{color:var(--rd-muted)!important;}
.home-redesign .whats-on-view-all,.home-redesign .whats-on-ticket{color:var(--rd-purple)!important;}
/* REGIONAL / NEAR YOU */
.home-redesign .hp-regional{background:var(--rd-surface)!important;border-top:1px solid var(--rd-line)!important;border-bottom:1px solid var(--rd-line)!important;}
.home-redesign .hp-regional-chip{background:var(--rd-bg)!important;border:1px solid var(--rd-line)!important;border-radius:10px!important;}
.home-redesign .hp-regional-chip:hover{border-color:var(--rd-purple)!important;}
/* NEWSLETTER */
.home-redesign .email-signup-card{background:linear-gradient(120deg,#161021,#100c18)!important;border:1px solid var(--rd-line2)!important;border-radius:18px!important;}
.home-redesign .email-signup-title{color:var(--rd-text)!important;}
.home-redesign .email-signup-btn{background:var(--rd-deep)!important;border:0!important;border-radius:10px!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;color:#fff!important;}
.home-redesign .email-signup-input,.home-redesign .email-signup-select{background:var(--rd-bg)!important;border:1px solid var(--rd-line2)!important;border-radius:10px!important;color:var(--rd-text)!important;}
/* TRENDING */
.home-redesign .trending-widget{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:14px!important;}
.home-redesign .trending-name{color:var(--rd-text)!important;}
.home-redesign .trending-views{color:var(--rd-purple)!important;}

/* ── Redesign refinement pass 1 (2026-06): featured banner, gig cards, hero ── */
.home-redesign .hp-feature{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;box-shadow:0 14px 44px -18px rgba(0,0,0,.6)!important;}
.home-redesign .hp-feature:hover{border-color:var(--rd-purple)!important;box-shadow:0 18px 50px -16px rgba(124,58,237,.35)!important;}
.home-redesign .hp-feature__label{background:var(--rd-deep)!important;color:#fff!important;letter-spacing:.16em!important;}
.home-redesign .hp-feature__cta{border-bottom-color:var(--rd-purple)!important;color:var(--rd-text)!important;}
.home-redesign .hp-feature__title{color:var(--rd-text)!important;}
.home-redesign .hp-report-banner{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;}
.home-redesign .hp-report-banner__label{background:var(--rd-deep)!important;color:#fff!important;}
.home-redesign .hp-report-banner__title{color:var(--rd-text)!important;}
.home-redesign .whats-on-img{box-shadow:inset 0 -70px 56px -34px rgba(11,11,17,.92)!important;}
.home-redesign .whats-on-date{background:rgba(11,11,17,.82)!important;border:1px solid var(--rd-line2)!important;border-radius:9px!important;color:#fff!important;font-family:'Anton',sans-serif!important;letter-spacing:.6px!important;padding:5px 11px!important;}
.home-redesign .whats-on-featured{background:var(--rd-lime)!important;color:#10210a!important;border-radius:6px!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:700!important;}
.home-redesign .whats-on-ticket{display:inline-block!important;color:var(--rd-purple)!important;border:1px solid var(--rd-line2)!important;border-radius:6px!important;padding:4px 11px!important;font-weight:700!important;font-size:.78rem!important;background:transparent!important;}
.home-redesign .home-hero--split{padding:74px 24px 78px!important;}
.home-redesign .hero-split{gap:56px!important;}
.home-redesign .hero-tagline{font-size:clamp(44px,6vw,76px)!important;line-height:.94!important;letter-spacing:.5px!important;}
.home-redesign .home-hero--split .hero-subtitle{font-size:1.1rem!important;margin-bottom:22px!important;}
.home-redesign .hero-card-frame{box-shadow:0 26px 64px -18px rgba(0,0,0,.78)!important;}

/* ── Redesign refinement pass 3 (2026-06): GET INVOLVED + photographer CTAs ── */
/* The contribute band was a full rainbow gradient with 6 multicolour cards —
   peak "AI generated". Neutralise to one calm dark band with a single subtle
   purple glow, uniform surface cards, purple-on-hover. */
.home-redesign .contribute-bg{background:radial-gradient(120% 100% at 50% 0%,rgba(124,58,237,.20),transparent 60%),var(--rd-surface)!important;}
.home-redesign .contribute-bg::before{opacity:.16!important;}
.home-redesign .contribute-hero{border-top:1px solid var(--rd-line)!important;border-bottom:1px solid var(--rd-line)!important;}
.home-redesign .contribute-hero h2{text-shadow:none!important;}
.home-redesign .contribute-tagline{color:var(--rd-muted)!important;}
.home-redesign .contribute-card,
.home-redesign .contribute-card.card-band,.home-redesign .contribute-card.card-venue,
.home-redesign .contribute-card.card-gig,.home-redesign .contribute-card.card-photographer,
.home-redesign .contribute-card.card-snap,.home-redesign .contribute-card.card-countdown{
  background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;
  box-shadow:none!important;border-radius:14px!important;backdrop-filter:none!important;}
.home-redesign .contribute-card h3,
.home-redesign .contribute-card.card-gig h3{color:var(--rd-text)!important;text-shadow:none!important;}
.home-redesign .contribute-card p,
.home-redesign .contribute-card.card-gig p{color:var(--rd-muted)!important;}
.home-redesign .contribute-icon{color:var(--rd-purple)!important;filter:none!important;}
.home-redesign .contribute-card:hover{transform:translateY(-4px)!important;filter:none!important;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.6)!important;border-color:var(--rd-purple)!important;}
/* Photographer section CTAs (were pink gradient) */
.home-redesign .hp-photos-cta-primary{background:var(--rd-deep)!important;border:0!important;color:#fff!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
.home-redesign .hp-photos-cta-secondary{border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;background:transparent!important;}
/* Authority / trust bar stats */
.home-redesign .hp-auth-num{color:var(--rd-purple)!important;}

/* ── Redesign refinement pass 4 (2026-06): NAV (homepage preview only) ── */
/* Nav lives in the shared header (outside .home-redesign), so it's scoped to
   body.rd-nav, which index.php adds via inline script only on the preview
   homepage. Literal hex (no --rd vars here — those live on .home-redesign).
   Orange→pink gradient → translucent dark bar; Industry CTA → purple. */
:is(body.rd-nav,body.rd) .main-nav{
  background:#0b0b11!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;box-shadow:0 1px 24px rgba(0,0,0,.45)!important;}
:is(body.rd-nav,body.rd) .nav-link{color:#a7a6b8!important;}
:is(body.rd-nav,body.rd) .nav-link:hover,:is(body.rd-nav,body.rd) .nav-link.active{color:#f5f4f8!important;}
:is(body.rd-nav,body.rd) .dropdown-arrow{color:#6f6e80!important;}
:is(body.rd-nav,body.rd) .nav-city-pill{background:transparent!important;border:1px solid rgba(255,255,255,.16)!important;color:#f5f4f8!important;border-radius:8px!important;}
:is(body.rd-nav,body.rd) .nav-city-label{color:#f5f4f8!important;}
:is(body.rd-nav,body.rd) .nav-search-btn,:is(body.rd-nav,body.rd) .nav-signin{color:#a7a6b8!important;}
:is(body.rd-nav,body.rd) .nav-search-btn:hover,:is(body.rd-nav,body.rd) .nav-signin:hover{color:#f5f4f8!important;}
:is(body.rd-nav,body.rd) .nav-portal{background:#7c3aed!important;color:#fff!important;border:0!important;border-radius:8px!important;box-shadow:0 6px 18px -6px rgba(124,58,237,.85)!important;}
:is(body.rd-nav,body.rd) .nav-portal:hover{background:#8b46f0!important;}
:is(body.rd-nav,body.rd) .dropdown-menu{background:#14141d!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 18px 50px -12px rgba(0,0,0,.7)!important;}
:is(body.rd-nav,body.rd) .dropdown-item{color:#cfcdda!important;}
:is(body.rd-nav,body.rd) .dropdown-item:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;}
:is(body.rd-nav,body.rd) .dropdown-divider{border-color:rgba(255,255,255,.08)!important;}
:is(body.rd-nav,body.rd) .dropdown-section-label{color:#6f6e80!important;}
/* pass 4b: Sign In was a pink gradient pill → calm outline button */
:is(body.rd-nav,body.rd) .nav-signin{background:transparent!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:8px!important;color:#f5f4f8!important;box-shadow:none!important;}
:is(body.rd-nav,body.rd) .nav-signin:hover{border-color:#fff!important;background:rgba(255,255,255,.05)!important;}
/* pass 4c: Anton text wordmark in place of the comic logo image (Brendan approved
   2026-06-08). NOTE for production: this is a CSS text-swap on the preview only —
   ship a real logo asset (SVG/PNG "MUSICK" in Anton) and keep the <a> an accessible
   name (the hidden <img alt> is what currently labels the home link for SR/SEO). */
/* visually-hide the <img> (don't display:none it) so the home link keeps its
   accessible name "musick.com.au" for SR/SEO, while the wordmark shows instead */
:is(body.rd-nav,body.rd) .nav-logo picture{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;}
:is(body.rd-nav,body.rd) .nav-logo{display:inline-flex!important;align-items:center!important;gap:10px!important;height:auto!important;text-decoration:none!important;}
:is(body.rd-nav,body.rd) .nav-logo::before{content:"";width:11px;height:11px;border-radius:50%;background:linear-gradient(115deg,#7c3aed,#a855f7 42%,#ec4899);box-shadow:0 0 14px rgba(168,85,247,.85);}
/* Real wordmark asset (MUSICK in Anton outlines, vector) — no webfont dependency */
:is(body.rd-nav,body.rd) .nav-logo::after{content:"";display:block;width:97px;height:30px;background:url('/assets/images/musick-wordmark.svg?v=onair') left center/contain no-repeat;}
/* New "On Air" animated nav mark (2026-06-10): single animated logo (incl. its own pulse dot) replaces the CSS orb dot + static wordmark. */
.nav-logo-rd-animated{display:none;}
:is(body.rd-nav,body.rd) .nav-logo::before{display:none!important;}
:is(body.rd-nav,body.rd) .nav-logo::after{display:none!important;}
:is(body.rd-nav,body.rd) .nav-logo .nav-logo-rd-animated{display:block!important;height:35px!important;width:auto!important;}
@media (max-width:768px){:is(body.rd-nav,body.rd) .nav-logo .nav-logo-rd-animated{height:30px!important;}}

/* ── Redesign refinement pass 5 (2026-06): MOBILE (80% of traffic) ── */
/* The hero tagline's desktop clamp floor (44px) overflowed narrow phones via
   !important. Scope a phone breakpoint so it fits + breathes. */
@media (max-width:600px){
  .home-redesign .home-hero--split{padding:34px 18px 40px!important;}
  .home-redesign .hero-split{gap:22px!important;}
  .home-redesign .hero-tagline{font-size:clamp(30px,8.4vw,40px)!important;line-height:.98!important;letter-spacing:.3px!important;}
  .home-redesign .home-hero--split .hero-subtitle{font-size:.96rem!important;margin-bottom:16px!important;}
}

/* ── Redesign refinement pass 5b (2026-06): mobile hero overflow + brand film ── */
/* Root cause of the clipped "…SCENE": the hero grid items sized to the tagline's
   max-content (440px) and overflowed the 390 viewport. min-width:0 lets the
   column shrink so the tagline wraps within the screen. */
@media (max-width:600px){
  .home-redesign .hero-split{grid-template-columns:1fr!important;}
  .home-redesign .hero-split-text,.home-redesign .hero-split-card,
  .home-redesign .hero-card-frame{min-width:0!important;max-width:100%!important;}
  .home-redesign .hero-tagline{font-size:clamp(28px,7.6vw,38px)!important;white-space:normal!important;overflow-wrap:break-word!important;}
  .home-redesign .hp-regional-search-submit{max-width:100%!important;}
}
/* Brand film section ("Our Story") → new palette (was pink/orange) */
.home-redesign .hp-film{background:var(--rd-surface)!important;border-top:1px solid var(--rd-line)!important;border-bottom:1px solid var(--rd-line)!important;}
.home-redesign .hp-film-eyebrow{color:var(--rd-purple)!important;letter-spacing:2.4px!important;}
.home-redesign .hp-film-accent{background:var(--rd-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
.home-redesign .hp-film-cta{background:var(--rd-deep)!important;color:#fff!important;border-radius:10px!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
.home-redesign .hp-film-embed{border:1px solid var(--rd-line2)!important;}

/* Cancelled / postponed gig banner (#488) — prominent notice on gig.php for
   gigs the source has confirmed off (page still renders for direct links). */
.gig-cancelled-banner{display:flex;gap:14px;align-items:flex-start;margin:0 0 24px;padding:16px 18px;border-radius:12px;background:rgba(255,77,79,.10);border:1px solid rgba(255,77,79,.42);}
.gig-cancelled-banner-icon{font-size:1.5rem;line-height:1.1;color:#ff6b6b;flex:none;}
.gig-cancelled-banner strong{display:block;font-size:1.05rem;margin-bottom:3px;color:var(--text-color,#fff);}
.gig-cancelled-banner span{color:var(--text-muted,rgba(255,255,255,.72));font-size:.92rem;line-height:1.45;}
[data-theme="light"] .gig-cancelled-banner strong{color:#1a1a2e;}
[data-theme="light"] .gig-cancelled-banner span{color:rgba(26,26,46,.7);}

/* ════════════════════════════════════════════════════════════════════════
   SITE-WIDE REDESIGN (2026-06) — body.rd foundation (Phase 0).
   Active only when <body class="rd"> (site_settings site_redesign=live OR
   ?preview=redesign — see includes/header.php). Additive + scoped: legacy CSS
   is untouched; remove this block + flip the toggle off to fully revert.
   Tokens here sit on body.rd so the homepage's existing .home-redesign rules
   inherit them too once the two systems unify.
   ════════════════════════════════════════════════════════════════════════ */
body.rd{
  --rd-bg:#0b0b11; --rd-surface:#14141d; --rd-surface2:#1b1b27;
  --rd-line:rgba(255,255,255,.08); --rd-line2:rgba(255,255,255,.14);
  --rd-text:#f5f4f8; --rd-muted:#a3a2b4; --rd-faint:#6f6e80;
  --rd-purple:#8b5cf6; --rd-deep:#7c3aed; --rd-magenta:#ec4899; --rd-lime:#c4f042;
  --rd-grad:linear-gradient(115deg,#7c3aed,#a855f7 42%,#ec4899);
  --rd-radius:12px; --rd-radius-sm:8px;
  background:var(--rd-bg)!important; color:var(--rd-text);
}
/* Display headings → Anton. Prose/long-title exceptions handled per page. */
body.rd h1,body.rd h2{font-family:'Anton',sans-serif!important;font-weight:400!important;letter-spacing:.5px;text-transform:uppercase;color:var(--rd-text);}
body.rd a{color:var(--rd-text);}
body.rd a:hover{color:var(--rd-purple);}
/* Shared buttons / pills → consistent radius; primaries → solid purple (de-gradient) */
body.rd .btn,body.rd .button,body.rd .sort-btn,body.rd .pill{border-radius:var(--rd-radius-sm)!important;}
body.rd .btn-primary,body.rd .button-primary,body.rd .cta-primary{background:var(--rd-deep)!important;border:0!important;color:#fff!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
/* Inputs */
body.rd input[type=text],body.rd input[type=email],body.rd input[type=search],body.rd select,body.rd textarea{background:var(--rd-bg)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius-sm)!important;color:var(--rd-text)!important;}
/* Generic card/panel surfaces */
body.rd .card,body.rd .panel{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}

/* ── Site-wide redesign Phase 1: footer + cookie banner (body.rd) ── */
body.rd .footer-container,body.rd .site-footer{background:var(--rd-surface)!important;border-top:1px solid var(--rd-line)!important;}
body.rd .footer-section h4{font-family:'Anton',sans-serif!important;font-weight:400!important;letter-spacing:1px;text-transform:uppercase;color:var(--rd-text)!important;}
body.rd .footer-links a,body.rd .footer-cities-list a{color:var(--rd-muted)!important;}
body.rd .footer-links a:hover,body.rd .footer-cities-list a:hover,body.rd .footer-cities-more summary{color:var(--rd-purple)!important;}
body.rd .footer-social a{color:var(--rd-muted)!important;}
body.rd .footer-social a:hover{color:var(--rd-text)!important;}
body.rd .btn-subscribe{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
body.rd .footer-bottom,body.rd .footer-legal-links a,body.rd .footer-credit-text,body.rd .footer-abn{color:var(--rd-faint)!important;}
body.rd .footer-legal-links a:hover{color:var(--rd-muted)!important;}
/* Cookie consent */
body.rd .cookie-consent{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius)!important;box-shadow:0 18px 50px -12px rgba(0,0,0,.6)!important;}
body.rd .cookie-content,body.rd .cookie-consent p{color:var(--rd-muted)!important;}
body.rd .cookie-icon,body.rd .cookie-link{color:var(--rd-purple)!important;}
body.rd .cookie-btn.cookie-accept{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .cookie-btn.cookie-essential{background:transparent!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:var(--rd-radius-sm)!important;}

/* ── Site-wide redesign Phase 2: gig detail page (body.rd) ── */
body.rd .gig-hero-cta{background:var(--rd-deep)!important;box-shadow:0 10px 28px -8px rgba(124,58,237,.7)!important;}
body.rd .gig-hero-date{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .gig-hero-save{border:1px solid var(--rd-line2)!important;}
body.rd .info-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .info-primary,body.rd .info-secondary{color:var(--rd-text)!important;}
body.rd .info-icon{color:var(--rd-purple)!important;}
body.rd .gig-section{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .gig-section h2,body.rd .gig-section h3{color:var(--rd-text)!important;}
body.rd .discovery-eyebrow{color:var(--rd-purple)!important;letter-spacing:2px;text-transform:uppercase;}
body.rd .discovery-cta{color:var(--rd-purple)!important;}
body.rd .sidebar-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .set-time-item{background:var(--rd-bg)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .set-time-value{color:var(--rd-purple)!important;font-family:'Anton',sans-serif!important;}
body.rd .set-time-label{color:var(--rd-muted)!important;}
body.rd .btn-primary{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
body.rd .btn-outline,body.rd .btn-secondary{background:transparent!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .btn-outline:hover,body.rd .btn-secondary:hover{border-color:var(--rd-purple)!important;}
body.rd .past-event-action{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius)!important;}
body.rd .past-event-action__lead{color:var(--rd-text)!important;}
body.rd .setlist-bar{background:var(--rd-grad)!important;}
body.rd .social-proof-stat{color:var(--rd-purple)!important;}

/* ── Site-wide redesign Phase 2b: gigs listing + artist + venue (body.rd) ── */
/* Section cards (mirror .gig-section) */
body.rd .artist-section,body.rd .venue-section{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
/* Listing / browse cards */
body.rd .city-gig-card,body.rd .genre-browse-card,body.rd .search-row{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .city-gig-card:hover,body.rd .genre-browse-card:hover{border-color:var(--rd-line2)!important;}
body.rd .gig-arrow{color:var(--rd-purple)!important;}
/* Venue detail grid (mirror .info-card) */
body.rd .detail-item{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .detail-icon{color:var(--rd-purple)!important;}
body.rd .venue-badge{background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:var(--rd-radius-sm)!important;}
/* Filters (gigs listing) */
body.rd .filter-sheet-section,body.rd .filter-group,body.rd .filter-row{border-color:var(--rd-line)!important;}
body.rd .filter-sheet-label{color:var(--rd-muted)!important;}
/* Stats */
body.rd .stat-pill{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:50px!important;}
body.rd .stat-icon,body.rd .stat-value,body.rd .hero-stat .stat-value{color:var(--rd-purple)!important;}
/* Social + external links → neutral chips, purple icon */
body.rd .social-link,body.rd .hero-link{background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius-sm)!important;color:var(--rd-text)!important;}
body.rd .social-icon,body.rd .link-icon{color:var(--rd-purple)!important;}
body.rd .release-link,body.rd .venue-link,body.rd .past-extra-link{color:var(--rd-purple)!important;}

/* ── Phase 2b refinement: artist/venue upcoming-gigs list rows (body.rd) ── */
body.rd .gig-item{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .gig-item:hover{border-color:var(--rd-line2)!important;}
body.rd .gig-date-box{background:var(--rd-bg)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .gig-date-box .gig-day{color:var(--rd-text)!important;}
body.rd .gig-date-box .gig-month{color:var(--rd-muted)!important;}
body.rd .gig-ticket-btn,body.rd .gig-ticket-link{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .gig-time,body.rd .gig-item-price{color:var(--rd-muted)!important;}

/* ── Phase 2 polish: section-title underline was hotpink → subtle neutral ── */
body.rd .gig-section h2,body.rd .gig-section h3,body.rd .artist-section h2,body.rd .artist-section h3,body.rd .venue-section h2,body.rd .venue-section h3{border-bottom-color:var(--rd-line2)!important;}

/* ── Site-wide redesign Phase 3: directories & discovery (body.rd) ── */
/* Pagination */
body.rd .page-btn,body.rd .page-link,body.rd .page-dots,body.rd .page-ellipsis{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .page-btn.active,body.rd .page-link.active,body.rd .page-btn[aria-current],body.rd .page-link[aria-current]{background:var(--rd-deep)!important;border-color:var(--rd-deep)!important;color:#fff!important;}
/* Stat boxes / cards / numbers */
body.rd .stat-box,body.rd .stat-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .stat-num,body.rd .stat-number{color:var(--rd-purple)!important;font-family:'Anton',sans-serif!important;}
body.rd .stat-label{color:var(--rd-muted)!important;}
/* Filter chips */
body.rd .filter-chip{background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:50px!important;}
body.rd .filter-chip.active,body.rd .filter-chip[aria-pressed=true]{background:var(--rd-deep)!important;border-color:var(--rd-deep)!important;color:#fff!important;}
/* Section titles + icons */
body.rd .section-title{color:var(--rd-text)!important;}
body.rd .title-icon{color:var(--rd-purple)!important;}
/* Page hero / hero stats / info box (genres, festivals) */
body.rd .page-hero{background:var(--rd-surface)!important;border-bottom:1px solid var(--rd-line)!important;}
body.rd .info-box{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
/* Search result cards */
body.rd .search-result-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .search-result-card:hover{border-color:var(--rd-line2)!important;}
body.rd .result-type{color:var(--rd-purple)!important;}
body.rd .result-placeholder,body.rd .image-placeholder{background:var(--rd-surface2)!important;}
/* City nav tabs */
body.rd .nav-tab{color:var(--rd-muted)!important;}
body.rd .nav-tab.active{color:var(--rd-text)!important;border-bottom-color:var(--rd-purple)!important;}
/* Brand buttons (city) → neutral chips */
body.rd .spotify-btn,body.rd .youtube-btn{background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:var(--rd-radius-sm)!important;}
/* List meta / set-times links */
body.rd .venue-row__type,body.rd .venue-suburb,body.rd .meta-time,body.rd .meta-price{color:var(--rd-muted)!important;}
body.rd .set-time-venue-link,body.rd .set-time-artist-link{color:var(--rd-purple)!important;}

/* ── Phase 3 refinement: city hub CTA + gig rows, search badges ── */
/* City hero "Browse all gigs" CTA + generic big buttons */
body.rd .city-hero-gigs-cta,body.rd .big-btn{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;box-shadow:0 8px 22px -8px rgba(124,58,237,.85)!important;}
/* City gig rows (own classes: .gig-date / .gig-btn) */
body.rd .gig-date{background:var(--rd-bg)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius-sm)!important;color:var(--rd-text)!important;}
body.rd .gig-date .gig-day{color:var(--rd-text)!important;}
body.rd .gig-date .gig-month{color:var(--rd-muted)!important;}
body.rd .gig-btn{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;}
body.rd .gig-featured-badge{background:var(--rd-lime)!important;color:#10210a!important;}
body.rd .gig-venue,body.rd .gig-address,body.rd .gig-price,body.rd .gig-time{color:var(--rd-muted)!important;}
/* Search result-type badge (was pink bg) */
body.rd .result-type{background:var(--rd-surface2)!important;color:var(--rd-purple)!important;border:1px solid var(--rd-line2)!important;}

/* ── Site-wide redesign Phase 4: content & community (body.rd) ── */
/* Hero variants */
body.rd .news-hero,body.rd .tonight-hero,body.rd .trending-hero{background:var(--rd-surface)!important;border-bottom:1px solid var(--rd-line)!important;}
/* Content cards */
body.rd .post-card,body.rd .news-card,body.rd .album-card,body.rd .city-card,body.rd .chart-item,body.rd .pit-about-card,body.rd .seo-gig-item{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .post-card:hover,body.rd .news-card:hover,body.rd .album-card:hover,body.rd .city-card:hover,body.rd .chart-item:hover{border-color:var(--rd-line2)!important;}
/* Card meta / titles */
body.rd .post-meta,body.rd .post-date,body.rd .post-city,body.rd .post-excerpt,body.rd .album-card-artist,body.rd .album-card-year,body.rd .album-card-meta,body.rd .chart-location,body.rd .chart-genre,body.rd .chart-meta,body.rd .song-artist{color:var(--rd-muted)!important;}
body.rd .post-title,body.rd .album-card-title,body.rd .song-title,body.rd .pit-brand{color:var(--rd-text)!important;}
/* Placeholders */
body.rd .post-placeholder,body.rd .album-art-placeholder,body.rd .chart-image-placeholder,body.rd .photogrid-placeholder,body.rd .pit-avatar-placeholder{background:var(--rd-surface2)!important;}
/* Rank numbers → Anton purple */
body.rd .trending-page-rank,body.rd .chart-rank{color:var(--rd-purple)!important;font-family:'Anton',sans-serif!important;}
/* Badges */
body.rd .now-badge{background:var(--rd-deep)!important;color:#fff!important;}
body.rd .vote-badge{background:var(--rd-grad)!important;color:#fff!important;}
/* Photo grid overlays */
body.rd .photogrid-overlay{background:linear-gradient(180deg,transparent,rgba(11,11,17,.85))!important;}
body.rd .photogrid-photographer,body.rd .photogrid-likes{color:#fff!important;}
/* ARTICLE PROSE — keep readable: in-body headings stay sentence-case body font */
body.rd .post-content h2,body.rd .post-content h3,body.rd .post-content h4{font-family:inherit!important;text-transform:none!important;letter-spacing:normal!important;font-weight:700!important;color:var(--rd-text)!important;}
body.rd .post-content{color:var(--rd-text)!important;}
body.rd .post-content a{color:var(--rd-purple)!important;}
/* In-article cards */
body.rd .inline-signup-card,body.rd .newsletter-card,body.rd .post-artists-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;border-radius:var(--rd-radius)!important;}
/* Pit anchor UI */
body.rd .pit-anchor-panel,body.rd .pit-anchor-results{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;}
body.rd .pit-anchor-btn{background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;}

/* ── Site-wide redesign Phase 5: account & static long-tail (body.rd) ── */
/* Auth + form + content cards */
body.rd .auth-card,body.rd .contact-card,body.rd .contact-form-section,body.rd .mp-category-card,body.rd .mp-affiliate-card,body.rd .feature-card,body.rd .my-gig-card,body.rd .artist-card-small{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;border-radius:var(--rd-radius)!important;}
body.rd .mp-category-card:hover,body.rd .feature-card:hover,body.rd .my-gig-card:hover{border-color:var(--rd-line2)!important;}
/* Heroes */
body.rd .auth-page,body.rd .about-hero,body.rd .mp-hero,body.rd .my-gigs-hero{background:var(--rd-surface)!important;}
/* Form bits */
body.rd .form-group label,body.rd .checkbox-label{color:var(--rd-muted)!important;}
body.rd .auth-divider{border-color:var(--rd-line)!important;color:var(--rd-faint)!important;}
body.rd .auth-footer a,body.rd .auth-terms a{color:var(--rd-purple)!important;}
body.rd .checkbox-tag{background:var(--rd-surface2)!important;border:1px solid var(--rd-line2)!important;color:var(--rd-text)!important;border-radius:50px!important;}
body.rd .checkbox-tag.checked,body.rd .checkbox-tag[aria-pressed=true]{background:var(--rd-deep)!important;border-color:var(--rd-deep)!important;color:#fff!important;}
/* marketplace */
body.rd .mp-hero-stat{color:var(--rd-purple)!important;}
body.rd .mp-affiliate-cta{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;}
/* meta text */
body.rd .my-gig-card-meta,body.rd .page-hero-sub,body.rd .profile-bio,body.rd .mp-hero-sub{color:var(--rd-muted)!important;}
/* Static/legal prose — keep subheadings sentence-case body font */
body.rd .static-content h2,body.rd .static-content h3,body.rd .legal-content h2,body.rd .legal-content h3,body.rd .page-content h2,body.rd .page-content h3,body.rd .prose h2,body.rd .prose h3{font-family:inherit!important;text-transform:none!important;letter-spacing:normal!important;font-weight:700!important;}

/* ── Site-wide redesign: final pink sweep (body.rd) ── */
/* Post category badges (news/recap/feature etc.) */
body.rd .post-type{background:var(--rd-surface2)!important;color:var(--rd-purple)!important;border:1px solid var(--rd-line2)!important;}
/* Filter + search buttons */
body.rd .filter-btn.active{background:var(--rd-deep)!important;border-color:var(--rd-deep)!important;color:#fff!important;}
body.rd .search-submit{background:var(--rd-deep)!important;}
/* Mobile nav buttons */
body.rd .mobile-link.mobile-search-btn,body.rd .mobile-link.mobile-signin{background:var(--rd-deep)!important;}
/* Generic newsletter sections → neutral surface (de-gradient) */
body.rd .newsletter-box,body.rd .footer-newsletter{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;}
/* Chatbot widget */
body.rd .chatbot-trigger,body.rd .chatbot-header{background:var(--rd-deep)!important;}
/* Nav dropdown CTA + VOTE badge → on-brand */
body.rd .dropdown-item--cta{background:var(--rd-deep)!important;color:#fff!important;}
body.rd .vote-badge-nav,body.rd .vote-badge{background:var(--rd-grad)!important;color:#fff!important;}

/* ── Redesign fix: kill the legacy comic text-shadow on Anton headings ──
   The Bangers-era purple/pink offset shadow ghosted through the new Anton
   font (city hero "TOP 100 …" etc.) — looked like duplicated text at the top
   of the page on mobile. Also de-pinks the city "claim countdown" button. */
body.rd h1,body.rd h2,body.rd h3,body.rd .hero-tagline,body.rd .hero-title{text-shadow:none!important;}
body.rd .claim-btn{background:var(--rd-deep)!important;border:0!important;color:#fff!important;border-radius:var(--rd-radius-sm)!important;}

/* ── Nav-link validation: list-page pink stragglers (body.rd) ──
   These use background-IMAGE gradients, so override with `background` shorthand
   (background-color alone can't beat a gradient). */
/* Regional towns — pulse dots + accents */
body.rd .regional-town-card__pulse{background:var(--rd-lime)!important;}
body.rd .regional-section-title__accent,body.rd .regional-hero__accent{background:var(--rd-grad)!important;}
body.rd .regional-hero__eyebrow{color:var(--rd-purple)!important;}
/* Songs — album-art placeholder gradient → neutral (real art is an <img> on top) */
body.rd .album-art{background-image:linear-gradient(135deg,var(--rd-surface2),var(--rd-bg))!important;}
/* Countdowns */
body.rd .song-count{background:var(--rd-surface2)!important;color:var(--rd-purple)!important;border:1px solid var(--rd-line2)!important;}
body.rd .city-tab.active{background:var(--rd-deep)!important;color:#fff!important;border-color:var(--rd-deep)!important;}
/* National / all-time */
body.rd .alltime-card{background:var(--rd-surface)!important;border:1px solid var(--rd-line)!important;}
body.rd .year-badge{background:var(--rd-surface2)!important;color:var(--rd-purple)!important;border:1px solid var(--rd-line2)!important;}

/* ── Deeper-sweep fixes: gigs-listing remnants (body.rd) ── */
body.rd .page-size-btn.active,body.rd .page-num.active{background:var(--rd-deep)!important;border-color:var(--rd-deep)!important;color:#fff!important;}
body.rd .gig-date-header{border-bottom-color:var(--rd-line)!important;}
body.rd .gig-time-badge{background:var(--rd-surface2)!important;color:var(--rd-purple)!important;}
body.rd .cta-box{background:var(--rd-surface)!important;border:1px solid var(--rd-line2)!important;}

/* ── Auth/footer/submit sweep (body.rd) ── */
/* Submit-page hero — was a pink→blue rainbow gradient */
body.rd .submit-hero{background:radial-gradient(120% 100% at 50% 0%,rgba(124,58,237,.20),transparent 60%),var(--rd-surface)!important;border-bottom:1px solid var(--rd-line)!important;}
/* Footer wordmark + newsletter heading h3 → Anton (foundation only covered h1/h2) */
body.rd .footer-container h3,body.rd .footer-section h3,body.rd footer h3{font-family:'Anton',sans-serif!important;color:var(--rd-text)!important;text-transform:uppercase;letter-spacing:.5px;}
/* PWA install banner button (inline pink gradient) → purple */
body.rd .musick-install-banner button[style*="gradient"]{background:var(--rd-deep)!important;}