/* ══════════════════════════════════════════
   THE DJ CALENDAR - V14 Master Stylesheet
   ══════════════════════════════════════════ */
@import url('modal-system.css');
@import url('auth-modals.css');
@import url('media-lightbox.css');

:root { --neon: #00d2ff; --bg: #191919; --panel: #0a0a0a; --font-head: 'Orbitron', sans-serif; --font-main: 'Rajdhani', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}
body { background: var(--bg); color: #fff; margin: 0; font-family: var(--font-main); overflow-x: hidden; }
a:hover,
a:focus-visible {
    color: var(--neon) !important;
}

/* ── COMPONENTS ── */
.section-label { font-family: var(--font-head); font-size: 10px; letter-spacing: 6px; color: #fff; padding: 20px 0; border-bottom: 1px solid #111; margin-bottom: 0px; text-transform: uppercase; }

/* ── TICKET BUTTONS ── */
.tix-btn,
a.tix-btn,
button.tix-btn,
button.tix-btn--choice,
span.tix-btn {
    display: inline-block !important;
    background: transparent !important;
    color: var(--neon) !important;
    border: 1px solid var(--neon) !important;
    font-family: var(--font-head) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    line-height: 1.2 !important;
    padding: 12px 28px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-width: 140px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.tix-btn:hover,
a.tix-btn:hover,
button.tix-btn:hover,
button.tix-btn--choice:not(.tix-btn--ghost):hover {
    background: var(--neon) !important;
    color: #000 !important;
    border-color: var(--neon) !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5) !important;
}

.tix-btn--sold-out,
.tix-btn.tix-btn--sold-out,
span.tix-btn.tix-btn--sold-out {
    color: #444 !important;
    border-color: #222 !important;
    background: #050505 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.tix-btn--disabled,
.tix-btn.tix-btn--disabled,
span.tix-btn.tix-btn--disabled {
    color: #666 !important;
    border-color: #444 !important;
    background: #111 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.85;
}

a.tix-btn:visited {
    color: var(--neon) !important;
}

.tix-btn--ghost,
a.tix-btn--ghost,
button.tix-btn--ghost,
span.tix-btn--ghost {
    color: #aaa !important;
    background: transparent !important;
    border: 1px solid #333 !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    box-shadow: none !important;
}

.tix-btn--ghost:hover,
a.tix-btn--ghost:hover,
button.tix-btn--ghost:hover,
button.tix-btn--ghost.tix-btn--choice:hover,
span.tix-btn--ghost:hover {
    color: var(--neon) !important;
    border-color: var(--neon) !important;
    background: rgba(0, 210, 255, 0.06) !important;
    box-shadow: none !important;
}

a.tix-btn--ghost:visited {
    color: #aaa !important;
}

.tix-btn-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* ── REACTION BAR ── */
.reaction-bar { display: flex; gap: 15px; margin-top: 35px; justify-content: center; }
.react-btn {
    display: flex; align-items: center; gap: 8px; padding: 12px 25px;
    background: #0d0d0d; border: 1px solid #222; border-radius: 50px;
    color: #fff; font-family: var(--font-main); font-weight: 600; cursor: pointer; transition: 0.2s;
}
.react-btn.active { background: rgba(0,210,255,0.1); border-color: var(--neon); color: var(--neon); }

/* ── LAYOUT ── */
.content-inset { padding: 60px 40px; max-width: 1200px; margin: 0 auto; }
/* Artist page leaderboard — empty slot above tour list (admin-injected ad code) */
.artist-leaderboard-ad {
    margin: 40px 0 0;
    padding: 0 16px;
}

.artist-leaderboard-ad:has(.leaderboard-ad-slot:empty) {
    margin: 0;
}

.artist-leaderboard-ad .leaderboard-ad-slot:empty {
    display: none;
}

.artist-leaderboard-ad .leaderboard-ad-slot:not(:empty) {
    margin: 0 auto 28px;
}

.tour-container { background: #050505; border: 1px solid #111; border-left: 10px solid #111; margin-top: 60px; }

.artist-leaderboard-ad + .tour-container {
    margin-top: 32px;
}

.artist-leaderboard-ad--bottom {
    margin: 48px 0 0;
}

.artist-leaderboard-ad--middle {
    margin: 48px 0 0;
}
/* --- TACTICAL TOUR ROW ALIGNMENT --- */
.tour-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid #111;
    gap: 40px; /* Space between date and location */
}

.tour-info-main {
    display: flex;
    align-items: center;
    gap: 40px;
    flex: 1; /* Pushes the button to the far right */
    text-align: left; /* FORCE LEFT ALIGN */
}

.tour-date {
    font-family: 'Orbitron', sans-serif;
    color: #00d2ff;
    font-size: 1.3rem;
    min-width: 160px; /* Keeps dates in a straight column */
    flex-shrink: 0;
}

.tour-loc {
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 1.15rem;
    color: #fff;
    text-align: left; /* FORCE LEFT ALIGN */
    flex: 1;
}

.tour-venue {
    color: #666;
    margin-left: 5px;
}

.tour-show-actions,
.venue-show-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 12px;
    flex-shrink: 0;
}

.show-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.show-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa;
    background: transparent;
    border: 1px solid #333;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.show-share-btn:hover,
.show-share-btn:focus-visible {
    color: var(--neon);
    border-color: var(--neon);
    background: rgba(0, 210, 255, 0.06);
    outline: none;
}

.show-share-btn--x:hover,
.show-share-btn--x:focus-visible {
    color: #fff;
    border-color: #fff;
}

.show-share-btn--fb:hover,
.show-share-btn--fb:focus-visible {
    color: #8ab4f8;
    border-color: #8ab4f8;
}

/* Show row actions — match Share / X compact ghost buttons */
.tour-show-actions a,
.tour-show-actions button,
.tour-show-actions span[aria-disabled="true"],
.venue-show-actions a,
.venue-show-actions button,
.venue-show-actions span[aria-disabled="true"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-family: var(--font-head) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    background: transparent !important;
    border: 1px solid #333 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.tour-show-actions a:not(.show-share-btn):hover,
.tour-show-actions a:not(.show-share-btn):focus-visible,
.tour-show-actions button:not(.show-share-btn):hover,
.tour-show-actions button:not(.show-share-btn):focus-visible,
.venue-show-actions a:not(.show-share-btn):hover,
.venue-show-actions a:not(.show-share-btn):focus-visible,
.venue-show-actions button:not(.show-share-btn):hover,
.venue-show-actions button:not(.show-share-btn):focus-visible {
    color: var(--neon) !important;
    border-color: var(--neon) !important;
    background: rgba(0, 210, 255, 0.06) !important;
    box-shadow: none !important;
    outline: none !important;
}

.tour-show-actions span[aria-disabled="true"],
.venue-show-actions span[aria-disabled="true"] {
    color: #444 !important;
    border-color: #222 !important;
    background: #050505 !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    cursor: default !important;
}

.show-share-btn.is-copied {
    color: #0f0;
    border-color: #0f0;
}

.show-share-btn--sold-out,
.show-share-btn.show-share-btn--sold-out {
    color: #444;
    border-color: #222;
    background: #050505;
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* THE DJ CALENDAR: V8 MINT STABLE CSS */

:root { 
    --bg: #191919; 
    --card-bg: #0c0c0c;
    --neon: #00d2ff; 
    --urgent: #ff0000;
    --font-head: 'Orbitron', sans-serif;
    --font-main: 'Rajdhani', sans-serif;
    --text-muted: #fff;
    --muted: #fff;
    --djc-header-h: 160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: #fff; font-family: var(--font-main); overflow-x: hidden; }
img:not(.leaflet-tile),
video,
iframe {
    max-width: 100%;
}
body.home-hero { overflow-x: clip; }
@supports not (overflow: clip) {
    body.home-hero { overflow-x: visible; }
}

/* MAIN HEADER — pinned to top of viewport on all pages */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--djc-header-h);
    background: rgba(25, 25, 25, 0.95);
    border-bottom: 1px solid #111;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 clamp(16px, 4vw, 40px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
}

body:not(.home-hero) .main-header {
    overflow: visible;
    border-bottom: 3px solid var(--neon);
}

body:not(.home-hero) .main-header nav::-webkit-scrollbar {
    display: none;
}
.return-btn {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 15px; /* Shrunk down from 10px 25px */
    font-family: var(--font-head);
    font-size: 0.8rem; /* Shrunk down from 1rem */
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 2px;
    transition: 0.3s;
    text-transform: uppercase;
}

.return-btn:hover {
    background: var(--neon);
    color: #000;
    border-color: var(--neon);
}
.header-logo {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 4px;
    flex-shrink: 0;
}

/* Logo left, nav + login right (all pages except homepage pill nav) */
body:not(.home-hero) .main-header {
    justify-content: space-between;
    gap: 16px;
}

body:not(.home-hero) .main-header nav,
body:not(.home-hero) .main-header .header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    flex-shrink: 1;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: min(72vw, calc(100vw - 180px));
}

body:not(.home-hero) .main-header nav .auth-btn,
body:not(.home-hero) .main-header .header-nav .auth-btn {
    flex-shrink: 0;
    min-width: 0;
}

body:not(.home-hero) .main-header .header-logo {
    max-width: min(52vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Keep header element height at 80px despite --djc-header-h (which includes search row) */
.main-header {
    height: 80px;
}

/* Article pages omit the sitewide header search row */
body.article-page.djc-no-header-search {
    --djc-header-h: 80px;
}

/* Search bar row below fixed header */
.header-search-bar {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    padding: 16px 40px 20px;
    background: var(--bg);
    border-bottom: 2px solid var(--neon);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 210, 255, 0.1);
}

body:not(.home-hero) .header-search-bar .sticky-search-input {
    min-height: 52px;
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
}

.vip-access-btn { background: #000; color: var(--neon); border: 1px solid var(--neon); padding: 10px 25px; font-family: var(--font-head); cursor: pointer; transition: 0.3s; }
.vip-access-btn:hover { background: var(--neon); color: #000; }

/* HERO (HOMEPAGE ONLY) */
.home-hero .hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--neon);
}
.hero-section {
    position: relative;
    width: 100%;
    height: min(58vh, 520px);
    min-height: 280px;
    overflow: hidden;
    z-index: 1;
}

/* Search: fixed top-right; visible even when legacy markup places it inside hero (overflow:hidden) */
body.home-hero .hero-section #homeArtistSearchWrap,
body.home-hero #homeArtistSearchWrap {
    overflow: visible;
    background: transparent;
}


#homeArtistSearchWrap {
    position: fixed;
    top: max(18px, env(safe-area-inset-top, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
    z-index: 9990;
    width: min(320px, calc(100vw - 32px));
    max-width: 400px;
    background: transparent;
    isolation: isolate;
    overflow: visible;
    pointer-events: none;
}

#homeArtistSearchWrap .search-input,
#homeArtistSearchWrap .search-results-dropdown,
#homeArtistSearchWrap.home-search-wrap--active,
body.home-search-focus #homeArtistSearchWrap {
    pointer-events: auto;
}

#headerArtistSearch,
#homeArtistSearchWrap .search-input {
    width: 100%;
    pointer-events: auto !important;
    background: #000;
    background-color: #000;
    border: 2px solid var(--neon);
    color: #fff;
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 1px;
    padding: 10px 14px;
    outline: none;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.35);
}

#homeArtistSearchWrap .search-results-dropdown.is-open,
#homeArtistSearchWrap .search-results-dropdown:not([hidden]) {
    z-index: 10130;
    pointer-events: auto;
}

#headerArtistSearch:focus,
#homeArtistSearchWrap .search-input:focus {
    background: #000;
    background-color: #000;
    border-color: var(--neon);
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.5);
}

/* Search focus mode — dim page, sharp neon ring on active field */
.home-search-focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 10090;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.home-search-focus-overlay[hidden] {
    display: none !important;
}

body.home-search-focus .home-search-focus-overlay:not([hidden]) {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Sticky chrome is z-index 10002 — lift above dim overlay (10090) when search is focused */
body.home-search-focus .home-sticky-chrome,
body.home-search-focus .home-sticky-chrome--pinned,
body.home-search-focus #homeStickyChrome {
    z-index: 10115 !important;
}

body.home-search-focus #homeArtistSearchWrap {
    position: fixed;
    top: max(18px, env(safe-area-inset-top, 0px));
    right: max(24px, env(safe-area-inset-right, 0px));
    z-index: 10130;
}

body.home-search-focus #homeArtistSearchWrap.home-search-wrap--active {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(760px, 94vw);
    max-width: min(760px, 94vw);
    top: calc(var(--home-sticky-search-top, var(--home-pinned-nav-height, 54px)) + 12px);
}

body.home-search-focus #homeArtistSearchWrap.home-search-wrap--active .search-input,
body.home-search-focus #homeArtistSearchWrap.home-search-wrap--active #headerArtistSearch {
    min-height: 56px;
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    letter-spacing: 3px;
    padding: 20px 24px;
    text-transform: uppercase;
}

body.home-search-focus #stickySearchRow.home-search-row--active {
    z-index: 10125 !important;
    position: relative;
    isolation: isolate;
}

body.home-search-focus--sticky .sticky-search-row-placeholder {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.home-search-focus--sticky .home-sticky-nav,
body.home-search-focus--sticky #homeStickyNav {
    z-index: 10120 !important;
}

body.home-search-focus .sticky-search-container.home-search-wrap--active {
    position: relative;
    z-index: 10121;
    isolation: isolate;
    left: auto;
    right: auto;
    margin-left: auto;
    margin-right: auto;
}
.sticky-search-row .directory-search-row {
    width: 85%;
}

.sticky-search-row-placeholder {
    width: 100%;
    pointer-events: none;
}

.sticky-search-row-placeholder[hidden] {
    display: none !important;
    height: 0 !important;
}

body.home-search-focus .sticky-search-container.home-search-wrap--active .sticky-search-dropdown {
    z-index: 10135;
}

#homeArtistSearchWrap.home-search-wrap--active .search-input,
.sticky-search-container.home-search-wrap--active .sticky-search-input,
body.home-search-focus .sticky-search-container.home-search-wrap--active .sticky-search-input,
body.home-search-focus .sticky-search-container:focus-within .sticky-search-input {
    border: 2px solid #00d2ff !important;
    outline: none !important;
    background: #000 !important;
    box-shadow:
        0 0 0 1px #00d2ff,
        0 0 22px rgba(0, 210, 255, 0.75),
        0 0 44px rgba(0, 210, 255, 0.25) !important;
}

#directoryLocationSearchWrap.home-search-wrap--active .sticky-search-input,
#directoryLocationSearchWrap.directory-search-wrap--active .sticky-search-input {
    border: 2px solid #00d2ff !important;
    outline: 2px solid #00d2ff !important;
    outline-offset: 3px;
    background: transparent !important;
    box-shadow: none !important;
}

body.home-search-focus.home-nav-is-pinned #homeArtistSearchWrap:not(.home-search-wrap--active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* One search at a time — never show sticky row while header search owns focus */
body.home-search-focus:not(.home-search-focus--sticky) #stickySearchRow {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Sticky row owns focus after header scrolls off */
body.home-search-focus.home-nav-is-pinned.home-search-focus--sticky #homeArtistSearchWrap,
body.home-search-focus.home-search-focus--sticky #homeArtistSearchWrap {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.home-search-focus-scroll-lock,
body.home-search-focus-scroll-lock {
    overflow-y: scroll;
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-search-focus-overlay {
        transition: none;
    }
}

#homeArtistSearchWrap .search-input::placeholder {
    color: #555;
}

#homeArtistSearchWrap .search-results-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: #060606;
    border: 1px solid #111;
    z-index: 10001;
    max-height: 480px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

#homeArtistSearchWrap .search-results-dropdown.is-open,
#homeArtistSearchWrap .search-results-dropdown:not([hidden]) {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

#homeArtistSearchWrap .search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #0a0a0a;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s ease;
}

#homeArtistSearchWrap .search-result-item:hover {
    background: rgba(0, 210, 255, 0.08);
}

#homeArtistSearchWrap .search-result-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 2px;
    background: #111;
    flex-shrink: 0;
}

#homeArtistSearchWrap .search-result-name {
    font-family: var(--font-head);
    font-size: 0.72rem;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1.2;
}

#homeArtistSearchWrap .search-result-rank {
    font-family: var(--font-main);
    font-size: 0.62rem;
    color: var(--neon);
    opacity: 0.5;
    letter-spacing: 1px;
    margin-top: 2px;
}

#homeArtistSearchWrap .search-result-empty {
    padding: 14px;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: #555;
    text-align: center;
}

body.home-hero .hero-section {
    margin-top: 0;
    padding-top: 0;
    background: var(--bg);
    background-attachment: scroll;
}

/* Homepage: logo bar overlays hero (no black band under fixed header) */
body.home-hero .main-header {
    position: fixed;
    background: linear-gradient(180deg, rgba(25, 25, 25, 0.92) 0%, rgba(25, 25, 25, 0.55) 70%, transparent 100%);
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Homepage: no mobile Browse/Menu toggle (desktop + mobile) */
body.home-hero .home-sticky-nav .mobile-nav-toggle,
body.home-hero .home-sticky-nav .mobile-nav-backdrop {
    display: none !important;
}

/* Pin sentinel — marks where two-row chrome begins */
.home-sticky-nav-pin-sentinel {
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
}

/*
 * Two-row sticky chrome (homepage):
 *   Row 1 — pill nav (#homeStickyNav)
 *   Row 2 — large search (#stickySearchRow)
 * Both live in #homeStickyChrome and stick to the top together.
 * Row 2 appears once .header-block has scrolled past (body.home-past-header).
 */
body.home-hero .home-sticky-chrome {
    position: sticky;
    top: 0;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background: rgba(25, 25, 25, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
}

body.home-hero .home-sticky-chrome--pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10002;
}

.home-sticky-chrome-placeholder {
    width: 100%;
    pointer-events: none;
}

.home-sticky-chrome-placeholder[hidden] {
    display: none !important;
    height: 0 !important;
}

#stickySearchInput,
#stickySearchRow .sticky-search-input,
#stickySearchRow .sticky-search-dropdown {
    pointer-events: auto !important;
}

body.home-hero .home-sticky-nav {
    position: relative;
    top: auto;
    z-index: 1;
    flex: 0 0 auto;
    order: 1;
    margin-top: 10px;
    background: transparent;
    box-shadow: none;
}

body.home-hero .home-sticky-nav::after {
    content: '';
    display: block;
    width: 100%;
    height: clamp(24px, 4vw, 44px);
    background: linear-gradient(
        180deg,
        rgba(0, 210, 255, 0.16) 0%,
        rgba(0, 210, 255, 0.06) 30%,
        rgba(0, 0, 0, 0.9) 72%,
        #000 100%
    );
    pointer-events: none;
}

body.home-hero:has(#stickySearchRow:not([hidden])) .home-sticky-nav::after {
    display: none;
}

body.home-hero.home-past-header .home-sticky-nav,
body.home-hero.home-nav-is-pinned .home-sticky-nav {
    margin-top: 0;
    border-top: 2px solid var(--neon);
}

body.home-hero .home-chrome-search-row,
body.home-hero #stickySearchRow {
    flex: 0 0 auto;
    order: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--bg);
    background-color: var(--bg);
}

body.home-hero:not(.home-past-header):not(.home-nav-is-pinned) #stickySearchRow {
    display: none !important;
}

body.home-hero.home-past-header #stickySearchRow,
body.home-hero.home-nav-is-pinned #stickySearchRow {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 20px 40px 24px;
    border-top: 1px solid rgba(0, 210, 255, 0.22);
    border-bottom: 2px solid var(--neon);
    box-shadow: 0 4px 16px rgba(0, 210, 255, 0.1);
    overflow: visible;
    pointer-events: auto;
}

body.home-hero.home-past-header #stickySearchRow .sticky-search-container,
body.home-hero.home-nav-is-pinned #stickySearchRow .sticky-search-container {
    width: 100%;
    max-width: min(840px, 96vw);
    overflow: visible;
    position: relative;
    z-index: 1;
}

body.home-hero.home-past-header #stickySearchRow:focus-within,
body.home-hero.home-nav-is-pinned #stickySearchRow:focus-within {
    z-index: 10050;
}

body.home-hero.home-past-header #stickySearchRow .sticky-search-dropdown.is-open,
body.home-hero.home-nav-is-pinned #stickySearchRow .sticky-search-dropdown.is-open,
body.home-hero.home-past-header #stickySearchRow .sticky-search-dropdown:not([hidden]),
body.home-hero.home-nav-is-pinned #stickySearchRow .sticky-search-dropdown:not([hidden]),
#stickySearchRow .sticky-search-dropdown.is-open,
#stickySearchRow .sticky-search-dropdown:not([hidden]) {
    z-index: 10130;
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

body.home-hero.home-past-header #stickySearchRow .sticky-search-input,
body.home-hero.home-nav-is-pinned #stickySearchRow .sticky-search-input {
    min-height: 62px;
    font-size: clamp(0.95rem, 2.5vw, 1.12rem);
    letter-spacing: 3px;
    padding: 22px 28px;
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.45);
}

body.home-hero.home-past-header #homeArtistSearchWrap:not(.home-search-wrap--active),
body.home-hero.home-nav-is-pinned #homeArtistSearchWrap:not(.home-search-wrap--active) {
    display: none !important;
    pointer-events: none !important;
}

body.home-hero:not(.home-past-header):not(.home-nav-is-pinned) .home-sticky-nav .pill-nav-container {
    padding-right: calc(min(320px, calc(100vw - 40px)) + 28px);
}

body.home-hero.home-past-header .home-sticky-nav .pill-nav-container,
body.home-hero.home-nav-is-pinned .home-sticky-nav .pill-nav-container {
    padding-right: 24px;
}

#stickySearchRow {
    background: var(--bg);
    background-color: var(--bg);
}

.home-sticky-nav-placeholder {
    width: 100%;
    pointer-events: none;
}

.home-sticky-nav-placeholder[hidden] {
    display: none !important;
    height: 0 !important;
}

#headerArtistSearch,
#headerArtistSearchDropdown {
    pointer-events: auto;
}

body.home-hero .home-sticky-nav .pill-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: min(1600px, 100%);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: auto;
    z-index: 1;
    margin-top: 0 !important;
    margin-bottom: 0;
    padding: 10px 40px 12px !important;
    box-sizing: border-box;
    background: transparent;
    border-bottom: 2px solid var(--neon);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.home-hero .pill-nav-container .pill-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.home-hero .pill-nav-container .pill-bar::-webkit-scrollbar {
    display: none;
}

body.home-hero .home-sticky-nav .pill-bar .pill-btn,
body.home-hero .home-sticky-nav .pill-bar a.pill-btn,
body.home-hero .home-sticky-nav .pill-bar button.pill-btn,
body.home-hero .home-sticky-nav .pill-bar-auth .pill-btn,
body.home-hero .home-sticky-nav .pill-bar-auth a.pill-btn,
body.home-hero .home-sticky-nav .pill-bar-auth button.pill-btn {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.home-hero .pill-nav-container .pill-bar-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
    pointer-events: auto !important;
}

body.home-hero .pill-nav-container .pill-bar-auth .pill-btn {
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

body.home-hero.home-nav-is-pinned .home-sticky-nav .pill-nav-container {
    padding-right: 24px;
}

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

.sticky-search-container {
    width: 100%;
    max-width: min(760px, 94vw);
    position: relative;
    background: transparent;
}

.sticky-search-input {
    width: 100%;
    min-height: 56px;
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 2px solid var(--neon);
    color: #fff;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    letter-spacing: 3px;
    padding: 20px 24px;
    outline: none;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 22px rgba(0, 210, 255, 0.4);
    text-transform: uppercase;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sticky-search-input:focus {
    background: #000;
    border-color: var(--neon);
    box-shadow: 0 0 32px rgba(0, 210, 255, 0.65);
}

.sticky-search-input::placeholder {
    color: #555;
}

.sticky-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #060606;
    border: 1px solid #111;
    z-index: 10001;
    max-height: 480px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9);
    border-radius: 4px;
}

.sticky-search-dropdown.is-open,
.sticky-search-dropdown:not([hidden]) {
    display: block !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.sticky-search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #0a0a0a;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s ease;
}

.sticky-search-result-item:hover {
    background: rgba(0, 210, 255, 0.08);
}

.sticky-search-result-section,
.search-result-section {
    padding: 8px 14px 4px;
    font-family: var(--font-head);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 210, 255, 0.72);
    border-bottom: 1px solid #0a0a0a;
    pointer-events: none;
}

.sticky-search-result-item--show,
.search-result-item--show {
    padding-left: 18px;
}

.sticky-search-result-item--show .sticky-search-result-name,
.search-result-item--show .search-result-name {
    font-family: var(--font-main);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.92);
}

.sticky-search-result-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 2px;
    background: #111;
    flex-shrink: 0;
}

.sticky-search-result-name {
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.2;
}

.sticky-search-result-rank {
    font-family: var(--font-main);
    font-size: 0.7rem;
    color: var(--neon);
    opacity: 0.5;
    letter-spacing: 1px;
    margin-top: 2px;
}

.sticky-search-result-empty {
    padding: 14px;
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #555;
    text-align: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-color: var(--bg);
}
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.9));
}
.hero-content { position: relative; z-index: 2; text-align: center; }
.hero-content h1,
.hero-title {
    font-family: var(--font-head);
    font-size: clamp(1.75rem, 7vw, 3.5rem);
    letter-spacing: clamp(6px, 2vw, 15px);
    margin: 0;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.8);
}
.hero-title .logo-accent,
.header-logo .logo-accent {
    color: var(--neon);
}

/* PILL BAR */
.pill-nav-container { display: flex; justify-content: center; position: relative; z-index: 10; margin-top: -26px !important; margin-bottom: 50px; }

.pill-bar {
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid var(--neon);
    border-radius: 50px;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
    align-items: center;
    overflow: visible;
}
.pill-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: #00d2ff !important;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
    transition: left 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
                top 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
                width 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
                height 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}
.pill-indicator { display: none !important; }
.pill-btn {
    position: relative;
    z-index: 1;
    background: transparent !important;
    border: none;
    color: #fff;
    font-family: var(--font-head);
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: color 0.25s ease;
    font-weight: 900;
}
a.pill-btn {
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
    box-sizing: border-box;
}
a.pill-btn.pill-btn--nav:hover {
    color: var(--neon);
}

/* Directory pages (/articles, /cities, /venues, /genres) — pill nav black text on hover */
body.home-hero.cities-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.cities-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.venues-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.venues-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.genres-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.genres-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.articles-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.articles-directory-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}
.pill-btn.active:not(.pill-btn--lit) {
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
}
.pill-btn.pill-btn--lit {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.pill-btn:hover:not(.pill-btn--lit) { color: var(--neon); }
.pill-btn.pill-btn--current,
.pill-btn.pill-btn--current.active {
    background: #00d2ff !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}
.pill-bar a.pill-btn:not(.pill-btn--current):hover,
.pill-bar a.pill-btn:not(.pill-btn--current):focus-visible {
    color: var(--neon) !important;
}
.pill-bar a.pill-btn.pill-btn--current:hover,
.pill-bar a.pill-btn.pill-btn--current:focus-visible,
.pill-bar a.pill-btn.pill-btn--nav.pill-btn--current:hover,
.pill-bar a.pill-btn.pill-btn--nav.pill-btn--current:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}
.pill-nav-container { margin-bottom: 0px !important; }
/* GRID FIXES (ANTI-BLOWOUT) */
.grid-container { 
    padding: 0px 40px; 
    max-width: 1600px; 
}
#djGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
    width: 100%;
    align-items: stretch;
}

#djGrid > .dj-card-slot {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
}

#djGrid .dj-card-slot > .dj-card {
    flex: 1 1 auto;
    height: 100%;
}

.dj-card {
    background: var(--card-bg);
    border: 1px solid #1a1a1a;
    transition: 0.3s;
    min-height: 380px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    width: 100%;
    cursor: pointer;
    contain: layout style;
}
.card-image .waveform-canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    z-index: 6;
}

@media (hover: none) and (pointer: coarse) {
    .dj-card .card-image {
        touch-action: manipulation;
    }

    .dj-card .card-image::after {
        content: '\25B6';
        position: absolute;
        left: 10px;
        bottom: 10px;
        z-index: 8;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1;
        color: var(--neon);
        background: rgba(0, 0, 0, 0.62);
        border: 1px solid rgba(0, 210, 255, 0.34);
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.12);
        pointer-events: none;
    }

    .dj-card.is-preview-playing .card-image::after {
        content: '\25A0';
        font-size: 11px;
    }

    .dj-card.is-preview-playing {
        border-color: var(--neon);
    }

    .dj-card .waveform-canvas,
    .card-image .waveform-canvas {
        display: block;
        height: 48px;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .dj-card.is-preview-playing .waveform-canvas {
        opacity: 1;
    }
}
.dj-card.unveiled { opacity: 1; transform: translateY(0); }
.dj-card:hover { border-color: var(--neon); transform: translateY(-8px); }

.card-image {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
    background-color: #0a0a0a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border: 1px solid #666;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.35), 0 0 4px rgba(0, 210, 255, 0.25);
}
.dj-card:hover .card-image {
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.5), 0 0 6px rgba(0, 210, 255, 0.35);
}
.card-info,
.card-content {
    flex-shrink: 0;
    padding: 25px 20px;
    text-align: center;
    width: 100%;
    overflow: hidden;
}
.card-info h2,
.card-content h2 {
    font-family: var(--font-head);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
    color: #fff;
}

.dj-card-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 8px;
    min-width: 0;
    min-height: 2.85em;
    line-height: 1.35;
}

.card-info .dj-card-name,
.card-content .dj-card-name,
a.dj-card .dj-card-name,
a.dj-card:visited .dj-card-name,
a.dj-card:hover .dj-card-name,
a.dj-card:focus-visible .dj-card-name {
    font-family: var(--font-head);
    font-size: 1.1rem;
    letter-spacing: 2px;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--neon);
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

/* Signal strength bars (artist directory) */
.dj-signal {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    height: 16px;
    padding-bottom: 1px;
}

.dj-signal__bar {
    width: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.12);
    height: 4px;
    transition: background 0.25s ease, box-shadow 0.25s ease, height 0.25s ease;
}

.dj-signal__bar.is-on {
    background: rgba(0, 210, 255, 0.55);
    height: calc(4px + (var(--bar-i, 1) * 2.4px));
}

.dj-signal--off .dj-signal__bar {
    height: 3px;
    opacity: 0.35;
}

/* Artist card status badge (V14) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 1.5px;
    padding: 2px 8px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #555;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.status-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #333;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

/* SIGNAL: ACTIVE / HIGH */
.status-active,
.status-high {
    border-color: rgba(0, 210, 255, 0.2);
    color: #00d2ff;
}

.status-active .status-dot,
.status-high .status-dot {
    background: #00d2ff;
    box-shadow: 0 0 5px #00d2ff;
}

/* LIVE STATUS */
.status-live {
    border-color: rgba(0, 255, 136, 0.4);
    color: #00ff88;
    background: rgba(0, 255, 136, 0.05);
}

.status-live .status-dot {
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
}

/* SOON (next 1–3 days) */
.status-soon {
    border-color: rgba(255, 255, 255, 0.32);
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.07);
}

.status-soon .status-dot {
    background: #d0d0d0;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}

@keyframes beacon-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.card-info .status-badge {
    width: fit-content;
    max-width: 100%;
}

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

.dj-card.playing-today .status-badge.status-live {
    border-color: rgba(255, 80, 80, 0.45);
    color: #ff6b6b;
    background: rgba(255, 0, 0, 0.08);
}

.dj-card.playing-today .status-badge.status-live .status-dot {
    background: #ff4444;
    box-shadow: 0 0 8px #ff4444;
    animation: beacon-blink 1.5s ease-in-out infinite;
}

.dj-signal--pulse .dj-signal__bar.is-on {
    background: var(--neon);
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.85);
    animation: djcSignalPulse 1.15s ease-in-out infinite;
    animation-delay: calc((var(--bar-i, 1) - 1) * 0.08s);
}

@keyframes djcSignalPulse {
    0%, 100% {
        opacity: 0.55;
        box-shadow: 0 0 4px rgba(0, 210, 255, 0.4);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(0, 210, 255, 1);
    }
}

.dj-card.playing-today .dj-signal .dj-signal__bar.is-on {
    background: var(--neon);
}

@media (prefers-reduced-motion: reduce) {
    .dj-signal--pulse .dj-signal__bar.is-on {
        animation: none;
        opacity: 1;
    }
}

/* Artist cards are links — tour line stays white; names use neon above */
a.dj-card,
a.dj-card:visited,
a.dj-card:hover,
a.dj-card:focus-visible,
a.dj-card:active {
    color: #fff;
    text-decoration: none;
}

a.dj-card .tour-info {
    color: #fff;
}
.tour-info {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.35;
    min-height: 2.5em;
}

#djGrid .dj-card .card-info {
    flex-shrink: 0;
    min-height: 7.25rem;
    box-sizing: border-box;
}

.auth-btn {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    padding: 8px 14px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.25s;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--neon);
    color: var(--neon);
}
.auth-btn-primary,
button.auth-btn-primary {
    background: var(--neon);
    color: #000;
}

/* Show alerts CTA — artist pages (outline pair) */
body.artist-page .artist-alert-cta {
    margin: 32px 0 40px;
    padding: 22px 20px;
    border: 1px solid rgba(0, 210, 255, 0.22);
    background: rgba(0, 0, 0, 0.35);
}

body.artist-page .artist-alert-cta__lead {
    margin: 0 0 16px;
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

body.artist-page .artist-alert-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

body.artist-page .artist-alert-cta__btn {
    text-decoration: none;
}

body.artist-page .artist-alert-cta .auth-btn,
body.artist-page .artist-alert-cta .auth-btn-primary,
body.artist-page .artist-alert-cta button.auth-btn,
body.artist-page .artist-alert-cta a.auth-btn {
    display: inline-block;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--neon) !important;
    border: 1px solid var(--neon) !important;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* Legacy markup: auth-btn-primary on Email alerts only */
body.artist-page .artist-alert-cta__actions button.artist-alert-cta__btn.auth-btn-primary {
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--neon) !important;
    border: 1px solid var(--neon) !important;
}

body.artist-page .artist-alert-cta .auth-btn:hover,
body.artist-page .artist-alert-cta .auth-btn:focus-visible,
body.artist-page .artist-alert-cta button.auth-btn:hover,
body.artist-page .artist-alert-cta button.auth-btn:focus-visible,
body.artist-page .artist-alert-cta a.auth-btn:hover,
body.artist-page .artist-alert-cta a.auth-btn:focus-visible {
    background: var(--neon);
    color: #000 !important;
    text-decoration: none;
}

/* Show alerts CTA — article body embeds (Email alerts matches Add to calendar) */
body.article-page .article-body .artist-alert-cta {
    margin: 32px 0 40px;
    padding: 22px 20px;
    border: 1px solid rgba(0, 210, 255, 0.22);
    background: rgba(0, 0, 0, 0.35);
}

body.article-page .article-body .artist-alert-cta__lead {
    margin: 0 0 16px;
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

body.article-page .article-body .artist-alert-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

body.article-page .article-body .artist-alert-cta__btn {
    text-decoration: none;
}

body.article-page .article-body .artist-alert-cta a.artist-alert-cta__btn {
    text-decoration: none;
}

body.article-page .article-body .artist-alert-cta .auth-btn,
body.article-page .article-body .artist-alert-cta .auth-btn-primary,
body.article-page .article-body .artist-alert-cta button.auth-btn {
    background: rgba(0, 0, 0, 0.6);
    color: var(--neon);
    border: 1px solid var(--neon);
}

body.article-page .article-body .artist-alert-cta .auth-btn:hover,
body.article-page .article-body .artist-alert-cta .auth-btn:focus-visible,
body.article-page .article-body .artist-alert-cta button.auth-btn:hover,
body.article-page .article-body .artist-alert-cta button.auth-btn:focus-visible {
    background: var(--neon);
    color: #000 !important;
}

/* Mobile-only login row in standard header — shown via mobile.css */
.header-mobile-auth {
    display: none;
}

/* Article pages: login always in header bar (no mobile Menu toggle) */
.header-auth--always {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.auth-btn:hover,
.auth-btn:focus-visible {
    background: var(--neon);
    color: #000 !important;
}

/* Sitewide standard header nav — black text on hover (city, venue, article, map) */
body:not(.home-hero) .main-header nav .auth-btn:hover,
body:not(.home-hero) .main-header nav .auth-btn:focus-visible,
body:not(.home-hero) .main-header .header-nav .auth-btn:hover,
body:not(.home-hero) .main-header .header-nav .auth-btn:focus-visible,
body.article-page .main-header .header-nav .auth-btn:hover,
body.article-page .main-header .header-nav .auth-btn:focus-visible,
body.venue-page .main-header .header-nav .auth-btn:hover,
body.venue-page .main-header .header-nav .auth-btn:focus-visible {
    background: var(--neon);
    color: #000 !important;
    text-shadow: none;
}

body.home-hero .home-sticky-nav .pill-bar .auth-btn:hover,
body.home-hero .home-sticky-nav .pill-bar .auth-btn:focus-visible {
    background: var(--neon);
    color: #000 !important;
}
.next-show { color: #fff; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* BADGES & STARS */
/* ==========================================
   ENHANCED STAR/HEART TOGGLE
   ========================================== */
/* ==========================================
   MEGA STAR/HEART TOGGLE (V11)
   ========================================== */
.star-toggle { 
    position: absolute; 
    top: 5px;   /* Moved up slightly for more room */
    right: 5px; /* Moved right slightly */
    font-size: 40px !important; /* MEGA SIZE */
    cursor: pointer; 
    z-index: 50; 
    color: #fff; 
    -webkit-text-stroke: 1px #ffffff; /* Thicker outline for clarity */
    transition: transform 0.2s, color 0.2s; 
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
}
/* HEARTBEAT ANIMATION */
@keyframes megaPulse {
    0% { transform: scale(1); }
    15% { transform: scale(1.2); }
    30% { transform: scale(1); }
    45% { transform: scale(1.2); }
    70% { transform: scale(1); }
}
/* HOVER STATE */
.star-toggle:hover {
    animation: megaPulse 1.2s ease-in-out infinite;
    color: #ff0055 !important; /* Neon Pink */
    text-shadow: 0 0 30px rgba(255, 0, 85, 1);
    -webkit-text-stroke: 1px #fff; /* White outline on hover for pop */
}
/* ACTIVE/STARRED STATE */
.star-toggle.starred { 
    color: #ff0055 !important;
    -webkit-text-stroke: 2px #000;
    text-shadow: 0 0 20px rgba(255, 0, 85, 0.5);
}

.rank-badge { 
    position: absolute; top: 88px; left: 96px; background: #000; color: var(--neon); padding: 5px 10px; font-family: var(--font-head); font-size: 1.25rem; font-weight: 900; z-index: 20; 
}

/* TODAY THROB */
@keyframes urgentThrob { 0%, 100% { border-color: rgba(255,0,0,0.3); box-shadow: 0 0 5px rgba(255,0,0,0.3); } 50% { border-color: var(--urgent); box-shadow: 0 0 25px rgba(255,0,0,1); } }
.today-throb { animation: urgentThrob 1.5s infinite ease-in-out; border: 1px solid var(--urgent) !important; }
.today-throb .next-show { color: var(--urgent) !important; text-shadow: 0 0 10px rgba(255, 0, 0, 0.6); }

/* ========================================================================= */
/* ARTIST DASHBOARD (.artist.php) - BULLETPROOF CSS GRID                     */
/* ========================================================================= */
.artist-hero-small { 
    margin-top: 80px; height: 400px; position: relative; border-bottom: 2px solid var(--neon); 
    background-size: cover; background-position: center 20%;
}
.hero-gradient { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(to bottom, transparent, #050505); 
    display: flex; align-items: flex-end; padding: 40px; 
}
.panel-label { font-family: var(--font-head); color: var(--neon); letter-spacing: 2px; border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 20px; }

/* ========================================================================= */
/* TOUR DATES LIST & TICKET BUTTONS                                          */
/* ========================================================================= */
.tour-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.tour-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    padding: 15px 25px !important;
    transition: 0.3s;
    text-decoration: none !important;
}
.tour-row:hover:not(.is-sold-out) {
    background: rgba(0, 210, 255, 0.05);
    border-color: rgba(0, 210, 255, 0.5);
}

.tour-row.is-sold-out {
    opacity: 0.55;
    filter: grayscale(0.85);
}

.tour-row.is-sold-out .tour-date,
.tour-row.is-sold-out .tour-loc,
.tour-row.is-sold-out .tour-loc-text,
.tour-row.is-sold-out .tour-location,
.tour-row.is-sold-out .tour-venue,
.tour-row.is-sold-out .tour-geo-link,
.tour-row.is-sold-out a.tour-city-link,
.tour-row.is-sold-out a.tour-venue-link {
    color: #666 !important;
}

/* Ticket vendor picker (Bandsintown vs Ticketmaster) */
.ticket-picker-overlay {
    z-index: 100001;
}

.ticket-picker-modal {
    max-width: 420px;
}

.ticket-picker-lead {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.45;
}

.ticket-picker-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-picker-actions .ticket-picker-btn,
.ticket-picker-actions .ticket-picker-btn--bit,
.ticket-picker-actions .ticket-picker-btn--tm {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-head, 'Orbitron', sans-serif);
}
.tour-date,
.tour-loc {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tour-date {
    color: var(--neon);
    width: 160px;
    flex: 0 0 160px;
    max-width: 160px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tour-loc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #fff;
    flex: 1;
    min-width: 0;
}

.tour-source-tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.tour-source-tag {
    font-family: var(--font-head);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 2px;
    line-height: 1.2;
    white-space: nowrap;
}

.tour-source-tag.tix-btn--choice {
    font-size: 7px !important;
    padding: 3px 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    letter-spacing: 1px !important;
}

.tour-source-tag--vendor,
.tour-source-tag--vendor.tix-btn--choice,
.tour-source-tag--ticketmaster,
.tour-source-tag--ticketmaster.tix-btn--choice {
    color: #ffd400 !important;
    border-color: #ffd400 !important;
    background: rgba(255, 212, 0, 0.1) !important;
}

.tour-source-tag--bandsintown,
.tour-source-tag--bandsintown.tix-btn--choice {
    color: #fff !important;
    border-color: #0053cc !important;
    background: #0053cc !important;
}

.tour-source-tag--sold-out,
.tour-source-tag--sold-out.tix-btn--choice {
    color: #fff !important;
    border-color: #ff0000 !important;
    background: #ff0000 !important;
}

.tour-row.is-sold-out .tour-source-tag--bandsintown,
.tour-row.is-sold-out .tour-source-tag--bandsintown.tix-btn--choice {
    color: #9a8a30 !important;
    border-color: #9a8a30 !important;
}

.tour-row.is-sold-out .tour-source-tag--ticketmaster,
.tour-row.is-sold-out .tour-source-tag--ticketmaster.tix-btn--choice {
    color: #9a8a30 !important;
    border-color: #9a8a30 !important;
}

.tour-location {
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 1px;
}

/* THE TACTICAL TICKET BUTTON */
.ticket-btn {
    margin-left: auto; 
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 25px;
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 2px;
    transition: 0.3s;
    text-transform: uppercase;
}
.tour-row:hover .ticket-btn {
    background: var(--neon);
    color: #000;
    border-color: var(--neon);
}

/* ========================================================================= */
/* RESPONSIVE LAYOUT BREAKPOINTS                                             */
/* ========================================================================= */
@media (max-width: 1200px) { 
    #djGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
}
@media (max-width: 900px) { 
    #djGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}
@media (max-width: 600px) { 
    #djGrid { grid-template-columns: 1fr; } 
    /* Stack ticket buttons neatly on tiny screens */
    .tour-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ticket-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* ========================================================================= */

/* NEURAL LIGHTBOXES & MODALS                                                */

/* ========================================================================= */
.lightbox-overlay {
    display: none; 
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0, 0, 0, 0.95); 
    z-index: 3000; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(10px);
}

.lightbox-content {
    background: #0c0c0c; 
    border: 1px solid var(--neon); 
    padding: 50px; 
    border-radius: 10px; 
    width: 100%; 
    max-width: 500px; 
    position: relative; 
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.2);
    text-align: center;
}

.close-lightbox {
    position: absolute; 
    top: 20px; 
    right: 25px; 
    background: transparent; 
    border: none;
    color: #fff; 
    font-family: 'Orbitron', sans-serif; 
    font-size: 2rem; 
    cursor: pointer; 
    line-height: 1; 
    padding: 10px;
    transition: 0.3s;
}

.close-lightbox:hover {
    color: var(--urgent);
}

.lightbox-content h2 {
    font-family: 'Orbitron', sans-serif; 
    color: #fff; 
    margin-top: 0; 
    margin-bottom: 30px;
    letter-spacing: 2px;
}

.neural-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.neural-form input, .neural-form textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,210,255,0.3);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    padding: 15px;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.neural-form input:focus, .neural-form textarea:focus {
    border-color: var(--neon);
    background: rgba(0,210,255,0.1);
}

.neural-submit {
    background: #000;
    color: var(--neon);
    border: 1px solid var(--neon);
    padding: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.neural-submit:hover {
    background: var(--neon);
    color: #000;
}
/* LIGHTBOX OVERLAY */

.lightbox-overlay {

    display: none;

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0, 0, 0, 0.95);

    z-index: 999999;

    justify-content: center;

    align-items: center;

    backdrop-filter: blur(10px);

}

/* NEURAL MODAL BOX */

.neural-modal {

    background: #000;

    border: 1px solid #00d2ff;

    width: 90%;

    max-width: 500px;

    padding: 40px;

    position: relative;

    box-shadow: 0 0 50px rgba(0, 210, 255, 0.2);

}

.close-modal {

    position: absolute;

    top: 15px; right: 20px;

    background: none;

    border: none;

    color: #fff;

    font-size: 2rem;

    cursor: pointer;

    transition: color 0.3s;

}

.close-modal:hover { color: #ff0000; }

.modal-body { padding-top: 20px; }
/* THE DARKENED BACKGROUND */
.lightbox-overlay {
    display: none; /* Controlled by JS */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Slightly more transparent */
    z-index: 999999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}
/* THE COMPACT TACTICAL WINDOW */
.neural-modal {
    background: #000;
    border: 1px solid #00d2ff;
    width: 90%; 
    max-width: 400px; /* Locked small width */
    padding: 30px; /* Tighter padding */
    position: relative;
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.3); /* Neon depth */
    animation: modalSlide 0.3s ease-out;
}
/* SMOOTH ENTRANCE ANIMATION */
@keyframes modalSlide {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* SMALLER PANEL LABEL FOR COMPACT VIEW */
.panel-label-small {
    font-family: 'Orbitron';
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #00d2ff;
    margin-bottom: 15px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 10px;
    display: block;
}
/* V10 MINT PILL NAV FIX */

.pill-nav-container {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: -30px; /* Overlap the hero section */

    position: relative;

    z-index: 100;

}

.pill-bar {

    background: var(--bg);

    border: 1px solid #1a1a1a;

    display: flex;

    padding: 5px;

    gap: 4px;

    position: relative;

    align-items: center;

    border-radius: 50px;

    overflow: visible;

}

.pill-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: #00d2ff !important;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
    transition: left 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
                top 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
                width 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
                height 0.38s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

.pill-btn {

    position: relative;

    z-index: 1;

    background: transparent !important;

    border: none;

    color: #fff;

    padding: 10px 25px;

    font-family: var(--font-head, 'Orbitron', sans-serif);

    font-size: 0.7rem;

    font-weight: 900;

    cursor: pointer;

    transition: color 0.25s ease;

}

.pill-btn.active:not(.pill-btn--lit) {

    background: transparent !important;

    color: #fff !important;

    box-shadow: none !important;

}

.pill-btn.pill-btn--lit {

    background: transparent !important;

    color: #000 !important;

    box-shadow: none !important;

}

.pill-btn:hover:not(.pill-btn--lit) {

    color: #00d2ff;

}
.waveform-canvas {
    transition: opacity 0.3s ease-in-out;
    opacity: 0; /* Hidden by default */
    pointer-events: none;
    
    /* ANCHOR TO BOTTOM OF IMAGE */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Limits how high the bars can go */
    z-index: 10;
}
.dj-card:hover .waveform-canvas {
    opacity: 1;
}

/* Ticketmaster affiliate display banners */
.tm-affiliate-banner {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    margin: 0 auto;
    max-width: 100%;
}
.tm-affiliate-banner--home {
    margin-bottom: 8px;
}
.tm-affiliate-banner--artist {
    margin-bottom: 24px;
}
.tm-affiliate-banner a {
    display: block;
    line-height: 0;
    border: 1px solid rgba(0, 210, 255, 0.15);
    transition: border-color 0.25s, box-shadow 0.25s;
}
.tm-affiliate-banner a:hover {
    border-color: rgba(0, 210, 255, 0.45);
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.12);
}
.tm-affiliate-banner img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* PLATINUM NEON MARKER */
.neon-pulse-marker {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-core {
    width: 12px;
    height: 12px;
    background: #00d2ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00d2ff, 0 0 30px #00d2ff;
    z-index: 5;
}

.pulse-ring {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid #00d2ff;
    border-radius: 50%;
    animation: platinum-pulse 2s infinite ease-out;
    opacity: 0;
}

@keyframes platinum-pulse {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}
/* DARK MAP NEON MARKER */

.neon-pulse-marker {

    display: flex;

    justify-content: center;

    align-items: center;

}

.pulse-core {

    width: 10px;

    height: 10px;

    background: #00d2ff;

    border-radius: 50%;

    box-shadow: 0 0 10px #00d2ff, 0 0 20px #00d2ff;

    z-index: 10;

}

.pulse-ring {

    position: absolute;

    width: 35px;

    height: 35px;

    border: 2px solid #00d2ff;

    border-radius: 50%;

    animation: platinum-pulse 2s infinite ease-out;

    opacity: 0;

}

@keyframes platinum-pulse {

    0% { transform: scale(0.5); opacity: 1; }

    100% { transform: scale(2.5); opacity: 0; }

}
/* PLATINUM DISTANCE BADGE */
/* DISTANCE BADGE: Tightly wrapped and positioned above name */
.dist-badge {
    position: absolute !important;
    bottom: 60px !important; /* Adjust this number to sit perfectly above your name overlay */
    left: 10px !important;
    top: auto !important; /* Clears the previous top: 10px */
    
    width: fit-content !important; /* Wraps around the text */
    height: auto !important;
    
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--neon);
    color: var(--neon);
    padding: 3px 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 1px;
    z-index: 20;
    pointer-events: none;
    border-radius: 2px;
    
    /* Ensure it doesn't stretch if display is flex */
    display: none; 
    align-items: center;
    justify-content: center;
}


/* ==========================================
   HEARTBEAT ANIMATION FOR STAR BUTTONS
   ========================================== */
/* The Keyframes for the heartbeat */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}
/* Apply the animation on hover */
.star-toggle:hover {
    /* Runs the heartbeat animation for 1.5 seconds, infinitely repeating while hovered */
    animation: heartbeat 1.5s ease-in-out infinite both;
    
    /* Give it a nice neon pink glow while hovering to match your theme */
    color: #ff0055 !important;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.8);
}
.waveform-canvas {

    z-index: 5;

    background: linear-gradient(to top, rgba(0, 210, 255, 0.1), transparent);

    image-rendering: pixelated;

}

.dj-card:hover .waveform-canvas {

    opacity: 1 !important;

}
@keyframes cameraFlash {
    0%   { opacity: 0; filter: brightness(5) contrast(200%); }
    10%  { opacity: 1; filter: brightness(4) contrast(150%); }
    20%  { opacity: 0; }
    35%  { opacity: 1; filter: brightness(2) contrast(120%); }
    100% { opacity: 1; filter: brightness(1) contrast(100%); }
}
/* ARTIST HERO STABILITY */

.artist-hero {

    height: 70vh; /* Takes up 70% of the screen */

    width: 100%;

    background-size: cover;

    background-position: center;

    background-attachment: fixed; /* Parallax effect */

    display: flex;

    align-items: flex-end;

    padding-bottom: 50px;

    position: relative;

    z-index: 1;

}

.hero-content {

    padding: 0 40px;

    width: 100%;

}

.artist-title {

    font-family: 'Orbitron', sans-serif;

    font-size: 5rem;

    font-weight: 900;

    letter-spacing: -2px;

    color: #fff;

    margin: 0;

    line-height: 1;

}

.artist-rank {

    font-family: 'Rajdhani', sans-serif;

    font-size: 1.5rem;

    color: #00d2ff; /* Mint Blue */

    font-weight: 700;

    letter-spacing: 5px;

}

/* RESPONSIVE FIX FOR MOBILE */

@media (max-width: 768px) {

    .artist-title { font-size: 3rem; }

    .artist-hero { height: 50vh; }

}
.going-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 120px;
}

.going-status {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.65rem;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.going-actions {
    display: flex;
    gap: 2px;
    border: 1px solid #222;
    padding: 2px;
    background: #000;
}

.going-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.going-btn:hover { color: #fff; }

/* Active States */
.going-btn.active-yes { background: #00f2ff; color: #000; box-shadow: 0 0 10px #00f2ff; }
.going-btn.active-no { background: #ff0055; color: #fff; box-shadow: 0 0 10px #ff0055; }

/* THE CLICKABLE ROW WRAPPER - USING FLEXBOX FOR STABILITY */
.tour-row.clickable-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #111;
    font-size: 1.1rem;
    transition: background 0.2s;
    cursor: pointer;
}
.tour-row.clickable-row:hover {
    background: #0a0a0a;
    border-bottom: 1px solid var(--neon);
}
/* THE DATE (Left) */
.tour-date {
    flex: 1; /* Takes up 1 part of space */
    opacity: 0.6;
    text-align: left;
}
/* THE CITY (Middle) */
.tour-city {
    flex: 1.5; /* Takes up 1.5 parts of space, so it's slightly wider */
    font-weight: 700;
    color: var(--neon);
    letter-spacing: 1px;
    text-align: left;
}
/* THE TICKET BUTTON (Right) */
.ticket-btn {
    flex: 0 0 auto; /* Only takes up as much space as it needs */
    background: transparent;
    color: var(--neon);
    border: 1px solid var(--neon);
    padding: 6px 12px;
    font-family: 'Orbitron';
    font-size: 0.6rem;
    letter-spacing: 2px;
    transition: 0.3s;
    text-align: center;
}
/* LIGHT UP THE BUTTON ON ROW HOVER */
.tour-row.clickable-row:hover .ticket-btn {
    background: var(--neon);
    color: #000;
    box-shadow: 0 0 15px var(--neon);
}
/* MOBILE AUDIO BUTTON (Hidden on Desktop) */
.mobile-audio-btn {
    position: absolute;
    bottom: 70px; /* Sits just above the waveform canvas */
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--neon);
    color: var(--neon);
    border-radius: 50%;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 10;
}
/* Only show on touch devices */
@media (hover: none) and (pointer: coarse) {
    .mobile-audio-btn {
        display: flex;
    }
}
/* In your style.css inside the module block */

.favorites-section { 

    padding: 40px 60px 0px 40px;

    background: #191919;

    border-bottom: 1px solid #111; 

    /* display: none;  <-- COMMENT THIS OUT FOR A SECOND */

}
/* V11 MINT: REFINED NATURAL PLOP */
@keyframes natural-plop {
    0% {
        transform: translate(-50%, -110vh) scaleY(1.8); /* Drop from high above, stretched */
        opacity: 0;
    }
    35% {
        opacity: 1; /* Fully visible before impact */
    }
    45% {
        transform: translate(-50%, -50%) scaleY(1); /* Initial Impact */
    }
    60% {
        transform: translate(-50%, calc(-50% + 20px)) scaleY(0.75) scaleX(1.2); /* Natural Squish */
    }
    75% {
        transform: translate(-50%, calc(-50% - 8px)) scaleY(1.05) scaleX(0.95); /* Minor Rebound */
    }
    100% {
        transform: translate(-50%, -50%) scale(1); /* Perfect Settle */
        opacity: 1;
    }
}
.plop-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 9vw, 5.5rem);
    letter-spacing: clamp(10px, 2.5vw, 20px);
    color: #fff;
    text-shadow: 0 0 30px #00d2ff, 0 0 60px rgba(0, 210, 255, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    
    /* 1.8s provides a heavy, high-production feel */
    animation: natural-plop 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    will-change: transform, opacity;
}

/* V11 MINT: DROP + FADE + BOUNCE ENGINE */
@keyframes dropFadeBounce {
    0% {
        /* Start 100vh above and invisible */
        transform: translate(-50%, -100vh) scaleY(1.4);
        opacity: 0;
    }
    40% {
        /* Hits center and reaches full opacity */
        transform: translate(-50%, -50%) scaleY(1);
        opacity: 1;
    }
    60% {
        /* The Bounce (Natural Squish) */
        transform: translate(-50%, calc(-50% + 20px)) scaleY(0.7) scaleX(1.3);
    }
    80% {
        /* The Rebound (Minor Stretch) */
        transform: translate(-50%, calc(-50% - 10px)) scaleY(1.1) scaleX(0.9);
    }
    100% {
        /* Final Settle */
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
.plop-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2rem, 9vw, 5.5rem);
    letter-spacing: clamp(10px, 2.5vw, 20px);
    color: #fff;
    text-shadow: 0 0 30px #00d2ff, 0 0 60px rgba(0, 210, 255, 0.3);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    
    /* 1.6s for a snappy, high-energy drop */
    animation: dropFadeBounce 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    will-change: transform, opacity;
}
/* V13 Smart Heart Alert */
.fav-pill.tour-pulse-active {
    border: 1px solid var(--neon);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
    position: relative;
}
.mini-tour-dot {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    position: absolute;
    top: -3px;
    right: -3px;
    box-shadow: 0 0 8px var(--neon);
    animation: tourPulse 1.5s infinite;
}
@keyframes tourPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}
/* V13 SMART HEART: TOUR NOTIFICATIONS */
.fav-pill {
    position: relative; /* So the dot can anchor to it */
}
.tour-alert-dot {
    width: 10px;
    height: 10px;
    background: #ff0055; /* Hot pink/red for urgency */
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    right: 25px; /* Adjust based on your 'X' button placement */
    z-index: 10;
    box-shadow: 0 0 10px #ff0055;
    animation: alertPulse 1.5s infinite;
}
@keyframes alertPulse {
    0% { transform: scale(1); box-shadow: 0 0 5px #ff0055; }
    50% { transform: scale(1.3); box-shadow: 0 0 15px #ff0055; }
    100% { transform: scale(1); box-shadow: 0 0 5px #ff0055; }
}
/* Subtle glow for the pill itself if on tour */
.fav-pill.on-tour {
    border-color: rgba(255, 0, 85, 0.5) !important;
}

/* V13 SMART HEART: TOUR NOTIFICATIONS */
.fav-card { position: relative; } /* Anchor for the dot */

.tour-dot {
    width: 12px;
    height: 12px;
    background: #ff0055; /* Hot pink/red for urgency */
    border: 2px solid #000;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    box-shadow: 0 0 10px #ff0055;
    animation: tourPulse 1.5s infinite;
}

@keyframes tourPulse {
    0% { transform: scale(1); box-shadow: 0 0 5px #ff0055; }
    50% { transform: scale(1.3); box-shadow: 0 0 15px #ff0055; }
    100% { transform: scale(1); box-shadow: 0 0 5px #ff0055; }
}

/* Optional: Slight border glow for the card itself */
.fav-card.on-tour {
    border-color: #ff0055 !important;
    box-shadow: inset 0 0 10px rgba(255, 0, 85, 0.2);
}
/* V13 PROXIMITY RADAR: RANGEFINDER UI */
.dist-badge {
    /* Reset and Position */
    display: none; /* Only shown when 'Near' filter is active */
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 50;
    
    /* The Rangefinder Look */
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--neon);
    color: var(--neon);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 2px;
    
    /* Neon Glow & Scanline Effect */
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4), inset 0 0 5px rgba(0, 210, 255, 0.2);
    text-shadow: 0 0 5px var(--neon);
    backdrop-filter: blur(4px); /* Frosts the image behind it */
    
    /* Animation: Subtle Scanline Pulse */
    animation: radarScan 2s infinite ease-in-out;
}
@keyframes radarScan {
    0% { border-color: rgba(0, 210, 255, 0.4); box-shadow: 0 0 5px rgba(0, 210, 255, 0.2); }
    50% { border-color: rgba(0, 210, 255, 1); box-shadow: 0 0 20px rgba(0, 210, 255, 0.6); }
    100% { border-color: rgba(0, 210, 255, 0.4); box-shadow: 0 0 5px rgba(0, 210, 255, 0.2); }
}
/* Add a "Radar" label prefix visually without changing HTML */
.dist-badge::before {
    content: 'RADAR: ';
    font-size: 0.5rem;
    opacity: 0.7;
    margin-right: 4px;
}
/* V13 LOGO PLOP: ELASTIC DROP + LIGHT BURST */
.logo-plop {
    font-size: clamp(3rem, 12vw, 9rem);
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -5px;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
    position: relative;
    z-index: 10;
    opacity: 0;
    
    /* The Entrance Animation */
    animation: elasticDrop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
               settleGlow 2s ease-in-out infinite alternate 1.2s;
}
@keyframes elasticDrop {
    0% { transform: translateY(-300px) scale(0.5); opacity: 0; }
    60% { transform: translateY(20px) scale(1.1); opacity: 1; }
    80% { transform: translateY(-10px) scale(0.95); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* The "Light Burst" when it lands */
.logo-plop::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 2px;
    background: var(--neon);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px 20px var(--neon);
    opacity: 0;
    z-index: -1;
    animation: impactBurst 0.6s ease-out forwards 0.8s;
}
@keyframes impactBurst {
    0% { width: 0%; opacity: 1; }
    100% { width: 120%; opacity: 0; }
}
@keyframes settleGlow {
    from { text-shadow: 0 0 20px rgba(0, 210, 255, 0.4); }
    to { text-shadow: 0 0 40px rgba(0, 210, 255, 0.8), 0 0 60px rgba(0, 210, 255, 0.4); }
}
/* 1. Center the entire section on the page but limit its width */
.similar-radar {
    max-width: 1200px; /* Keeps the block from stretching endlessly on ultra-wides */
    margin: 0 auto; /* Centers the whole container block on the screen */
    padding: 60px 20px; 
    justify-content: center;
    color: #666;
}

/* 2. Keep the section title aligned to the left */
.similar-radar h2, 
.similar-radar .section-title {
    text-align: left;
    margin-bottom: 30px;
}

/* 3. Center the row of artist cards */
.similar-grid {
    display: flex;
    flex-wrap: wrap; /* Allows cards to drop to a new row on smaller screens */
    justify-content: center; /* This forces the cards to the middle of the grid */
    gap: 20px; /* Space between the cards */
}
.upcoming-card {
    margin-top: 3px !important;
}
/* Favorites Section Container */
#favorites-section {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #00d2ff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 10px;
}

.favorites-scroll-box {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
}

/* The Mini Favorite Cards */
.fav-item {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    min-width: 120px;
    text-align: center;
    position: relative; /* Needed for the X button */
}

.fav-item img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00d2ff;
    margin-bottom: 8px;
}

.fav-item h4 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: #fff;
}

/* The X Delete Button */
.fav-close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff0055;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 10px #ff0055;
    transition: 0.2s;
}

.fav-close-btn:hover {
    transform: scale(1.1);
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-red {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 85, 0.7); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(255, 0, 85, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 85, 0); }
}

.pulse-badge {
    text-transform: uppercase;
    font-weight: 900;
}
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--neon-mint);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom); /* CRITICAL: Fixes iPhone Notch issue */
}

@media (min-width: 768px) {
    .mobile-nav { display: none; } /* Hide on Desktop */
}

.nav-item {
    color: #fff;
    text-decoration: none;
    font-size: 0.7rem;
    font-family: 'Rajdhani';
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s;
}

/* --- MOBILE APP SHELL V13 --- */

/* Responsive Grid Logic */
.dj-grid {
    display: grid;
    gap: 15px;
    padding: 15px;
    grid-template-columns: 1fr; /* Default mobile: 1 column */
    padding-bottom: 100px; /* Space for the bottom nav */
}

@media (min-width: 600px) {
    .dj-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .dj-grid { grid-template-columns: repeat(4, 1fr); }
}

/* App-Style Bottom Nav */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(15px);
    border-top: 1px solid var(--neon-mint);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -10px 30px rgba(0, 255, 170, 0.1);
}

@media (min-width: 768px) {
    .mobile-nav { display: none; } /* Hide on Desktop */
}

.nav-item {
    color: #fff;
    text-decoration: none;
    font-size: 0.65rem;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.3s ease;
}

.nav-item i { font-size: 1.3rem; margin-bottom: 5px; }
.nav-item.active, .nav-item:active { 
    color: var(--neon-mint); 
    text-shadow: 0 0 10px var(--neon-mint); 
}

/* --- V13 BLUE VERSION PROTECTION --- */

/* Ensure the original blue EQ is visible and positioned right */

.waveform-container, .blue-eq, .visualizer {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    height: 40px; /* Adjust based on the original size */

    margin-top: 10px;

}

/* If the blue version was overlapping on mobile, this fixes it */

@media (max-width: 600px) {

    .blue-eq {

        height: 25px !important;

        width: 100% !important;

    }

}
.nav-item i { font-size: 1.2rem; margin-bottom: 4px; }
.nav-item.active { color: var(--neon-mint); text-shadow: 0 0 10px var(--neon-mint); }

#leaderboard-bar,
.leaderboard-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99990;
    isolation: isolate;
    pointer-events: none;
    visibility: visible;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

#leaderboardToggle,
.leaderboard-toggle {
    position: fixed;
    left: 50%;
    bottom: env(safe-area-inset-bottom, 0);
    transform: translateX(-50%);
    z-index: 2147483647;
    flex-shrink: 0;
    order: 2;
    background: #0a0a0a;
    border: 1px solid #00d2ff44;
    border-bottom: none;
    color: #00d2ff;
    font-size: 0;
    width: 56px;
    height: 28px;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    line-height: 1;
    pointer-events: auto;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, order 0s;
}

/* Collapsed: hidden content above, up-arrow tab pinned to viewport bottom */
#leaderboard-bar.is-collapsed .leaderboard-content {
    order: 1;
}

#leaderboard-bar.is-collapsed .leaderboard-toggle {
    order: 2;
}

/* Open: down-arrow tab on top of the ad panel */
#leaderboard-bar.is-open .leaderboard-toggle {
    order: 1;
    bottom: calc(100px + env(safe-area-inset-bottom, 0));
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
}

#leaderboard-bar.is-open .leaderboard-content {
    order: 2;
    border-top: none;
    box-shadow: none;
}

.leaderboard-toggle::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    transition: border 0.2s ease;
}

/* Open drawer → down arrow (click to collapse) */
#leaderboard-bar.is-open .leaderboard-toggle::after {
    border-top: 9px solid var(--neon, #00d2ff);
    border-bottom: none;
}

/* Collapsed → up arrow (click to expand) */
#leaderboard-bar.is-collapsed .leaderboard-toggle::after {
    border-bottom: 9px solid var(--neon, #00d2ff);
    border-top: none;
}

.leaderboard-toggle:hover { background: #111; }

.leaderboard-content {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    pointer-events: auto;
    background: #0a0a0a;
    border-top: 1px solid rgba(0, 210, 255, 0.2);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.85);
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, padding 0.35s ease;
}

/* Standard IAB leaderboard placeholder — centered in bottom drawer */
.leaderboard-ad-slot {
    width: 728px;
    max-width: calc(100vw - 24px);
    height: 90px;
    margin: 0 auto;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}

.fb-share-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #1877F2;
    color: #fff;
    padding: 7px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #1877F2;
    transition: 0.2s;
    white-space: nowrap;
}

.fb-share-btn:hover {
    background: #145dbf;
    transform: scale(1.05);
}

.fb-share-btn svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

#fb-share-module {
    top: 100px;
    left: 200px;
    text-align: right;
}

.name-share-row {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

/* Ensure the button doesn't shrink or wrap weirdly */

.fb-share-btn {
    flex-shrink: 0;
}

/* ---- SIMILAR RADAR ---- */
.similar-radar {
    padding: 80px 60px;
    background: #000;
    text-align: center;
    border-top: none;
}

.similar-radar h3 {
    font-family: 'Orbitron';
    letter-spacing: 12px;
    color: #fff !important;
    font-size: 0.8rem;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.sim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
}

.sim-card {
    cursor: pointer;
    transition: 0.3s ease;
    text-decoration: none;
    background: #050505;
    padding-bottom: 15px;
    border: 1px solid #111;
}

.sim-card:hover {
    border-color: #00d2ff;
    transform: translateY(-5px);
}

.sim-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    filter: grayscale(80%);
    transition: 0.3s;
}

.sim-card:hover img {
    filter: grayscale(0%);
}

.sim-name {
    font-family: 'Orbitron';
    font-size: 0.7rem;
    color: #fff;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sim-rank {
    font-family: 'Rajdhani';
    font-size: 0.8rem;
    color: #00d2ff;
    font-weight: 700;
    margin-top: 5px;
}
.similar-radar {
    padding: 80px 60px 160px 60px !important;
}
/* DISTANCE BANNER — bottom of card image, above name / black section */
.distance-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    padding: 10px 12px 12px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    color: var(--neon);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 2px;
    z-index: 6;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    animation: fadeUpIn 0.4s ease forwards;
}
/* QUICK TOUR OVERLAY */
.card-tour-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85); /* Deep dim */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    padding: 20px;
    pointer-events: none; /* Let the click go through to the card */
}

.dj-card:hover .card-tour-overlay {
    opacity: 1;
}

.overlay-title {
    font-family: 'Orbitron';
    font-size: 0.6rem;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.tour-item {
    font-family: 'Rajdhani';
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--neon);
    margin: 5px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dj-card:hover .tour-item {
    transform: translateY(0);
}

/* Stagger the items for a "sliding in" effect */
.tour-item:nth-child(2) { transition-delay: 0.05s; }
.tour-item:nth-child(3) { transition-delay: 0.1s; }
.tour-item:nth-child(4) { transition-delay: 0.15s; }

/* ---- HIATUS / TOUR COMPLETE GHOSTING ---- */
.dj-card.on-hiatus {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s ease;
}

.dj-card.on-hiatus:hover {
    filter: grayscale(30%); /* Peek of color on hover */
    opacity: 0.8;
}

/* HIATUS RIBBON */
.hiatus-ribbon {
    position: absolute;
    top: 15px;
    left: -35px;
    background: #333;
    color: #fff;
    font-family: 'Orbitron';
    font-size: 0.55rem;
    font-weight: 900;
    padding: 5px 40px;
    transform: rotate(-45deg);
    z-index: 15;
    letter-spacing: 2px;
    border: 1px solid #444;
    pointer-events: none;
    text-transform: uppercase;
}


@keyframes urgentPulse {
    0%   { box-shadow: 0 0 10px rgba(255, 0, 68, 0.4); }
    50%  { box-shadow: 0 0 25px rgba(255, 0, 68, 0.9); }
    100% { box-shadow: 0 0 10px rgba(255, 0, 68, 0.4); }
}

/* ---- NEAR ME DISTANCE TAG ---- */
.distance-tag {
    font-family: 'Orbitron';
    font-size: 0.6rem;
    color: #00d2ff; /* Neon Cyan */
    margin-left: 10px;
    letter-spacing: 1px;
    font-weight: 900;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
    vertical-align: middle;
}

.dj-card .dj-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.near-me-miles {
    position: absolute;
    left: 12px;     /* Aligned with rank number */
    bottom: 48px;   /* Hovering just above the black footer */
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 900;
    color: #00d2ff;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
    z-index: 10;
    display: none; /* Hidden by default */
}

/* Only show the miles when the 'Near Me' filter is active */
.filter-active-near-me .near-me-miles {
    display: block;
}

/* ── FOOTER CLEARANCE FOR AD DRAWER (fixed overlay — reserve space once, no toggle shift) ── */
:root {
    --djc-ad-drawer-pad: 28px;
    --djc-ad-drawer-pad-open: 118px;
}

body:has(#leaderboard-bar) {
    padding-bottom: calc(var(--djc-ad-drawer-pad) + env(safe-area-inset-bottom, 0px));
}

body:has(#leaderboard-bar.is-open) {
    padding-bottom: calc(var(--djc-ad-drawer-pad-open) + env(safe-area-inset-bottom, 0px));
}

body.home-hero:has(#leaderboard-bar) {
    padding-bottom: calc(var(--djc-ad-drawer-pad) + env(safe-area-inset-bottom, 0px));
}

body.home-hero:has(#leaderboard-bar.is-open) {
    padding-bottom: calc(var(--djc-ad-drawer-pad-open) + env(safe-area-inset-bottom, 0px));
}

body:has(#leaderboard-bar) .site-footer,
body:has(#leaderboard-bar) .main-footer {
    margin-bottom: 0;
}

body:has(#leaderboard-bar) .main-footer .footer-copyband {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.leaderboard-drawer-open .site-footer,
body.leaderboard-drawer-collapsed .site-footer {
    margin-bottom: 0;
}

.site-footer {
    position: relative;
    z-index: 1;
    padding: 40px 60px;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    border-top: none;
    background: var(--bg);
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}

.site-footer .footer-links a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.footer-links a {
    color: #00d2ff;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: 0.3s;
}

.footer-links a:hover {
    text-decoration: underline;
}

.site-footer .footer-copy {
    font-size: 8px;
    letter-spacing: 4px;
    color: #555 !important;
}

/* ── INDEX PAGE EXTRA BOTTOM SPACING ── */
.dj-grid {
    padding-bottom: 50px;
}
/* ================================================================
   HOMEPAGE POLISH (index.php)
================================================================ */
body.home-hero:not(:has(#leaderboard-bar)) {
    padding-bottom: 60px;
}

body.home-hero:has(#leaderboard-bar) {
    padding-bottom: calc(var(--djc-ad-drawer-pad, 28px) + env(safe-area-inset-bottom, 0px));
}

body.home-hero:has(#leaderboard-bar.is-open) {
    padding-bottom: calc(var(--djc-ad-drawer-pad-open, 118px) + env(safe-area-inset-bottom, 0px));
}

/* Events tab — tour calendar (all artists) */
.events-calendar {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 16px 28px;
}

.events-calendar[hidden] {
    display: none !important;
}

/* Global tour map (MAP tab + /map/) */
.tour-map-panel {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 16px 28px;
}

.tour-map-panel[hidden] {
    display: none !important;
}

.tour-map-canvas {
    width: 100%;
    height: min(62vh, 560px);
    min-height: 320px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    background: #0a0a0a;
    z-index: 1;
}

.tour-map-canvas--page {
    height: calc(100vh - 220px);
    min-height: 400px;
    max-height: none;
}

.tour-map-stats {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--neon);
    text-transform: uppercase;
}

.tour-map-hint,
.tour-map-empty {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    color: #ccc;
    text-align: center;
    margin-top: 12px;
}

.tour-map-empty[hidden] {
    display: none !important;
}

.tour-map-load-err {
    padding: 40px 20px;
    text-align: center;
    color: #ff6b6b;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    letter-spacing: 2px;
}

.tour-map-leaflet-popup .leaflet-popup-content-wrapper {
    background: #0c0c0c;
    color: #fff;
    border: 1px solid var(--neon);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
}

.tour-map-leaflet-popup .leaflet-popup-tip {
    background: #0c0c0c;
    border: 1px solid var(--neon);
}

.tour-map-popup {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    line-height: 1.45;
}

.tour-map-popup-artist {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--neon);
    margin: 0 0 6px;
    text-transform: uppercase;
}

.tour-map-popup-date,
.tour-map-popup-venue {
    margin: 0 0 4px;
    color: #fff;
}

.tour-map-popup-tix a,
.tour-map-popup-link a {
    color: var(--neon);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.tour-map-popup-tix a:hover,
.tour-map-popup-link a:hover {
    border-bottom-color: var(--neon);
}

/* Standalone /map page */
body.map-page {
    background: var(--bg);
    min-height: 100vh;
}

.map-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.map-page-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.map-page-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--djc-header-h) + 32px) 24px 80px;
}

.map-page-wrap {
    width: 100%;
}

.map-page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
}

.map-page-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.map-page-breadcrumb a:hover {
    text-decoration: underline;
}

.map-page-head {
    text-align: center;
    margin-bottom: 24px;
}

.map-page-title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    letter-spacing: clamp(4px, 2vw, 14px);
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.map-page-sub {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neon);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.map-page-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 210, 255, 0.06);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.map-page-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

.map-page-frame {
    position: relative;
    padding: 3px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.55), rgba(0, 210, 255, 0.08) 40%, rgba(0, 210, 255, 0.35));
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.12);
}

.map-page-frame::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.08);
    z-index: 0;
}

.map-page .tour-map-canvas--page {
    height: min(72vh, 720px);
    min-height: 420px;
    border: none;
    border-radius: 6px;
    overflow: hidden;
}

.map-page .tour-map-empty {
    margin-top: 20px;
    padding: 24px;
    border: 1px dashed rgba(0, 210, 255, 0.35);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.map-page .main-footer {
    margin-top: 0;
}

footer {
    color: #666 !important;
}
/* Standalone /map/ with homepage hero chrome */
body.home-hero.map-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.map-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.map-page .map-page-main,
body.home-hero.map-page #main-content.map-page-main {
    flex: 1 0 auto;
    box-sizing: border-box;
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 24px 80px !important;
    margin-top: 0 !important;
}

body.home-hero.map-page .map-page-wrap {
    margin-top: 0 !important;
}

body.home-hero.map-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.map-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}

/* Dedicated /calendar/ page */
body.home-hero.calendar-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.calendar-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.calendar-page .directory-hero-sub {
    font-family: var(--font-head);
    font-size: clamp(0.55rem, 1.6vw, 0.7rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 16px 0 0;
}

body.home-hero.calendar-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.calendar-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.city-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.city-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.venue-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.venue-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}

body.calendar-page {
    background: var(--bg);
    min-height: 100vh;
}

.calendar-page-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px 80px;
    box-sizing: border-box;
}

.calendar-page-wrap {
    width: 100%;
}

body.home-hero.calendar-page #main-content .calendar-page-breadcrumb,
body.home-hero.calendar-page #main-content .calendar-page-head,
body.home-hero.calendar-page #main-content #eventsPanel.events-calendar,
body.home-hero.calendar-page #main-content .calendar-crawl,
body.home-hero.calendar-page #main-content .calendar-page-crosslinks {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

body.calendar-page .events-calendar.calendar-page-panel {
    max-width: none;
    margin: 0 0 32px;
    padding: 0 0 28px;
}

.calendar-page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
}

.calendar-page-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.calendar-page-breadcrumb a:hover {
    text-decoration: underline;
}

.calendar-page-head {
    text-align: center;
    margin-bottom: 24px;
}

.calendar-page-title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    letter-spacing: clamp(4px, 2vw, 14px);
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.calendar-page-sub {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neon);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.calendar-page-intro {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.calendar-page-crosslinks {
    margin-top: 28px;
}

.calendar-crawl {
    margin-top: 28px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-crawl__summary {
    cursor: pointer;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    list-style: none;
}

.calendar-crawl__summary::-webkit-details-marker {
    display: none;
}

.calendar-crawl__summary::before {
    content: '+ ';
    color: var(--neon);
}

.calendar-crawl[open] .calendar-crawl__summary::before {
    content: '− ';
}

.calendar-crawl__summary:hover,
.calendar-crawl__summary:focus-visible {
    color: var(--neon);
}

.calendar-crawl__body {
    margin-top: 14px;
}

.calendar-crawl__hint {
    margin: 0 0 18px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.5);
}

.calendar-crawl-day {
    margin-bottom: 18px;
}

.calendar-crawl-day__title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 8px;
}

.calendar-crawl-day__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-crawl-day__item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}

.calendar-crawl-day__item a {
    color: var(--neon);
    text-decoration: none;
}

.calendar-crawl-day__item a:hover {
    text-decoration: underline;
}

.calendar-crawl-day__date,
.calendar-crawl-day__loc {
    color: rgba(255, 255, 255, 0.55);
}

.calendar-crawl-day__show {
    margin-left: 8px;
    font-size: 0.92rem;
}

.calendar-crawl-empty {
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    line-height: 1.5;
}

.calendar-page .main-footer {
    margin-top: 0;
}

body.artist-page .main-footer {
    flex-shrink: 0;
}

/* Leaflet controls — dark theme on /map */
.map-page .leaflet-control-zoom a,
.map-page .leaflet-bar a {
    background: #0c0c0c !important;
    color: var(--neon) !important;
    border-color: rgba(0, 210, 255, 0.45) !important;
}

.map-page .leaflet-control-zoom a:hover,
.map-page .leaflet-bar a:hover {
    background: rgba(0, 210, 255, 0.15) !important;
    color: #fff !important;
}

.map-page .leaflet-control-attribution {
    background: rgba(5, 5, 5, 0.85) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 10px;
}

.map-page .leaflet-control-attribution a {
    color: var(--neon) !important;
}

.map-page .leaflet-container {
    background: var(--bg);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
}

.map-page .tour-map-leaflet-popup .leaflet-popup-content {
    margin: 12px 14px;
    min-width: 180px;
}

.map-page .tour-map-leaflet-popup .leaflet-popup-close-button {
    color: var(--neon) !important;
}

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
}

.cal-show-count {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--muted, #888);
    text-transform: uppercase;
}

.cal-sync-hint {
    color: #888;
    font-size: 0.95rem;
    margin-top: 12px;
    text-align: center;
}

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
}

.cal-nav--bottom {
    margin-top: 16px;
}

.cal-nav-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--neon, #00d2ff);
    background: rgba(0, 0, 0, 0.6);
    color: var(--neon, #00d2ff);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.cal-nav-btn:hover,
.cal-nav-btn:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.45);
}

.cal-month-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1rem, 3vw, 1.35rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.cal-weekdays span {
    text-align: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: var(--neon, #00d2ff);
    padding: 8px 4px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 7.5rem;
    gap: 2px;
    background: #111;
    border: 1px solid #1a1a1a;
}

.cal-day {
    height: 100%;
    min-height: 0;
    max-height: 7.5rem;
    background: #050505;
    border: 1px solid #151515;
    padding: 5px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
    overflow: hidden;
}

.cal-day:not(.cal-day--pad) {
    cursor: pointer;
}

.cal-day:not(.cal-day--pad):hover {
    border-color: rgba(0, 210, 255, 0.45);
    background: #0a0a0a;
}

.cal-day--pad {
    background: #030303;
    opacity: 0.45;
    min-height: 0;
    cursor: default;
    pointer-events: none;
}

.cal-day--today {
    border-color: var(--neon, #00d2ff);
    box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.35);
}

.cal-day--has-shows {
    background: #080808;
}

.cal-day-num {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.7rem;
    color: #666;
    line-height: 1;
}

.cal-day--today .cal-day-num {
    color: var(--neon, #00d2ff);
}

.cal-day--has-shows .cal-day-num {
    color: #fff;
}

.cal-day-shows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.cal-show {
    display: block;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    background: rgba(0, 210, 255, 0.08);
    border-left: 2px solid var(--neon, #00d2ff);
    padding: 2px 3px;
    font-size: 0.62rem;
    line-height: 1.2;
    transition: background 0.15s;
    overflow: hidden;
    pointer-events: none;
}

.cal-show:hover,
.cal-show:focus-visible {
    background: rgba(0, 210, 255, 0.2);
}

.cal-show-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
}

.cal-show-loc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.52rem;
    line-height: 1.1;
    margin-top: 1px;
}

.cal-show-more {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    color: var(--neon, #00d2ff);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-empty {
    text-align: center;
    color: #888;
    margin-top: 14px;
    font-size: 0.95rem;
}

/* Calendar day detail (rendered inside #djcMediaLightbox) */
.cal-day--expanded {
    width: min(28rem, calc(100vw - 48px));
    min-width: min(20rem, 100%);
    min-height: min(22rem, 70dvh);
    max-height: min(36rem, calc(100dvh - 80px));
    height: auto;
    max-height: min(36rem, calc(100dvh - 80px));
    padding: 14px 12px 16px;
    border: 2px solid var(--neon, #00d2ff);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.cal-day--expanded.cal-day--today {
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.35), inset 0 0 0 1px rgba(0, 210, 255, 0.5);
}

.cal-day--expanded .cal-day-num {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 4px;
    color: #fff;
}

.cal-day-lightbox-sub {
    display: block;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--neon, #00d2ff);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cal-day--expanded .cal-day-shows {
    overflow-y: auto;
    overflow-x: hidden;
    gap: 8px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.cal-day--expanded .cal-show {
    padding: 10px 12px;
    cursor: default;
    pointer-events: auto;
}

.cal-day--expanded .cal-show-name {
    display: block;
    -webkit-box-orient: unset;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    letter-spacing: 1px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
}

.cal-day--expanded .cal-show-loc {
    display: block;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    margin-top: 4px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
}

.cal-day--expanded .cal-show-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cal-day--expanded .cal-show-artist-link,
.cal-day--expanded .cal-show-tix {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    background: transparent;
    transition: background 0.2s, color 0.2s;
}

.cal-day--expanded .cal-show-tix {
    background: var(--neon, #00d2ff);
    color: #000;
    border-color: var(--neon, #00d2ff);
}

.cal-day--expanded .cal-show-artist-link:hover,
.cal-day--expanded .cal-show-artist-link:focus-visible,
.cal-day--expanded .cal-show-tix:hover,
.cal-day--expanded .cal-show-tix:focus-visible {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.cal-day--expanded .cal-day-empty-msg {
    font-size: 1rem;
    color: #888;
    padding: 20px 8px;
    text-align: center;
    letter-spacing: 1px;
}

@media (max-width: 900px) {
    .cal-grid {
        grid-auto-rows: 6.5rem;
    }
    .cal-day {
        max-height: 6.5rem;
        padding: 4px 3px;
    }
    .cal-show-name {
        font-size: 0.5rem;
    }
    .cal-show-loc {
        font-size: 0.48rem;
    }
}

@media (max-width: 520px) {
    .cal-grid {
        grid-auto-rows: 5.5rem;
    }
    .cal-day {
        max-height: 5.5rem;
    }
    .cal-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }
    .cal-month-title {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }
}

body.home-hero .hero-section,
body.home-hero .home-hero-banner {
    opacity: 1 !important;
}

.home-header {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header-logo {
    font-family: var(--font-head);
    color: #fff;
    text-decoration: none;
    font-size: clamp(0.85rem, 2.5vw, 1.6rem);
    letter-spacing: clamp(3px, 1.5vw, 8px);
    font-weight: 900;
    white-space: nowrap;
}

.header-logo .logo-accent {
    color: var(--neon);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.auth-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.auth-buttons button,
.auth-buttons a {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    padding: 8px 14px;
    white-space: nowrap;
}

.auth-buttons button {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--neon);
    color: var(--neon);
    cursor: pointer;
    transition: 0.3s;
}

.auth-buttons button:hover {
    background: var(--neon);
    color: #000;
}

.welcome-user-link {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--neon);
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid transparent;
    transition: 0.25s;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

.welcome-user-link:hover {
    border-color: var(--neon);
    background: rgba(0, 210, 255, 0.1);
    color: #fff;
}

.welcome-user-link--hero {
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
    border: none;
}

.welcome-user-link--hero:hover {
    background: transparent;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.home-hero-banner {
    height: min(60vh, 520px);
    width: 100%;
    background: url('/_img/dj-rocks-festival.jpg') center / cover no-repeat;
    background-color: var(--bg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-banner .hero-title {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 8vw, 5rem);
    letter-spacing: clamp(8px, 3vw, 25px);
    margin: 0;
    color: #fff;
    text-shadow: 0 0 40px rgba(0, 210, 255, 0.7);
}

.favorites-section {
    padding: 40px 60px;
    background: #191919;
    border-bottom: 1px solid #111;
    display: block;
}

.favorites-section.is-collapsed .favorites-body {
    display: none;
}

.favorites-section.is-collapsed .fav-reorder-hint {
    display: none !important;
}

.favorites-section.is-collapsed .favorites-newsletter-prompt:not([hidden]) {
    display: block;
}

#homeWeekendShows.is-collapsed #homeWeekendBody {
    display: none !important;
}

#homeWeekendShows:not(.is-collapsed) #homeWeekendBody {
    display: block !important;
}

.home-weekend-calendar.is-collapsed .home-weekend-body {
    display: none !important;
}

.home-weekend-calendar:not(.is-collapsed) .home-weekend-body {
    display: block !important;
}

.favorites-update-prompt {
    border-color: rgba(0, 255, 153, 0.35);
    background: rgba(0, 255, 153, 0.06);
}

.favorites-update-prompt__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.favorites-update-prompt .favorites-newsletter-prompt__text {
    flex: 1 1 auto;
    min-width: 0;
}

.favorites-update-prompt .favorites-newsletter-prompt__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -2px -2px 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.favorites-update-prompt .favorites-newsletter-prompt__close-icon {
    display: block;
    line-height: 1;
    pointer-events: none;
}

.favorites-update-prompt .favorites-newsletter-prompt__close:hover,
.favorites-update-prompt .favorites-newsletter-prompt__close:focus-visible {
    color: #fff;
    border-color: rgba(0, 255, 153, 0.55);
    background: rgba(0, 255, 153, 0.12);
    outline: none;
}

.fav-hide-btn {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    background: transparent;
    border: 1px solid rgba(0, 210, 255, 0.35);
    padding: 8px 14px;
    min-height: 36px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.fav-hide-btn:hover,
.fav-hide-btn:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
}

.favorites-empty {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 12px;
    letter-spacing: 0.04em;
}

.favorites-section:not(.has-favorites) {
    display: none;
}

.favorites-section.has-favorites .favorites-empty {
    display: none;
}

.favorites-section:not(.has-favorites) .fav-reorder-hint {
    display: none !important;
}

.favorites-newsletter-prompt {
    display: none;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.06);
}

.favorites-newsletter-prompt:not([hidden]),
.favorites-newsletter-prompt.is-visible {
    display: block;
}

.favorites-newsletter-prompt__text {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.favorites-newsletter-prompt__yes,
.favorites-newsletter-prompt__no {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.favorites-newsletter-prompt__yes {
    color: var(--neon, #00d2ff);
}

.favorites-newsletter-prompt__no {
    color: rgba(255, 255, 255, 0.55);
}

.favorites-newsletter-prompt__yes:hover,
.favorites-newsletter-prompt__yes:focus-visible {
    color: #fff;
}

.favorites-newsletter-prompt__no:hover,
.favorites-newsletter-prompt__no:focus-visible {
    color: #fff;
}

.newsletter-modal__lead {
    margin: 0 0 18px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.newsletter-modal__artists {
    margin: 0 0 18px;
}

.newsletter-modal__label {
    display: block;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    margin-bottom: 8px;
}

.newsletter-modal__input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.newsletter-modal__status {
    min-height: 1.25em;
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

.newsletter-modal__status.is-success {
    color: #00ff99;
}

.newsletter-modal__status.is-error {
    color: #ff6b6b;
}

/* Match auth-btn auth-btn-primary artist-alert-cta__btn */
.newsletter-modal__submit.btn-access {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px 20px;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.25s;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background: var(--neon);
    color: #000;
    border: 1px solid var(--neon);
    border-radius: 0;
}

.newsletter-modal__submit.btn-access:hover,
.newsletter-modal__submit.btn-access:focus-visible {
    background: var(--neon);
    color: #000 !important;
    outline: none;
}

.newsletter-modal__submit.btn-access:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.subscription-update-modal__dialog {
    max-width: 480px;
}

.subscription-update-modal__lead {
    margin: 0 0 14px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.subscription-update-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.subscription-update-modal__link {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.subscription-update-modal__link:hover,
.subscription-update-modal__link:focus-visible {
    color: #fff;
}

.subscription-update-modal__sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.subscription-update-artists {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(50vh, 320px);
    overflow-y: auto;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-overflow-scrolling: touch;
}

.subscription-update-artists__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.subscription-update-artists__item:hover {
    background: rgba(0, 210, 255, 0.08);
}

.subscription-update-artists__item input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--neon, #00d2ff);
    cursor: pointer;
}

.subscription-update-artists__label {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.3;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.subscription-update-artists__item.is-new .subscription-update-artists__label::after {
    content: ' · NEW';
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.5rem;
    letter-spacing: 1px;
    color: #00ff99;
    vertical-align: middle;
}

.subscription-update-modal__submit,
.subscription-update-modal__submit.btn-access {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    background: var(--neon, #00d2ff) !important;
    color: #000 !important;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.62rem, 1.6vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.subscription-update-modal__submit:hover,
.subscription-update-modal__submit:focus-visible {
    background: #33dcff !important;
    color: #000 !important;
    box-shadow: 0 0 22px rgba(0, 210, 255, 0.55);
    outline: none;
}

.subscription-update-modal__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.favorites-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.favorites-heading {
    margin: 0;
}

.fav-reorder-hint {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted, #888);
}

.favorites-section.has-favorites .fav-reorder-hint {
    display: inline;
}

.btn-alert-manage {
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--neon);
    background: transparent;
    border: 1px solid var(--neon);
    padding: 8px 16px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-alert-manage:hover {
    background: var(--neon);
    color: #000;
}

.favorites-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.fav-card {
    flex-shrink: 0;
    width: 180px;
    height: 240px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    border: 1.5px solid var(--neon);
    transition: 0.4s;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: element;
}

.fav-card:hover {
    border-color: #fff;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.35);
}

.fav-card:active,
.fav-card--chosen,
.fav-card--drag {
    cursor: grabbing;
}

.fav-rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.92);
    border: 2px solid var(--neon, #00d2ff);
    border-radius: 2px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--neon, #00d2ff);
    text-shadow: 0 0 14px rgba(0, 210, 255, 0.65);
    pointer-events: none;
}

.fav-card--ghost {
    opacity: 0.35;
}

.fav-card--chosen {
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.45);
    border-color: #fff;
}

.fav-card--drag {
    opacity: 0.85;
}

.fav-card--drop-target {
    outline: 2px dashed var(--neon, #00d2ff);
    outline-offset: 2px;
}

.fav-card img,
.fav-card .fav-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0.6;
    transition: 0.4s;
    z-index: 0;
}

.fav-card:hover img,
.fav-card:hover .fav-card-photo,
.fav-card.is-preview-playing img,
.fav-card.is-preview-playing .fav-card-photo {
    opacity: 1;
    transform: scale(1.05);
}

.fav-card .waveform-canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: linear-gradient(to top, rgba(0, 210, 255, 0.1), transparent);
}

.fav-card:hover .waveform-canvas,
.fav-card.is-preview-playing .waveform-canvas {
    opacity: 1;
}

.fav-card.is-preview-playing {
    border-color: var(--neon);
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
}

.fav-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: linear-gradient(transparent, #191919);
    pointer-events: none;
    z-index: 2;
}

.fav-card-name {
    font-family: var(--font-head);
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 4px #000;
}

.fav-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #333;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
    z-index: 5;
}

.fav-card:hover .fav-remove {
    opacity: 1;
}

/* Homepage card image — base rules at top of file; reinforce here for specificity */
.home-hero .card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #0a0a0a;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #666;
    box-sizing: border-box;
}

.card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: opacity 0.35s ease;
}

.waveform-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
    z-index: 5;
}

.dj-card:hover .waveform-canvas {
    opacity: 1;
}

.tour-info {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

.playing-today.tour-info {
    color: var(--neon);
    text-shadow: 0 0 10px var(--neon);
}

#leaderboard-bar.is-open #leaderboardContent,
#leaderboard-bar.is-open .leaderboard-content {
    overflow: hidden;
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 0 10px;
}

#leaderboard-bar.is-collapsed #leaderboardContent,
#leaderboard-bar.is-collapsed .leaderboard-content,
#leaderboardContent.closed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

#leaderboardContent[hidden],
.leaderboard-content.closed[hidden] {
    display: none !important;
}

.leaderboard-ad-slot img,
.leaderboard-content img,
#leaderboardContent img {
    display: block;
    width: 728px;
    max-width: 100%;
    height: 90px;
    object-fit: contain;
    margin: 0 auto;
}

.leaderboard-ad-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.leaderboard-ad-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 12px 20px;
    text-decoration: none;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.leaderboard-ad-fallback__title {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: #333;
}

.leaderboard-ad-fallback__cta {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: #111;
    letter-spacing: 1px;
}

.tm-affiliate-banner--home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tm-affiliate-banner--home a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.leaderboard-ad-code {
    width: 728px;
    max-width: 100%;
    height: 90px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 0;
}

.leaderboard-ad-code iframe,
.leaderboard-ad-code ins,
.leaderboard-ad-code > * {
    max-width: 100%;
    max-height: 90px;
}

/* ================================================================
   AUTH FORMS — modals (index) + account portal
================================================================ */
.modal {
    display: none;
    position: fixed;
    z-index: 100000;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.modal.is-visible {
    display: flex;
}

/* Login/register lightbox — see _css/auth-modals.css + _css/modal-system.css */

/* Account portal page */
body.auth-page {
    background: var(--bg);
    color: #fff;
    font-family: var(--font-main);
    min-height: 100vh;
}

.auth-page header {
    padding: 20px 40px;
    border-bottom: 1px solid #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.auth-page .logo {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 4px;
    color: #fff;
    text-decoration: none;
}

.auth-page .logo span {
    color: var(--neon);
}

.auth-page nav a {
    font-family: var(--font-head);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-left: 20px;
    text-transform: uppercase;
    transition: color 0.2s, text-shadow 0.2s;
}

.auth-page nav a:hover,
.auth-page nav a.active {
    color: #fff;
    text-shadow: 0 0 10px var(--neon);
}

.auth-page .portal-container {
    width: min(460px, calc(100vw - 80px));
    max-width: none;
    margin: 60px auto 80px;
    padding: 36px 32px 32px;
}

.auth-lightbox-page {
    min-height: 100vh;
    overflow-x: hidden;
}

.account-lightbox-stage {
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 48px;
    position: relative;
}

.account-lightbox-stage::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 25%, rgba(0, 210, 255, 0.12), transparent 34%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 210, 255, 0.015) 2px,
            rgba(0, 210, 255, 0.015) 4px
        ),
        #000;
}

.account-lightbox-panel {
    margin: 0 auto;
    width: min(460px, calc(100vw - 80px));
}

.auth-page .portal-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 1px;
}

.auth-page .portal-footer a {
    color: var(--neon);
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.auth-page .status-msg {
    padding: 14px 16px;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid;
    text-transform: uppercase;
}

.auth-page .status-error {
    background: rgba(255, 0, 68, 0.08);
    border-color: #ff0055;
    color: #ff0055;
}

.auth-page .status-success {
    background: rgba(0, 210, 255, 0.08);
    border-color: var(--neon);
    color: var(--neon);
}

.auth-page .welcome-hero {
    text-align: center;
    padding: 60px 20px;
}

.auth-page .welcome-hero h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 5vw, 3rem);
    letter-spacing: 8px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.auth-page .welcome-tag {
    font-family: var(--font-head);
    color: var(--neon);
    font-size: 0.95rem;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.account-admin-hub {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.account-admin-eyebrow {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--neon);
    text-align: center;
    margin-bottom: 10px;
}

.account-admin-title {
    font-family: var(--font-head);
    font-size: clamp(1rem, 3vw, 1.4rem);
    letter-spacing: 6px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 28px;
    color: #fff;
}

.account-admin-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.account-admin-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
    border: 1px solid #222;
    background: rgba(12, 12, 12, 0.9);
    text-decoration: none;
    color: #fff;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.account-admin-card:hover {
    border-color: var(--neon);
    transform: translateY(-4px);
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.12);
}

.account-admin-card--featured {
    border-color: rgba(0, 210, 255, 0.45);
    background: linear-gradient(145deg, rgba(0, 210, 255, 0.08), rgba(12, 12, 12, 0.95));
}

.account-admin-card__label {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--neon);
}

.account-admin-card__desc {
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.45;
}

.auth-page .welcome-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Login → dashboard fade transition */
.auth-transition-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.auth-transition-page--visible {
    opacity: 1;
}

.auth-transition-page--exit {
    opacity: 0;
}

.auth-transition-screen {
    text-align: center;
    padding: 40px 24px;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.auth-transition-page--visible .auth-transition-screen {
    transform: translateY(0);
    opacity: 1;
}

.auth-transition-page--exit .auth-transition-screen {
    transform: translateY(-16px);
    opacity: 0;
}

.auth-transition-title {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    letter-spacing: 8px;
    margin: 12px 0 0;
    color: #fff;
    text-transform: uppercase;
}

.auth-transition-sub {
    margin-top: 20px;
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
}

.auth-page .btn-outline {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid #333;
    color: #fff;
    transition: 0.25s;
}

.auth-page .btn-outline:hover {
    border-color: var(--neon);
    color: var(--neon);
}

.auth-page .btn-outline.neon {
    border-color: var(--neon);
    color: var(--neon);
}

.auth-page .btn-outline.neon:hover {
    background: var(--neon);
    color: #000;
}

.auth-page .content-inset,
.auth-page main.content-inset {
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.auth-page h1.auth-title {
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    body.home-hero .main-header,
    .home-header {
        padding: 0 20px !important;
        height: auto;
        min-height: 72px;
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    body.home-hero .home-sticky-nav .pill-nav-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.home-hero.home-nav-is-pinned .sticky-search-row:not([hidden]) {
        padding: 16px 16px 20px;
    }

    body.home-hero.home-nav-is-pinned #stickySearchRow:not([hidden]) .sticky-search-input {
        min-height: 56px;
        font-size: 16px;
        padding: 18px 20px;
        letter-spacing: 2px;
    }

    .sticky-search-input {
        min-height: 52px;
        font-size: 16px;
        padding: 16px 18px;
        letter-spacing: 2px;
    }

    .main-header .header-actions {
        width: 100%;
        order: 3;
    }

    .favorites-section {
        padding: 30px 20px;
    }

    .pill-bar {
        max-width: min(720px, calc(100vw - 24px));
        overflow: visible;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pill-btn {
        flex: 0 1 auto;
        white-space: nowrap;
    }

    .site-footer .footer-links,
    .footer-links {
        flex-wrap: wrap;
        gap: 16px !important;
        padding: 0 20px;
    }
}

/* Collapse to single-row header on smaller viewports */
@media (max-width: 900px) {
    .header-search-bar {
        display: none !important;
    }
}

/* City / venue / map detail pages — compact fixed header + horizontal nav scroll */
@media (max-width: 900px) {
    :root {
        --djc-header-h: 80px;
    }
    body.city-page .main-header,
    body.venue-page .main-header,
    body.map-page .main-header,
    body.article-page .main-header {
        flex-wrap: nowrap;
        height: var(--djc-header-h);
        min-height: var(--djc-header-h);
        padding: 0 12px !important;
        gap: 8px;
    }

    body.city-page .main-header .header-logo,
    body.venue-page .main-header .header-logo,
    body.map-page .main-header .header-logo,
    body.article-page .main-header .header-logo {
        max-width: min(36vw, 148px);
        font-size: clamp(0.55rem, 2.8vw, 0.78rem);
        letter-spacing: clamp(1px, 0.5vw, 3px);
    }

    body.city-page .main-header nav,
    body.venue-page .main-header nav,
    body.map-page .main-header nav,
    body.article-page .main-header nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        max-width: min(72vw, calc(100vw - 132px));
        padding-bottom: 2px;
    }

    body.city-page .main-header nav::-webkit-scrollbar,
    body.venue-page .main-header nav::-webkit-scrollbar,
    body.map-page .main-header nav::-webkit-scrollbar,
    body.article-page .main-header nav::-webkit-scrollbar {
        display: none;
    }

    body.city-page .main-header nav .auth-btn,
    body.venue-page .main-header nav .auth-btn,
    body.map-page .main-header nav .auth-btn,
    body.article-page .main-header nav .auth-btn {
        font-size: 0.52rem;
        padding: 6px 8px;
        letter-spacing: 1px;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    .home-hero-banner {
        background-attachment: scroll;
    }

    .auth-buttons .auth-btn-dashboard {
        display: none;
    }

    .fav-card {
        width: 140px;
        height: 190px;
    }

    body.home-hero .header-logo {
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    .main-header .header-actions,
    body.home-hero .pill-nav-container .pill-nav-auth {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    body.home-hero .pill-nav-container .pill-nav-auth {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    body.home-hero.home-nav-is-pinned .sticky-search-row:not([hidden]) {
        padding: 12px 16px 16px;
    }

    .sticky-search-input {
        min-height: 48px;
        font-size: 16px;
        padding: 14px 16px;
    }

    .auth-buttons {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .hero-content,
    .hero-title {
        max-width: 100%;
    }

    .hero-title {
        line-height: 1.15;
        word-break: normal;
    }

    #djGrid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .dj-card {
        min-width: 0;
    }

    .card-content h2 {
        overflow-wrap: anywhere;
    }

    .favorites-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .leaderboard-bar {
        width: 100vw;
    }

    .leaderboard-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .modal-content,
    .auth-panel {
        padding: 28px 20px 24px;
    }

    .auth-page header,
    .auth-page .content-inset,
    .auth-page main.content-inset {
        padding-left: 20px;
        padding-right: 20px;
    }

    .auth-page header {
        justify-content: center;
        text-align: center;
    }

    .auth-page nav {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .auth-page nav a {
        margin-left: 0;
    }
}
/* --- CENTERED REACTION BAR --- */
.reaction-bar { 
    display: flex; 
    gap: 12px; 
    margin-top: 30px; 
    justify-content: center; /* This centers the items horizontally */
    align-items: center; 
    width: 100%; /* Ensures the bar spans the full width of its container */
}

/* Ensure the hero-content container itself is centered */
.hero-content {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    text-align: center; /* Centers text-based elements */
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers flex items */
}
.react-btn {
    display:flex; align-items:center; gap:8px;
    padding:10px 22px;
    background:#0d0d0d; border:1px solid #222; border-radius:50px;
    color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:600;
    cursor:pointer; transition:all .2s ease;
}
.react-btn:hover {
    border-color:#00d2ff;
    box-shadow:0 0 12px rgba(0,210,255,.3);
    transform:scale(1.05);
}
/* Active states - each reaction gets its own color */
.react-btn.active                   { background:rgba(0,210,255,.1);  border-color:#00d2ff; box-shadow:0 0 18px rgba(0,210,255,.5);  color:#00d2ff; }
.react-btn.active[data-type="fire"] { background:rgba(255,107,53,.1); border-color:#ff6b35; box-shadow:0 0 18px rgba(255,107,53,.5); color:#ff6b35; }
.react-btn.active[data-type="love"] { background:rgba(255,61,127,.1); border-color:#ff3d7f; box-shadow:0 0 18px rgba(255,61,127,.5); color:#ff3d7f; }
.react-btn.active[data-type="hype"] { background:rgba(255,225,53,.1); border-color:#ffe135; box-shadow:0 0 18px rgba(255,225,53,.5); color:#ffe135; }
.react-count { font-size:.82rem; opacity:.75; }
@keyframes pop {
    0%  { transform:scale(1); }
    50% { transform:scale(1.35); }
    100%{ transform:scale(1); }
}
.react-btn.popping { animation:pop .25s ease; }
@media (prefers-reduced-motion: reduce) {
    .dj-card {
        opacity: 1;
        transform: none;
        transition: border-color 0.2s;
    }
    .react-btn.popping {
        animation: none;
    }
}

/* Grey / dim text → white (labels, meta, footer, placeholders) */
.auth-page .auth-form input::placeholder,
.auth-panel .auth-form input::placeholder,
.modal-content .form-group input::placeholder {
    color: #fff;
    opacity: 0.85;
}

.pill-btn:hover:not(.pill-btn--lit) {
    color: #fff;
}

.site-footer a:hover {
    color: var(--neon);
}

.leaflet-control-attribution .leaflet-control {
    display: none !important;
}

.home-sticky-nav {
    margin-top: 0px !important;
}

body.home-hero .home-sticky-nav .pill-nav-container {
    padding: 10px 40px 12px !important;
}

/* =========================================================
   TRENDING THIS WEEK
   ========================================================= */
.trending-section {
    padding: 40px 60px;
    background: #000;
    border-bottom: 1px solid #111;
    display: block;
}
.trending-pulse {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--neon);
    animation: trendPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-card-reactions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
@media (max-width: 768px) {
    .trending-section { padding: 30px 20px; }
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.trending-card {
    text-decoration: none;
    color: #fff;
    border: 1px solid #111;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
    display: block;
}
.trending-card:hover {
    border-color: var(--neon);
    transform: translateY(-4px);
}
.trending-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    filter: grayscale(60%);
    transition: filter 0.3s;
}
.trending-card:hover .trending-card-img {
    filter: grayscale(0%);
}
.trending-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-head);
    background: #000;
    color: var(--neon);
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 10px;
}
.trending-reactions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px #000;
}
.trending-card-name {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 12px 15px;
    background: #0c0c0c;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    .trending-section { padding: 30px 20px; }
    .trending-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trending-row { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================
   TRENDING THIS WEEK
   ========================================================= */
.trending-section {
    padding: 40px 60px;
    background: #000;
    border-bottom: 1px solid #111;
}
.trending-pulse {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--neon);
    animation: trendPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-card-reactions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
@media (max-width: 768px) {
    .trending-section { padding: 30px 20px; }
}
/* =========================================================
   TRENDING THIS WEEK
   ========================================================= */
.trending-section {
    padding: 40px 60px;
    background: #000;
    border-bottom: 1px solid #111;
}
.trending-pulse {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--neon);
    animation: trendPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-card-reactions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
@media (max-width: 768px) {
    .trending-section { padding: 30px 20px; }
}

.tix-control-wrap { display: flex; gap: 5px; margin-left: auto; }
.compare-btn { background: transparent !important; color: #fff !important; border-color: #333 !important; }
.compare-btn:hover { border-color: #00d2ff !important; color: #00d2ff !important; }
@media (max-width: 600px) {
    .tix-control-wrap { width: 100%; flex-direction: column; }
    .tix-btn { width: 100%; text-align: center; }
}

/* --- TODAY / SOON URGENCY BADGES --- */
.tour-row.is-playing-today {
    border-left: 4px solid #ff0000 !important;
    border-bottom: 1px solid #222 !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

.tour-urgency-label--today {
    color: #ff0000;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #8a0000;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.08em;
    line-height: 1.3;
    box-shadow: none;
}

/* --- NEON YELLOW HIGHLIGHT (2-14 DAYS) --- */
.tour-row.is-playing-soon {
    border-left: 4px solid #ffff00 !important;
    border-bottom: 1px solid #222 !important;
    background: rgba(255, 255, 0, 0.05) !important;
}

.tour-row.is-playing-soon .tour-date {
    color: #ffff00 !important;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    font-weight: bold;
}

.tour-urgency-label--soon {
    color: #ffff00;
    background: rgba(255, 214, 0, 0.2);
    border: 1px solid #9a8200;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.08em;
    line-height: 1.3;
    box-shadow: none;
}
/* --- BLUR-UP SYSTEM --- */
.card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #050505;
    overflow: hidden;
}

.card-image-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    transform: scale(1.1); /* Prevents white edges */
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-image-sharp {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.card-image-sharp:not(.is-loaded) {
    opacity: 0;
}

/* --- SENSORY SIGNAL PULSE --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

/* Color Mappings */
body.pulse-fire::after { background: radial-gradient(circle, rgba(255, 107, 53, 0.25) 0%, transparent 70%); opacity: 1; }
body.pulse-love::after { background: radial-gradient(circle, rgba(255, 61, 127, 0.25) 0%, transparent 70%); opacity: 1; }
body.pulse-hype::after { background: radial-gradient(circle, rgba(255, 225, 53, 0.25) 0%, transparent 70%); opacity: 1; }

/* Animation Trigger */
.pulse-active::after {
    animation: signalFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes signalFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.main-footer {
    background: var(--bg);
    border-top: none;
    text-align: center;
    width: 100%;
    margin-top: auto;
    box-sizing: border-box;
}
.main-footer > .footer-content.footer-content--brand {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 52px clamp(16px, 4vw, 40px) 0;
    box-sizing: border-box;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.main-footer .footer-content--brand .footer-logo {
    margin-bottom: 0;
}

.main-footer .footer-accent,
.main-footer .footer-copyband {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    background:
        linear-gradient(180deg, rgba(0, 210, 255, 0.07) 0%, transparent 38%),
        linear-gradient(rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        var(--bg, #191919);
    background-size: auto, 56px 56px, 56px 56px, auto;
    background-position: center top, center top, center top, center top;
}

.main-footer .footer-accent::before,
.main-footer .footer-copyband::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid rgba(0, 210, 255, 0.22);
    border-bottom: 2px solid var(--neon, #00d2ff);
    box-shadow: 0 4px 16px rgba(0, 210, 255, 0.1);
}

.main-footer .footer-accent {
    padding: 2.5rem clamp(16px, 4vw, 40px) 0;
    border-top: none;
}

.main-footer .footer-copyband {
    margin-top: 0;
    padding: 10px clamp(16px, 4vw, 40px) calc(3.25rem - 40px);
}

.main-footer .footer-copyband > .footer-content {
    padding: 0;
    max-width: 1240px;
    margin: 0 auto;
}

.main-footer .footer-meta {
    padding-top: 0;
}

.main-footer .footer-rule,
.main-footer .footer-rule--meta {
    display: none !important;
}

.main-footer .footer-nav,
.main-footer .footer-nav--compact {
    display: none !important;
}

.main-footer .footer-accent > .footer-content {
    padding: 0;
    max-width: 1240px;
    margin: 0 auto;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 1.2rem;
    letter-spacing: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 35px;
    transition: 0.3s;
}

.footer-logo span {
    color: var(--neon, #00d2ff);
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

.footer-tagline {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 5px;
    color: #444;
    margin: 0 0 40px;
    text-transform: uppercase;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.footer-link {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #888;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}

.footer-link:hover {
    color: var(--neon, #00d2ff);
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
}

.main-footer .footer-copy {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 1px;
    margin: 0;
}

.main-footer .footer-last-updated {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin: 10px 0 0;
}

.main-footer .footer-last-updated time {
    font-weight: 700;
}

@media (max-width: 768px) {
    .main-footer {
        padding: 60px 20px;
    }

    .footer-logo {
        font-size: 1rem;
        letter-spacing: 6px;
    }

    .footer-nav {
        gap: 15px;
    }
}

.djc-modal__btn{
    margin: 20px 10px -8px 10px !important;
}

#ticketPickerProviders {
    margin: 10px;
}

/* Venue & city directory index (/venues, /cities) — homepage hero + pill nav */
body.home-hero.cities-directory-page,
body.home-hero.venues-directory-page,
body.home-hero.genres-directory-page,
body.home-hero.articles-directory-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.cities-directory-page .main-footer,
body.home-hero.venues-directory-page .main-footer,
body.home-hero.genres-directory-page .main-footer,
body.home-hero.articles-directory-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.cities-directory-page .directory-hero-sub,
body.home-hero.venues-directory-page .directory-hero-sub,
body.home-hero.genres-directory-page .directory-hero-sub,
body.home-hero.articles-directory-page .directory-hero-sub {
    font-family: var(--font-head);
    font-size: clamp(0.55rem, 1.6vw, 0.7rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 16px 0 0;
}

body.home-hero.cities-directory-page .directory-page-main,
body.home-hero.venues-directory-page .directory-page-main,
body.home-hero.genres-directory-page .directory-page-main,
body.home-hero.articles-directory-page .directory-page-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    box-sizing: border-box;
}

body.home-hero.cities-directory-page .directory-page-wrap,
body.home-hero.venues-directory-page .directory-page-wrap,
body.home-hero.genres-directory-page .directory-page-wrap,
body.home-hero.articles-directory-page .directory-page-wrap {
    max-width: 960px;
    margin: 0 auto;
}

a.pill-btn.pill-btn--nav.pill-btn--current,
a.pill-btn.pill-btn--current.active {
    background: #00d2ff !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}

.main-header nav .auth-btn.nav-link--current,
.main-header .header-nav .auth-btn.nav-link--current,
.main-header nav .auth-btn.nav-link--current:hover,
.main-header nav .auth-btn.nav-link--current:focus-visible,
.main-header .header-nav .auth-btn.nav-link--current:hover,
.main-header .header-nav .auth-btn.nav-link--current:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    border-color: var(--neon) !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
}

.directory-intro {
    margin-bottom: 28px;
}

/* Cities / venues directory — same large search as homepage .sticky-search-container */
body.home-hero.cities-directory-page .directory-search-row,
body.home-hero.venues-directory-page .directory-search-row {
    width: 100%;
    margin: 0 0 28px;
    padding: 18px 24px 22px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100010;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
    box-shadow: none;
}

body.home-hero.cities-directory-page .directory-search-row .sticky-search-container,
body.home-hero.venues-directory-page .directory-search-row .sticky-search-container {
    width: 100%;
    max-width: min(760px, 94vw);
}

body.home-hero.cities-directory-page .directory-search-row .sticky-search-dropdown,
body.home-hero.venues-directory-page .directory-search-row .sticky-search-dropdown {
    z-index: 100011;
}

body.home-hero.cities-directory-page .directory-search-row.directory-search-wrap--active,
body.home-hero.venues-directory-page .directory-search-row.directory-search-wrap--active {
    z-index: 100010;
}

.sticky-search-result-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 2px;
    background: rgba(0, 210, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--neon);
    letter-spacing: 0;
}

.sticky-search-result-icon.search-result-icon--city::before {
    content: '⌖';
}

.sticky-search-result-icon.search-result-icon--venue::before {
    content: '▣';
}

.sticky-search-result-icon.search-result-icon--show::before {
    content: '◷';
}

@media (max-width: 768px) {
    body.home-hero.cities-directory-page .directory-search-row,
    body.home-hero.venues-directory-page .directory-search-row {
        padding: 14px 16px 18px;
        margin-bottom: 20px;
    }
}

.directory-meta {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 12px;
}

/* Cities & venues directories — A–Z accordion (headers match .venues-directory-link rows) */
.cities-accordion,
.venues-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cities-letter-group {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.cities-letter-toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cities-letter-toggle::-webkit-details-marker {
    display: none;
}

.cities-letter-toggle.venues-directory-link {
    grid-template-columns: 1fr auto auto;
    gap: 4px 16px;
    align-items: center;
}

.cities-letter-toggle .venues-directory-name {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.cities-letter-toggle .venues-directory-count {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    max-width: min(52vw, 280px);
    text-align: right;
    line-height: 1.35;
}

.cities-letter-toggle:hover,
.cities-letter-group[open] > .cities-letter-toggle {
    border-color: rgba(0, 210, 255, 0.45);
}

.cities-letter-chevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-right: 2px solid rgba(255, 255, 255, 0.45);
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cities-letter-toggle:hover .cities-letter-chevron,
.cities-letter-group[open] .cities-letter-chevron {
    border-color: var(--neon);
}

.cities-letter-group[open] .cities-letter-chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.cities-letter-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.venue-page-main,
body.city-page .venue-page-main,
body.venue-page .venue-page-main,
body.article-page .venue-page-main {
    padding: calc(var(--djc-header-h) + 40px) 40px 80px;
}

.venue-page-wrap {
    max-width: 960px;
    margin: 100px auto 0;
}

body.city-page #main-content.venue-page-main {
    margin-top: 0;
}

body.city-page .venue-page-wrap {
    margin-top: 0;
}

body.city-page .venue-page-main,
body.venue-page .venue-page-main {
    padding-top: 20px;
}

body.home-hero.city-page .venue-page-main,
body.city-page #main-content.venue-page-main,
body.home-hero.venue-page .venue-page-main,
body.venue-page #main-content.venue-page-main {
    padding: 20px 40px 80px !important;
    margin-top: 0 !important;
}

body.city-page .venue-page-wrap,
body.venue-page .venue-page-wrap {
    margin-top: 0 !important;
}

.venue-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 28px;
}

.venue-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.venue-breadcrumb a:hover {
    text-decoration: underline;
}

.venue-page-title {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    letter-spacing: 0.06em;
    color: #fff;
    margin: 0 0 12px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    text-transform: uppercase;
}

.venue-page-location {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.venue-page-location a {
    color: var(--neon);
    text-decoration: none;
}

.venue-page-sub {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px;
}

.seo-crosslinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1.5rem;
}

.seo-crosslinks a {
    color: var(--neon);
    text-decoration: none;
}

.seo-crosslinks a:hover,
.seo-crosslinks a:focus-visible {
    text-decoration: underline;
}

.seo-crosslinks--compact {
    margin-top: 0;
    margin-bottom: 1rem;
}

.home-quicklinks {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-quicklinks a {
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon);
    text-decoration: none;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(0, 210, 255, 0.08);
}

.home-quicklinks a:hover,
.home-quicklinks a:focus-visible {
    background: rgba(0, 210, 255, 0.16);
}

.page-last-updated {
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: -8px 0 16px;
}

.page-last-updated time {
    font-weight: 700;
}

.artist-page .page-last-updated {
    margin: 0 0 20px;
}

.page-seo-intro {
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 52rem;
    margin: 0 0 28px;
    padding: 16px 18px;
    border-left: 3px solid var(--neon);
    background: rgba(0, 210, 255, 0.04);
}

.page-seo-links {
    display: inline;
}

.page-seo-links a {
    color: var(--neon);
    text-decoration: none;
}

.page-seo-links a:hover,
.page-seo-links a:focus-visible {
    text-decoration: underline;
}

.venue-map-canvas {
    width: 100%;
    height: 260px;
    min-height: 260px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 32px;
    overflow: hidden;
    background: #111;
    position: relative;
    z-index: 1;
}

.venue-map-canvas--leaflet {
    margin-bottom: 10px;
}

.venue-map-canvas--failed {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #111;
    border-color: #222;
}

.venue-map-canvas--failed::after {
    content: 'Map unavailable';
}

.events-map-section {
    margin-bottom: 28px;
}

.events-map-meta {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.events-map-leaflet-popup .leaflet-popup-content-wrapper {
    background: #0a0a0a;
    color: #fff;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.events-map-leaflet-popup .leaflet-popup-tip {
    background: #0a0a0a;
    border: 1px solid rgba(0, 210, 255, 0.2);
}

.events-map-popup {
    font-family: var(--font-main);
    font-size: 0.95rem;
    line-height: 1.45;
}

.events-map-popup-artist {
    margin: 0 0 6px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon);
}

.events-map-popup-rank {
    color: rgba(255, 255, 255, 0.65);
}

.events-map-popup-date,
.events-map-popup-venue {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.85);
}

.events-map-popup-tix a,
.events-map-popup-link a {
    color: var(--neon);
    text-decoration: none;
}

.events-map-popup-tix a:hover,
.events-map-popup-link a:hover {
    text-decoration: underline;
}

.city-page .leaflet-container,
.venue-page .leaflet-container,
#eventsMap .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px;
    background: #111;
}

.map-page .events-map-canvas .leaflet-container,
.map-page .tour-map-canvas--page .leaflet-container {
    min-height: 420px;
    background: var(--bg);
}

.venue-map-open {
    margin: 0 0 28px;
    text-align: right;
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.venue-map-open a {
    color: var(--neon);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s, border-color 0.2s;
}

.venue-map-open a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.venue-map-apple-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 260px;
    margin-bottom: 32px;
    padding: 24px;
    text-decoration: none;
    color: #fff;
    background:
        radial-gradient(circle at 50% 35%, rgba(0, 210, 255, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-sizing: border-box;
}

.venue-map-apple-link:hover {
    border-color: var(--neon);
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.18);
    transform: translateY(-1px);
}

.venue-map-apple-link__icon {
    font-size: 2rem;
    line-height: 1;
}

.venue-map-apple-link__title {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--neon);
}

.venue-map-apple-link__sub {
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

.venue-show-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.venue-show-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    padding: 18px 22px;
    transition: border-color 0.2s, background 0.2s;
}

.venue-show-card:hover {
    border-color: rgba(0, 210, 255, 0.45);
    background: rgba(0, 210, 255, 0.04);
}

.venue-show-artist-link {
    flex-shrink: 0;
}

.venue-show-artist-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: #111;
}

.venue-show-artist-img--placeholder {
    display: block;
}

.venue-show-body {
    flex: 1;
    min-width: 0;
}

.venue-show-artist {
    font-family: var(--font-head);
    font-size: 1rem;
    margin: 0;
}

.venue-show-artist a {
    color: #fff;
    text-decoration: none;
}

.venue-show-artist a:hover {
    color: var(--neon);
}

.venue-show-rank {
    color: var(--neon);
    margin-right: 8px;
}

.venue-show-date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon);
    margin: 6px 0 0;
}

.venue-show-date .tour-loc,
.venue-show-date .tour-loc-text {
    display: inline;
    margin: 0;
}

.venue-show-loc-sep,
.venue-show-date .tour-venue-sep {
    opacity: 0.55;
}

.venue-show-date .tour-geo-link {
    color: inherit;
    font-weight: 700;
}

.venue-show-actions {
    flex-shrink: 0;
}

/* --- Show detail (/show/{slug}) — also in css/style-venue.css for venue bundle --- */
body.show-page .venue-page-wrap {
    max-width: 900px;
}

body.show-page .show-page-head {
    margin-bottom: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.14);
}

body.show-page .show-page-title {
    font-size: clamp(1.5rem, 5vw, 2.75rem);
    letter-spacing: clamp(4px, 1.2vw, 12px);
    margin-bottom: 8px;
    text-shadow: 0 0 32px rgba(0, 210, 255, 0.22);
}

body.show-page .show-page-date {
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--neon, #00d2ff);
    margin: 0;
}

body.show-page .show-page-crosslinks {
    margin: 0 0 24px;
    line-height: 1.65;
}

body.show-page .venue-show-card--detail {
    margin-bottom: 28px;
    padding: 22px 24px;
    gap: 22px;
    background: linear-gradient(135deg, rgba(0, 18, 24, 0.55) 0%, rgba(6, 6, 6, 0.98) 48%);
    border: 1px solid rgba(0, 210, 255, 0.22);
    border-left: 4px solid var(--neon, #00d2ff);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 36px rgba(0, 210, 255, 0.06);
}

body.show-page .venue-show-card--detail:hover {
    border-color: rgba(0, 210, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 24, 32, 0.62) 0%, rgba(8, 8, 8, 0.98) 52%);
}

body.show-page .venue-show-card--detail .venue-show-artist-img {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.18);
}

body.show-page .venue-show-card--detail .venue-show-artist {
    font-size: clamp(0.78rem, 2vw, 0.92rem);
    letter-spacing: 0.14em;
    opacity: 0.88;
}

body.show-page .venue-show-card--detail .venue-show-date {
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    margin-top: 10px;
}

body.show-page .venue-show-card--detail .venue-show-date-label {
    display: block;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

body.show-page .venue-show-card--detail .venue-page-location {
    margin: 8px 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
}

body.show-page .venue-show-card--detail .venue-show-actions {
    align-self: center;
}

body.show-page .venue-show-card--detail .show-share-btn {
    min-height: 44px;
}

.show-seo-detail {
    margin-top: 8px;
    padding: 28px 26px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    border-left: 3px solid rgba(0, 210, 255, 0.45);
}

.show-seo-detail-title {
    margin: 0 0 14px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.82rem, 2.2vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: none;
    line-height: 1.45;
    color: #fff;
}

.show-seo-detail-copy {
    margin: 0 0 22px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 52rem;
}

.show-facts-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.show-facts-list > div {
    margin: 0;
}

.show-facts-list dt {
    margin: 0 0 6px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.show-facts-list dd {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

.show-facts-list dd a {
    color: var(--neon, #00d2ff);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.show-facts-list dd a:hover,
.show-facts-list dd a:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

.show-related-events {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
}

.show-related-title {
    margin: 0 0 14px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.show-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.show-related-list a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #1a1a1a;
    text-decoration: none;
    color: #fff;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.show-related-list a:hover,
.show-related-list a:focus-visible {
    border-color: rgba(0, 210, 255, 0.4);
    background: rgba(0, 210, 255, 0.06);
    transform: translateX(4px);
}

.show-related-list a span {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.show-related-list a small {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    text-transform: none;
}

.venue-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-head);
    color: #555;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.venues-directory {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.venues-directory-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    text-decoration: none;
    transition: border-color 0.2s;
}

.venues-directory-link:hover {
    border-color: rgba(0, 210, 255, 0.45);
}

.venues-directory-name {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #fff;
}

.venues-directory-city {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(0, 210, 255, 0.75);
}

.venues-directory-count {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.tour-geo-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s, border-color 0.2s;
}

.tour-geo-link:hover {
    color: var(--neon);
    border-bottom-color: var(--neon);
}

.tour-loc .tour-geo-link {
    color: inherit;
}

.tour-venue-sep {
    opacity: 0.55;
    margin: 0 2px;
}

@media (max-width: 768px) {
    .venue-page-main,
    body.city-page .venue-page-main,
    body.venue-page .venue-page-main,
    body.article-page .venue-page-main,
    body.articles-index-page .venue-page-main {
        padding: calc(var(--djc-header-h) + 20px) 16px 60px;
    }

    body.home-hero.cities-directory-page .directory-page-main,
    body.home-hero.venues-directory-page .directory-page-main {
        padding: 8px var(--m-pad, 16px) 40px;
    }

    .venue-show-card {
        flex-wrap: wrap;
    }

    .venue-show-actions {
        width: 100%;
    }

    body.show-page .venue-show-card--detail {
        padding: 18px 16px;
        gap: 16px;
    }

    body.show-page .venue-show-card--detail .venue-show-artist-img {
        width: 96px;
        height: 96px;
    }

    body.show-page .venue-show-card--detail .venue-show-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .show-seo-detail {
        padding: 22px 18px 24px;
    }

    .show-facts-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .show-related-list a {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* --- 128 BPM HEARTBEAT PULSE --- */
body.heartbeat-active::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
}

/* The Kick Drum Animation */
.heartbeat-kick::before {
    animation: kickPulse 0.468s infinite; /* 128 BPM = 0.468s per beat */
}
/* Push footer to bottom */
body.artist-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    color: #fff;
    margin: 0;
    font-family: var(--font-main);
    overflow-x: hidden;
}

.artist-page .hero {
    width: 100%;
    height: 55vh;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
}

.artist-page .hero-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.artist-page .hero-bg .hero-bg-img {
    opacity: 0.4;
    filter: grayscale(100%);
}

.artist-page .artist-tour-lead,
.artist-page .artist-rank-snippet {
    margin: 0.5rem 0 0;
    font-family: var(--font-main);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.artist-page .artist-rank-snippet {
    color: var(--neon);
}

.artist-page .site-faq,
.home-hero .home-faq {
    margin-top: 0;
    padding-top: 0;
}

#faq {
    margin-top: 25px;
}

/* ── Homepage FAQ — blue accordion (~70% width, centered) ── */
.home-hero .home-faq {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 3rem clamp(16px, 4vw, 40px) 4rem;
    border-top: 1px solid rgba(0, 210, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(0, 210, 255, 0.07) 0%, transparent 38%),
        linear-gradient(rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        #191919;
    background-size: auto, 56px 56px, 56px 56px, auto;
    background-position: center top, center top, center top, center top;
}

.home-hero .home-faq-header,
.home-hero .home-faq-list {
    width: 70%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.home-hero .home-faq-header {
    margin-bottom: 2rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid rgba(0, 210, 255, 0.18);
    text-align: left;
}

.home-hero .home-faq-title {
    font-family: var(--font-head);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--neon);
    margin: 0 0 0.65rem;
    line-height: 1.2;
}

.home-hero .home-faq-sub {
    margin: 0;
    font-family: var(--font-main);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
}

.home-hero .home-faq-list {
    margin-top: 0;
    padding: 0;
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 8, 14, 0.65);
    box-shadow: 0 0 48px rgba(0, 210, 255, 0.06);
}

.home-hero .home-faq-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    background: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.home-hero .home-faq-item:last-child {
    border-bottom: none;
}

.home-hero .home-faq-item:hover {
    background: rgba(0, 210, 255, 0.04);
}

.home-hero .home-faq-item[open] {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.03) 28%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--neon);
}

.home-hero .home-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem clamp(1rem, 3vw, 1.75rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.home-hero .home-faq-question::-webkit-details-marker {
    display: none;
}

.home-hero .home-faq-question-text {
    flex: 1;
    font-family: var(--font-head);
    font-size: clamp(0.62rem, 1.8vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.5;
    color: #f4f4f4;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.home-hero .home-faq-item[open] .home-faq-question-text {
    color: var(--neon);
}

.home-hero .home-faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.home-hero .home-faq-toggle::before,
.home-hero .home-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--neon);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.home-hero .home-faq-toggle::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.home-hero .home-faq-toggle::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.home-hero .home-faq-item[open] .home-faq-toggle::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

.home-hero .home-faq-answer {
    border-top: 1px solid rgba(0, 210, 255, 0.1);
    padding: 0 clamp(1rem, 3vw, 1.75rem) 1.35rem;
}

.home-hero .home-faq-answer p {
    margin: 1rem 0 0;
    font-family: var(--font-main);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.02em;
}

.home-hero .home-faq-answer a {
    color: var(--neon);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-hero .home-faq-answer a:hover,
.home-hero .home-faq-answer a:focus-visible {
    color: #fff !important;
}

.home-hero .home-hero-lead {
    margin: 0.75rem 0 0;
    font-family: var(--font-main);
    font-size: clamp(0.8rem, 2vw, 1rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    min-height: 2.75em;
    line-height: 1.35;
}

/* Homepage box unit (300×250) — between grid and FAQ */
.home-mpu-ad {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 2.5rem;
    text-align: center;
}

.home-mpu-ad .mpu-ad-slot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

.home-mpu-ad .mpu-ad-slot img {
    display: block;
    max-width: 100%;
    height: auto;
}

.home-mpu-ad .mpu-ad-link {
    display: inline-block;
    line-height: 0;
}

.home-mpu-ad .mpu-ad-code {
    display: inline-block;
    max-width: 300px;
    width: 100%;
    overflow: hidden;
}

.home-mpu-ad .mpu-ad-code iframe,
.home-mpu-ad .mpu-ad-code ins,
.home-mpu-ad .mpu-ad-code > * {
    max-width: 100%;
}

/* ── Artist page FAQ (accordion cards) ── */
.artist-page .artist-faq {
    margin-top: 3.5rem;
    padding: 2.5rem 0 4rem;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
    background: transparent;
}

.artist-page .artist-faq-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.25rem;
    padding: 0 1rem;
}

.artist-page .artist-faq-title {
    font-family: var(--font-head);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.artist-page .artist-faq-sub {
    margin: 0;
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
}

.artist-page .artist-faq-list {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.artist-page .artist-faq-card {
    margin: 0;
    padding: 0;
    border: 1px solid #161616;
    border-left: 3px solid #161616;
    background: linear-gradient(135deg, rgba(8, 8, 8, 0.98) 0%, rgba(4, 4, 4, 0.98) 100%);
    border-radius: 4px;
    overflow: hidden;
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.artist-page .artist-faq-card:hover {
    border-left-color: rgba(0, 210, 255, 0.45);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 210, 255, 0.06);
}

.artist-page .artist-faq-card[open] {
    border-color: rgba(0, 210, 255, 0.22);
    border-left-color: var(--neon);
    background: linear-gradient(135deg, rgba(0, 18, 24, 0.55) 0%, rgba(6, 6, 6, 0.98) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 36px rgba(0, 210, 255, 0.1);
}

.artist-page .artist-faq-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.artist-page .artist-faq-question::-webkit-details-marker {
    display: none;
}

.artist-page .artist-faq-q-index {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgba(0, 210, 255, 0.35);
    min-width: 1.75rem;
    transition: color 0.25s ease;
}

.artist-page .artist-faq-card[open] .artist-faq-q-index {
    color: var(--neon);
}

.artist-page .artist-faq-question-text {
    flex: 1;
    font-family: var(--font-head);
    font-size: clamp(0.68rem, 2.2vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.45;
    color: #f2f2f2;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.artist-page .artist-faq-card[open] .artist-faq-question-text {
    color: var(--neon);
}

.artist-page .artist-faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #2a2a2a;
    border-radius: 2px;
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.artist-page .artist-faq-toggle::before,
.artist-page .artist-faq-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #888;
    transition: background 0.25s ease, transform 0.25s ease;
}

.artist-page .artist-faq-toggle::before {
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
}

.artist-page .artist-faq-toggle::after {
    width: 2px;
    height: 12px;
    margin: -6px 0 0 -1px;
}

.artist-page .artist-faq-card[open] .artist-faq-toggle {
    border-color: var(--neon);
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.25);
}

.artist-page .artist-faq-card[open] .artist-faq-toggle::before,
.artist-page .artist-faq-card[open] .artist-faq-toggle::after {
    background: var(--neon);
}

.artist-page .artist-faq-card[open] .artist-faq-toggle::after {
    transform: scaleY(0);
}

.artist-page .artist-faq-answer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 1.35rem 1.25rem 3.9rem;
}

.artist-page .artist-faq-answer p {
    margin: 1rem 0 0;
    font-family: var(--font-main);
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

/* Generic FAQ fallback (non-artist, non-homepage) */
.site-faq-list:not(.artist-faq-list):not(.home-faq-list) {
    border-top: none;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) {
    border-bottom: 1px solid #111;
    padding: 0.75rem 0;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) summary {
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: #ddd;
    list-style: none;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) summary::-webkit-details-marker {
    display: none;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) summary::before {
    content: '+ ';
    color: var(--neon);
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item)[open] summary::before {
    content: '− ';
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) p {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #999;
}

.artist-page .artist-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1.5rem;
}

.artist-page .artist-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.artist-page .artist-breadcrumb a:hover {
    text-decoration: underline;
}

.artist-page .artist-breadcrumb-current {
    color: rgba(255, 255, 255, 0.9);
}

.artist-page .artist-breadcrumb .artist-rss-link {
    color: #ff8800;
    border-color: rgba(255, 136, 0, 0.45);
    padding: 4px;
    margin-left: 2px;
}

.artist-page .artist-breadcrumb .artist-rss-link:hover,
.artist-page .artist-breadcrumb .artist-rss-link:focus-visible {
    color: #ffb347;
    border-color: #ff8800;
    background: rgba(255, 136, 0, 0.12);
}

.artist-page .artist-breadcrumb .artist-rss-link .rss-icon {
    width: 18px;
    height: 18px;
}

.artist-page .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, #191919);
}

.seo-description {
  margin: 16px 0 24px;
  font-size: 1.05rem !important;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  max-width: 100% !important;
  width: 100% !important;
}

.artist-page .hero-content {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.artist-page .hero .hero-name {
    font-family: var(--font-head);
    font-size: clamp(2rem, 6vw, 6rem);
    letter-spacing: clamp(4px, 1.5vw, 20px);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.dj-card-rss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neon);
    text-decoration: none;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    padding: 6px;
    line-height: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.dj-card-rss:hover,
.dj-card-rss:focus-visible {
    color: #fff;
    border-color: var(--neon);
    background: rgba(0, 210, 255, 0.12);
    outline: none;
    transform: translateY(-1px);
}

.dj-card-rss .rss-icon {
    display: block;
    width: 22px;
    height: 22px;
}

body.home-hero .dj-card-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.home-hero .dj-card-rss {
    position: absolute;
    left: 10px;
    bottom: 12px;
    z-index: 6;
    padding: 5px;
    background: rgba(0, 0, 0, 0.75);
}

body.home-hero .dj-card-rss .rss-icon {
    width: 16px;
    height: 16px;
}

.artist-page .nav-link-overlay {
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 100;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 9px;
    letter-spacing: 4px;
    opacity: 0.6;
}

.artist-page .reaction-bar {
    display: flex;
    gap: 15px;
    margin-top: 35px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0px;
}

.artist-page .react-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 50px;
    color: #fff;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.artist-page .react-btn.active {
    background: rgba(0, 210, 255, 0.1);
    border-color: var(--neon);
    color: var(--neon);
}

.artist-page .content-inset {
    padding: 60px 40px;
    max-width: 1100px;
    margin: 0 auto;
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.artist-page .section-label {
    font-family: var(--font-head);
    font-size: 16px !important;
    letter-spacing: 6px;
    color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #111;
    margin-bottom: 0 !important;
}

.artist-page .bio-text {
    font-size: 14px;
    line-height: 1.8;
    color: #eee;
    white-space: pre-line;
}

.artist-page .artist-bio-text {
    font-size: 18px;
    line-height: 1.8;
    color: #eee;
}

.artist-page .artist-bio-text a,
.artist-page .bio-text a {
    color: var(--neon) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.artist-page .artist-bio-text a:hover,
.artist-page .artist-bio-text a:focus-visible,
.artist-page .bio-text a:hover,
.artist-page .bio-text a:focus-visible {
    color: var(--neon);
    border-bottom-color: var(--neon);
    opacity: 0.9;
    text-decoration: none;
}

.artist-page .artist-bio-text a:visited,
.artist-page .bio-text a:visited {
    color: var(--neon) !important;
}

.artist-page .artist-bio-text a[style],
.artist-page .bio-text a[style] {
    color: var(--neon) !important;
}

.artist-page .artist-faq-answer a {
    color: var(--neon) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.artist-page .artist-faq-answer a:hover,
.artist-page .artist-faq-answer a:focus-visible {
    color: var(--neon) !important;
    border-bottom-color: var(--neon);
}

.artist-page .tour-container {
    background: #050505;
    border-left: 10px solid #111;
    border-right: 10px solid #111;
    margin-top: 60px;
    margin-bottom: 40px;
}

.artist-page .tour-section-label {
    padding: 20px 30px;
    border-bottom: 1px solid #111;
    margin-bottom: 0;
}

.artist-page .tour-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 30px;
    border-bottom: 1px solid #111;
}

.artist-page .tour-info {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    min-width: 0;
}

.artist-page .tour-date {
    font-family: var(--font-head);
    color: var(--neon);
    font-size: 1.3rem;
    white-space: nowrap;
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
}

.artist-page .tour-loc {
    color: #fff;
    flex: 1;
    min-width: 0;
}

.artist-page .tour-row.is-playing-today,
.artist-page .tour-row.is-playing-soon {
    border-bottom: 1px solid #222 !important;
}

.artist-page .tour-row.is-sold-out {
    opacity: 0.7;
}

.artist-page .tour-row.is-sold-out .tour-date,
.artist-page .tour-row.is-sold-out .tour-loc,
.artist-page .tour-row.is-sold-out .tour-loc-text,
.artist-page .tour-row.is-sold-out .tour-geo-link,
.artist-page .tour-row.is-sold-out .tour-venue {
    color: #666 !important;
}

.artist-page .tour-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-head);
    color: #333;
}

.artist-page .tix-btn:not(.tix-btn--ghost),
.artist-page a.tix-btn:not(.tix-btn--ghost),
.artist-page button.tix-btn:not(.tix-btn--ghost),
.artist-page button.tix-btn--choice:not(.tix-btn--ghost),
.artist-page span.tix-btn:not(.tix-btn--ghost),
.artist-page .tix-btn-group .tix-btn:not(.tix-btn--ghost) {
    flex-shrink: 0;
    background: transparent;
    color: var(--neon);
    border: 1px solid var(--neon);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 12px 28px;
    min-width: 140px;
    -webkit-appearance: none;
    appearance: none;
}

.artist-page .tix-btn:not(.tix-btn--ghost):hover,
.artist-page button.tix-btn:not(.tix-btn--ghost):hover {
    background: var(--neon);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.venue-show-actions .tix-btn,
.venue-show-card .tix-btn {
    flex-shrink: 0;
}

main.content-inset {
    flex: 1 0 auto;
}

/* Ensure pulse doesn't block footer clicks */
body::after {
    z-index: 5 !important; /* Lower than footer/links */
}

.main-footer {
    position: relative;
    z-index: 10; /* Higher than the pulse */
}

@keyframes kickPulse {
    0% { opacity: 0; transform: scale(0.95); }
    10% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05); }
}
.tix-btn--choice:not(.tix-btn--ghost):hover {
    color: #000 !important;
    border-color: var(--neon) !important;
    background: var(--neon) !important;
}

/* ── TACTICAL TWO-COLUMN GRID ── */
.tactical-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Left col slightly smaller */
    gap: 60px;
    align-items: start;
}

.node-label {
    font-family: 'Orbitron';
    font-size: 8px;
    letter-spacing: 4px;
    color: #444;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Artist page live set */
.artist-page .artist-video-section {
    margin-top: 30px;
    margin-bottom: 40px;
}

/* YouTube Wrapper */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #050505;
    border: 1px solid #111;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    filter: contrast(1.1) brightness(0.9); /* Makes it fit the dark theme */
}

/* Vibe Signatures on Left */
.vibe-module { margin-top: 40px; }
.vibe-grid { display: flex; flex-direction: column; gap: 10px; }
.vibe-pill { font-family: 'Orbitron'; font-size: 10px; color: #00d2ff; letter-spacing: 2px; }

/* Tour Row Adjustments for Grid */
.tour-info-main { display: flex; flex-direction: column; gap: 5px; }

/* Responsive: Stack on Mobile */
@media (max-width: 900px) {
    .tactical-grid { grid-template-columns: 1fr; gap: 40px; }
    .content-inset { padding: 40px 20px; }
}

/* --- HOMEPAGE HERO + GRID SHELL --- */
.home-hero-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    z-index: 1;
    background: var(--bg);
    overflow: hidden;
}

.home-hero-fixed .hero-img,
.home-hero-fixed .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.hero-overlay-intro,
.home-hero-fixed .hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent, #191919);
}

.home-main-shell {
    position: relative;
    z-index: 10;
    background: var(--bg);
    margin-top: 50vh;
    min-height: 50vh;
}

body.home-hero #djGrid .dj-card,
body.home-hero #djGrid .dj-card-slot .dj-card {
    opacity: 1;
    transform: none;
}

body.home-hero .grid-container {
    background: var(--bg);
    min-height: 100vh;
    padding-bottom: 50px;
}

/* Homepage view panels (grid / calendar / map) inside #main-content */
body.home-hero .home-view-panels {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

body.home-view-calendar .home-view-panels .events-calendar,
body.home-view-events .home-view-panels .events-calendar {
    margin-top: 8px;
}

body.home-view-map .home-view-panels .tour-map-panel {
    margin-top: 8px;
}

body.home-view-calendar #main-content .events-calendar[hidden],
body.home-view-events #main-content .events-calendar[hidden],
body.home-view-map #main-content .tour-map-panel[hidden] {
    display: none !important;
}

.grid-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-head);
    letter-spacing: 3px;
    color: #444;
}

@keyframes cardFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .tix-btn,
    a.tix-btn,
    button.tix-btn {
        padding: 10px 20px;
        font-size: 9px;
        min-width: 110px;
    }

    .artist-page .tix-btn,
    .artist-page button.tix-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── MODAL PROVIDER LINKS ── */
#modalLinks a {
    display: block;
    padding: 20px;
    margin: 15px 0;
    background: #0a0a0a;
    color: #fff;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    border: 1px solid #1a1a1a;
    letter-spacing: 3px;
    font-weight: 900;
    transition: 0.3s;
    text-align: center;
}

#modalLinks a:hover {
    border-color: #00d2ff;
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.1);
}

/* --------------------------------------------------*/

/* ── GLASS CARD HOVER (HOLOGRAPHIC EFFECT) ── */
.dj-card {
    background: #0a0a0a;
    border: 1px solid #111;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* The Glass Reveal */
.dj-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg, 
        rgba(0, 210, 255, 0.07) 0%,
        rgba(0, 210, 255, 0) 50%,
        rgba(0, 210, 255, 0.04) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 8;
    pointer-events: none;
}

.dj-card:hover {
    border-color: #00d2ff;
    transform: translateY(-4px);
    box-shadow: 
        0 0 0 1px rgba(0, 210, 255, 0.3),
        0 10px 40px rgba(0, 210, 255, 0.15),
        0 0 80px rgba(0, 210, 255, 0.05);
}

.dj-card:hover::before { opacity: 1; }

/* Image Zoom on Hover */
.dj-card:hover .card-image-sharp {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.05);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.card-image-sharp {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
/* ── MAGNETIC PILL NAV ── */
body.home-hero .pill-bar {
    gap: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pill-indicator {
        transition: none;
    }
}
/* ── SHOWS BY CITY ── */
.city-section {
    background: #000;
    border-top: none;
    padding: 80px 60px;
    background-image:
        linear-gradient(rgba(0, 210, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
}

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

.city-header { margin-bottom: 50px; }
.city-eyebrow {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 6px;
    color: #00d2ff;
    display: block;
    margin-bottom: 15px;
}
.city-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 8px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

/* CITY PILLS GRID */
.city-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.city-pill {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 25px 30px;
    background: #050505;
    border: 1px solid #111;
    border-left: 4px solid #111;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Neon Sweep Effect */
.city-pill::after {
    content: "";
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,210,255,0.04), transparent);
    transition: left 0.5s ease;
}

.city-pill:hover { 
    border-left-color: #00d2ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,210,255,0.1);
}
.city-pill:hover::after { left: 100%; }

.city-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
}
.city-pill:hover .city-name { color: #00d2ff; }

.city-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    color: #333;
}
.city-pill:hover .city-count { color: #444; }

.city-footer-link { text-align: right; }
.city-all-link {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    color: #444;
    text-decoration: none;
    letter-spacing: 3px;
    transition: 0.3s;
}
.city-all-link:hover { color: #00d2ff; }

.video-container {
    margin-top: 40px;
}
.artist-page .tour-row.is-playing-today, .artist-page .tour-row.is-playing-soon { border-bottom: 1px solid #222; }

.artist-page .tour-row.is-playing-today:hover, .artist-page .tour-row.is-playing-soon:hover { border-bottom: 1px solid var(--neon) !important; }

@media (max-width: 1200px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .city-grid { grid-template-columns: repeat(2, 1fr); } .city-section { padding: 60px 20px; } }

/* ── Artist social links ── */

.artist-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.artist-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.artist-social-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.artist-social-btn:hover,
.artist-social-btn:focus-visible {
    color: var(--neon);
    background: transparent;
}

.hud-overlay { 
    position: fixed; 
    inset: 0; 
    z-index: 99999; 
    background: rgba(0, 0, 0, 0.93); 
    backdrop-filter: blur(14px); 
    -webkit-backdrop-filter: blur(14px); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.25s ease, visibility 0.25s ease; 
} 
.hud-overlay.hud-active { 
    opacity: 1; 
    visibility: visible; 
} .hud-overlay::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 210, 255, 0.018) 2px, rgba(0, 210, 255, 0.018) 4px ); 
    pointer-events: none; z-index: 0; 
} 
.hud-frame { position: relative; z-index: 1; width: min(820px, 88vw); padding: 36px 44px 28px; opacity: 0; transform: scale(0.96) translateY(-12px); transition: opacity 0.25s ease, transform 0.25s ease; } .hud-overlay.hud-active .hud-frame { opacity: 1; transform: scale(1) translateY(0); } .hud-corner { position: absolute; width: 22px; height: 22px; border-color: var(--neon, #00d2ff); border-style: solid; opacity: 0.55; } .hud-tl { top: 0; left: 0; border-width: 2px 0 0 2px; } .hud-tr { top: 0; right: 0; border-width: 2px 2px 0 0; } .hud-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; } .hud-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; } .hud-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-family: 'Rajdhani', sans-serif; font-size: 0.68rem; letter-spacing: 3px; color: rgba(0, 210, 255, 0.45); text-transform: uppercase; } .hud-sys-right { display: flex; align-items: center; gap: 8px; } .hud-dot { width: 7px; height: 7px; background: var(--neon, #00d2ff); border-radius: 50%; box-shadow: 0 0 6px var(--neon, #00d2ff); animation: hudDotPulse 1.6s ease-in-out infinite; } @keyframes hudDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; box-shadow: none; } } .hud-online-text { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: var(--neon, #00d2ff); } .hud-close-btn { background: none; border: 1px solid rgba(0, 210, 255, 0.25); color: rgba(0, 210, 255, 0.5); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.78rem; transition: background 0.15s, border-color 0.15s, color 0.15s; } .hud-close-btn:hover { background: rgba(0, 210, 255, 0.1); border-color: var(--neon, #00d2ff); color: var(--neon, #00d2ff); } .hud-input-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .hud-search-icon { font-size: 1.4rem; color: rgba(0, 210, 255, 0.4); } .hud-input { flex: 1; background: none; border: none; border-bottom: 1px solid #222; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 1.1rem; letter-spacing: 4px; padding: 10px 0; outline: none; transition: border-bottom-color 0.2s; } .hud-input:focus { border-bottom-color: var(--neon, #00d2ff); } .hud-input::placeholder { color: #333; letter-spacing: 6px; } .hud-divider { height: 1px; background: #111; margin-bottom: 16px; position: relative; overflow: hidden; } .hud-scan-line { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--neon, #00d2ff), transparent); animation: hudScanMove 2s linear infinite; } @keyframes hudScanMove { 0% { left: -100%; } 100% { left: 100%; } } .hud-results { max-height: 300px; overflow-y: auto; margin-bottom: 16px; } .hud-result-item { display: flex; align-items: center; gap: 14px; padding: 10px 8px; cursor: pointer; border-bottom: 1px solid #0a0a0a; transition: background 0.2s; } .hud-result-item:hover, .hud-result-item.hud-focused { background: rgba(0, 210, 255, 0.05); } .hud-result-img { width: 38px; height: 38px; object-fit: cover; border-radius: 3px; background: #111; flex-shrink: 0; } .hud-result-name { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 2px; color: #fff; text-transform: uppercase; } .hud-result-rank { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: rgba(0, 210, 255, 0.5); margin-top: 2px; } .hud-result-item mark { background: transparent; color: var(--neon, #00d2ff); font-weight: 700; } .hud-hints { display: flex; justify-content: center; gap: 30px; font-family: 'Rajdhani', sans-serif; font-size: 0.6rem; color: #333; letter-spacing: 2px; } @media (max-width: 600px) { .hud-frame { padding: 24px 20px 18px; } .hud-input { font-size: 0.85rem; letter-spacing: 2px; } }

.map-page-label { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 4px; color: var(--neon, #00d2ff); }

.map-page-count { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: rgba(0, 210, 255, 0.4); }

.next-show-radar-map { width: 100%; height: calc(100vh - 120px); min-height: 520px; background: #050505; }

.neon-marker--radar::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(0, 210, 255, 0.5); animation: radarRing 1.4s ease-out infinite; }

.neon-marker--radar::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(0, 210, 255, 0.25); animation: radarRing 1.4s ease-out infinite 0.3s; }

@keyframes radarBlink { 0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--neon, #00d2ff), 0 0 20px var(--neon, #00d2ff); } 50% { opacity: 0.6; box-shadow: 0 0 4px var(--neon, #00d2ff); } }

@keyframes radarRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }

.breadcrumb-nav { display: flex; align-items: center; gap: 12px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 24px; text-transform: uppercase; }

.breadcrumb-nav a { color: #888; text-decoration: none; transition: color 0.2s, text-shadow 0.2s; position: relative; }

.breadcrumb-nav a:hover { color: #00d2ff; text-shadow: 0 0 8px rgba(0, 210, 255, 0.6); }

.breadcrumb-nav .current { color: #00d2ff; border-bottom: 1px solid #00d2ff; padding-bottom: 2px; box-shadow: 0 4px 10px -4px rgba(0, 210, 255, 0.5); }

/* Breadcrumb connector: line · hex · line */
.breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: clamp(1.75rem, 4.5vw, 2.5rem);
    height: 0.75rem;
    margin: 0 2px;
    vertical-align: middle;
}

.breadcrumb-sep__rail {
    flex: 1 1 auto;
    height: 2px;
    min-width: 0.35rem;
    background: rgba(0, 210, 255, 0.55);
    box-shadow: 0 0 5px rgba(0, 210, 255, 0.2);
    border-radius: 1px;
}

.breadcrumb-sep__hex {
    width: 7px;
    height: 8px;
    flex-shrink: 0;
    background: var(--neon, #00d2ff);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.85);
}

#search-topbar-wrapper { transition: all 0.3s ease; z-index: 999; }

#search-topbar-wrapper.focused { box-shadow: 0 0 20px rgba(0, 210, 255, 0.4), 0 0 0 2px #00d2ff; border-color: #00d2ff; background: #000; }

body.search-active #search-overlay { opacity: 1; pointer-events: auto; }

#search-topbar-wrapper.focused input { color: #fff; text-shadow: 0 0 5px rgba(0, 210, 255, 0.5); }

.show-row {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.show-row:hover {
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 210, 255, 0.1);
    transform: translateY(-2px);
}

.show-date { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: #00d2ff; letter-spacing: 1px; }

.show-venue { font-family: 'Orbitron', sans-serif; font-size: 0.8rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; }

/* --- Articles index (/articles/) --- */
body.articles-index-page .articles-index-wrap {
    max-width: 1080px;
}

body.articles-index-page .articles-index-dek {
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    max-width: 42rem;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
    text-transform: none;
}

body.home-hero.articles-directory-page .articles-directory-intro {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
}

body.home-hero.articles-directory-page .articles-directory-dek {
    margin: 0 0 14px;
    max-width: 42rem;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
}

.articles-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.articles-grid-item,
.article-grid-item {
    margin: 0;
    min-width: 0;
}

.article-card {
    margin: 0;
    height: 100%;
    border: 1px solid #1a1a1a;
    border-left: 3px solid #1a1a1a;
    padding: 20px !important;
    background:
        linear-gradient(135deg, rgba(8, 8, 8, 0.98) 0%, rgba(4, 4, 4, 0.98) 100%);
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.article-card:hover {
    border-color: rgba(0, 210, 255, 0.35);
    border-left-color: var(--neon, #00d2ff);
    background: linear-gradient(135deg, rgba(0, 18, 24, 0.45) 0%, rgba(6, 6, 6, 0.98) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 36px rgba(0, 210, 255, 0.08);
    transform: translateY(-2px);
}

.article-card-link {
    display: block;
    padding: 0 !important;
    text-decoration: none;
    color: inherit;
}

body.articles-index-page .article-card-link:hover,
body.articles-index-page .article-card-link:focus-visible {
    color: inherit !important;
}

.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.article-card-label {
    color: var(--neon, #00d2ff);
}

.article-card-meta time,
.article-card-meta span {
    color: rgba(255, 255, 255, 0.55);
}

.article-card-title {
    margin: 0 0 12px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.92rem, 2.4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: none;
    color: #fff;
    transition: color 0.25s ease;
}

.article-card:hover .article-card-title {
    color: var(--neon, #00d2ff);
}

.article-card-excerpt {
    margin: 0 0 18px;
    margin-left: 0 !important;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
}

.article-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    transition: color 0.2s ease, letter-spacing 0.2s ease;
}

.article-card-cta::after {
    content: '→';
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.article-card:hover .article-card-cta {
    color: #fff;
    letter-spacing: 0.18em;
}

.article-card:hover .article-card-cta::after {
    transform: translateX(4px);
}

@media (min-width: 720px) {
    .articles-grid {
        gap: 22px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {
    body.articles-index-page .articles-index-dek {
        margin-bottom: 24px;
        padding-bottom: 20px;
        font-size: 1rem;
    }

    body.home-hero.articles-directory-page .articles-directory-dek {
        font-size: 1rem;
    }

}

/* --- Articles (public list legacy + detail) --- */
.articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.articles-list-excerpt {
    margin: 0 0 20px;
    padding: 0 4px 0 18px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1rem;
    line-height: 1.5;
}

.article-body {
    margin-top: 24px;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    width: 100%;
}

/* Article comments */
.article-comments {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.article-comments-heading {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    margin: 0 0 20px;
}

.article-comments-flash {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    background: rgba(0, 210, 255, 0.08);
    color: var(--neon, #00d2ff);
    font-size: 0.95rem;
}

.article-comments-signin {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.7);
}

.article-comments-signin a {
    color: var(--neon, #00d2ff);
}

.article-comments-signin-btn {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--neon, #00d2ff);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.article-comments-signin-btn:hover,
.article-comments-signin-btn:focus-visible {
    color: #fff;
}

.article-comments-signin-alt {
    margin-left: 0.35em;
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.45);
}

.article-comments-signin-alt a {
    color: rgba(255, 255, 255, 0.55);
}

.article-comments-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0;
    padding: 20px 18px 18px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.article-comments-label {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.82);
}

.article-comments-textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 128px;
    margin: 0 0 14px;
    padding: 14px 16px;
    box-sizing: border-box;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    resize: vertical;
}

.article-comments-textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.article-comments-textarea:focus {
    outline: none;
    border-color: var(--neon, #00d2ff);
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.4);
}

.article-comments-submit {
    align-self: flex-start;
    width: auto;
    min-width: 10.5rem;
    margin: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 22px;
    border: 1px solid var(--neon, #00d2ff);
    background: var(--neon, #00d2ff);
    color: #000;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.article-comments-submit:hover,
.article-comments-submit:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #000 !important;
}

.article-comments-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.article-comments-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.article-comments-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.article-comments-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.article-comments-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-bottom: 8px;
}

.article-comments-author {
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.04em;
}

.article-comments-time {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

.article-comments-body {
    margin: 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    word-break: break-word;
}

.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.article-body a {
    color: var(--neon, #00d2ff);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    letter-spacing: 0.08em;
    margin: 1.6em 0 0.6em;
    color: #fff;
}

.article-body p {
    margin: 0 0 1em;
}

/* Neon dot bullets — class added in articlesEnhanceContentHtml(); keep selectors in sync with css-safelist.txt */
.article-body ol:not(.article-toc-list) {
    list-style: decimal;
    list-style-position: outside;
    margin: 0 0 1.25em;
    padding-left: 1.6em;
}

.article-body ol:not(.article-toc-list) > li {
    margin-bottom: 0.5em;
    padding-left: 0.15em;
}

.article-body ul.article-bullet-list,
.article-body ul:not(.article-stat-list):not(.article-pros-cons):not(.article-tags-list):not(.related-articles__list),
.article-callout ul {
    list-style: none;
    margin: 0 0 1.25em;
    padding: 0;
}

.article-body ul.article-bullet-list > li,
.article-body ul:not(.article-stat-list):not(.article-pros-cons):not(.article-tags-list):not(.related-articles__list) > li,
.article-callout ul > li {
    position: relative;
    margin-bottom: 0.65em;
    padding-left: 1.35em;
}

.article-body ul.article-bullet-list > li::before,
.article-body ul:not(.article-stat-list):not(.article-pros-cons):not(.article-tags-list):not(.related-articles__list) > li::before,
.article-callout ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon, #00d2ff);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.55);
}

.article-body blockquote {
    margin: 1.25em 0;
    padding: 12px 16px;
    border-left: 3px solid var(--neon, #00d2ff);
    background: rgba(0, 210, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

.article-page-date {
    margin-bottom: 0;
}

body.article-page .venue-page-title {
    margin-top: 40px;
}

.article-meta {
    margin: 12px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.article-meta-line {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.04em;
}

.article-meta-label {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    margin-right: 8px;
}

.article-meta time {
    color: rgba(255, 255, 255, 0.82);
}

.article-meta-updated::before {
    content: '·';
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.35);
}

.article-meta-updated .article-meta-label {
    margin-left: 0;
}

/* --- Article detail: editorial layout --- */
.article-page-title {
    font-size: clamp(1.35rem, 3.6vw, 2.15rem);
    letter-spacing: 0.04em;
    text-transform: none;
    line-height: 1.2;
}

.article-page-dek {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.55;
    max-width: 52rem;
    margin-bottom: 8px;
}

.article-body {
    margin-top: 8px;
}

.article-lead {
    font-size: 1.2rem;
    line-height: 1.65;
    color: #fff;
    margin-bottom: 1.1em;
    padding-left: 14px;
    border-left: 3px solid var(--neon, #00d2ff);
}

.article-intro {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2rem;
}

.article-kw {
    color: var(--neon, #00d2ff);
    font-weight: 600;
}

.article-callout {
    margin: 2rem 0 2.5rem;
    padding: 22px 22px 18px;
    border: 1px solid rgba(0, 210, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.02) 55%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.08), inset 0 0 24px rgba(0, 210, 255, 0.04);
}

.article-callout--takeaways h2 {
    margin-top: 0;
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.article-callout ul {
    margin: 12px 0 0;
    padding: 0;
}

.article-toc {
    margin: 0 0 2.75rem;
    padding: 20px 22px;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, 0.02);
}

.article-toc-label {
    margin: 0 0 12px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.article-toc-list {
    margin: 0;
    padding-left: 1.25em;
    display: grid;
    gap: 8px;
}

.article-toc-list a {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.article-toc-list a:hover {
    color: var(--neon, #00d2ff);
    border-bottom-color: rgba(0, 210, 255, 0.45);
}

.article-section-title {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: clamp(1rem, 2.8vw, 1.35rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    scroll-margin-top: calc(var(--djc-header-h, 80px) + 16px);
}

.article-body > .article-section-title:first-child,
.article-callout + .article-toc + h2.article-section-title,
.article-toc + h2.article-section-title {
    border-top: none;
    padding-top: 0;
}

.article-subhead {
    font-size: clamp(0.82rem, 2vw, 1rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 210, 255, 0.92);
    margin: 1.75em 0 0.65em;
}

.article-stat-list {
    list-style: none;
    margin: 1.25em 0 1.75em;
    padding: 0;
    display: grid;
    gap: 10px;
}

.article-stat-list li {
    padding: 14px 16px;
    border: 1px solid rgba(0, 210, 255, 0.18);
    background: rgba(0, 210, 255, 0.04);
    border-left: 3px solid var(--neon, #00d2ff);
}

.article-pros-cons {
    list-style: none;
    padding: 0;
    margin: 1em 0 1.5em;
}

.article-pros-cons li {
    position: relative;
    padding: 10px 14px 10px 2rem;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #161616;
    list-style: none;
}

.article-pros-cons li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 1.05em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon, #00d2ff);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.55);
}

.article-cta {
    margin: 2rem 0;
    padding: 18px 20px;
    text-align: center;
    border: 1px solid rgba(0, 210, 255, 0.35);
    background: rgba(0, 210, 255, 0.06);
}

.article-cta--primary {
    background: linear-gradient(180deg, rgba(0, 210, 255, 0.14) 0%, rgba(0, 210, 255, 0.04) 100%);
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.12);
}

.article-cta a,
.article-cta--primary a {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--neon, #00d2ff);
}

.article-cta a:hover {
    color: #fff;
}

/* Article FAQ — same clickable-bar accordion as homepage FAQ */
.article-page .article-faq {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 210, 255, 0.22);
    background-color: #191919;
}

.article-page .article-faq-title {
    margin: 0 0 1.75rem;
    padding: 0 0 1rem;
    border: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.18);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.article-page .article-faq .home-faq-list {
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 8, 14, 0.65);
    box-shadow: 0 0 48px rgba(0, 210, 255, 0.06);
}

.article-page .article-faq .home-faq-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    background: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.article-page .article-faq .home-faq-item:last-child {
    border-bottom: none;
}

.article-page .article-faq .home-faq-item:hover {
    background: rgba(0, 210, 255, 0.04);
}

.article-page .article-faq .home-faq-item[open] {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.03) 28%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--neon, #00d2ff);
}

.article-page .article-faq .home-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem clamp(1rem, 3vw, 1.75rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.article-page .article-faq .home-faq-question::-webkit-details-marker {
    display: none;
}

.article-page .article-faq .home-faq-question-text {
    flex: 1;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.72rem, 2vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #f4f4f4;
    text-transform: none;
    transition: color 0.25s ease;
}

.article-page .article-faq .home-faq-item[open] .home-faq-question-text {
    color: var(--neon, #00d2ff);
}

.article-page .article-faq .home-faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.article-page .article-faq .home-faq-toggle::before,
.article-page .article-faq .home-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--neon, #00d2ff);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.article-page .article-faq .home-faq-toggle::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.article-page .article-faq .home-faq-toggle::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.article-page .article-faq .home-faq-item[open] .home-faq-toggle::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

.article-page .article-faq .home-faq-answer {
    border-top: 1px solid rgba(0, 210, 255, 0.1);
    padding: 0 clamp(1rem, 3vw, 1.75rem) 1.35rem;
}

.article-page .article-faq .home-faq-answer p {
    margin: 1rem 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.02em;
}

.article-page .article-faq .home-faq-answer p:last-child {
    margin-bottom: 0;
}

.article-page .article-faq .home-faq-answer a {
    color: var(--neon, #00d2ff);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-page .article-faq .home-faq-answer a:hover,
.article-page .article-faq .home-faq-answer a:focus-visible {
    color: #fff !important;
}

.article-card-excerpt {
    margin-left: 0 !important;
    padding: 0 !important;
}

@keyframes djTodayOuterPulse {
    0%,
    100% {
        border-width: 1.5px;
        border-color: rgba(200, 45, 45, 0.55);
        box-shadow:
            0 0 10px rgba(255, 55, 55, 0.42),
            0 0 18px rgba(255, 0, 0, 0.2),
            inset 0 0 0 1px rgba(255, 60, 60, 0.22);
    }
    50% {
        border-width: 2.5px;
        border-color: rgba(255, 55, 55, 1);
        box-shadow:
            0 0 16px rgba(255, 55, 55, 0.58),
            0 0 28px rgba(255, 0, 0, 0.28),
            0 0 0 12px rgba(255, 0, 0, 0),
            inset 0 0 0 1px rgba(255, 80, 80, 0.5);
    }
}

@keyframes djTodayRingThrob {
    0%,
    100% {
        opacity: 0.4;
        border-width: 1px;
        border-color: rgba(255, 50, 50, 0.38);
        box-shadow:
            0 0 6px rgba(255, 0, 0, 0.3),
            0 0 12px rgba(255, 0, 0, 0.15);
    }
    50% {
        opacity: 0.78;
        border-width: 2.5px;
        border-color: rgba(255, 70, 70, 0.95);
        box-shadow:
            0 0 14px rgba(255, 0, 0, 0.55),
            0 0 26px rgba(255, 0, 0, 0.32);
    }
}

@media (max-width: 768px) {
    .article-lead {
        font-size: 1.08rem;
    }

    .article-callout,
    .article-toc {
        padding: 16px;
    }

    .article-page .article-faq .home-faq-question {
        padding: 1rem 16px;
        min-height: var(--m-touch, 44px);
    }

    .article-page .article-faq .home-faq-answer {
        padding: 0 16px 1.15rem;
    }
}
/* DJ playing today — throbbing red pulse (homepage grid + anywhere) */
#djGridWrap.has-live-today-grid,
#djGridWrap.has-live-today-grid #djGrid {
    overflow: visible;
}

#djGrid a.dj-card.playing-today,
a.dj-card.playing-today,
.dj-card.playing-today {
    position: relative !important;
    z-index: 10;
    overflow: visible !important;
    border-style: solid !important;
    border-width: 2px;
    border-color: rgba(230, 55, 55, 0.78);
    background-color: rgba(255, 0, 0, 0.04) !important;
    animation: djTodayOuterPulse 2.1s ease-in-out infinite;
}

.dj-card-slot:has(.dj-card.playing-today),
#djGrid .dj-card-slot:has(.playing-today) {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    #djGrid a.dj-card.playing-today,
    a.dj-card.playing-today,
    .dj-card.playing-today {
        animation: none;
        border-width: 2px;
        border-color: rgba(255, 60, 60, 0.85);
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.28);
    }
}

.favorites-section {
    padding: 40px 0 !important;
    background: #191919 !important;
    background-color: #191919 !important;
} 

.djc-media-lightbox__nav--next {
    display: none !important;
}

.djc-media-lightbox__nav--prev {
    display: none !important;
}
#stickySearchRow,
.sticky-search-row {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
}
#stickySearchRow:not([hidden]),
.sticky-search-row:not([hidden]) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 210, 255, 0.1);
}
.directory-search-row,
.sticky-search-container {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

#stickySearchRow .sticky-search-input,
.sticky-search-row .sticky-search-input,
.sticky-search-container .sticky-search-input {
    background: #000 !important;
    background-color: #000 !important;
}

.sticky-search-input {
    background-color: #000 !important;
}
#headerArtistSearch {
    background: #000 !important;
    background-color: #000 !important;
}
body.home-hero.home-nav-is-pinned:has(#stickySearchRow:not([hidden])) .venue-breadcrumb,
body.home-hero.home-nav-is-pinned:has(#stickySearchRow:not([hidden])) .map-page-breadcrumb,
body.home-hero.home-nav-is-pinned:has(#stickySearchRow:not([hidden])) .calendar-page-breadcrumb {
    margin-top: 15px;
}
.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Article share + entity tags (footer of .article-body) */
.article-body .article-share {
    margin-top: 2.5rem;
    padding: 28px 24px 18px;
    box-shadow: inset 0 1px 0 rgba(0, 210, 255, 0.2);
}

.article-share-heading,
.article-tags-heading {
    margin: 0 0 1.1rem;
    padding: 0;
    border: none;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.article-share-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.article-body .article-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid #333;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: 1;
}

.article-body .article-share-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.article-body .article-share-icon:hover,
.article-body .article-share-icon:focus-visible {
    color: var(--neon, #00d2ff) !important;
    border-color: var(--neon, #00d2ff);
    background: rgba(0, 210, 255, 0.08);
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.2);
}

.article-body .article-share-icon--x:hover,
.article-body .article-share-icon--x:focus-visible {
    color: #fff !important;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}

.article-body .article-share-icon--facebook:hover,
.article-body .article-share-icon--facebook:focus-visible {
    color: #8ab4f8 !important;
    border-color: #8ab4f8;
    background: rgba(138, 180, 248, 0.1);
}

.article-body .article-share-icon--linkedin:hover,
.article-body .article-share-icon--linkedin:focus-visible {
    color: #70b5f9 !important;
    border-color: #70b5f9;
    background: rgba(112, 181, 249, 0.1);
}

.article-body .article-share-icon--whatsapp:hover,
.article-body .article-share-icon--whatsapp:focus-visible {
    color: #25d366 !important;
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.1);
}

.article-body .article-share-icon--reddit:hover,
.article-body .article-share-icon--reddit:focus-visible {
    color: #ff4500 !important;
    border-color: #ff4500;
    background: rgba(255, 69, 0, 0.1);
}

.article-body .article-share-icon--telegram:hover,
.article-body .article-share-icon--telegram:focus-visible {
    color: #2aabee !important;
    border-color: #2aabee;
    background: rgba(42, 171, 238, 0.1);
}

.article-body .article-share-icon--pinterest:hover,
.article-body .article-share-icon--pinterest:focus-visible {
    color: #e60023 !important;
    border-color: #e60023;
    background: rgba(230, 0, 35, 0.1);
}

.article-body .article-share-icon--email:hover,
.article-body .article-share-icon--email:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.06);
}

.article-body .article-share-icon.is-copied {
    color: #0f0 !important;
    border-color: #0f0;
    background: rgba(0, 255, 0, 0.08);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.25);
}

.article-body .article-tags--footer {
    margin-top: 1.25rem;
    margin-bottom: 0;
    padding: 0 24px 30px;
    border-top: none;
    box-shadow: none;
}

.article-tags-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-body .article-tags-list > li,
.article-body .article-tags__item {
    position: static;
    margin: 0;
    padding: 0;
}

.article-body .article-tags-list > li::before,
.article-body .article-tags__item::before {
    content: none;
    display: none;
}

.article-body .article-tag-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.58rem, 1.4vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.article-body .article-tag-pill:hover,
.article-body .article-tag-pill:focus-visible {
    color: var(--neon, #00d2ff) !important;
    border-color: var(--neon, #00d2ff);
    background: rgba(0, 210, 255, 0.08);
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.18);
}

/* Related articles (city, venue, article pages) */
.related-articles {
    margin-top: 2.5rem;
    padding: 28px 24px 30px;
    box-shadow: inset 0 1px 0 rgba(0, 210, 255, 0.2);
}

.related-articles__title {
    margin: 0 0 1.1rem;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.related-articles__list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-articles__item {
    margin: 0;
    padding: 0;
}

.article-body .related-articles__list > li,
.article-body .related-articles__item {
    position: static;
    margin: 0;
    padding: 0;
}

.article-body .related-articles__list > li::before,
.article-body .related-articles__item::before {
    content: none;
    display: none;
}

.related-articles__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.related-articles__link:hover,
.related-articles__link:focus-visible {
    color: var(--neon, #00d2ff) !important;
    border-color: rgba(0, 210, 255, 0.45);
    background: rgba(0, 210, 255, 0.06);
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.12);
}

.related-articles__link-title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.68rem, 1.6vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.related-articles__date {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.82rem, 1.8vw, 0.92rem);
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.related-articles__link:hover .related-articles__date,
.related-articles__link:focus-visible .related-articles__date {
    color: rgba(255, 255, 255, 0.62);
}

.related-articles__more {
    margin: 1rem 0 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.62rem, 1.4vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.related-articles__more a {
    color: var(--neon, #00d2ff);
    text-decoration: none;
}

.related-articles__more a:hover,
.related-articles__more a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
body {
    background-color: #191919;
}

.site-footer .footer-links a {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.footer-links a {
    color: #00d2ff;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: 0.3s;
}

.footer-links a:hover {
    text-decoration: underline;
}

.site-footer .footer-copy {
    font-size: 8px;
    letter-spacing: 4px;
    color: #555 !important;
}

/* ── INDEX PAGE EXTRA BOTTOM SPACING ── */
.dj-grid {
    padding-bottom: 50px;
}
/* ================================================================
   HOMEPAGE POLISH (index.php)
================================================================ */
body.home-hero:not(:has(#leaderboard-bar)) {
    padding-bottom: 60px;
}

body.home-hero:has(#leaderboard-bar) {
    padding-bottom: calc(var(--djc-ad-drawer-pad, 28px) + env(safe-area-inset-bottom, 0px));
}

body.home-hero:has(#leaderboard-bar.is-open) {
    padding-bottom: calc(var(--djc-ad-drawer-pad-open, 118px) + env(safe-area-inset-bottom, 0px));
}

/* Events tab — tour calendar (all artists) */
.events-calendar {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 16px 28px;
}

.events-calendar[hidden] {
    display: none !important;
}

/* Global tour map (MAP tab + /map/) */
.tour-map-panel {
    max-width: 1200px;
    margin: 0 auto 32px;
    padding: 0 16px 28px;
}

.tour-map-panel[hidden] {
    display: none !important;
}

.tour-map-canvas {
    width: 100%;
    height: min(62vh, 560px);
    min-height: 320px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    background: #0a0a0a;
    z-index: 1;
}

.tour-map-canvas--page {
    height: calc(100vh - 220px);
    min-height: 400px;
    max-height: none;
}

.tour-map-stats {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--neon);
    text-transform: uppercase;
}

.tour-map-hint,
.tour-map-empty {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    color: #ccc;
    text-align: center;
    margin-top: 12px;
}

.tour-map-empty[hidden] {
    display: none !important;
}

.tour-map-load-err {
    padding: 40px 20px;
    text-align: center;
    color: #ff6b6b;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    letter-spacing: 2px;
}

.tour-map-leaflet-popup .leaflet-popup-content-wrapper {
    background: #0c0c0c;
    color: #fff;
    border: 1px solid var(--neon);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.25);
}

.tour-map-leaflet-popup .leaflet-popup-tip {
    background: #0c0c0c;
    border: 1px solid var(--neon);
}

.tour-map-popup {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    line-height: 1.45;
}

.tour-map-popup-artist {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--neon);
    margin: 0 0 6px;
    text-transform: uppercase;
}

.tour-map-popup-date,
.tour-map-popup-venue {
    margin: 0 0 4px;
    color: #fff;
}

.tour-map-popup-tix a,
.tour-map-popup-link a {
    color: var(--neon);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.tour-map-popup-tix a:hover,
.tour-map-popup-link a:hover {
    border-bottom-color: var(--neon);
}

/* Standalone /map page */
body.map-page {
    background: var(--bg);
    min-height: 100vh;
}

.map-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.map-page-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.map-page-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--djc-header-h) + 32px) 24px 80px;
}

.map-page-wrap {
    width: 100%;
}

.map-page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
}

.map-page-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.map-page-breadcrumb a:hover {
    text-decoration: underline;
}

.map-page-head {
    text-align: center;
    margin-bottom: 24px;
}

.map-page-title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    letter-spacing: clamp(4px, 2vw, 14px);
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.map-page-sub {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neon);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.map-page-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 999px;
    background: rgba(0, 210, 255, 0.06);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.map-page-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

.map-page-frame {
    position: relative;
    padding: 3px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.55), rgba(0, 210, 255, 0.08) 40%, rgba(0, 210, 255, 0.35));
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.12);
}

.map-page-frame::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.08);
    z-index: 0;
}

.map-page .tour-map-canvas--page {
    height: min(72vh, 720px);
    min-height: 420px;
    border: none;
    border-radius: 6px;
    overflow: hidden;
}

.map-page .tour-map-empty {
    margin-top: 20px;
    padding: 24px;
    border: 1px dashed rgba(0, 210, 255, 0.35);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.map-page .main-footer {
    margin-top: 0;
}

/* Standalone /map/ with homepage hero chrome */
body.home-hero.map-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.map-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.map-page .map-page-main,
body.home-hero.map-page #main-content.map-page-main {
    flex: 1 0 auto;
    box-sizing: border-box;
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 24px 80px !important;
    margin-top: 0 !important;
}

body.home-hero.map-page .map-page-wrap {
    margin-top: 0 !important;
}

body.home-hero.map-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.map-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}

/* Dedicated /calendar/ page */
body.home-hero.calendar-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.calendar-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.calendar-page .directory-hero-sub {
    font-family: var(--font-head);
    font-size: clamp(0.55rem, 1.6vw, 0.7rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 16px 0 0;
}

body.home-hero.calendar-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.calendar-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.city-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.city-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible,
body.home-hero.venue-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:hover,
body.home-hero.venue-page .home-sticky-nav .pill-bar a.pill-btn.pill-btn--nav:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}

body.calendar-page {
    background: var(--bg);
    min-height: 100vh;
}

.calendar-page-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px 80px;
    box-sizing: border-box;
}

.calendar-page-wrap {
    width: 100%;
}

body.home-hero.calendar-page #main-content .calendar-page-breadcrumb,
body.home-hero.calendar-page #main-content .calendar-page-head,
body.home-hero.calendar-page #main-content #eventsPanel.events-calendar,
body.home-hero.calendar-page #main-content .calendar-crawl,
body.home-hero.calendar-page #main-content .calendar-page-crosslinks {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

body.calendar-page .events-calendar.calendar-page-panel {
    max-width: none;
    margin: 0 0 32px;
    padding: 0 0 28px;
}

.calendar-page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
}

.calendar-page-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.calendar-page-breadcrumb a:hover {
    text-decoration: underline;
}

.calendar-page-head {
    text-align: center;
    margin-bottom: 24px;
}

.calendar-page-title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    letter-spacing: clamp(4px, 2vw, 14px);
    color: #fff;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.calendar-page-sub {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--neon);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.calendar-page-intro {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}

.calendar-page-crosslinks {
    margin-top: 28px;
}

.calendar-crawl {
    margin-top: 28px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-crawl__summary {
    cursor: pointer;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    list-style: none;
}

.calendar-crawl__summary::-webkit-details-marker {
    display: none;
}

.calendar-crawl__summary::before {
    content: '+ ';
    color: var(--neon);
}

.calendar-crawl[open] .calendar-crawl__summary::before {
    content: '− ';
}

.calendar-crawl__summary:hover,
.calendar-crawl__summary:focus-visible {
    color: var(--neon);
}

.calendar-crawl__body {
    margin-top: 14px;
}

.calendar-crawl__hint {
    margin: 0 0 18px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.5);
}

.calendar-crawl-day {
    margin-bottom: 18px;
}

.calendar-crawl-day__title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 8px;
}

.calendar-crawl-day__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendar-crawl-day__item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
}

.calendar-crawl-day__item a {
    color: var(--neon);
    text-decoration: none;
}

.calendar-crawl-day__item a:hover {
    text-decoration: underline;
}

.calendar-crawl-day__date,
.calendar-crawl-day__loc {
    color: rgba(255, 255, 255, 0.55);
}

.calendar-crawl-day__show {
    margin-left: 8px;
    font-size: 0.92rem;
}

.calendar-crawl-empty {
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    line-height: 1.5;
}

.calendar-page .main-footer {
    margin-top: 0;
}

body.artist-page .main-footer {
    flex-shrink: 0;
}

/* Leaflet controls — dark theme on /map */
.map-page .leaflet-control-zoom a,
.map-page .leaflet-bar a {
    background: #0c0c0c !important;
    color: var(--neon) !important;
    border-color: rgba(0, 210, 255, 0.45) !important;
}

.map-page .leaflet-control-zoom a:hover,
.map-page .leaflet-bar a:hover {
    background: rgba(0, 210, 255, 0.15) !important;
    color: #fff !important;
}

.map-page .leaflet-control-attribution {
    background: rgba(5, 5, 5, 0.85) !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 10px;
}

.map-page .leaflet-control-attribution a {
    color: var(--neon) !important;
}

.map-page .leaflet-container {
    background: var(--bg);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
}

.map-page .tour-map-leaflet-popup .leaflet-popup-content {
    margin: 12px 14px;
    min-width: 180px;
}

.map-page .tour-map-leaflet-popup .leaflet-popup-close-button {
    color: var(--neon) !important;
}

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
}

.cal-show-count {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--muted, #888);
    text-transform: uppercase;
}

.cal-sync-hint {
    color: #888;
    font-size: 0.95rem;
    margin-top: 12px;
    text-align: center;
}

.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0;
}

.cal-nav--bottom {
    margin-top: 16px;
}

.cal-nav-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid var(--neon, #00d2ff);
    background: rgba(0, 0, 0, 0.6);
    color: var(--neon, #00d2ff);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.cal-nav-btn:hover,
.cal-nav-btn:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.45);
}

.cal-month-title {
    flex: 1;
    margin: 0;
    text-align: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1rem, 3vw, 1.35rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.cal-weekdays span {
    text-align: center;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: var(--neon, #00d2ff);
    padding: 8px 4px;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 7.5rem;
    gap: 2px;
    background: #111;
    border: 1px solid #1a1a1a;
}

.cal-day {
    height: 100%;
    min-height: 0;
    max-height: 7.5rem;
    background: #050505;
    border: 1px solid #151515;
    padding: 5px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-sizing: border-box;
    overflow: hidden;
}

.cal-day:not(.cal-day--pad) {
    cursor: pointer;
}

.cal-day:not(.cal-day--pad):hover {
    border-color: rgba(0, 210, 255, 0.45);
    background: #0a0a0a;
}

.cal-day--pad {
    background: #030303;
    opacity: 0.45;
    min-height: 0;
    cursor: default;
    pointer-events: none;
}

.cal-day--today {
    border-color: var(--neon, #00d2ff);
    box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.35);
}

.cal-day--has-shows {
    background: #080808;
}

.cal-day-num {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.7rem;
    color: #666;
    line-height: 1;
}

.cal-day--today .cal-day-num {
    color: var(--neon, #00d2ff);
}

.cal-day--has-shows .cal-day-num {
    color: #fff;
}

.cal-day-shows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.cal-show {
    display: block;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    background: rgba(0, 210, 255, 0.08);
    border-left: 2px solid var(--neon, #00d2ff);
    padding: 2px 3px;
    font-size: 0.62rem;
    line-height: 1.2;
    transition: background 0.15s;
    overflow: hidden;
    pointer-events: none;
}

.cal-show:hover,
.cal-show:focus-visible {
    background: rgba(0, 210, 255, 0.2);
}

.cal-show-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.15;
    text-transform: uppercase;
}

.cal-show-loc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.52rem;
    line-height: 1.1;
    margin-top: 1px;
}

.cal-show-more {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    color: var(--neon, #00d2ff);
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-empty {
    text-align: center;
    color: #888;
    margin-top: 14px;
    font-size: 0.95rem;
}

/* Calendar day detail (rendered inside #djcMediaLightbox) */
.cal-day--expanded {
    width: min(28rem, calc(100vw - 48px));
    min-width: min(20rem, 100%);
    min-height: min(22rem, 70dvh);
    max-height: min(36rem, calc(100dvh - 80px));
    height: auto;
    max-height: min(36rem, calc(100dvh - 80px));
    padding: 14px 12px 16px;
    border: 2px solid var(--neon, #00d2ff);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.cal-day--expanded.cal-day--today {
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.35), inset 0 0 0 1px rgba(0, 210, 255, 0.5);
}

.cal-day--expanded .cal-day-num {
    font-size: clamp(2rem, 8vw, 3rem);
    margin-bottom: 4px;
    color: #fff;
}

.cal-day-lightbox-sub {
    display: block;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--neon, #00d2ff);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cal-day--expanded .cal-day-shows {
    overflow-y: auto;
    overflow-x: hidden;
    gap: 8px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.cal-day--expanded .cal-show {
    padding: 10px 12px;
    cursor: default;
    pointer-events: auto;
}

.cal-day--expanded .cal-show-name {
    display: block;
    -webkit-box-orient: unset;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    letter-spacing: 1px;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
}

.cal-day--expanded .cal-show-loc {
    display: block;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    margin-top: 4px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
}

.cal-day--expanded .cal-show-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cal-day--expanded .cal-show-artist-link,
.cal-day--expanded .cal-show-tix {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 14px;
    border: 1px solid var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    background: transparent;
    transition: background 0.2s, color 0.2s;
}

.cal-day--expanded .cal-show-tix {
    background: var(--neon, #00d2ff);
    color: #000;
    border-color: var(--neon, #00d2ff);
}

.cal-day--expanded .cal-show-artist-link:hover,
.cal-day--expanded .cal-show-artist-link:focus-visible,
.cal-day--expanded .cal-show-tix:hover,
.cal-day--expanded .cal-show-tix:focus-visible {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.cal-day--expanded .cal-day-empty-msg {
    font-size: 1rem;
    color: #888;
    padding: 20px 8px;
    text-align: center;
    letter-spacing: 1px;
}

@media (max-width: 900px) {
    .cal-grid {
        grid-auto-rows: 6.5rem;
    }
    .cal-day {
        max-height: 6.5rem;
        padding: 4px 3px;
    }
    .cal-show-name {
        font-size: 0.5rem;
    }
    .cal-show-loc {
        font-size: 0.48rem;
    }
}

@media (max-width: 520px) {
    .cal-grid {
        grid-auto-rows: 5.5rem;
    }
    .cal-day {
        max-height: 5.5rem;
    }
    .cal-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }
    .cal-month-title {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }
}

body.home-hero .hero-section,
body.home-hero .home-hero-banner {
    opacity: 1 !important;
}

.home-header {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header-logo {
    font-family: var(--font-head);
    color: #fff;
    text-decoration: none;
    font-size: clamp(0.85rem, 2.5vw, 1.6rem);
    letter-spacing: clamp(3px, 1.5vw, 8px);
    font-weight: 900;
    white-space: nowrap;
}

.header-logo .logo-accent {
    color: var(--neon);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.auth-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.auth-buttons button,
.auth-buttons a {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    padding: 8px 14px;
    white-space: nowrap;
}

.auth-buttons button {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--neon);
    color: var(--neon);
    cursor: pointer;
    transition: 0.3s;
}

.auth-buttons button:hover {
    background: var(--neon);
    color: #000;
}

.welcome-user-link {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--neon);
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid transparent;
    transition: 0.25s;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

.welcome-user-link:hover {
    border-color: var(--neon);
    background: rgba(0, 210, 255, 0.1);
    color: #fff;
}

.welcome-user-link--hero {
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
    border: none;
}

.welcome-user-link--hero:hover {
    background: transparent;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.home-hero-banner {
    height: min(60vh, 520px);
    width: 100%;
    background: url('/_img/dj-rocks-festival.jpg') center / cover no-repeat;
    background-color: var(--bg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-banner .hero-title {
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 8vw, 5rem);
    letter-spacing: clamp(8px, 3vw, 25px);
    margin: 0;
    color: #fff;
    text-shadow: 0 0 40px rgba(0, 210, 255, 0.7);
}

.favorites-section {
    padding: 40px 60px;
    background: #191919;
    border-bottom: 1px solid #111;
    display: block;
}

.favorites-section.is-collapsed .favorites-body {
    display: none;
}

.favorites-section.is-collapsed .fav-reorder-hint {
    display: none !important;
}

.favorites-section.is-collapsed .favorites-newsletter-prompt:not([hidden]) {
    display: block;
}

#homeWeekendShows.is-collapsed #homeWeekendBody {
    display: none !important;
}

#homeWeekendShows:not(.is-collapsed) #homeWeekendBody {
    display: block !important;
}

.home-weekend-calendar.is-collapsed .home-weekend-body {
    display: none !important;
}

.home-weekend-calendar:not(.is-collapsed) .home-weekend-body {
    display: block !important;
}

.favorites-update-prompt {
    border-color: rgba(0, 255, 153, 0.35);
    background: rgba(0, 255, 153, 0.06);
}

.favorites-update-prompt__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.favorites-update-prompt .favorites-newsletter-prompt__text {
    flex: 1 1 auto;
    min-width: 0;
}

.favorites-update-prompt .favorites-newsletter-prompt__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: -2px -2px 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.favorites-update-prompt .favorites-newsletter-prompt__close-icon {
    display: block;
    line-height: 1;
    pointer-events: none;
}

.favorites-update-prompt .favorites-newsletter-prompt__close:hover,
.favorites-update-prompt .favorites-newsletter-prompt__close:focus-visible {
    color: #fff;
    border-color: rgba(0, 255, 153, 0.55);
    background: rgba(0, 255, 153, 0.12);
    outline: none;
}

.fav-hide-btn {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    background: transparent;
    border: 1px solid rgba(0, 210, 255, 0.35);
    padding: 8px 14px;
    min-height: 36px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.fav-hide-btn:hover,
.fav-hide-btn:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
}

.favorites-empty {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 12px;
    letter-spacing: 0.04em;
}

.favorites-section:not(.has-favorites) {
    display: none;
}

.favorites-section.has-favorites .favorites-empty {
    display: none;
}

.favorites-section:not(.has-favorites) .fav-reorder-hint {
    display: none !important;
}

.favorites-newsletter-prompt {
    display: none;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 8px;
    background: rgba(0, 210, 255, 0.06);
}

.favorites-newsletter-prompt:not([hidden]),
.favorites-newsletter-prompt.is-visible {
    display: block;
}

.favorites-newsletter-prompt__text {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.favorites-newsletter-prompt__yes,
.favorites-newsletter-prompt__no {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.favorites-newsletter-prompt__yes {
    color: var(--neon, #00d2ff);
}

.favorites-newsletter-prompt__no {
    color: rgba(255, 255, 255, 0.55);
}

.favorites-newsletter-prompt__yes:hover,
.favorites-newsletter-prompt__yes:focus-visible {
    color: #fff;
}

.favorites-newsletter-prompt__no:hover,
.favorites-newsletter-prompt__no:focus-visible {
    color: #fff;
}

.newsletter-modal__lead {
    margin: 0 0 18px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.newsletter-modal__artists {
    margin: 0 0 18px;
}

.newsletter-modal__label {
    display: block;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    margin-bottom: 8px;
}

.newsletter-modal__input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.newsletter-modal__status {
    min-height: 1.25em;
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
}

.newsletter-modal__status.is-success {
    color: #00ff99;
}

.newsletter-modal__status.is-error {
    color: #ff6b6b;
}

/* Match auth-btn auth-btn-primary artist-alert-cta__btn */
.newsletter-modal__submit.btn-access {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px 20px;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.25s;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background: var(--neon);
    color: #000;
    border: 1px solid var(--neon);
    border-radius: 0;
}

.newsletter-modal__submit.btn-access:hover,
.newsletter-modal__submit.btn-access:focus-visible {
    background: var(--neon);
    color: #000 !important;
    outline: none;
}

.newsletter-modal__submit.btn-access:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.subscription-update-modal__dialog {
    max-width: 480px;
}

.subscription-update-modal__lead {
    margin: 0 0 14px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.subscription-update-modal__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.subscription-update-modal__link {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.subscription-update-modal__link:hover,
.subscription-update-modal__link:focus-visible {
    color: #fff;
}

.subscription-update-modal__sep {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
}

.subscription-update-artists {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(50vh, 320px);
    overflow-y: auto;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-overflow-scrolling: touch;
}

.subscription-update-artists__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.subscription-update-artists__item:hover {
    background: rgba(0, 210, 255, 0.08);
}

.subscription-update-artists__item input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--neon, #00d2ff);
    cursor: pointer;
}

.subscription-update-artists__label {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.3;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.subscription-update-artists__item.is-new .subscription-update-artists__label::after {
    content: ' · NEW';
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.5rem;
    letter-spacing: 1px;
    color: #00ff99;
    vertical-align: middle;
}

.subscription-update-modal__submit,
.subscription-update-modal__submit.btn-access {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    background: var(--neon, #00d2ff) !important;
    color: #000 !important;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.62rem, 1.6vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.subscription-update-modal__submit:hover,
.subscription-update-modal__submit:focus-visible {
    background: #33dcff !important;
    color: #000 !important;
    box-shadow: 0 0 22px rgba(0, 210, 255, 0.55);
    outline: none;
}

.subscription-update-modal__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.favorites-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.favorites-heading {
    margin: 0;
}

.fav-reorder-hint {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted, #888);
}

.favorites-section.has-favorites .fav-reorder-hint {
    display: inline;
}

.btn-alert-manage {
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: var(--neon);
    background: transparent;
    border: 1px solid var(--neon);
    padding: 8px 16px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-alert-manage:hover {
    background: var(--neon);
    color: #000;
}

.favorites-row {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.fav-card {
    flex-shrink: 0;
    width: 180px;
    height: 240px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    border: 1.5px solid var(--neon);
    transition: 0.4s;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: element;
}

.fav-card:hover {
    border-color: #fff;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.35);
}

.fav-card:active,
.fav-card--chosen,
.fav-card--drag {
    cursor: grabbing;
}

.fav-rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.92);
    border: 2px solid var(--neon, #00d2ff);
    border-radius: 2px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--neon, #00d2ff);
    text-shadow: 0 0 14px rgba(0, 210, 255, 0.65);
    pointer-events: none;
}

.fav-card--ghost {
    opacity: 0.35;
}

.fav-card--chosen {
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.45);
    border-color: #fff;
}

.fav-card--drag {
    opacity: 0.85;
}

.fav-card--drop-target {
    outline: 2px dashed var(--neon, #00d2ff);
    outline-offset: 2px;
}

.fav-card img,
.fav-card .fav-card-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0.6;
    transition: 0.4s;
    z-index: 0;
}

.fav-card:hover img,
.fav-card:hover .fav-card-photo,
.fav-card.is-preview-playing img,
.fav-card.is-preview-playing .fav-card-photo {
    opacity: 1;
    transform: scale(1.05);
}

.fav-card .waveform-canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background: linear-gradient(to top, rgba(0, 210, 255, 0.1), transparent);
}

.fav-card:hover .waveform-canvas,
.fav-card.is-preview-playing .waveform-canvas {
    opacity: 1;
}

.fav-card.is-preview-playing {
    border-color: var(--neon);
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
}

.fav-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: linear-gradient(transparent, #191919);
    pointer-events: none;
    z-index: 2;
}

.fav-card-name {
    font-family: var(--font-head);
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 4px #000;
}

.fav-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #333;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
    z-index: 5;
}

.fav-card:hover .fav-remove {
    opacity: 1;
}

/* Homepage card image — base rules at top of file; reinforce here for specificity */
.home-hero .card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #0a0a0a;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #666;
    box-sizing: border-box;
}

.card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transition: opacity 0.35s ease;
}

.waveform-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    opacity: 0;
    transition: 0.3s;
    z-index: 5;
}

.dj-card:hover .waveform-canvas {
    opacity: 1;
}

.tour-info {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

.playing-today.tour-info {
    color: var(--neon);
    text-shadow: 0 0 10px var(--neon);
}

#leaderboard-bar.is-open #leaderboardContent,
#leaderboard-bar.is-open .leaderboard-content {
    overflow: hidden;
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 0 10px;
}

#leaderboard-bar.is-collapsed #leaderboardContent,
#leaderboard-bar.is-collapsed .leaderboard-content,
#leaderboardContent.closed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

#leaderboardContent[hidden],
.leaderboard-content.closed[hidden] {
    display: none !important;
}

.leaderboard-ad-slot img,
.leaderboard-content img,
#leaderboardContent img {
    display: block;
    width: 728px;
    max-width: 100%;
    height: 90px;
    object-fit: contain;
    margin: 0 auto;
}

.leaderboard-ad-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.leaderboard-ad-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 12px 20px;
    text-decoration: none;
    background: transparent;
    border: none;
    box-sizing: border-box;
}

.leaderboard-ad-fallback__title {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 4px;
    color: #333;
}

.leaderboard-ad-fallback__cta {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: #111;
    letter-spacing: 1px;
}

.tm-affiliate-banner--home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tm-affiliate-banner--home a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.leaderboard-ad-code {
    width: 728px;
    max-width: 100%;
    height: 90px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 0;
}

.leaderboard-ad-code iframe,
.leaderboard-ad-code ins,
.leaderboard-ad-code > * {
    max-width: 100%;
    max-height: 90px;
}

/* ================================================================
   AUTH FORMS — modals (index) + account portal
================================================================ */
.modal {
    display: none;
    position: fixed;
    z-index: 100000;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.modal.is-visible {
    display: flex;
}

/* Login/register lightbox — see _css/auth-modals.css + _css/modal-system.css */

/* Account portal page */
body.auth-page {
    background: var(--bg);
    color: #fff;
    font-family: var(--font-main);
    min-height: 100vh;
}

.auth-page header {
    padding: 20px 40px;
    border-bottom: 1px solid #111;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.auth-page .logo {
    font-family: var(--font-head);
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 4px;
    color: #fff;
    text-decoration: none;
}

.auth-page .logo span {
    color: var(--neon);
}

.auth-page nav a {
    font-family: var(--font-head);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-left: 20px;
    text-transform: uppercase;
    transition: color 0.2s, text-shadow 0.2s;
}

.auth-page nav a:hover,
.auth-page nav a.active {
    color: #fff;
    text-shadow: 0 0 10px var(--neon);
}

.auth-page .portal-container {
    width: min(460px, calc(100vw - 80px));
    max-width: none;
    margin: 60px auto 80px;
    padding: 36px 32px 32px;
}

.auth-lightbox-page {
    min-height: 100vh;
    overflow-x: hidden;
}

.account-lightbox-stage {
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 48px;
    position: relative;
}

.account-lightbox-stage::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 50% 25%, rgba(0, 210, 255, 0.12), transparent 34%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 210, 255, 0.015) 2px,
            rgba(0, 210, 255, 0.015) 4px
        ),
        #000;
}

.account-lightbox-panel {
    margin: 0 auto;
    width: min(460px, calc(100vw - 80px));
}

.auth-page .portal-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 1px;
}

.auth-page .portal-footer a {
    color: var(--neon);
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.auth-page .status-msg {
    padding: 14px 16px;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid;
    text-transform: uppercase;
}

.auth-page .status-error {
    background: rgba(255, 0, 68, 0.08);
    border-color: #ff0055;
    color: #ff0055;
}

.auth-page .status-success {
    background: rgba(0, 210, 255, 0.08);
    border-color: var(--neon);
    color: var(--neon);
}

.auth-page .welcome-hero {
    text-align: center;
    padding: 60px 20px;
}

.auth-page .welcome-hero h2 {
    font-family: var(--font-head);
    font-size: clamp(1.5rem, 5vw, 3rem);
    letter-spacing: 8px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

.auth-page .welcome-tag {
    font-family: var(--font-head);
    color: var(--neon);
    font-size: 0.95rem;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.account-admin-hub {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.account-admin-eyebrow {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--neon);
    text-align: center;
    margin-bottom: 10px;
}

.account-admin-title {
    font-family: var(--font-head);
    font-size: clamp(1rem, 3vw, 1.4rem);
    letter-spacing: 6px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 28px;
    color: #fff;
}

.account-admin-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.account-admin-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px;
    border: 1px solid #222;
    background: rgba(12, 12, 12, 0.9);
    text-decoration: none;
    color: #fff;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.account-admin-card:hover {
    border-color: var(--neon);
    transform: translateY(-4px);
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.12);
}

.account-admin-card--featured {
    border-color: rgba(0, 210, 255, 0.45);
    background: linear-gradient(145deg, rgba(0, 210, 255, 0.08), rgba(12, 12, 12, 0.95));
}

.account-admin-card__label {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--neon);
}

.account-admin-card__desc {
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.45;
}

.auth-page .welcome-actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Login → dashboard fade transition */
.auth-transition-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.auth-transition-page--visible {
    opacity: 1;
}

.auth-transition-page--exit {
    opacity: 0;
}

.auth-transition-screen {
    text-align: center;
    padding: 40px 24px;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.auth-transition-page--visible .auth-transition-screen {
    transform: translateY(0);
    opacity: 1;
}

.auth-transition-page--exit .auth-transition-screen {
    transform: translateY(-16px);
    opacity: 0;
}

.auth-transition-title {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    letter-spacing: 8px;
    margin: 12px 0 0;
    color: #fff;
    text-transform: uppercase;
}

.auth-transition-sub {
    margin-top: 20px;
    font-size: 1.1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
}

.auth-page .btn-outline {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid #333;
    color: #fff;
    transition: 0.25s;
}

.auth-page .btn-outline:hover {
    border-color: var(--neon);
    color: var(--neon);
}

.auth-page .btn-outline.neon {
    border-color: var(--neon);
    color: var(--neon);
}

.auth-page .btn-outline.neon:hover {
    background: var(--neon);
    color: #000;
}

.auth-page .content-inset,
.auth-page main.content-inset {
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.auth-page h1.auth-title {
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    body.home-hero .main-header,
    .home-header {
        padding: 0 20px !important;
        height: auto;
        min-height: 72px;
        flex-wrap: wrap;
        gap: 12px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    body.home-hero .home-sticky-nav .pill-nav-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.home-hero.home-nav-is-pinned .sticky-search-row:not([hidden]) {
        padding: 16px 16px 20px;
    }

    body.home-hero.home-nav-is-pinned #stickySearchRow:not([hidden]) .sticky-search-input {
        min-height: 56px;
        font-size: 16px;
        padding: 18px 20px;
        letter-spacing: 2px;
    }

    .sticky-search-input {
        min-height: 52px;
        font-size: 16px;
        padding: 16px 18px;
        letter-spacing: 2px;
    }

    .main-header .header-actions {
        width: 100%;
        order: 3;
    }

    .favorites-section {
        padding: 30px 20px;
    }

    .pill-bar {
        max-width: min(720px, calc(100vw - 24px));
        overflow: visible;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pill-btn {
        flex: 0 1 auto;
        white-space: nowrap;
    }

    .site-footer .footer-links,
    .footer-links {
        flex-wrap: wrap;
        gap: 16px !important;
        padding: 0 20px;
    }
}

/* Collapse to single-row header on smaller viewports */
@media (max-width: 900px) {
    .header-search-bar {
        display: none !important;
    }
}

/* City / venue / map detail pages — compact fixed header + horizontal nav scroll */
@media (max-width: 900px) {
    :root {
        --djc-header-h: 80px;
    }
    body.city-page .main-header,
    body.venue-page .main-header,
    body.map-page .main-header,
    body.article-page .main-header {
        flex-wrap: nowrap;
        height: var(--djc-header-h);
        min-height: var(--djc-header-h);
        padding: 0 12px !important;
        gap: 8px;
    }

    body.city-page .main-header .header-logo,
    body.venue-page .main-header .header-logo,
    body.map-page .main-header .header-logo,
    body.article-page .main-header .header-logo {
        max-width: min(36vw, 148px);
        font-size: clamp(0.55rem, 2.8vw, 0.78rem);
        letter-spacing: clamp(1px, 0.5vw, 3px);
    }

    body.city-page .main-header nav,
    body.venue-page .main-header nav,
    body.map-page .main-header nav,
    body.article-page .main-header nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        max-width: min(72vw, calc(100vw - 132px));
        padding-bottom: 2px;
    }

    body.city-page .main-header nav::-webkit-scrollbar,
    body.venue-page .main-header nav::-webkit-scrollbar,
    body.map-page .main-header nav::-webkit-scrollbar,
    body.article-page .main-header nav::-webkit-scrollbar {
        display: none;
    }

    body.city-page .main-header nav .auth-btn,
    body.venue-page .main-header nav .auth-btn,
    body.map-page .main-header nav .auth-btn,
    body.article-page .main-header nav .auth-btn {
        font-size: 0.52rem;
        padding: 6px 8px;
        letter-spacing: 1px;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    .home-hero-banner {
        background-attachment: scroll;
    }

    .auth-buttons .auth-btn-dashboard {
        display: none;
    }

    .fav-card {
        width: 140px;
        height: 190px;
    }

    body.home-hero .header-logo {
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    .main-header .header-actions,
    body.home-hero .pill-nav-container .pill-nav-auth {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    body.home-hero .pill-nav-container .pill-nav-auth {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    body.home-hero.home-nav-is-pinned .sticky-search-row:not([hidden]) {
        padding: 12px 16px 16px;
    }

    .sticky-search-input {
        min-height: 48px;
        font-size: 16px;
        padding: 14px 16px;
    }

    .auth-buttons {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .hero-content,
    .hero-title {
        max-width: 100%;
    }

    .hero-title {
        line-height: 1.15;
        word-break: normal;
    }

    #djGrid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .dj-card {
        min-width: 0;
    }

    .card-content h2 {
        overflow-wrap: anywhere;
    }

    .favorites-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .leaderboard-bar {
        width: 100vw;
    }

    .leaderboard-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .modal-content,
    .auth-panel {
        padding: 28px 20px 24px;
    }

    .auth-page header,
    .auth-page .content-inset,
    .auth-page main.content-inset {
        padding-left: 20px;
        padding-right: 20px;
    }

    .auth-page header {
        justify-content: center;
        text-align: center;
    }

    .auth-page nav {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    .auth-page nav a {
        margin-left: 0;
    }
}
/* --- CENTERED REACTION BAR --- */
.reaction-bar { 
    display: flex; 
    gap: 12px; 
    margin-top: 30px; 
    justify-content: center; /* This centers the items horizontally */
    align-items: center; 
    width: 100%; /* Ensures the bar spans the full width of its container */
}

/* Ensure the hero-content container itself is centered */
.hero-content {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    text-align: center; /* Centers text-based elements */
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers flex items */
}
.react-btn {
    display:flex; align-items:center; gap:8px;
    padding:10px 22px;
    background:#0d0d0d; border:1px solid #222; border-radius:50px;
    color:#fff; font-family:'Rajdhani',sans-serif; font-size:1rem; font-weight:600;
    cursor:pointer; transition:all .2s ease;
}
.react-btn:hover {
    border-color:#00d2ff;
    box-shadow:0 0 12px rgba(0,210,255,.3);
    transform:scale(1.05);
}
/* Active states - each reaction gets its own color */
.react-btn.active                   { background:rgba(0,210,255,.1);  border-color:#00d2ff; box-shadow:0 0 18px rgba(0,210,255,.5);  color:#00d2ff; }
.react-btn.active[data-type="fire"] { background:rgba(255,107,53,.1); border-color:#ff6b35; box-shadow:0 0 18px rgba(255,107,53,.5); color:#ff6b35; }
.react-btn.active[data-type="love"] { background:rgba(255,61,127,.1); border-color:#ff3d7f; box-shadow:0 0 18px rgba(255,61,127,.5); color:#ff3d7f; }
.react-btn.active[data-type="hype"] { background:rgba(255,225,53,.1); border-color:#ffe135; box-shadow:0 0 18px rgba(255,225,53,.5); color:#ffe135; }
.react-count { font-size:.82rem; opacity:.75; }
@keyframes pop {
    0%  { transform:scale(1); }
    50% { transform:scale(1.35); }
    100%{ transform:scale(1); }
}
.react-btn.popping { animation:pop .25s ease; }
@media (prefers-reduced-motion: reduce) {
    .dj-card {
        opacity: 1;
        transform: none;
        transition: border-color 0.2s;
    }
    .react-btn.popping {
        animation: none;
    }
}

/* Grey / dim text → white (labels, meta, footer, placeholders) */
.auth-page .auth-form input::placeholder,
.auth-panel .auth-form input::placeholder,
.modal-content .form-group input::placeholder {
    color: #fff;
    opacity: 0.85;
}

.pill-btn:hover:not(.pill-btn--lit) {
    color: #fff;
}

.site-footer a:hover {
    color: var(--neon);
}

.leaflet-control-attribution .leaflet-control {
    display: none !important;
}

.home-sticky-nav {
    margin-top: 0px !important;
}

body.home-hero .home-sticky-nav .pill-nav-container {
    padding: 10px 40px 12px !important;
}

/* =========================================================
   TRENDING THIS WEEK
   ========================================================= */
.trending-section {
    padding: 40px 60px;
    background: #000;
    border-bottom: 1px solid #111;
    display: block;
}
.trending-pulse {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--neon);
    animation: trendPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-card-reactions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
@media (max-width: 768px) {
    .trending-section { padding: 30px 20px; }
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.trending-card {
    text-decoration: none;
    color: #fff;
    border: 1px solid #111;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
    display: block;
}
.trending-card:hover {
    border-color: var(--neon);
    transform: translateY(-4px);
}
.trending-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    filter: grayscale(60%);
    transition: filter 0.3s;
}
.trending-card:hover .trending-card-img {
    filter: grayscale(0%);
}
.trending-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: var(--font-head);
    background: #000;
    color: var(--neon);
    font-size: 0.75rem;
    font-weight: 900;
    padding: 4px 10px;
}
.trending-reactions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px #000;
}
.trending-card-name {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 12px 15px;
    background: #0c0c0c;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    .trending-section { padding: 30px 20px; }
    .trending-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .trending-row { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================
   TRENDING THIS WEEK
   ========================================================= */
.trending-section {
    padding: 40px 60px;
    background: #000;
    border-bottom: 1px solid #111;
}
.trending-pulse {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--neon);
    animation: trendPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-card-reactions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
@media (max-width: 768px) {
    .trending-section { padding: 30px 20px; }
}
/* =========================================================
   TRENDING THIS WEEK
   ========================================================= */
.trending-section {
    padding: 40px 60px;
    background: #000;
    border-bottom: 1px solid #111;
}
.trending-pulse {
    width: 8px;
    height: 8px;
    background: var(--neon);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px var(--neon);
    animation: trendPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes trendPulse {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1);   opacity: 1; }
}
.trending-card-reactions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}
@media (max-width: 768px) {
    .trending-section { padding: 30px 20px; }
}

.tix-control-wrap { display: flex; gap: 5px; margin-left: auto; }
.compare-btn { background: transparent !important; color: #fff !important; border-color: #333 !important; }
.compare-btn:hover { border-color: #00d2ff !important; color: #00d2ff !important; }
@media (max-width: 600px) {
    .tix-control-wrap { width: 100%; flex-direction: column; }
    .tix-btn { width: 100%; text-align: center; }
}

/* --- TODAY / SOON URGENCY BADGES --- */
.tour-row.is-playing-today {
    border-left: 4px solid #ff0000 !important;
    border-bottom: 1px solid #222 !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

.tour-urgency-label--today {
    color: #ff0000;
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #8a0000;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.08em;
    line-height: 1.3;
    box-shadow: none;
}

/* --- NEON YELLOW HIGHLIGHT (2-14 DAYS) --- */
.tour-row.is-playing-soon {
    border-left: 4px solid #ffff00 !important;
    border-bottom: 1px solid #222 !important;
    background: rgba(255, 255, 0, 0.05) !important;
}

.tour-row.is-playing-soon .tour-date {
    color: #ffff00 !important;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
    font-weight: bold;
}

.tour-urgency-label--soon {
    color: #ffff00;
    background: rgba(255, 214, 0, 0.2);
    border: 1px solid #9a8200;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    letter-spacing: 0.08em;
    line-height: 1.3;
    box-shadow: none;
}
/* --- BLUR-UP SYSTEM --- */
.card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #050505;
    overflow: hidden;
}

.card-image-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    transform: scale(1.1); /* Prevents white edges */
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-image-sharp {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.card-image-sharp:not(.is-loaded) {
    opacity: 0;
}

/* --- SENSORY SIGNAL PULSE --- */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

/* Color Mappings */
body.pulse-fire::after { background: radial-gradient(circle, rgba(255, 107, 53, 0.25) 0%, transparent 70%); opacity: 1; }
body.pulse-love::after { background: radial-gradient(circle, rgba(255, 61, 127, 0.25) 0%, transparent 70%); opacity: 1; }
body.pulse-hype::after { background: radial-gradient(circle, rgba(255, 225, 53, 0.25) 0%, transparent 70%); opacity: 1; }

/* Animation Trigger */
.pulse-active::after {
    animation: signalFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes signalFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.main-footer {
    background: var(--bg);
    border-top: none;
    text-align: center;
    width: 100%;
    margin-top: auto;
    box-sizing: border-box;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 1.2rem;
    letter-spacing: 10px;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 35px;
    transition: 0.3s;
}

.footer-logo span {
    color: var(--neon, #00d2ff);
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
}

.footer-tagline {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.65rem;
    letter-spacing: 5px;
    color: #444;
    margin: 0 0 40px;
    text-transform: uppercase;
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.footer-link {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #888;
    text-decoration: none;
    transition: color 0.3s, text-shadow 0.3s;
}

.footer-link:hover {
    color: var(--neon, #00d2ff);
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
}

.main-footer .footer-copy {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 1px;
    margin: 0;
}

.main-footer .footer-last-updated {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin: 10px 0 0;
}

.main-footer .footer-last-updated time {
    font-weight: 700;
}

@media (max-width: 768px) {
    .main-footer {
        padding: 60px 20px;
    }

    .footer-logo {
        font-size: 1rem;
        letter-spacing: 6px;
    }

    .footer-nav {
        gap: 15px;
    }
}

.djc-modal__btn{
    margin: 20px 10px -8px 10px !important;
}

#ticketPickerProviders {
    margin: 10px;
}

/* Venue & city directory index (/venues, /cities) — homepage hero + pill nav */
body.home-hero.cities-directory-page,
body.home-hero.venues-directory-page,
body.home-hero.genres-directory-page,
body.home-hero.articles-directory-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.cities-directory-page .main-footer,
body.home-hero.venues-directory-page .main-footer,
body.home-hero.genres-directory-page .main-footer,
body.home-hero.articles-directory-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.cities-directory-page .directory-hero-sub,
body.home-hero.venues-directory-page .directory-hero-sub,
body.home-hero.genres-directory-page .directory-hero-sub,
body.home-hero.articles-directory-page .directory-hero-sub {
    font-family: var(--font-head);
    font-size: clamp(0.55rem, 1.6vw, 0.7rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin: 16px 0 0;
}

body.home-hero.cities-directory-page .directory-page-main,
body.home-hero.venues-directory-page .directory-page-main,
body.home-hero.genres-directory-page .directory-page-main,
body.home-hero.articles-directory-page .directory-page-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    box-sizing: border-box;
}

body.home-hero.cities-directory-page .directory-page-wrap,
body.home-hero.venues-directory-page .directory-page-wrap,
body.home-hero.genres-directory-page .directory-page-wrap,
body.home-hero.articles-directory-page .directory-page-wrap {
    max-width: 960px;
    margin: 0 auto;
}

a.pill-btn.pill-btn--nav.pill-btn--current,
a.pill-btn.pill-btn--current.active {
    background: #00d2ff !important;
    color: #000 !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45) !important;
}

.main-header nav .auth-btn.nav-link--current,
.main-header .header-nav .auth-btn.nav-link--current,
.main-header nav .auth-btn.nav-link--current:hover,
.main-header nav .auth-btn.nav-link--current:focus-visible,
.main-header .header-nav .auth-btn.nav-link--current:hover,
.main-header .header-nav .auth-btn.nav-link--current:focus-visible {
    background: var(--neon) !important;
    color: #000 !important;
    border-color: var(--neon) !important;
    text-shadow: none;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.45);
}

.directory-intro {
    margin-bottom: 28px;
}

/* Cities / venues directory — same large search as homepage .sticky-search-container */
body.home-hero.cities-directory-page .directory-search-row,
body.home-hero.venues-directory-page .directory-search-row {
    width: 100%;
    margin: 0 0 28px;
    padding: 18px 24px 22px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100010;
    overflow: visible;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
}

body.home-hero.cities-directory-page .directory-search-row .sticky-search-container,
body.home-hero.venues-directory-page .directory-search-row .sticky-search-container {
    width: 100%;
    max-width: min(760px, 94vw);
}

body.home-hero.cities-directory-page .directory-search-row .sticky-search-dropdown,
body.home-hero.venues-directory-page .directory-search-row .sticky-search-dropdown {
    z-index: 100011;
}

body.home-hero.cities-directory-page .directory-search-row.directory-search-wrap--active,
body.home-hero.venues-directory-page .directory-search-row.directory-search-wrap--active {
    z-index: 100010;
}

.sticky-search-result-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 2px;
    background: rgba(0, 210, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--neon);
    letter-spacing: 0;
}

.sticky-search-result-icon.search-result-icon--city::before {
    content: '⌖';
}

.sticky-search-result-icon.search-result-icon--venue::before {
    content: '▣';
}

.sticky-search-result-icon.search-result-icon--show::before {
    content: '◷';
}

@media (max-width: 768px) {
    body.home-hero.cities-directory-page .directory-search-row,
    body.home-hero.venues-directory-page .directory-search-row {
        padding: 14px 16px 18px;
        margin-bottom: 20px;
    }
}

.directory-meta {
    font-family: var(--font-head);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 12px;
}

/* Cities & venues directories — A–Z accordion (headers match .venues-directory-link rows) */
.cities-accordion,
.venues-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cities-letter-group {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.cities-letter-toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.cities-letter-toggle::-webkit-details-marker {
    display: none;
}

.cities-letter-toggle.venues-directory-link {
    grid-template-columns: 1fr auto auto;
    gap: 4px 16px;
    align-items: center;
}

.cities-letter-toggle .venues-directory-name {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.cities-letter-toggle .venues-directory-count {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    max-width: min(52vw, 280px);
    text-align: right;
    line-height: 1.35;
}

.cities-letter-toggle:hover,
.cities-letter-group[open] > .cities-letter-toggle {
    border-color: rgba(0, 210, 255, 0.45);
}

.cities-letter-chevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    border-right: 2px solid rgba(255, 255, 255, 0.45);
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.cities-letter-toggle:hover .cities-letter-chevron,
.cities-letter-group[open] .cities-letter-chevron {
    border-color: var(--neon);
}

.cities-letter-group[open] .cities-letter-chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.cities-letter-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.venue-page-main,
body.city-page .venue-page-main,
body.venue-page .venue-page-main,
body.article-page .venue-page-main {
    padding: calc(var(--djc-header-h) + 40px) 40px 80px;
}

.venue-page-wrap {
    max-width: 960px;
    margin: 100px auto 0;
}

body.city-page #main-content.venue-page-main {
    margin-top: 0;
}

body.city-page .venue-page-wrap {
    margin-top: 0;
}

body.city-page .venue-page-main,
body.venue-page .venue-page-main {
    padding-top: 20px;
}

body.home-hero.city-page .venue-page-main,
body.city-page #main-content.venue-page-main,
body.home-hero.venue-page .venue-page-main,
body.venue-page #main-content.venue-page-main {
    padding: 20px 40px 80px !important;
    margin-top: 0 !important;
}

body.city-page .venue-page-wrap,
body.venue-page .venue-page-wrap {
    margin-top: 0 !important;
}

.venue-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 28px;
}

.venue-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.venue-breadcrumb a:hover {
    text-decoration: underline;
}

.venue-page-title {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    letter-spacing: 0.06em;
    color: #fff;
    margin: 0 0 12px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    text-transform: uppercase;
}

.venue-page-location {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.venue-page-location a {
    color: var(--neon);
    text-decoration: none;
}

.venue-page-sub {
    font-family: var(--font-head);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px;
}

.seo-crosslinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1.5rem;
}

.seo-crosslinks a {
    color: var(--neon);
    text-decoration: none;
}

.seo-crosslinks a:hover,
.seo-crosslinks a:focus-visible {
    text-decoration: underline;
}

.seo-crosslinks--compact {
    margin-top: 0;
    margin-bottom: 1rem;
}

.home-quicklinks {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-quicklinks a {
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon);
    text-decoration: none;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(0, 210, 255, 0.08);
}

.home-quicklinks a:hover,
.home-quicklinks a:focus-visible {
    background: rgba(0, 210, 255, 0.16);
}

.page-last-updated {
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: -8px 0 16px;
}

.page-last-updated time {
    font-weight: 700;
}

.artist-page .page-last-updated {
    margin: 0 0 20px;
}

.page-seo-intro {
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 52rem;
    margin: 0 0 28px;
    padding: 16px 18px;
    border-left: 3px solid var(--neon);
    background: rgba(0, 210, 255, 0.04);
}

.page-seo-links {
    display: inline;
}

.page-seo-links a {
    color: var(--neon);
    text-decoration: none;
}

.page-seo-links a:hover,
.page-seo-links a:focus-visible {
    text-decoration: underline;
}

.venue-map-canvas {
    width: 100%;
    height: 260px;
    min-height: 260px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 32px;
    overflow: hidden;
    background: #111;
    position: relative;
    z-index: 1;
}

.venue-map-canvas--leaflet {
    margin-bottom: 10px;
}

.venue-map-canvas--failed {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: #111;
    border-color: #222;
}

.venue-map-canvas--failed::after {
    content: 'Map unavailable';
}

.events-map-section {
    margin-bottom: 28px;
}

.events-map-meta {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.events-map-leaflet-popup .leaflet-popup-content-wrapper {
    background: #0a0a0a;
    color: #fff;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.events-map-leaflet-popup .leaflet-popup-tip {
    background: #0a0a0a;
    border: 1px solid rgba(0, 210, 255, 0.2);
}

.events-map-popup {
    font-family: var(--font-main);
    font-size: 0.95rem;
    line-height: 1.45;
}

.events-map-popup-artist {
    margin: 0 0 6px;
    font-family: var(--font-head);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon);
}

.events-map-popup-rank {
    color: rgba(255, 255, 255, 0.65);
}

.events-map-popup-date,
.events-map-popup-venue {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.85);
}

.events-map-popup-tix a,
.events-map-popup-link a {
    color: var(--neon);
    text-decoration: none;
}

.events-map-popup-tix a:hover,
.events-map-popup-link a:hover {
    text-decoration: underline;
}

.city-page .leaflet-container,
.venue-page .leaflet-container,
#eventsMap .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px;
    background: #111;
}

.map-page .events-map-canvas .leaflet-container,
.map-page .tour-map-canvas--page .leaflet-container {
    min-height: 420px;
    background: var(--bg);
}

.venue-map-open {
    margin: 0 0 28px;
    text-align: right;
    font-family: var(--font-head);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.venue-map-open a {
    color: var(--neon);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s, border-color 0.2s;
}

.venue-map-open a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.venue-map-apple-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 260px;
    margin-bottom: 32px;
    padding: 24px;
    text-decoration: none;
    color: #fff;
    background:
        radial-gradient(circle at 50% 35%, rgba(0, 210, 255, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-sizing: border-box;
}

.venue-map-apple-link:hover {
    border-color: var(--neon);
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.18);
    transform: translateY(-1px);
}

.venue-map-apple-link__icon {
    font-size: 2rem;
    line-height: 1;
}

.venue-map-apple-link__title {
    font-family: var(--font-head);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: var(--neon);
}

.venue-map-apple-link__sub {
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
}

.venue-show-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.venue-show-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    padding: 18px 22px;
    transition: border-color 0.2s, background 0.2s;
}

.venue-show-card:hover {
    border-color: rgba(0, 210, 255, 0.45);
    background: rgba(0, 210, 255, 0.04);
}

.venue-show-artist-link {
    flex-shrink: 0;
}

.venue-show-artist-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    background: #111;
}

.venue-show-artist-img--placeholder {
    display: block;
}

.venue-show-body {
    flex: 1;
    min-width: 0;
}

.venue-show-artist {
    font-family: var(--font-head);
    font-size: 1rem;
    margin: 0;
}

.venue-show-artist a {
    color: #fff;
    text-decoration: none;
}

.venue-show-artist a:hover {
    color: var(--neon);
}

.venue-show-rank {
    color: var(--neon);
    margin-right: 8px;
}

.venue-show-date {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon);
    margin: 6px 0 0;
}

.venue-show-date .tour-loc,
.venue-show-date .tour-loc-text {
    display: inline;
    margin: 0;
}

.venue-show-loc-sep,
.venue-show-date .tour-venue-sep {
    opacity: 0.55;
}

.venue-show-date .tour-geo-link {
    color: inherit;
    font-weight: 700;
}

.venue-show-actions {
    flex-shrink: 0;
}

/* --- Show detail (/show/{slug}) — also in css/style-venue.css for venue bundle --- */
body.show-page .venue-page-wrap {
    max-width: 900px;
}

body.show-page .show-page-head {
    margin-bottom: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.14);
}

body.show-page .show-page-title {
    font-size: clamp(1.5rem, 5vw, 2.75rem);
    letter-spacing: clamp(4px, 1.2vw, 12px);
    margin-bottom: 8px;
    text-shadow: 0 0 32px rgba(0, 210, 255, 0.22);
}

body.show-page .show-page-date {
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--neon, #00d2ff);
    margin: 0;
}

body.show-page .show-page-crosslinks {
    margin: 0 0 24px;
    line-height: 1.65;
}

body.show-page .venue-show-card--detail {
    margin-bottom: 28px;
    padding: 22px 24px;
    gap: 22px;
    background: linear-gradient(135deg, rgba(0, 18, 24, 0.55) 0%, rgba(6, 6, 6, 0.98) 48%);
    border: 1px solid rgba(0, 210, 255, 0.22);
    border-left: 4px solid var(--neon, #00d2ff);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 36px rgba(0, 210, 255, 0.06);
}

body.show-page .venue-show-card--detail:hover {
    border-color: rgba(0, 210, 255, 0.4);
    background: linear-gradient(135deg, rgba(0, 24, 32, 0.62) 0%, rgba(8, 8, 8, 0.98) 52%);
}

body.show-page .venue-show-card--detail .venue-show-artist-img {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.18);
}

body.show-page .venue-show-card--detail .venue-show-artist {
    font-size: clamp(0.78rem, 2vw, 0.92rem);
    letter-spacing: 0.14em;
    opacity: 0.88;
}

body.show-page .venue-show-card--detail .venue-show-date {
    font-size: clamp(1rem, 2.6vw, 1.2rem);
    margin-top: 10px;
}

body.show-page .venue-show-card--detail .venue-show-date-label {
    display: block;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

body.show-page .venue-show-card--detail .venue-page-location {
    margin: 8px 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
}

body.show-page .venue-show-card--detail .venue-show-actions {
    align-self: center;
}

body.show-page .venue-show-card--detail .show-share-btn {
    min-height: 44px;
}

.show-seo-detail {
    margin-top: 8px;
    padding: 28px 26px 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    border-left: 3px solid rgba(0, 210, 255, 0.45);
}

.show-seo-detail-title {
    margin: 0 0 14px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.82rem, 2.2vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: none;
    line-height: 1.45;
    color: #fff;
}

.show-seo-detail-copy {
    margin: 0 0 22px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 52rem;
}

.show-facts-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px 24px;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.show-facts-list > div {
    margin: 0;
}

.show-facts-list dt {
    margin: 0 0 6px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.show-facts-list dd {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
}

.show-facts-list dd a {
    color: var(--neon, #00d2ff);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.show-facts-list dd a:hover,
.show-facts-list dd a:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

.show-related-events {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
}

.show-related-title {
    margin: 0 0 14px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.show-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.show-related-list a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #1a1a1a;
    text-decoration: none;
    color: #fff;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.show-related-list a:hover,
.show-related-list a:focus-visible {
    border-color: rgba(0, 210, 255, 0.4);
    background: rgba(0, 210, 255, 0.06);
    transform: translateX(4px);
}

.show-related-list a span {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.show-related-list a small {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    text-transform: none;
}

.venue-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-head);
    color: #555;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.venues-directory {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.venues-directory-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #1a1a1a;
    text-decoration: none;
    transition: border-color 0.2s;
}

.venues-directory-link:hover {
    border-color: rgba(0, 210, 255, 0.45);
}

.venues-directory-name {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-head);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #fff;
}

.venues-directory-city {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(0, 210, 255, 0.75);
}

.venues-directory-count {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-head);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.tour-geo-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s, border-color 0.2s;
}

.tour-geo-link:hover {
    color: var(--neon);
    border-bottom-color: var(--neon);
}

.tour-loc .tour-geo-link {
    color: inherit;
}

.tour-venue-sep {
    opacity: 0.55;
    margin: 0 2px;
}

@media (max-width: 768px) {
    .venue-page-main,
    body.city-page .venue-page-main,
    body.venue-page .venue-page-main,
    body.article-page .venue-page-main,
    body.articles-index-page .venue-page-main {
        padding: calc(var(--djc-header-h) + 20px) 16px 60px;
    }

    body.home-hero.cities-directory-page .directory-page-main,
    body.home-hero.venues-directory-page .directory-page-main {
        padding: 8px var(--m-pad, 16px) 40px;
    }

    .venue-show-card {
        flex-wrap: wrap;
    }

    .venue-show-actions {
        width: 100%;
    }

    body.show-page .venue-show-card--detail {
        padding: 18px 16px;
        gap: 16px;
    }

    body.show-page .venue-show-card--detail .venue-show-artist-img {
        width: 96px;
        height: 96px;
    }

    body.show-page .venue-show-card--detail .venue-show-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .show-seo-detail {
        padding: 22px 18px 24px;
    }

    .show-facts-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .show-related-list a {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* --- 128 BPM HEARTBEAT PULSE --- */
body.heartbeat-active::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
}

/* The Kick Drum Animation */
.heartbeat-kick::before {
    animation: kickPulse 0.468s infinite; /* 128 BPM = 0.468s per beat */
}
/* Push footer to bottom */
body.artist-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    color: #fff;
    margin: 0;
    font-family: var(--font-main);
    overflow-x: hidden;
}

.artist-page .hero {
    width: 100%;
    height: 55vh;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    flex-shrink: 0;
}

.artist-page .hero-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.artist-page .hero-bg .hero-bg-img {
    opacity: 0.4;
    filter: grayscale(100%);
}

.artist-page .artist-tour-lead,
.artist-page .artist-rank-snippet {
    margin: 0.5rem 0 0;
    font-family: var(--font-main);
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.artist-page .artist-rank-snippet {
    color: var(--neon);
}

.artist-page .site-faq,
.home-hero .home-faq {
    margin-top: 0;
    padding-top: 0;
}

#faq {
    margin-top: 25px;
}

/* ── Homepage FAQ — blue accordion (~70% width, centered) ── */
.home-hero .home-faq {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 3rem clamp(16px, 4vw, 40px) 4rem;
    border-top: 1px solid rgba(0, 210, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(0, 210, 255, 0.07) 0%, transparent 38%),
        linear-gradient(rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.03) 1px, transparent 1px),
        #191919;
    background-size: auto, 56px 56px, 56px 56px, auto;
    background-position: center top, center top, center top, center top;
}

.home-hero .home-faq-header,
.home-hero .home-faq-list {
    width: 70%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.home-hero .home-faq-header {
    margin-bottom: 2rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid rgba(0, 210, 255, 0.18);
    text-align: left;
}

.home-hero .home-faq-title {
    font-family: var(--font-head);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--neon);
    margin: 0 0 0.65rem;
    line-height: 1.2;
}

.home-hero .home-faq-sub {
    margin: 0;
    font-family: var(--font-main);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
}

.home-hero .home-faq-list {
    margin-top: 0;
    padding: 0;
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 8, 14, 0.65);
    box-shadow: 0 0 48px rgba(0, 210, 255, 0.06);
}

.home-hero .home-faq-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    background: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.home-hero .home-faq-item:last-child {
    border-bottom: none;
}

.home-hero .home-faq-item:hover {
    background: rgba(0, 210, 255, 0.04);
}

.home-hero .home-faq-item[open] {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.03) 28%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--neon);
}

.home-hero .home-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem clamp(1rem, 3vw, 1.75rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.home-hero .home-faq-question::-webkit-details-marker {
    display: none;
}

.home-hero .home-faq-question-text {
    flex: 1;
    font-family: var(--font-head);
    font-size: clamp(0.62rem, 1.8vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.5;
    color: #f4f4f4;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.home-hero .home-faq-item[open] .home-faq-question-text {
    color: var(--neon);
}

.home-hero .home-faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.home-hero .home-faq-toggle::before,
.home-hero .home-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--neon);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.home-hero .home-faq-toggle::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.home-hero .home-faq-toggle::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.home-hero .home-faq-item[open] .home-faq-toggle::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

.home-hero .home-faq-answer {
    border-top: 1px solid rgba(0, 210, 255, 0.1);
    padding: 0 clamp(1rem, 3vw, 1.75rem) 1.35rem;
}

.home-hero .home-faq-answer p {
    margin: 1rem 0 0;
    font-family: var(--font-main);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.02em;
}

.home-hero .home-faq-answer a {
    color: var(--neon);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-hero .home-faq-answer a:hover,
.home-hero .home-faq-answer a:focus-visible {
    color: #fff !important;
}

.home-hero .home-hero-lead {
    margin: 0.75rem 0 0;
    font-family: var(--font-main);
    font-size: clamp(0.8rem, 2vw, 1rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    min-height: 2.75em;
    line-height: 1.35;
}

/* Homepage box unit (300×250) — between grid and FAQ */
.home-mpu-ad {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 2.5rem;
    text-align: center;
}

.home-mpu-ad .mpu-ad-slot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

.home-mpu-ad .mpu-ad-slot img {
    display: block;
    max-width: 100%;
    height: auto;
}

.home-mpu-ad .mpu-ad-link {
    display: inline-block;
    line-height: 0;
}

.home-mpu-ad .mpu-ad-code {
    display: inline-block;
    max-width: 300px;
    width: 100%;
    overflow: hidden;
}

.home-mpu-ad .mpu-ad-code iframe,
.home-mpu-ad .mpu-ad-code ins,
.home-mpu-ad .mpu-ad-code > * {
    max-width: 100%;
}

/* ── Artist page FAQ (accordion cards) ── */
.artist-page .artist-faq {
    margin-top: 3.5rem;
    padding: 2.5rem 0 4rem;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
    background: transparent;
}

.artist-page .artist-faq-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.25rem;
    padding: 0 1rem;
}

.artist-page .artist-faq-title {
    font-family: var(--font-head);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.artist-page .artist-faq-sub {
    margin: 0;
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
}

.artist-page .artist-faq-list {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.artist-page .artist-faq-card {
    margin: 0;
    padding: 0;
    border: 1px solid #161616;
    border-left: 3px solid #161616;
    background: linear-gradient(135deg, rgba(8, 8, 8, 0.98) 0%, rgba(4, 4, 4, 0.98) 100%);
    border-radius: 4px;
    overflow: hidden;
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.artist-page .artist-faq-card:hover {
    border-left-color: rgba(0, 210, 255, 0.45);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 210, 255, 0.06);
}

.artist-page .artist-faq-card[open] {
    border-color: rgba(0, 210, 255, 0.22);
    border-left-color: var(--neon);
    background: linear-gradient(135deg, rgba(0, 18, 24, 0.55) 0%, rgba(6, 6, 6, 0.98) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 36px rgba(0, 210, 255, 0.1);
}

.artist-page .artist-faq-question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.artist-page .artist-faq-question::-webkit-details-marker {
    display: none;
}

.artist-page .artist-faq-q-index {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgba(0, 210, 255, 0.35);
    min-width: 1.75rem;
    transition: color 0.25s ease;
}

.artist-page .artist-faq-card[open] .artist-faq-q-index {
    color: var(--neon);
}

.artist-page .artist-faq-question-text {
    flex: 1;
    font-family: var(--font-head);
    font-size: clamp(0.68rem, 2.2vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.45;
    color: #f2f2f2;
    text-transform: uppercase;
    transition: color 0.25s ease;
}

.artist-page .artist-faq-card[open] .artist-faq-question-text {
    color: var(--neon);
}

.artist-page .artist-faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #2a2a2a;
    border-radius: 2px;
    position: relative;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.artist-page .artist-faq-toggle::before,
.artist-page .artist-faq-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #888;
    transition: background 0.25s ease, transform 0.25s ease;
}

.artist-page .artist-faq-toggle::before {
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
}

.artist-page .artist-faq-toggle::after {
    width: 2px;
    height: 12px;
    margin: -6px 0 0 -1px;
}

.artist-page .artist-faq-card[open] .artist-faq-toggle {
    border-color: var(--neon);
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.25);
}

.artist-page .artist-faq-card[open] .artist-faq-toggle::before,
.artist-page .artist-faq-card[open] .artist-faq-toggle::after {
    background: var(--neon);
}

.artist-page .artist-faq-card[open] .artist-faq-toggle::after {
    transform: scaleY(0);
}

.artist-page .artist-faq-answer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 1.35rem 1.25rem 3.9rem;
}

.artist-page .artist-faq-answer p {
    margin: 1rem 0 0;
    font-family: var(--font-main);
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
}

/* Generic FAQ fallback (non-artist, non-homepage) */
.site-faq-list:not(.artist-faq-list):not(.home-faq-list) {
    border-top: none;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) {
    border-bottom: 1px solid #111;
    padding: 0.75rem 0;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) summary {
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: #ddd;
    list-style: none;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) summary::-webkit-details-marker {
    display: none;
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) summary::before {
    content: '+ ';
    color: var(--neon);
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item)[open] summary::before {
    content: '− ';
}

.site-faq-item:not(.artist-faq-card):not(.home-faq-item) p {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #999;
}

.artist-page .artist-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-family: var(--font-head);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1.5rem;
}

.artist-page .artist-breadcrumb a {
    color: var(--neon);
    text-decoration: none;
}

.artist-page .artist-breadcrumb a:hover {
    text-decoration: underline;
}

.artist-page .artist-breadcrumb-current {
    color: rgba(255, 255, 255, 0.9);
}

.artist-page .artist-breadcrumb .artist-rss-link {
    color: #ff8800;
    border-color: rgba(255, 136, 0, 0.45);
    padding: 4px;
    margin-left: 2px;
}

.artist-page .artist-breadcrumb .artist-rss-link:hover,
.artist-page .artist-breadcrumb .artist-rss-link:focus-visible {
    color: #ffb347;
    border-color: #ff8800;
    background: rgba(255, 136, 0, 0.12);
}

.artist-page .artist-breadcrumb .artist-rss-link .rss-icon {
    width: 18px;
    height: 18px;
}

.artist-page .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, #191919);
}

.artist-page .hero-content {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.artist-page .hero .hero-name {
    font-family: var(--font-head);
    font-size: clamp(2rem, 6vw, 6rem);
    letter-spacing: clamp(4px, 1.5vw, 20px);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.dj-card-rss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--neon);
    text-decoration: none;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 4px;
    padding: 6px;
    line-height: 0;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.dj-card-rss:hover,
.dj-card-rss:focus-visible {
    color: #fff;
    border-color: var(--neon);
    background: rgba(0, 210, 255, 0.12);
    outline: none;
    transform: translateY(-1px);
}

.dj-card-rss .rss-icon {
    display: block;
    width: 22px;
    height: 22px;
}

body.home-hero .dj-card-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.home-hero .dj-card-rss {
    position: absolute;
    left: 10px;
    bottom: 12px;
    z-index: 6;
    padding: 5px;
    background: rgba(0, 0, 0, 0.75);
}

body.home-hero .dj-card-rss .rss-icon {
    width: 16px;
    height: 16px;
}

.artist-page .nav-link-overlay {
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 100;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-head);
    font-size: 9px;
    letter-spacing: 4px;
    opacity: 0.6;
}

.artist-page .reaction-bar {
    display: flex;
    gap: 15px;
    margin-top: 35px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0px;
}

.artist-page .react-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 50px;
    color: #fff;
    font-family: var(--font-main);
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.artist-page .react-btn.active {
    background: rgba(0, 210, 255, 0.1);
    border-color: var(--neon);
    color: var(--neon);
}

.artist-page .content-inset {
    padding: 60px 40px;
    max-width: 1100px;
    margin: 0 auto;
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.artist-page .section-label {
    font-family: var(--font-head);
    font-size: 16px !important;
    letter-spacing: 6px;
    color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #111;
    margin-bottom: 0 !important;
}

.artist-page .bio-text {
    font-size: 14px;
    line-height: 1.8;
    color: #eee;
    white-space: pre-line;
}

.artist-page .artist-bio-text {
    font-size: 18px;
    line-height: 1.8;
    color: #eee;
}

.artist-page .artist-bio-text a,
.artist-page .bio-text a {
    color: var(--neon) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.artist-page .artist-bio-text a:hover,
.artist-page .artist-bio-text a:focus-visible,
.artist-page .bio-text a:hover,
.artist-page .bio-text a:focus-visible {
    color: var(--neon);
    border-bottom-color: var(--neon);
    opacity: 0.9;
    text-decoration: none;
}

.artist-page .artist-bio-text a:visited,
.artist-page .bio-text a:visited {
    color: var(--neon) !important;
}

.artist-page .artist-bio-text a[style],
.artist-page .bio-text a[style] {
    color: var(--neon) !important;
}

.artist-page .artist-faq-answer a {
    color: var(--neon) !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.artist-page .artist-faq-answer a:hover,
.artist-page .artist-faq-answer a:focus-visible {
    color: var(--neon) !important;
    border-bottom-color: var(--neon);
}

.artist-page .tour-container {
    background: #050505;
    border-left: 10px solid #111;
    border-right: 10px solid #111;
    margin-top: 60px;
    margin-bottom: 40px;
}

.artist-page .tour-section-label {
    padding: 20px 30px;
    border-bottom: 1px solid #111;
    margin-bottom: 0;
}

.artist-page .tour-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 30px;
    border-bottom: 1px solid #111;
}

.artist-page .tour-info {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    min-width: 0;
}

.artist-page .tour-date {
    font-family: var(--font-head);
    color: var(--neon);
    font-size: 1.3rem;
    white-space: nowrap;
    flex: 0 0 160px;
    width: 160px;
    max-width: 160px;
}

.artist-page .tour-loc {
    color: #fff;
    flex: 1;
    min-width: 0;
}

.artist-page .tour-row.is-playing-today,
.artist-page .tour-row.is-playing-soon {
    border-bottom: 1px solid #222 !important;
}

.artist-page .tour-row.is-sold-out {
    opacity: 0.7;
}

.artist-page .tour-row.is-sold-out .tour-date,
.artist-page .tour-row.is-sold-out .tour-loc,
.artist-page .tour-row.is-sold-out .tour-loc-text,
.artist-page .tour-row.is-sold-out .tour-geo-link,
.artist-page .tour-row.is-sold-out .tour-venue {
    color: #666 !important;
}

.artist-page .tour-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-head);
    color: #333;
}

.artist-page .tix-btn:not(.tix-btn--ghost),
.artist-page a.tix-btn:not(.tix-btn--ghost),
.artist-page button.tix-btn:not(.tix-btn--ghost),
.artist-page button.tix-btn--choice:not(.tix-btn--ghost),
.artist-page span.tix-btn:not(.tix-btn--ghost),
.artist-page .tix-btn-group .tix-btn:not(.tix-btn--ghost) {
    flex-shrink: 0;
    background: transparent;
    color: var(--neon);
    border: 1px solid var(--neon);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 12px 28px;
    min-width: 140px;
    -webkit-appearance: none;
    appearance: none;
}

.artist-page .tix-btn:not(.tix-btn--ghost):hover,
.artist-page button.tix-btn:not(.tix-btn--ghost):hover {
    background: var(--neon);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
}

.venue-show-actions .tix-btn,
.venue-show-card .tix-btn {
    flex-shrink: 0;
}

main.content-inset {
    flex: 1 0 auto;
}

/* Ensure pulse doesn't block footer clicks */
body::after {
    z-index: 5 !important; /* Lower than footer/links */
}

.main-footer {
    position: relative;
    z-index: 10; /* Higher than the pulse */
}

@keyframes kickPulse {
    0% { opacity: 0; transform: scale(0.95); }
    10% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05); }
}
.tix-btn--choice:not(.tix-btn--ghost):hover {
    color: #000 !important;
    border-color: var(--neon) !important;
    background: var(--neon) !important;
}

/* ── TACTICAL TWO-COLUMN GRID ── */
.tactical-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Left col slightly smaller */
    gap: 60px;
    align-items: start;
}

.node-label {
    font-family: 'Orbitron';
    font-size: 8px;
    letter-spacing: 4px;
    color: #444;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Artist page live set */
.artist-page .artist-video-section {
    margin-top: 30px;
    margin-bottom: 40px;
}

/* YouTube Wrapper */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #050505;
    border: 1px solid #111;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    filter: contrast(1.1) brightness(0.9); /* Makes it fit the dark theme */
}

/* Vibe Signatures on Left */
.vibe-module { margin-top: 40px; }
.vibe-grid { display: flex; flex-direction: column; gap: 10px; }
.vibe-pill { font-family: 'Orbitron'; font-size: 10px; color: #00d2ff; letter-spacing: 2px; }

/* Tour Row Adjustments for Grid */
.tour-info-main { display: flex; flex-direction: column; gap: 5px; }

/* Responsive: Stack on Mobile */
@media (max-width: 900px) {
    .tactical-grid { grid-template-columns: 1fr; gap: 40px; }
    .content-inset { padding: 40px 20px; }
}

/* --- HOMEPAGE HERO + GRID SHELL --- */
.home-hero-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    z-index: 1;
    background: var(--bg);
    overflow: hidden;
}

.home-hero-fixed .hero-img,
.home-hero-fixed .hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.hero-overlay-intro,
.home-hero-fixed .hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent, #191919);
}

.home-main-shell {
    position: relative;
    z-index: 10;
    background: var(--bg);
    margin-top: 50vh;
    min-height: 50vh;
}

body.home-hero #djGrid .dj-card,
body.home-hero #djGrid .dj-card-slot .dj-card {
    opacity: 1;
    transform: none;
}

body.home-hero .grid-container {
    background: var(--bg);
    min-height: 100vh;
    padding-bottom: 50px;
}

/* Homepage view panels (grid / calendar / map) inside #main-content */
body.home-hero .home-view-panels {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

body.home-view-calendar .home-view-panels .events-calendar,
body.home-view-events .home-view-panels .events-calendar {
    margin-top: 8px;
}

body.home-view-map .home-view-panels .tour-map-panel {
    margin-top: 8px;
}

body.home-view-calendar #main-content .events-calendar[hidden],
body.home-view-events #main-content .events-calendar[hidden],
body.home-view-map #main-content .tour-map-panel[hidden] {
    display: none !important;
}

.grid-empty {
    padding: 80px 20px;
    text-align: center;
    font-family: var(--font-head);
    letter-spacing: 3px;
    color: #444;
}

@keyframes cardFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .tix-btn,
    a.tix-btn,
    button.tix-btn {
        padding: 10px 20px;
        font-size: 9px;
        min-width: 110px;
    }

    .artist-page .tix-btn,
    .artist-page button.tix-btn {
        width: 100%;
        text-align: center;
    }
}

/* ── MODAL PROVIDER LINKS ── */
#modalLinks a {
    display: block;
    padding: 20px;
    margin: 15px 0;
    background: #0a0a0a;
    color: #fff;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    border: 1px solid #1a1a1a;
    letter-spacing: 3px;
    font-weight: 900;
    transition: 0.3s;
    text-align: center;
}

#modalLinks a:hover {
    border-color: #00d2ff;
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.05);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.1);
}

/* --------------------------------------------------*/

/* ── GLASS CARD HOVER (HOLOGRAPHIC EFFECT) ── */
.dj-card {
    background: #0a0a0a;
    border: 1px solid #111;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* The Glass Reveal */
.dj-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg, 
        rgba(0, 210, 255, 0.07) 0%,
        rgba(0, 210, 255, 0) 50%,
        rgba(0, 210, 255, 0.04) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 8;
    pointer-events: none;
}

.dj-card:hover {
    border-color: #00d2ff;
    transform: translateY(-4px);
    box-shadow: 
        0 0 0 1px rgba(0, 210, 255, 0.3),
        0 10px 40px rgba(0, 210, 255, 0.15),
        0 0 80px rgba(0, 210, 255, 0.05);
}

.dj-card:hover::before { opacity: 1; }

/* Image Zoom on Hover */
.dj-card:hover .card-image-sharp {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.05);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.card-image-sharp {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
/* ── MAGNETIC PILL NAV ── */
body.home-hero .pill-bar {
    gap: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pill-indicator {
        transition: none;
    }
}
/* ── SHOWS BY CITY ── */
.city-section {
    background: #000;
    border-top: none;
    padding: 80px 60px;
    background-image:
        linear-gradient(rgba(0, 210, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
}

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

.city-header { margin-bottom: 50px; }
.city-eyebrow {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 6px;
    color: #00d2ff;
    display: block;
    margin-bottom: 15px;
}
.city-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 8px;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

/* CITY PILLS GRID */
.city-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

.city-pill {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 25px 30px;
    background: #050505;
    border: 1px solid #111;
    border-left: 4px solid #111;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Neon Sweep Effect */
.city-pill::after {
    content: "";
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,210,255,0.04), transparent);
    transition: left 0.5s ease;
}

.city-pill:hover { 
    border-left-color: #00d2ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,210,255,0.1);
}
.city-pill:hover::after { left: 100%; }

.city-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 3px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
}
.city-pill:hover .city-name { color: #00d2ff; }

.city-count {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    letter-spacing: 2px;
    color: #333;
}
.city-pill:hover .city-count { color: #444; }

.city-footer-link { text-align: right; }
.city-all-link {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    color: #444;
    text-decoration: none;
    letter-spacing: 3px;
    transition: 0.3s;
}
.city-all-link:hover { color: #00d2ff; }

.video-container {
    margin-top: 40px;
}
.artist-page .tour-row.is-playing-today, .artist-page .tour-row.is-playing-soon { border-bottom: 1px solid #222; }

.artist-page .tour-row.is-playing-today:hover, .artist-page .tour-row.is-playing-soon:hover { border-bottom: 1px solid var(--neon) !important; }

@media (max-width: 1200px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .city-grid { grid-template-columns: repeat(2, 1fr); } .city-section { padding: 60px 20px; } }

/* ── Artist social links ── */

.artist-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.artist-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.artist-social-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.artist-social-btn:hover,
.artist-social-btn:focus-visible {
    color: var(--neon);
    background: transparent;
}

.hud-overlay { 
    position: fixed; 
    inset: 0; 
    z-index: 99999; 
    background: rgba(0, 0, 0, 0.93); 
    backdrop-filter: blur(14px); 
    -webkit-backdrop-filter: blur(14px); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.25s ease, visibility 0.25s ease; 
} 
.hud-overlay.hud-active { 
    opacity: 1; 
    visibility: visible; 
} .hud-overlay::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 210, 255, 0.018) 2px, rgba(0, 210, 255, 0.018) 4px ); 
    pointer-events: none; z-index: 0; 
} 
.hud-frame { position: relative; z-index: 1; width: min(820px, 88vw); padding: 36px 44px 28px; opacity: 0; transform: scale(0.96) translateY(-12px); transition: opacity 0.25s ease, transform 0.25s ease; } .hud-overlay.hud-active .hud-frame { opacity: 1; transform: scale(1) translateY(0); } .hud-corner { position: absolute; width: 22px; height: 22px; border-color: var(--neon, #00d2ff); border-style: solid; opacity: 0.55; } .hud-tl { top: 0; left: 0; border-width: 2px 0 0 2px; } .hud-tr { top: 0; right: 0; border-width: 2px 2px 0 0; } .hud-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; } .hud-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; } .hud-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; font-family: 'Rajdhani', sans-serif; font-size: 0.68rem; letter-spacing: 3px; color: rgba(0, 210, 255, 0.45); text-transform: uppercase; } .hud-sys-right { display: flex; align-items: center; gap: 8px; } .hud-dot { width: 7px; height: 7px; background: var(--neon, #00d2ff); border-radius: 50%; box-shadow: 0 0 6px var(--neon, #00d2ff); animation: hudDotPulse 1.6s ease-in-out infinite; } @keyframes hudDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; box-shadow: none; } } .hud-online-text { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: var(--neon, #00d2ff); } .hud-close-btn { background: none; border: 1px solid rgba(0, 210, 255, 0.25); color: rgba(0, 210, 255, 0.5); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.78rem; transition: background 0.15s, border-color 0.15s, color 0.15s; } .hud-close-btn:hover { background: rgba(0, 210, 255, 0.1); border-color: var(--neon, #00d2ff); color: var(--neon, #00d2ff); } .hud-input-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .hud-search-icon { font-size: 1.4rem; color: rgba(0, 210, 255, 0.4); } .hud-input { flex: 1; background: none; border: none; border-bottom: 1px solid #222; color: #fff; font-family: 'Orbitron', sans-serif; font-size: 1.1rem; letter-spacing: 4px; padding: 10px 0; outline: none; transition: border-bottom-color 0.2s; } .hud-input:focus { border-bottom-color: var(--neon, #00d2ff); } .hud-input::placeholder { color: #333; letter-spacing: 6px; } .hud-divider { height: 1px; background: #111; margin-bottom: 16px; position: relative; overflow: hidden; } .hud-scan-line { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--neon, #00d2ff), transparent); animation: hudScanMove 2s linear infinite; } @keyframes hudScanMove { 0% { left: -100%; } 100% { left: 100%; } } .hud-results { max-height: 300px; overflow-y: auto; margin-bottom: 16px; } .hud-result-item { display: flex; align-items: center; gap: 14px; padding: 10px 8px; cursor: pointer; border-bottom: 1px solid #0a0a0a; transition: background 0.2s; } .hud-result-item:hover, .hud-result-item.hud-focused { background: rgba(0, 210, 255, 0.05); } .hud-result-img { width: 38px; height: 38px; object-fit: cover; border-radius: 3px; background: #111; flex-shrink: 0; } .hud-result-name { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 2px; color: #fff; text-transform: uppercase; } .hud-result-rank { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: rgba(0, 210, 255, 0.5); margin-top: 2px; } .hud-result-item mark { background: transparent; color: var(--neon, #00d2ff); font-weight: 700; } .hud-hints { display: flex; justify-content: center; gap: 30px; font-family: 'Rajdhani', sans-serif; font-size: 0.6rem; color: #333; letter-spacing: 2px; } @media (max-width: 600px) { .hud-frame { padding: 24px 20px 18px; } .hud-input { font-size: 0.85rem; letter-spacing: 2px; } }

.map-page-label { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 4px; color: var(--neon, #00d2ff); }

.map-page-count { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 2px; color: rgba(0, 210, 255, 0.4); }

.next-show-radar-map { width: 100%; height: calc(100vh - 120px); min-height: 520px; background: #050505; }

.neon-marker--radar::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(0, 210, 255, 0.5); animation: radarRing 1.4s ease-out infinite; }

.neon-marker--radar::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(0, 210, 255, 0.25); animation: radarRing 1.4s ease-out infinite 0.3s; }

@keyframes radarBlink { 0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--neon, #00d2ff), 0 0 20px var(--neon, #00d2ff); } 50% { opacity: 0.6; box-shadow: 0 0 4px var(--neon, #00d2ff); } }

@keyframes radarRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }

.breadcrumb-nav { display: flex; align-items: center; gap: 12px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 24px; text-transform: uppercase; }

.breadcrumb-nav a { color: #888; text-decoration: none; transition: color 0.2s, text-shadow 0.2s; position: relative; }

.breadcrumb-nav a:hover { color: #00d2ff; text-shadow: 0 0 8px rgba(0, 210, 255, 0.6); }

.breadcrumb-nav .current { color: #00d2ff; border-bottom: 1px solid #00d2ff; padding-bottom: 2px; box-shadow: 0 4px 10px -4px rgba(0, 210, 255, 0.5); }

/* Breadcrumb connector: line · hex · line */
.breadcrumb-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: clamp(1.75rem, 4.5vw, 2.5rem);
    height: 0.75rem;
    margin: 0 2px;
    vertical-align: middle;
}

.breadcrumb-sep__rail {
    flex: 1 1 auto;
    height: 2px;
    min-width: 0.35rem;
    background: rgba(0, 210, 255, 0.55);
    box-shadow: 0 0 5px rgba(0, 210, 255, 0.2);
    border-radius: 1px;
}

.breadcrumb-sep__hex {
    width: 7px;
    height: 8px;
    flex-shrink: 0;
    background: var(--neon, #00d2ff);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.85);
}

#search-topbar-wrapper { transition: all 0.3s ease; z-index: 999; }

#search-topbar-wrapper.focused { box-shadow: 0 0 20px rgba(0, 210, 255, 0.4), 0 0 0 2px #00d2ff; border-color: #00d2ff; background: #000; }

body.search-active #search-overlay { opacity: 1; pointer-events: auto; }

#search-topbar-wrapper.focused input { color: #fff; text-shadow: 0 0 5px rgba(0, 210, 255, 0.5); }

.show-row {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 210, 255, 0.1);
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.show-row:hover {
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 210, 255, 0.1);
    transform: translateY(-2px);
}

.show-date { font-family: 'Rajdhani', sans-serif; font-weight: 700; color: #00d2ff; letter-spacing: 1px; }

.show-venue { font-family: 'Orbitron', sans-serif; font-size: 0.8rem; color: #fff; text-transform: uppercase; letter-spacing: 2px; }

/* --- Articles index (/articles/) --- */
body.articles-index-page .articles-index-wrap {
    max-width: 1080px;
}

body.articles-index-page .articles-index-dek {
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    max-width: 42rem;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
    text-transform: none;
}

body.home-hero.articles-directory-page .articles-directory-intro {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
}

body.home-hero.articles-directory-page .articles-directory-dek {
    margin: 0 0 14px;
    max-width: 42rem;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
}

.articles-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.articles-grid-item,
.article-grid-item {
    margin: 0;
    min-width: 0;
}

.article-card {
    margin: 0;
    height: 100%;
    border: 1px solid #1a1a1a;
    border-left: 3px solid #1a1a1a;
    padding: 20px !important;
    background:
        linear-gradient(135deg, rgba(8, 8, 8, 0.98) 0%, rgba(4, 4, 4, 0.98) 100%);
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease,
        background 0.28s ease;
}

.article-card:hover {
    border-color: rgba(0, 210, 255, 0.35);
    border-left-color: var(--neon, #00d2ff);
    background: linear-gradient(135deg, rgba(0, 18, 24, 0.45) 0%, rgba(6, 6, 6, 0.98) 100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 36px rgba(0, 210, 255, 0.08);
    transform: translateY(-2px);
}

.article-card-link {
    display: block;
    padding: 0 !important;
    text-decoration: none;
    color: inherit;
}

body.articles-index-page .article-card-link:hover,
body.articles-index-page .article-card-link:focus-visible {
    color: inherit !important;
}

.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.article-card-label {
    color: var(--neon, #00d2ff);
}

.article-card-meta time,
.article-card-meta span {
    color: rgba(255, 255, 255, 0.55);
}

.article-card-title {
    margin: 0 0 12px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.92rem, 2.4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: none;
    color: #fff;
    transition: color 0.25s ease;
}

.article-card:hover .article-card-title {
    color: var(--neon, #00d2ff);
}

.article-card-excerpt {
    margin: 0 0 18px;
    margin-left: 0 !important;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
}

.article-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    transition: color 0.2s ease, letter-spacing 0.2s ease;
}

.article-card-cta::after {
    content: '→';
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.article-card:hover .article-card-cta {
    color: #fff;
    letter-spacing: 0.18em;
}

.article-card:hover .article-card-cta::after {
    transform: translateX(4px);
}

@media (min-width: 720px) {
    .articles-grid {
        gap: 22px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 768px) {
    body.articles-index-page .articles-index-dek {
        margin-bottom: 24px;
        padding-bottom: 20px;
        font-size: 1rem;
    }

    body.home-hero.articles-directory-page .articles-directory-dek {
        font-size: 1rem;
    }

}

/* --- Articles (public list legacy + detail) --- */
.articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.articles-list-excerpt {
    margin: 0 0 20px;
    padding: 0 4px 0 18px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 1rem;
    line-height: 1.5;
}

.article-body {
    margin-top: 24px;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    width: 100%;
}

/* Article comments */
.article-comments {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.article-comments-heading {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    margin: 0 0 20px;
}

.article-comments-flash {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 210, 255, 0.35);
    background: rgba(0, 210, 255, 0.08);
    color: var(--neon, #00d2ff);
    font-size: 0.95rem;
}

.article-comments-signin {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.7);
}

.article-comments-signin a {
    color: var(--neon, #00d2ff);
}

.article-comments-signin-btn {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--neon, #00d2ff);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.article-comments-signin-btn:hover,
.article-comments-signin-btn:focus-visible {
    color: #fff;
}

.article-comments-signin-alt {
    margin-left: 0.35em;
    font-size: 0.88em;
    color: rgba(255, 255, 255, 0.45);
}

.article-comments-signin-alt a {
    color: rgba(255, 255, 255, 0.55);
}

.article-comments-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 0;
    padding: 20px 18px 18px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.article-comments-label {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.82);
}

.article-comments-textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 128px;
    margin: 0 0 14px;
    padding: 14px 16px;
    box-sizing: border-box;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 2px;
    resize: vertical;
}

.article-comments-textarea::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.article-comments-textarea:focus {
    outline: none;
    border-color: var(--neon, #00d2ff);
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.4);
}

.article-comments-submit {
    align-self: flex-start;
    width: auto;
    min-width: 10.5rem;
    margin: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 22px;
    border: 1px solid var(--neon, #00d2ff);
    background: var(--neon, #00d2ff);
    color: #000;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.article-comments-submit:hover,
.article-comments-submit:focus-visible {
    background: #fff;
    border-color: #fff;
    color: #000 !important;
}

.article-comments-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.article-comments-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.article-comments-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.article-comments-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.article-comments-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-bottom: 8px;
}

.article-comments-author {
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: 0.04em;
}

.article-comments-time {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

.article-comments-body {
    margin: 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    word-break: break-word;
}

.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.article-body a {
    color: var(--neon, #00d2ff);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    letter-spacing: 0.08em;
    margin: 1.6em 0 0.6em;
    color: #fff;
}

.article-body p {
    margin: 0 0 1em;
}

/* Neon dot bullets — class added in articlesEnhanceContentHtml(); keep selectors in sync with css-safelist.txt */
.article-body ol:not(.article-toc-list) {
    list-style: decimal;
    list-style-position: outside;
    margin: 0 0 1.25em;
    padding-left: 1.6em;
}

.article-body ol:not(.article-toc-list) > li {
    margin-bottom: 0.5em;
    padding-left: 0.15em;
}

.article-body ul.article-bullet-list,
.article-body ul:not(.article-stat-list):not(.article-pros-cons):not(.article-tags-list):not(.related-articles__list),
.article-callout ul {
    list-style: none;
    margin: 0 0 1.25em;
    padding: 0;
}

.article-body ul.article-bullet-list > li,
.article-body ul:not(.article-stat-list):not(.article-pros-cons):not(.article-tags-list):not(.related-articles__list) > li,
.article-callout ul > li {
    position: relative;
    margin-bottom: 0.65em;
    padding-left: 1.35em;
}

.article-body ul.article-bullet-list > li::before,
.article-body ul:not(.article-stat-list):not(.article-pros-cons):not(.article-tags-list):not(.related-articles__list) > li::before,
.article-callout ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon, #00d2ff);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.55);
}

.article-body blockquote {
    margin: 1.25em 0;
    padding: 12px 16px;
    border-left: 3px solid var(--neon, #00d2ff);
    background: rgba(0, 210, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

.article-page-date {
    margin-bottom: 0;
}

body.article-page .venue-page-title {
    margin-top: 40px;
}

.article-meta {
    margin: 12px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.article-meta-line {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.04em;
}

.article-meta-label {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
    margin-right: 8px;
}

.article-meta time {
    color: rgba(255, 255, 255, 0.82);
}

.article-meta-updated::before {
    content: '·';
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.35);
}

.article-meta-updated .article-meta-label {
    margin-left: 0;
}

/* --- Article detail: editorial layout --- */
.article-page-title {
    font-size: clamp(1.35rem, 3.6vw, 2.15rem);
    letter-spacing: 0.04em;
    text-transform: none;
    line-height: 1.2;
}

.article-page-dek {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.08rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.55;
    max-width: 52rem;
    margin-bottom: 8px;
}

.article-body {
    margin-top: 8px;
}

.article-lead {
    font-size: 1.2rem;
    line-height: 1.65;
    color: #fff;
    margin-bottom: 1.1em;
    padding-left: 14px;
    border-left: 3px solid var(--neon, #00d2ff);
}

.article-intro {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2rem;
}

.article-kw {
    color: var(--neon, #00d2ff);
    font-weight: 600;
}

.article-callout {
    margin: 2rem 0 2.5rem;
    padding: 22px 22px 18px;
    border: 1px solid rgba(0, 210, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.02) 55%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.08), inset 0 0 24px rgba(0, 210, 255, 0.04);
}

.article-callout--takeaways h2 {
    margin-top: 0;
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.article-callout ul {
    margin: 12px 0 0;
    padding: 0;
}

.article-toc {
    margin: 0 0 2.75rem;
    padding: 20px 22px;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, 0.02);
}

.article-toc-label {
    margin: 0 0 12px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.article-toc-list {
    margin: 0;
    padding-left: 1.25em;
    display: grid;
    gap: 8px;
}

.article-toc-list a {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.article-toc-list a:hover {
    color: var(--neon, #00d2ff);
    border-bottom-color: rgba(0, 210, 255, 0.45);
}

.article-section-title {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: clamp(1rem, 2.8vw, 1.35rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    scroll-margin-top: calc(var(--djc-header-h, 80px) + 16px);
}

.article-body > .article-section-title:first-child,
.article-callout + .article-toc + h2.article-section-title,
.article-toc + h2.article-section-title {
    border-top: none;
    padding-top: 0;
}

.article-subhead {
    font-size: clamp(0.82rem, 2vw, 1rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 210, 255, 0.92);
    margin: 1.75em 0 0.65em;
}

.article-stat-list {
    list-style: none;
    margin: 1.25em 0 1.75em;
    padding: 0;
    display: grid;
    gap: 10px;
}

.article-stat-list li {
    padding: 14px 16px;
    border: 1px solid rgba(0, 210, 255, 0.18);
    background: rgba(0, 210, 255, 0.04);
    border-left: 3px solid var(--neon, #00d2ff);
}

.article-pros-cons {
    list-style: none;
    padding: 0;
    margin: 1em 0 1.5em;
}

.article-pros-cons li {
    position: relative;
    padding: 10px 14px 10px 2rem;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid #161616;
    list-style: none;
}

.article-pros-cons li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 1.05em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon, #00d2ff);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.55);
}

.article-cta {
    margin: 2rem 0;
    padding: 18px 20px;
    text-align: center;
    border: 1px solid rgba(0, 210, 255, 0.35);
    background: rgba(0, 210, 255, 0.06);
}

.article-cta--primary {
    background: linear-gradient(180deg, rgba(0, 210, 255, 0.14) 0%, rgba(0, 210, 255, 0.04) 100%);
    box-shadow: 0 0 28px rgba(0, 210, 255, 0.12);
}

.article-cta a,
.article-cta--primary a {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--neon, #00d2ff);
}

.article-cta a:hover {
    color: #fff;
}

/* Article FAQ — same clickable-bar accordion as homepage FAQ */
.article-page .article-faq {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 210, 255, 0.22);
    background-color: #191919;
}

.article-page .article-faq-title {
    margin: 0 0 1.75rem;
    padding: 0 0 1rem;
    border: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.18);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.article-page .article-faq .home-faq-list {
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 8, 14, 0.65);
    box-shadow: 0 0 48px rgba(0, 210, 255, 0.06);
}

.article-page .article-faq .home-faq-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    background: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.article-page .article-faq .home-faq-item:last-child {
    border-bottom: none;
}

.article-page .article-faq .home-faq-item:hover {
    background: rgba(0, 210, 255, 0.04);
}

.article-page .article-faq .home-faq-item[open] {
    background: linear-gradient(90deg, rgba(0, 210, 255, 0.12) 0%, rgba(0, 210, 255, 0.03) 28%, transparent 100%);
    box-shadow: inset 3px 0 0 var(--neon, #00d2ff);
}

.article-page .article-faq .home-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem clamp(1rem, 3vw, 1.75rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.article-page .article-faq .home-faq-question::-webkit-details-marker {
    display: none;
}

.article-page .article-faq .home-faq-question-text {
    flex: 1;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.72rem, 2vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #f4f4f4;
    text-transform: none;
    transition: color 0.25s ease;
}

.article-page .article-faq .home-faq-item[open] .home-faq-question-text {
    color: var(--neon, #00d2ff);
}

.article-page .article-faq .home-faq-toggle {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.article-page .article-faq .home-faq-toggle::before,
.article-page .article-faq .home-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--neon, #00d2ff);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.article-page .article-faq .home-faq-toggle::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.article-page .article-faq .home-faq-toggle::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.article-page .article-faq .home-faq-item[open] .home-faq-toggle::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

.article-page .article-faq .home-faq-answer {
    border-top: 1px solid rgba(0, 210, 255, 0.1);
    padding: 0 clamp(1rem, 3vw, 1.75rem) 1.35rem;
}

.article-page .article-faq .home-faq-answer p {
    margin: 1rem 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.02em;
}

.article-page .article-faq .home-faq-answer p:last-child {
    margin-bottom: 0;
}

.article-page .article-faq .home-faq-answer a {
    color: var(--neon, #00d2ff);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-page .article-faq .home-faq-answer a:hover,
.article-page .article-faq .home-faq-answer a:focus-visible {
    color: #fff !important;
}

.article-card-excerpt {
    margin-left: 0 !important;
    padding: 0 !important;
}

@keyframes djTodayOuterPulse {
    0%,
    100% {
        border-width: 1.5px;
        border-color: rgba(200, 45, 45, 0.55);
        box-shadow:
            0 0 10px rgba(255, 55, 55, 0.42),
            0 0 18px rgba(255, 0, 0, 0.2),
            inset 0 0 0 1px rgba(255, 60, 60, 0.22);
    }
    50% {
        border-width: 2.5px;
        border-color: rgba(255, 55, 55, 1);
        box-shadow:
            0 0 16px rgba(255, 55, 55, 0.58),
            0 0 28px rgba(255, 0, 0, 0.28),
            0 0 0 12px rgba(255, 0, 0, 0),
            inset 0 0 0 1px rgba(255, 80, 80, 0.5);
    }
}

@keyframes djTodayRingThrob {
    0%,
    100% {
        opacity: 0.4;
        border-width: 1px;
        border-color: rgba(255, 50, 50, 0.38);
        box-shadow:
            0 0 6px rgba(255, 0, 0, 0.3),
            0 0 12px rgba(255, 0, 0, 0.15);
    }
    50% {
        opacity: 0.78;
        border-width: 2.5px;
        border-color: rgba(255, 70, 70, 0.95);
        box-shadow:
            0 0 14px rgba(255, 0, 0, 0.55),
            0 0 26px rgba(255, 0, 0, 0.32);
    }
}

@media (max-width: 768px) {
    .article-lead {
        font-size: 1.08rem;
    }

    .article-callout,
    .article-toc {
        padding: 16px;
    }

    .article-page .article-faq .home-faq-question {
        padding: 1rem 16px;
        min-height: var(--m-touch, 44px);
    }

    .article-page .article-faq .home-faq-answer {
        padding: 0 16px 1.15rem;
    }
}
/* DJ playing today — throbbing red pulse (homepage grid + anywhere) */
#djGridWrap.has-live-today-grid,
#djGridWrap.has-live-today-grid #djGrid {
    overflow: visible;
}

#djGrid a.dj-card.playing-today,
a.dj-card.playing-today,
.dj-card.playing-today {
    position: relative !important;
    z-index: 10;
    overflow: visible !important;
    border-style: solid !important;
    border-width: 2px;
    border-color: rgba(230, 55, 55, 0.78);
    background-color: rgba(255, 0, 0, 0.04) !important;
    animation: djTodayOuterPulse 2.1s ease-in-out infinite;
}

.dj-card-slot:has(.dj-card.playing-today),
#djGrid .dj-card-slot:has(.playing-today) {
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    #djGrid a.dj-card.playing-today,
    a.dj-card.playing-today,
    .dj-card.playing-today {
        animation: none;
        border-width: 2px;
        border-color: rgba(255, 60, 60, 0.85);
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.28);
    }
}

.favorites-section {
    padding: 40px 0 !important;
    background: #191919 !important;
    background-color: #191919 !important;
} 

.djc-media-lightbox__nav--next {
    display: none !important;
}

.djc-media-lightbox__nav--prev {
    display: none !important;
}
#stickySearchRow,
.sticky-search-row {
    background: var(--bg) !important;
    background-color: var(--bg) !important;
}
#stickySearchRow:not([hidden]),
.sticky-search-row:not([hidden]) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 210, 255, 0.1);
}
.directory-search-row,
.sticky-search-container {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

#stickySearchRow .sticky-search-input,
.sticky-search-row .sticky-search-input,
.sticky-search-container .sticky-search-input {
    background: #000 !important;
    background-color: #000 !important;
}

.sticky-search-input {
    background-color: #000 !important;
}
#headerArtistSearch {
    background: #000 !important;
    background-color: #000 !important;
}
body.home-hero.home-nav-is-pinned:has(#stickySearchRow:not([hidden])) .venue-breadcrumb,
body.home-hero.home-nav-is-pinned:has(#stickySearchRow:not([hidden])) .map-page-breadcrumb,
body.home-hero.home-nav-is-pinned:has(#stickySearchRow:not([hidden])) .calendar-page-breadcrumb {
    margin-top: 15px;
}
.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Article share + entity tags (footer of .article-body) */
.article-body .article-share {
    margin-top: 2.5rem;
    padding: 28px 24px 18px;
    box-shadow: inset 0 1px 0 rgba(0, 210, 255, 0.2);
}

.article-share-heading,
.article-tags-heading {
    margin: 0 0 1.1rem;
    padding: 0;
    border: none;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.article-share-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.article-body .article-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid #333;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: 1;
}

.article-body .article-share-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.article-body .article-share-icon:hover,
.article-body .article-share-icon:focus-visible {
    color: var(--neon, #00d2ff) !important;
    border-color: var(--neon, #00d2ff);
    background: rgba(0, 210, 255, 0.08);
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.2);
}

.article-body .article-share-icon--x:hover,
.article-body .article-share-icon--x:focus-visible {
    color: #fff !important;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}

.article-body .article-share-icon--facebook:hover,
.article-body .article-share-icon--facebook:focus-visible {
    color: #8ab4f8 !important;
    border-color: #8ab4f8;
    background: rgba(138, 180, 248, 0.1);
}

.article-body .article-share-icon--linkedin:hover,
.article-body .article-share-icon--linkedin:focus-visible {
    color: #70b5f9 !important;
    border-color: #70b5f9;
    background: rgba(112, 181, 249, 0.1);
}

.article-body .article-share-icon--whatsapp:hover,
.article-body .article-share-icon--whatsapp:focus-visible {
    color: #25d366 !important;
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.1);
}

.article-body .article-share-icon--reddit:hover,
.article-body .article-share-icon--reddit:focus-visible {
    color: #ff4500 !important;
    border-color: #ff4500;
    background: rgba(255, 69, 0, 0.1);
}

.article-body .article-share-icon--telegram:hover,
.article-body .article-share-icon--telegram:focus-visible {
    color: #2aabee !important;
    border-color: #2aabee;
    background: rgba(42, 171, 238, 0.1);
}

.article-body .article-share-icon--pinterest:hover,
.article-body .article-share-icon--pinterest:focus-visible {
    color: #e60023 !important;
    border-color: #e60023;
    background: rgba(230, 0, 35, 0.1);
}

.article-body .article-share-icon--email:hover,
.article-body .article-share-icon--email:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.06);
}

.article-body .article-share-icon.is-copied {
    color: #0f0 !important;
    border-color: #0f0;
    background: rgba(0, 255, 0, 0.08);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.25);
}

.article-body .article-tags--footer {
    margin-top: 1.25rem;
    margin-bottom: 0;
    padding: 0 24px 30px;
    border-top: none;
    box-shadow: none;
}

.article-tags-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-body .article-tags-list > li,
.article-body .article-tags__item {
    position: static;
    margin: 0;
    padding: 0;
}

.article-body .article-tags-list > li::before,
.article-body .article-tags__item::before {
    content: none;
    display: none;
}

.article-body .article-tag-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.58rem, 1.4vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.article-body .article-tag-pill:hover,
.article-body .article-tag-pill:focus-visible {
    color: var(--neon, #00d2ff) !important;
    border-color: var(--neon, #00d2ff);
    background: rgba(0, 210, 255, 0.08);
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 16px rgba(0, 210, 255, 0.18);
}

/* Related articles (city, venue, article pages) */
.related-articles {
    margin-top: 2.5rem;
    padding: 28px 24px 30px;
    box-shadow: inset 0 1px 0 rgba(0, 210, 255, 0.2);
}

.related-articles__title {
    margin: 0 0 1.1rem;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.72rem, 1.8vw, 0.82rem);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.related-articles__list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.related-articles__item::before,
.related-articles__item::after {
    content: none !important;
    display: none !important;
}

.related-articles__link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.related-articles__link:hover,
.related-articles__link:focus-visible {
    color: var(--neon, #00d2ff) !important;
    border-color: rgba(0, 210, 255, 0.45);
    background: rgba(0, 210, 255, 0.06);
    outline: none;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(0, 210, 255, 0.12);
}

.related-articles__link-title {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.68rem, 1.6vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.related-articles__date {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.82rem, 1.8vw, 0.92rem);
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.related-articles__link:hover .related-articles__date,
.related-articles__link:focus-visible .related-articles__date {
    color: rgba(255, 255, 255, 0.62);
}

.related-articles__more {
    margin: 1rem 0 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(0.62rem, 1.4vw, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.related-articles__more a {
    color: var(--neon, #00d2ff);
    text-decoration: none;
}

.related-articles__more a:hover,
.related-articles__more a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
body {
    background-color: #191919;
}
body.home-hero.articles-directory-page .articles-directory-dek {
    max-width: 100%;
}
.artist-alert-cta__btn { background: #000 !important; color: #00d2ff !important; font-family: 'Orbitron', sans-serif !important; font-size: 9px !important; letter-spacing: 2px; color: #00d2ff !important; border: 1px solid #00d2ff !important; background: transparent !important; padding: 10px 25px !important; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; outline: none; }

.artist-alert-cta__btn:hover { background: #00d2ff !important; color: #000 !important; box-shadow: 0 0 15px rgba(0, 210, 255, 0.4); }

.btn-access newsletter-modal__submit{
    background: #00d2ff !important; color: #000 !important; 
}
#stickySearchRow:not([hidden]),
.sticky-search-row:not([hidden]) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 210, 255, 0.1);
}
.page-seo-intro {
    max-width: 100% !important;
}
#djcMediaLightbox .djc-media-lightbox__close {
    right: -40px !important;    
}
/* In-page <header> landmarks must not inherit site chrome */
header:not(.main-header) {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}
/* 4. The "Stuck" State (Two Rows) */
header.main-header.nav-stuck .nav-search-row {
    height: 60px; /* Adjust based on your preferred large search size */
    opacity: 1;
    padding-bottom: 10px;
}
header.main-header.nav-stuck .nav-search-row #stickySearchInput {
    width: 100%;
    max-width: 800px;
    height: 40px;
    background: #111;
    border: 1px solid var(--neon);
    color: #fff;
    padding: 0 15px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
}
/* 5. Hide the original small search when stuck */
body.is-scrolled #homeArtistSearchWrap {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: 0.3s;
}
.search-page-main {
    margin: -140px auto !important;
}

/* DJ card hover — muted looping music video replaces photo (desktop hover) */
.dj-card.is-video-preview .card-image > img {
    opacity: 0;
}

.card-preview-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    background: #000;
}

.card-preview-video.is-active {
    opacity: 1;
}

.card-preview-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body.venue-page .venue-page-main,
body.article-page .venue-page-main,
body.show-page .venue-page-main {
    padding: calc(var(--djc-header-h) + 50px) 40px 80px !important;
}

body.home-hero.city-page .venue-page-main,
body.city-page .venue-page-main,
body.city-page #main-content.venue-page-main,
body.home-hero.venue-page .venue-page-main,
body.venue-page .venue-page-main,
body.venue-page #main-content.venue-page-main {
    padding: 20px 40px 80px !important;
    margin-top: 0 !important;
}

body.city-page .venue-page-wrap,
body.venue-page .venue-page-wrap {
    margin-top: 0 !important;
}

body.home-hero .home-view-panels {
    margin-top: 15px !important;
}

body.home-hero #djGridWrap {
    margin-top: 5px;
}

.favorites-section {
    padding: 0 0 !important;
}

body.home-hero.articles-directory-page .articles-directory-intro {
    border-bottom: none !important;
}

/* Genres directory (/genres) — hub cards with intro dek below each link */
body.home-hero.genres-directory-page .genres-directory-list {
    gap: 14px;
}

.genres-directory-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.genres-directory-item:hover {
    border-color: rgba(0, 210, 255, 0.45);
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.08);
}

.genres-directory-item .genres-directory-link {
    border: none;
    background: transparent;
    padding-bottom: 10px;
}

.genres-directory-item .genres-directory-link:hover {
    border-color: transparent;
}

.genres-directory-intro {
    margin: 0;
    padding: 0 20px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.58);
}

/* Genre tag hubs — /tag/{genre}/ */
body.home-hero.calendar-page.tag-genre-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.home-hero.calendar-page.tag-genre-page .main-footer {
    flex-shrink: 0;
    margin-top: auto;
}

body.home-hero.calendar-page.tag-genre-page #main-content .tag-genre-head,
body.home-hero.calendar-page.tag-genre-page #main-content .tag-genre-siblings,
body.home-hero.calendar-page.tag-genre-page #main-content .tag-genre-section,
body.home-hero.calendar-page.tag-genre-page #main-content .genre-hub-faq,
body.home-hero.calendar-page.tag-genre-page #main-content .tag-genre-foot {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

body.calendar-page.tag-genre-page .calendar-page-head.tag-genre-head {
    text-align: left;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.12);
}

body.calendar-page.tag-genre-page .tag-genre-intro {
    margin: 0 0 18px;
    max-width: 48rem;
    text-align: left;
}

.tag-genre-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

.tag-genre-stat {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid rgba(0, 210, 255, 0.28);
    background: rgba(0, 210, 255, 0.06);
    font-family: var(--font-head);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

body.calendar-page.tag-genre-page .tag-genre-quicklinks,
body.calendar-page.tag-genre-page .tag-genre-foot {
    display: flex !important;
}

.tag-genre-siblings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
}

.tag-genre-sibling {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--font-head);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.tag-genre-sibling:hover,
.tag-genre-sibling:focus-visible {
    border-color: rgba(0, 210, 255, 0.5);
    color: var(--neon);
}

.tag-genre-sibling.is-current {
    border-color: rgba(0, 210, 255, 0.45);
    background: rgba(0, 210, 255, 0.1);
    color: var(--neon);
}

.tag-genre-section {
    margin-bottom: 32px;
    padding: 22px 20px 24px;
    border: 1px solid rgba(0, 210, 255, 0.18);
    background: transparent;
}

.tag-genre-section__title {
    font-family: var(--font-head);
    font-size: clamp(0.68rem, 1.8vw, 0.8rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--neon);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.14);
}

#genre-artists-heading,
#genre-shows-heading {
    margin-left: 10px;
}

#genre-shows-heading {
    font-size: 1.3rem;
}

body.calendar-page.tag-genre-page .calendar-crawl-day {
    margin-left: 10px;
}

body.calendar-page.tag-genre-page .genre-artists-directory,
body.calendar-page.tag-genre-page .tag-genre-shows {
    border: none;
}

body.calendar-page.tag-genre-page .genre-artists-directory .tag-genre-section__title,
body.calendar-page.tag-genre-page .tag-genre-shows .tag-genre-section__title {
    border-bottom: none;
    padding-bottom: 0;
}

body.calendar-page.tag-genre-page .genre-artists-grid .dj-card {
    border: none;
}

body.calendar-page.tag-genre-page .tag-genre-shows .calendar-crawl-day__item {
    border-bottom: none;
}

.tag-genre-articles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.tag-genre-article-card {
    margin: 0;
    border: 1px solid #222;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s ease;
}

.tag-genre-article-card__title {
    margin: 0;
    font: inherit;
}

.tag-genre-article-card a {
    display: block;
    padding: 14px 16px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
}

.tag-genre-article-card:hover {
    border-color: rgba(0, 210, 255, 0.45);
}

.tag-genre-article-card a:hover,
.tag-genre-article-card a:focus-visible {
    color: var(--neon) !important;
}

body.calendar-page.tag-genre-page .tag-genre-shows .calendar-crawl {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

body.calendar-page.tag-genre-page .calendar-crawl-day__title {
    font-size: clamp(0.62rem, 1.6vw, 0.72rem);
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 10px;
}

body.calendar-page.tag-genre-page .calendar-crawl-day__item {
    padding: 10px 0;
}

body.calendar-page.tag-genre-page section {
    background: transparent;
}

body.calendar-page.tag-genre-page .genre-hub-faq {
    margin-top: 8px;
    padding: 22px 20px;
    border: 1px solid #1a1a1a;
    background: transparent;
}

body.calendar-page.tag-genre-page .genre-hub-faq .calendar-crawl-day__title {
    color: var(--neon);
    font-size: clamp(0.68rem, 1.8vw, 0.8rem);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.14);
}

body.calendar-page.tag-genre-page .genre-artists-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 0;
}

body.calendar-page.tag-genre-page .genre-artists-grid .dj-card-slot {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.calendar-page.tag-genre-page .genre-artists-grid .dj-card {
    min-height: 300px;
    opacity: 1;
    transform: none;
    cursor: pointer;
}

body.calendar-page.tag-genre-page .genre-artists-grid .dj-card:hover {
    transform: translateY(-6px);
}

body.calendar-page.tag-genre-page .genre-artists-grid .card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #0a0a0a;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #666;
    box-sizing: border-box;
}

body.calendar-page.tag-genre-page .genre-artists-grid .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.calendar-page.tag-genre-page .genre-artists-grid .rank-badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 0.68rem;
}

body.calendar-page.tag-genre-page .genre-artists-grid .card-info {
    min-height: 4.2rem;
    padding: 8px 10px 10px;
    box-sizing: border-box;
}

body.calendar-page.tag-genre-page .genre-artists-grid .dj-card-name-row {
    min-height: 1.5em;
    margin-bottom: 6px;
    gap: 6px;
}

body.calendar-page.tag-genre-page .genre-artists-grid .dj-card-name {
    font-size: clamp(0.68rem, 1.6vw, 0.78rem);
    letter-spacing: 1px;
    line-height: 1.3;
}

body.calendar-page.tag-genre-page .genre-artists-grid .tour-info {
    font-size: clamp(0.55rem, 1.3vw, 0.65rem);
    letter-spacing: 0.05em;
    line-height: 1.35;
}

body.calendar-page.tag-genre-page .genre-artists-directory {
    margin-bottom: 32px;
}

body.calendar-page.tag-genre-page .calendar-crawl-day__item time.calendar-crawl-day__date {
    font-size: 1rem;
    color: var(--neon);
}

@media (max-width: 900px) {
    body.calendar-page.tag-genre-page .genre-artists-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .tag-genre-section {
        padding: 18px 14px 20px;
    }
}

@media (max-width: 520px) {
    body.calendar-page.tag-genre-page .genre-artists-grid {
        grid-template-columns: 1fr;
    }
}

body.calendar-page.tag-genre-page .genre-artists-grid .card-image .waveform-canvas {
    height: 24px;
}

/* Artist page — multi-track iTunes preview player */
body.artist-page .djc-audio-player {
    margin: 28px 0 36px;
}

body.artist-page .djc-audio-player__heading {
    margin-bottom: 14px;
}

body.artist-page .djc-audio-player__status {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
}

body.artist-page .djc-audio-player__panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    padding: 14px 16px 12px;
    box-sizing: border-box;
}

body.artist-page .djc-audio-player__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

body.artist-page .djc-audio-player__source {
    margin: 4px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}

body.artist-page .djc-audio-player__count {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 8px;
}

body.artist-page .djc-audio-player__now {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "transport display"
        "progress progress"
        "eq eq";
    gap: 10px 14px;
    align-items: center;
}

body.artist-page .djc-audio-player__transport {
    grid-area: transport;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.artist-page .djc-audio-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

body.artist-page .djc-audio-player__btn--play {
    width: 40px;
    height: 40px;
    border-color: var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    font-size: 0.75rem;
}

body.artist-page .djc-audio-player__btn--play.is-playing {
    background: var(--neon, #00d2ff);
    color: #000;
}

body.artist-page .djc-audio-player__btn:hover,
body.artist-page .djc-audio-player__btn:focus-visible {
    border-color: var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    outline: none;
}

body.artist-page .djc-audio-player__btn--play:hover,
body.artist-page .djc-audio-player__btn--play:focus-visible {
    background: rgba(0, 210, 255, 0.12);
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__btn--play.is-playing:hover,
body.artist-page .djc-audio-player__btn--play.is-playing:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
}

body.artist-page .djc-audio-player__track-display {
    grid-area: display;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

body.artist-page .djc-audio-player__titles {
    min-width: 0;
    flex: 1;
}

body.artist-page .djc-audio-player__title {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__album {
    margin: 2px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__time {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

body.artist-page .djc-audio-player__progress {
    grid-area: progress;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

body.artist-page .djc-audio-player__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--neon, #00d2ff);
    transition: width 0.2s linear;
}

body.artist-page .djc-audio-player__eq {
    grid-area: eq;
    width: 100%;
    height: 56px;
    opacity: 0;
    pointer-events: none;
}

body.artist-page .djc-audio-player__tracks {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.artist-page .djc-audio-player__track-item {
    margin: 0;
    padding: 0;
}

body.artist-page .djc-audio-player__track-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 2px solid transparent;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

body.artist-page .djc-audio-player__track-btn.is-active {
    background: rgba(0, 210, 255, 0.08);
    border-left-color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-btn:hover,
body.artist-page .djc-audio-player__track-btn:focus-visible {
    background: rgba(0, 210, 255, 0.06);
    outline: none;
}

body.artist-page .djc-audio-player__track-num {
    flex-shrink: 0;
    width: 16px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
}

body.artist-page .djc-audio-player__track-btn.is-active .djc-audio-player__track-num {
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

body.artist-page .djc-audio-player__track-title {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__track-btn.is-active .djc-audio-player__track-title {
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-album {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__track-dur {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

body.artist-page .djc-audio-player__attrib {
    margin: 10px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
    body.artist-page .djc-audio-player__now {
        grid-template-columns: 1fr;
        grid-template-areas:
            "transport"
            "display"
            "progress"
            "eq";
    }

    body.artist-page .djc-audio-player__transport {
        justify-content: center;
    }

    body.artist-page .djc-audio-player__track-display {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Artist page — multi-track iTunes preview player */
body.artist-page .djc-audio-player {
    margin: 28px 0 36px;
}

body.artist-page .djc-audio-player__heading {
    margin-bottom: 14px;
}

body.artist-page .djc-audio-player__status {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
}

body.artist-page .djc-audio-player__panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    padding: 14px 16px 12px;
    box-sizing: border-box;
}

body.artist-page .djc-audio-player__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

body.artist-page .djc-audio-player__source {
    margin: 4px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}

body.artist-page .djc-audio-player__count {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 8px;
}

body.artist-page .djc-audio-player__now {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "transport display"
        "progress progress"
        "eq eq";
    gap: 10px 14px;
    align-items: center;
}

body.artist-page .djc-audio-player__transport {
    grid-area: transport;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.artist-page .djc-audio-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

body.artist-page .djc-audio-player__btn--play {
    width: 40px;
    height: 40px;
    border-color: var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    font-size: 0.75rem;
}

body.artist-page .djc-audio-player__btn--play.is-playing {
    background: var(--neon, #00d2ff);
    color: #000;
}

body.artist-page .djc-audio-player__btn:hover,
body.artist-page .djc-audio-player__btn:focus-visible {
    border-color: var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    outline: none;
}

body.artist-page .djc-audio-player__btn--play:hover,
body.artist-page .djc-audio-player__btn--play:focus-visible {
    background: rgba(0, 210, 255, 0.12);
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__btn--play.is-playing:hover,
body.artist-page .djc-audio-player__btn--play.is-playing:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
}

body.artist-page .djc-audio-player__track-display {
    grid-area: display;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

body.artist-page .djc-audio-player__titles {
    min-width: 0;
    flex: 1;
}

body.artist-page .djc-audio-player__title {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__album {
    margin: 2px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__time {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

body.artist-page .djc-audio-player__progress {
    grid-area: progress;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

body.artist-page .djc-audio-player__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--neon, #00d2ff);
    transition: width 0.2s linear;
}

body.artist-page .djc-audio-player__eq {
    grid-area: eq;
    width: 100%;
    height: 56px;
    opacity: 0;
    pointer-events: none;
}

body.artist-page .djc-audio-player__tracks {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.artist-page .djc-audio-player__track-item {
    margin: 0;
    padding: 0;
}

body.artist-page .djc-audio-player__track-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 2px solid transparent;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

body.artist-page .djc-audio-player__track-btn.is-active {
    background: rgba(0, 210, 255, 0.08);
    border-left-color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-btn:hover,
body.artist-page .djc-audio-player__track-btn:focus-visible {
    background: rgba(0, 210, 255, 0.06);
    outline: none;
}

body.artist-page .djc-audio-player__track-num {
    flex-shrink: 0;
    width: 16px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
}

body.artist-page .djc-audio-player__track-btn.is-active .djc-audio-player__track-num {
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

body.artist-page .djc-audio-player__track-title {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__track-btn.is-active .djc-audio-player__track-title {
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-album {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__track-dur {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

body.artist-page .djc-audio-player__attrib {
    margin: 10px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
    body.artist-page .djc-audio-player__now {
        grid-template-columns: 1fr;
        grid-template-areas:
            "transport"
            "display"
            "progress"
            "eq";
    }

    body.artist-page .djc-audio-player__transport {
        justify-content: center;
    }

    body.artist-page .djc-audio-player__track-display {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Artist page — multi-track iTunes preview player */
body.artist-page .djc-audio-player {
    margin: 28px 0 36px;
}

body.artist-page .djc-audio-player__heading {
    margin-bottom: 14px;
}

body.artist-page .djc-audio-player__status {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
}

body.artist-page .djc-audio-player__panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    padding: 14px 16px 12px;
    box-sizing: border-box;
}

body.artist-page .djc-audio-player__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

body.artist-page .djc-audio-player__source {
    margin: 4px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}

body.artist-page .djc-audio-player__count {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 8px;
}

body.artist-page .djc-audio-player__now {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "transport display"
        "progress progress"
        "eq eq";
    gap: 10px 14px;
    align-items: center;
}

body.artist-page .djc-audio-player__transport {
    grid-area: transport;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.article-page .related-articles__item,
body.article-page .article-comments-item,
body.article-page .article-faq .home-faq-item,
body.article-page .article-faq .home-faq-answer {
    border-left: 3px solid var(--djc-article-separator) !important;
    border-right-width: 0 !important;
    border-top-width: 0 !important;
    border-bottom: 0 !important;
}

body.artist-page .djc-audio-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

body.artist-page .djc-audio-player__btn--play {
    width: 40px;
    height: 40px;
    border-color: var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    font-size: 0.75rem;
}

body.artist-page .djc-audio-player__btn--play.is-playing {
    background: var(--neon, #00d2ff);
    color: #000;
}

body.artist-page .djc-audio-player__btn:hover,
body.artist-page .djc-audio-player__btn:focus-visible {
    border-color: var(--neon, #00d2ff);
    color: var(--neon, #00d2ff);
    outline: none;
}

body.artist-page .djc-audio-player__btn--play:hover,
body.artist-page .djc-audio-player__btn--play:focus-visible {
    background: rgba(0, 210, 255, 0.12);
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__btn--play.is-playing:hover,
body.artist-page .djc-audio-player__btn--play.is-playing:focus-visible {
    background: var(--neon, #00d2ff);
    color: #000;
}

body.artist-page .djc-audio-player__track-display {
    grid-area: display;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

body.artist-page .djc-audio-player__titles {
    min-width: 0;
    flex: 1;
}

body.artist-page .djc-audio-player__title {
    margin: 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__album {
    margin: 2px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__time {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

body.artist-page .djc-audio-player__progress {
    grid-area: progress;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

body.artist-page .djc-audio-player__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--neon, #00d2ff);
    transition: width 0.2s linear;
}

body.artist-page .djc-audio-player__eq {
    grid-area: eq;
    width: 100%;
    height: 56px;
    opacity: 0;
    pointer-events: none;
}

body.artist-page .djc-audio-player__tracks {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.artist-page .djc-audio-player__track-item {
    margin: 0;
    padding: 0;
}

body.artist-page .djc-audio-player__track-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 2px solid transparent;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

body.artist-page .djc-audio-player__track-btn.is-active {
    background: rgba(0, 210, 255, 0.08);
    border-left-color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-btn:hover,
body.artist-page .djc-audio-player__track-btn:focus-visible {
    background: rgba(0, 210, 255, 0.06);
    outline: none;
}

body.artist-page .djc-audio-player__track-num {
    flex-shrink: 0;
    width: 16px;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
}

body.artist-page .djc-audio-player__track-btn.is-active .djc-audio-player__track-num {
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

body.artist-page .djc-audio-player__track-title {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__track-btn.is-active .djc-audio-player__track-title {
    color: var(--neon, #00d2ff);
}

body.artist-page .djc-audio-player__track-album {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.artist-page .djc-audio-player__track-dur {
    flex-shrink: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}

body.artist-page .djc-audio-player__attrib {
    margin: 10px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
    body.artist-page .djc-audio-player__now {
        grid-template-columns: 1fr;
        grid-template-areas:
            "transport"
            "display"
            "progress"
            "eq";
    }

    body.artist-page .djc-audio-player__transport {
        justify-content: center;
    }

    body.artist-page .djc-audio-player__track-display {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Tour assistant (sitewide chat + voice) */
.djc-tour-agent {
    --djc-agent-neon: #00d2ff;
    --djc-agent-bg: #0a0a0e;
    --djc-agent-line: rgba(255, 255, 255, 0.1);
    --djc-agent-launcher: 48px;
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 100000;
    width: var(--djc-agent-launcher);
    height: var(--djc-agent-launcher);
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    color: #e8e8ec;
    pointer-events: none;
}

.djc-tour-agent.is-open {
    width: min(380px, calc(100vw - 24px));
    height: min(72vh, 640px);
    max-height: min(72vh, 640px);
}

body:has(.leaderboard-bar:not(.is-collapsed)) .djc-tour-agent {
    bottom: max(72px, calc(16px + env(safe-area-inset-bottom)));
}

.djc-tour-agent__launcher {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--djc-agent-launcher);
    height: var(--djc-agent-launcher);
    padding: 0;
    border: 1px solid rgba(0, 210, 255, 0.45);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.22), rgba(0, 0, 0, 0.88));
    color: var(--djc-agent-neon);
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    pointer-events: auto;
}

.djc-tour-agent__launcher:hover,
.djc-tour-agent__launcher:focus-visible {
    border-color: var(--djc-agent-neon);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.25), 0 8px 28px rgba(0, 210, 255, 0.15);
    transform: scale(1.04);
}

.djc-tour-agent__launcher-svg {
    width: 22px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.45));
}

.djc-tour-agent.is-open .djc-tour-agent__launcher {
    border-color: var(--djc-agent-neon);
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.32), rgba(0, 0, 0, 0.92));
}

#favAudioModalDock.djc-tour-agent__launcher {
    position: fixed;
    right: auto;
    bottom: auto;
    width: 48px;
    height: 48px;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
    box-sizing: border-box;
}

#favAudioModalDock[hidden] {
    display: none !important;
}

.djc-tour-agent__panel {
    position: absolute;
    right: 0;
    bottom: calc(var(--djc-agent-launcher) + 12px);
    z-index: 2;
    width: 100%;
    max-height: calc(100% - var(--djc-agent-launcher) - 12px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--djc-agent-line);
    border-radius: 16px;
    background: var(--djc-agent-bg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    pointer-events: auto;
}

.djc-tour-agent__panel[hidden] {
    display: none !important;
}

.djc-tour-agent__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--djc-agent-line);
    flex-shrink: 0;
}

.djc-tour-agent__eyebrow {
    margin: 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.djc-tour-agent__title {
    margin: 4px 0 0;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: var(--djc-agent-neon);
}

.djc-tour-agent__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -8px 0 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    pointer-events: auto;
    touch-action: manipulation;
}

.djc-tour-agent__close:hover,
.djc-tour-agent__close:focus-visible {
    color: #fff;
    background: rgba(0, 210, 255, 0.14);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.25);
}

.djc-tour-agent__close-icon {
    display: block;
    line-height: 1;
    pointer-events: none;
}

.djc-tour-agent__messages {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.djc-tour-agent__msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 92%;
}

.djc-tour-agent__msg--user {
    align-self: flex-end;
}

.djc-tour-agent__msg--assistant {
    align-self: flex-start;
}

.djc-tour-agent__bubble {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.45;
}

.djc-tour-agent__msg--user .djc-tour-agent__bubble {
    background: rgba(0, 210, 255, 0.16);
    border: 1px solid rgba(0, 210, 255, 0.35);
}

.djc-tour-agent__msg--assistant .djc-tour-agent__bubble {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--djc-agent-line);
}

.djc-tour-agent__msg--typing .djc-tour-agent__bubble {
    opacity: 0.7;
    font-style: italic;
}

.djc-tour-agent__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.djc-tour-agent__links a {
    font-size: 0.78rem;
    color: var(--djc-agent-neon);
    text-decoration: none;
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 999px;
    padding: 4px 10px;
}

.djc-tour-agent__links a:hover {
    background: rgba(0, 210, 255, 0.12);
}

.djc-tour-agent__form {
    border-top: 1px solid var(--djc-agent-line);
    padding: 12px 16px 10px;
    pointer-events: auto;
}

.djc-tour-agent__input {
    width: 100%;
    resize: vertical;
    min-height: 52px;
    max-height: 120px;
    border: 1px solid var(--djc-agent-line);
    border-radius: 10px;
    background: #050507;
    color: #fff;
    padding: 10px 12px;
    font: inherit;
}

.djc-tour-agent__input:focus-visible {
    outline: none;
    border-color: rgba(0, 210, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.15);
}

.djc-tour-agent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.djc-tour-agent__mic-status {
    flex: 1 1 100%;
    margin: 0;
    min-height: 1.1em;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(0, 210, 255, 0.85);
}

.djc-tour-agent__mic-status.is-error {
    color: #ff8f8f;
}

.djc-tour-agent__mic,
.djc-tour-agent__send {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: auto;
    touch-action: manipulation;
    min-width: 0 !important;
    -webkit-appearance: none;
    appearance: none;
}

.djc-tour-agent__mic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #ddd;
    border: 1px solid var(--djc-agent-line) !important;
}

.djc-tour-agent__mic.is-listening {
    color: #fff;
    border-color: rgba(255, 80, 80, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.2);
}

.djc-tour-agent__mic.is-unsupported {
    opacity: 0.55;
}

.djc-tour-agent__mic-svg {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.djc-tour-agent__mic.is-listening .djc-tour-agent__mic-svg {
    animation: djc-tour-agent-pulse 1s ease-in-out infinite;
}

@keyframes djc-tour-agent-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.65; }
}

.djc-tour-agent__send {
    padding: 10px 18px;
    background: var(--djc-agent-neon);
    color: #000;
    font-weight: 700;
}

.djc-tour-agent__send:disabled,
.djc-tour-agent__mic:disabled,
.djc-tour-agent__input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.djc-tour-agent__fine {
    margin: 0;
    padding: 0 16px 12px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.35;
}

.djc-tour-agent__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;
}

@media (max-width: 480px) {
    .djc-tour-agent {
        --djc-agent-launcher: 48px;
    }

    .djc-tour-agent.is-open {
        width: min(380px, calc(100vw - 24px));
        height: min(70vh, 560px);
    }
}

/* Artist page article discovery (matches tour dates panel) */
.artist-page .artist-articles {
    margin: 2.5rem 0 1.5rem;
}

.artist-page .artist-articles .section-label.tour-section-label {
    padding: 20px 0;
    border-bottom: 1px solid #111;
    margin-bottom: 0;
}

.artist-page .artist-articles-panel {
    background: #050505;
    border-left: 10px solid #111;
    border-right: 10px solid #111;
    margin-bottom: 0;
}

.artist-page .artist-article-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 30px;
    border-bottom: 1px solid #111;
}

.artist-page .artist-article-row:last-child {
    border-bottom: none;
}

.artist-page .artist-article-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.artist-page .artist-article-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.artist-page .artist-article-kicker {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--neon, #00d2ff);
}

.artist-page .artist-article-title {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.artist-page .artist-article-title:hover,
.artist-page .artist-article-title:focus-visible {
    color: var(--neon, #00d2ff) !important;
    text-decoration: none;
}

.artist-page .artist-article-row--featured .artist-article-title {
    font-size: 1.28rem;
}

.artist-page .artist-article-date {
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.artist-page .artist-article-excerpt {
    margin: 4px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

.artist-page .artist-article-read-btn {
    flex-shrink: 0;
    align-self: center;
    min-width: 96px !important;
    padding: 10px 18px !important;
}

.artist-page .artist-articles-foot {
    margin: 14px 0 0;
}

/* Artist discovery hubs — Genre hubs, Also playing (blue headings, white links) */
.artist-page .entity-link-hub--discovery {
    margin: 2rem 0 1.25rem;
}

.artist-page .entity-link-hub--discovery .entity-link-hub__heading {
    color: var(--neon);
    font-family: var(--font-head, 'Orbitron', sans-serif);
    font-size: clamp(1.2rem, 2.8vw, 1.45rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: none;
    line-height: 1.35;
    padding: 0 0 12px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 210, 255, 0.22);
}

.artist-page .entity-link-hub--discovery .entity-link-hub__links {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.75;
    color: #fff;
    margin: 14px 0 0;
    padding: 0;
}

.artist-page .entity-link-hub--discovery .entity-link-hub__links a {
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.artist-page .entity-link-hub--discovery .entity-link-hub__links a:hover,
.artist-page .entity-link-hub--discovery .entity-link-hub__links a:focus-visible {
    color: #fff !important;
    border-bottom-color: #fff;
    text-decoration: none;
}

.artist-page .artist-also-playing.entity-link-hub--discovery {
    margin: 1.75rem 0 1rem;
}

.artist-page .artist-also-playing__more {
    margin: 10px 0 0;
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.artist-page .artist-also-playing__more a {
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.artist-page .artist-also-playing__more a:hover,
.artist-page .artist-also-playing__more a:focus-visible {
    color: #fff !important;
    border-bottom-color: #fff;
    text-decoration: none;
}

/* Tour cities hub + tour-row city links — bio body font, neon links */
.artist-page .entity-link-hub--tour-cities .entity-link-hub__links {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.8;
    color: #eee;
}

.artist-page .entity-link-hub--tour-cities .entity-link-hub__links a {
    color: var(--neon) !important;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.artist-page .entity-link-hub--tour-cities .entity-link-hub__links a:hover,
.artist-page .entity-link-hub--tour-cities .entity-link-hub__links a:focus-visible {
    color: #fff !important;
    border-bottom-color: #fff;
    text-decoration: none;
}

.artist-page .tour-loc .tour-city-link {
    font-family: var(--font-main, 'Rajdhani', sans-serif);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: capitalize;
    color: var(--neon) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.35);
}

.artist-page .tour-loc .tour-city-link:hover,
.artist-page .tour-loc .tour-city-link:focus-visible {
    color: #fff !important;
    border-bottom-color: #fff;
}

/* Similar artists — iPad (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .artist-page .similar-artists {
        margin: 1.75rem 0 1.25rem;
    }

    .artist-page .similar-artists-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .artist-page .similar-artist-card {
        width: 100%;
        padding: 0.65rem 0.4rem;
    }

    .artist-page .similar-artist-photo {
        width: 100%;
        max-width: 160px;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .artist-page .similar-artist-name {
        font-size: 0.72rem;
    }
}

@media (max-width: 640px) {
    .artist-page .artist-article-row {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 16px;
    }

    .artist-page .artist-article-read-btn {
        align-self: flex-start;
        width: 100%;
        max-width: 220px;
    }
}

/* ── TABLET / iPad BREAKPOINTS ──────────────────────────────────────────────
 *  iPad portrait (768–834px), landscape (835–1024px), and iPad Pro /
 *  large tablet landscape (1025–1200px).
 * ────────────────────────────────────────────────────────────────────────── */

/* Tablet portrait + landscape: 769px–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --tab-pad: 28px;
        --djc-header-h: calc(72px + env(safe-area-inset-top, 0px));
    }

    /* --- Grids: 3 columns on tablet --- */
    #djGrid,
    .dj-grid,
    .city-grid,
    .venue-grid,
    .genre-artists-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px;
    }

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

    /* --- Page padding --- */
    .grid-container,
    #djGridWrap,
    .venue-page-main,
    .directory-page-main,
    body.city-page .venue-page-main,
    body.venue-page .venue-page-main,
    body.article-page .venue-page-main,
    body.articles-index-page .venue-page-main,
    .search-page-main,
    .article-page-wrap,
    .article-body {
        padding-left: var(--tab-pad) !important;
        padding-right: var(--tab-pad) !important;
    }

    .venue-page-wrap,
    .directory-page-wrap {
        max-width: 920px;
    }

    /* --- Header --- */
    .main-header {
        padding: 0 var(--tab-pad);
    }

    body:not(.home-hero) .main-header nav a,
    body:not(.home-hero) .main-header .header-nav a {
        font-size: clamp(0.72rem, 2vw, 0.82rem);
        padding: 8px 10px;
    }

    /* --- Typography: comfortable heading sizes --- */
    .hero-title,
    .home-hero-banner .hero-title {
        font-size: clamp(2rem, 6vw, 3.5rem) !important;
        letter-spacing: clamp(4px, 2vw, 12px) !important;
    }

    .artist-page .hero-name,
    .artist-page .artist-hero-title {
        white-space: nowrap !important;
        font-size: clamp(1.25rem, 4.5vw, 2.75rem) !important;
        letter-spacing: clamp(2px, 0.35vw, 6px) !important;
    }

    .artist-page .artist-hero-content {
        padding: 32px var(--tab-pad) !important;
    }

    .artist-page .hero,
    .artist-page .hero-section {
        height: 52vh !important;
        min-height: 300px !important;
        max-height: 480px;
    }

    /* --- Artist tour table --- */
    .artist-page .tour-container {
        width: calc(100vw - 56px);
        margin-left: calc(50% - 50vw + 28px);
        margin-right: calc(50% - 50vw + 28px);
    }

    .artist-page .tix-btn {
        width: auto !important;
        min-width: 120px !important;
    }

    /* --- Venue / show cards --- */
    .venue-page-wrap {
        max-width: 920px;
    }

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

    /* --- Events calendar --- */
    .events-calendar,
    .tour-map-panel {
        padding-left: var(--tab-pad);
        padding-right: var(--tab-pad);
    }

    .tour-map-canvas,
    .tour-map-canvas--page {
        height: min(56dvh, 520px) !important;
    }

    /* --- Footer --- */
    .main-footer .footer-content,
    .main-footer > .footer-content.footer-content--brand {
        padding-left: var(--tab-pad) !important;
        padding-right: var(--tab-pad) !important;
    }

    .footer-expanded-nav__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 24px;
    }

    /* --- Modals --- */
    .auth-lightbox-panel,
    .account-lightbox-panel {
        max-width: min(92vw, 480px);
    }

    /* --- Touch targets for tablet --- */
    a, button, .pill-btn, .auth-btn, .tix-btn,
    .react-btn, .going-btn, summary {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 210, 255, 0.12);
    }

    /* --- Entity FAQ --- */
    .entity-faq-hub-link-wrap {
        text-align: left;
    }

    /* --- Genres hub --- */
    .genres-directory-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 20px;
    }
}

/* Tablet landscape + small desktop: 1025px–1200px */
@media (min-width: 1025px) and (max-width: 1200px) {
    /* --- Grids: 4 columns on larger screens --- */
    #djGrid,
    .dj-grid,
    .city-grid,
    .venue-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 18px;
    }

    .genre-artists-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .similar-artists-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* --- Comfortable padding --- */
    .venue-page-main,
    .directory-page-main,
    .search-page-main {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .venue-page-wrap,
    .directory-page-wrap {
        max-width: 1100px;
    }

    /* --- Typography --- */
    .artist-page .hero-name {
        font-size: clamp(1.5rem, 5vw, 4rem) !important;
    }
}

main .artist-page .content-inset, .content-inset {
    padding: 0 !important;
}
main#main-content.content-inset {
    padding-top: 0 !important;
}
.seo-crosslinks {
    font-weight: normal !important;  /* or just remove the font-weight line entirely */
    font-size: 12px !important;
}
.venues-page .seo-crosslinks,
body[class*="venue"] .seo-crosslinks {
    font-weight: normal;
    font-size: 12px;
}