<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Punks On Paper - North Carolina Punk Archive 1978-2022</title>
    <meta name="description"
        content="Searchable archive of North Carolina punk show flyers, venues, and band history from 1978 to 2022.">
    <link rel="stylesheet" href="/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Rubik+Mono+One&display=swap"
        rel="stylesheet">
    <style>
        html,
        body {
            font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        .font-punk {
            font-family: 'Rubik Mono One', 'Oswald', sans-serif;
            letter-spacing: 0.05em;
        }

        .font-punk-header {
            font-family: 'Oswald', sans-serif;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
    </style>
</head>

    <body class="bg-white min-h-screen flex flex-col">
        <header class="py-6 px-6 border-b-4 border-black bg-white">
    <div class="max-w-7xl mx-auto flex items-center justify-between">
        <div class="flex flex-col items-start gap-0">
            <h1 class="text-4xl md:text-5xl font-black leading-none tracking-tighter mb-2 uppercase">
                <a href="/">PUNKS ON PAPER</a>
            </h1>
            <p class="font-mono text-xs md:text-sm uppercase tracking-widest text-neutral-600 mt-1">North Carolina Punk
                Archive 1978-2022
            </p>
        </div>

        <!-- Hamburger Button -->
        <button id="hamburger-button"
            class="p-2 border-2 border-black bg-white hover:bg-black hover:text-white transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none cursor-pointer z-[60]"
            aria-label="Toggle Menu" aria-expanded="false">
            <svg id="hamburger-icon" class="w-6 h-6 stroke-current" fill="none" stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 6h16M4 12h16M4 18h16">
                </path>
            </svg>
            <svg id="close-icon" class="w-6 h-6 stroke-current hidden" fill="none" stroke="currentColor"
                viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>
    </div>

    <!-- Menu Overlay -->
    <div id="menu-overlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[55] hidden"></div>

    <!-- Menu Panel -->
    <div id="menu-panel"
        class="fixed top-0 right-0 w-full md:w-[32rem] h-full bg-white border-l-4 border-black z-[61] transform translate-x-full transition-transform duration-300 overflow-y-auto bg-[radial-gradient(#e5e5e5_1px,transparent_1px)] [background-size:16px_16px]">

        <!-- Close Button (Fixed inside panel) -->
        <div class="absolute top-6 right-6 z-50">
            <button id="sidebar-close-btn"
                class="p-2 border-2 border-black bg-white hover:bg-black hover:text-white transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:translate-x-1 active:translate-y-1 active:shadow-none cursor-pointer"
                aria-label="Close Menu">
                <svg class="w-6 h-6 stroke-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12">
                    </path>
                </svg>
            </button>
        </div>

        <div class="p-8 pt-24">
            <nav class="flex flex-col gap-6">
                <a href="/"
                    class="text-4xl font-black italic uppercase tracking-tighter hover:text-red-600 transition-colors">Home</a>
                <a href="/about/"
                    class="text-4xl font-black italic uppercase tracking-tighter hover:text-red-600 transition-colors">About</a>
                <a href="/contact/"
                    class="text-4xl font-black italic uppercase tracking-tighter hover:text-red-600 transition-colors">Contact</a>
            </nav>

            <div class="mt-8">
                <h4 class="font-mono text-xs font-black uppercase tracking-[0.2em] mb-4 text-neutral-400">Search the
                    Archive</h4>
                
    <!-- Search Section -->
    <section class="bg-transparent js-search-instance" data-context="sidebar">
        <div class="w-full px-4 py-8 border-b-4 border-black">
            <div class="relative group js-search-box-wrapper">
                <!-- Shadow element -->
                <div class="absolute inset-0 bg-black translate-x-2 translate-y-2"></div>

                <div
                    class="relative flex items-center border-4 border-black bg-white transition-transform focus-within:-translate-x-1 focus-within:-translate-y-1">
                    <div class="pl-4 md:pl-6 text-black shrink-0">
                        <svg class="w-5 h-5 md:w-6 md:h-6 stroke-current" stroke-width="3" fill="none"
                            viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="8" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="m21 21-4.35-4.35" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <input type="text" placeholder="SEARCH ARCHIVE..."
                        class="js-search-input flex-1 min-w-0 pl-4 pr-3 md:px-6 py-3 md:py-4 text-base md:text-xl bg-transparent focus:outline-none !outline-none focus:ring-0 font-black text-black uppercase placeholder:text-neutral-400 placeholder:font-bold placeholder:italic font-mono truncate caret-black">
                    <button type="button"
                        class="js-search-clear absolute right-24 md:right-32 top-1/2 -translate-y-1/2 w-6 h-6 md:w-8 md:h-8 flex items-center justify-center bg-black text-white hover:bg-neutral-700 cursor-pointer opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out z-10"
                        aria-label="Clear search">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                    <button
                        class="js-search-button m-0.5 px-5 md:px-8 py-3 md:py-4 bg-black text-white hover:bg-neutral-900 transition-colors text-lg font-black uppercase tracking-tighter font-mono shrink-0">
                        <span>GO!</span>
                    </button>
                </div>

                <div
                    class="js-search-results absolute top-full left-0 right-0 mt-2 hidden z-10 bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] max-h-[60vh] overflow-y-auto transition-all duration-300 opacity-0 -translate-y-2 origin-top">
                    <!-- Loader Section -->
                    <div class="js-search-loader hidden flex flex-col items-center justify-center gap-3 py-8">
                        <div class="relative flex items-center justify-center w-10 h-10">
                            <div
                                class="absolute inset-0 translate-x-[2px] translate-y-[2px] rounded-full bg-black/20 w-10 h-10">
                            </div>
                            <div
                                class="relative h-10 w-10 animate-spin rounded-full border-4 border-black border-dashed bg-white z-10 box-border">
                            </div>
                            <div class="absolute h-3 w-3 bg-black rounded-sm z-20"></div>
                        </div>
                        <span
                            class="font-mono text-[10px] font-black uppercase tracking-[0.2em] animate-pulse">Searching</span>
                    </div>
                    <!-- Band Suggestions Section -->
                    <div class="js-band-suggestions hidden">
                        <div class="px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Bands</h4>
                        </div>
                        <div class="suggestions-list"></div>
                    </div>

                    <!-- City Suggestions Section -->
                    <div class="js-city-suggestions hidden">
                        <div class="px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Cities</h4>
                        </div>
                        <div class="suggestions-list"></div>
                    </div>

                    <!-- Venue Suggestions Section -->
                    <div class="js-venue-suggestions hidden">
                        <div class="px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Venues</h4>
                        </div>
                        <div class="suggestions-list"></div>
                    </div>

                    <!-- Show Results Section -->
                    <div class="js-show-results border-b-2 border-black last:border-b-0">
                        <div class="js-shows-header px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Shows</h4>
                        </div>
                        <div class="js-results-container grid gap-4 p-4 grid-cols-2 lg:grid-cols-3"></div>
                    </div>
                    <div class="js-load-more text-center p-4 hidden border-t-2 border-black">
                        <button
                            class="px-6 py-3 bg-neutral-200 hover:bg-neutral-400 transition-colors font-black uppercase text-sm w-full">Load
                            More</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
            </div>
        </div>
    </div>
</header>

            
    <!-- Search Section -->
    <section class="bg-white border-b-4 border-black py-8 relative z-40 js-search-instance" data-context="main">
        <div class="container mx-auto px-4 max-w-3xl">
            <div class="relative group js-search-box-wrapper">
                <!-- Shadow element -->
                <div class="absolute inset-0 bg-black translate-x-2 translate-y-2"></div>

                <div
                    class="relative flex items-center border-4 border-black bg-white transition-transform focus-within:-translate-x-1 focus-within:-translate-y-1">
                    <div class="pl-4 md:pl-6 text-black shrink-0">
                        <svg class="w-5 h-5 md:w-6 md:h-6 stroke-current" stroke-width="3" fill="none"
                            viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="8" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="m21 21-4.35-4.35" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <input type="text" placeholder="SEARCH ARCHIVE..."
                        class="js-search-input flex-1 min-w-0 pl-4 pr-3 md:px-6 py-3 md:py-4 text-base md:text-xl bg-transparent focus:outline-none !outline-none focus:ring-0 font-black text-black uppercase placeholder:text-neutral-400 placeholder:font-bold placeholder:italic font-mono truncate caret-black">
                    <button type="button"
                        class="js-search-clear absolute right-24 md:right-32 top-1/2 -translate-y-1/2 w-6 h-6 md:w-8 md:h-8 flex items-center justify-center bg-black text-white hover:bg-neutral-700 cursor-pointer opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out z-10"
                        aria-label="Clear search">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                    <button
                        class="js-search-button m-0.5 px-5 md:px-8 py-3 md:py-4 bg-black text-white hover:bg-neutral-900 transition-colors text-lg font-black uppercase tracking-tighter font-mono shrink-0">
                        <span>GO!</span>
                    </button>
                </div>

                <div
                    class="js-search-results absolute top-full left-0 right-0 mt-2 hidden z-10 bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] max-h-[60vh] overflow-y-auto transition-all duration-300 opacity-0 -translate-y-2 origin-top">
                    <!-- Loader Section -->
                    <div class="js-search-loader hidden flex flex-col items-center justify-center gap-3 py-8">
                        <div class="relative flex items-center justify-center w-10 h-10">
                            <div
                                class="absolute inset-0 translate-x-[2px] translate-y-[2px] rounded-full bg-black/20 w-10 h-10">
                            </div>
                            <div
                                class="relative h-10 w-10 animate-spin rounded-full border-4 border-black border-dashed bg-white z-10 box-border">
                            </div>
                            <div class="absolute h-3 w-3 bg-black rounded-sm z-20"></div>
                        </div>
                        <span
                            class="font-mono text-[10px] font-black uppercase tracking-[0.2em] animate-pulse">Searching</span>
                    </div>
                    <!-- Band Suggestions Section -->
                    <div class="js-band-suggestions hidden">
                        <div class="px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Bands</h4>
                        </div>
                        <div class="suggestions-list"></div>
                    </div>

                    <!-- City Suggestions Section -->
                    <div class="js-city-suggestions hidden">
                        <div class="px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Cities</h4>
                        </div>
                        <div class="suggestions-list"></div>
                    </div>

                    <!-- Venue Suggestions Section -->
                    <div class="js-venue-suggestions hidden">
                        <div class="px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Venues</h4>
                        </div>
                        <div class="suggestions-list"></div>
                    </div>

                    <!-- Show Results Section -->
                    <div class="js-show-results border-b-2 border-black last:border-b-0">
                        <div class="js-shows-header px-4 py-3 bg-neutral-100 border-b-2 border-black">
                            <h4 class="font-black text-xs uppercase tracking-widest text-neutral-500">Shows</h4>
                        </div>
                        <div class="js-results-container grid gap-4 p-4 grid-cols-2 lg:grid-cols-3"></div>
                    </div>
                    <div class="js-load-more text-center p-4 hidden border-t-2 border-black">
                        <button
                            class="px-6 py-3 bg-neutral-200 hover:bg-neutral-400 transition-colors font-black uppercase text-sm w-full">Load
                            More</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

                <section class="py-12 flex-1">
                    <div class="max-w-7xl mx-auto px-6">

                        <!-- City Cards Grid -->
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
                            
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/asheville/" class="absolute inset-0 z-10"
                                            aria-label="Visit Asheville page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Asheville
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/asheville/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    72 VENUES
                                                </a>
                                                <a href="/asheville/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    373 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/asheville/venues/the-odditorium/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the odditorium</a>, <a href="/asheville/venues/the-get-down/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the get down</a>, <a href="/asheville/venues/static-age-records/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">static age records</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="asheville">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/boone/" class="absolute inset-0 z-10"
                                            aria-label="Visit Boone page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Boone
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/boone/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    26 VENUES
                                                </a>
                                                <a href="/boone/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    78 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/boone/venues/wood-circle-house/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">wood circle house</a>, <a href="/boone/venues/jesus-saves/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">jesus saves</a>, <a href="/boone/venues/klondike-cafe/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">klondike cafe</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="boone">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/carrboro/" class="absolute inset-0 z-10"
                                            aria-label="Visit Carrboro page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Carrboro
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/carrboro/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    7 VENUES
                                                </a>
                                                <a href="/carrboro/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    327 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/carrboro/venues/cat-s-cradle/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">cat's cradle</a>, <a href="/carrboro/venues/go-rehearsal-studios/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">go! rehearsal studios</a>, <a href="/carrboro/venues/reservoir/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">reservoir</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="carrboro">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/chapel-hill/" class="absolute inset-0 z-10"
                                            aria-label="Visit Chapel Hill page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Chapel Hill
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/chapel-hill/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    23 VENUES
                                                </a>
                                                <a href="/chapel-hill/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    121 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/chapel-hill/venues/local-506/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">local 506</a>, <a href="/chapel-hill/venues/nightlight-1/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">nightlight</a>, <a href="/chapel-hill/venues/the-cave/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the cave</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="chapel-hill">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/charlotte/" class="absolute inset-0 z-10"
                                            aria-label="Visit Charlotte page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Charlotte
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/charlotte/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    74 VENUES
                                                </a>
                                                <a href="/charlotte/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    903 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/charlotte/venues/the-milestone/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the milestone</a>, <a href="/charlotte/venues/tremont-music-hall/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">tremont music hall</a>, <a href="/charlotte/venues/lunchbox-records/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">lunchbox records</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="charlotte">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/durham/" class="absolute inset-0 z-10"
                                            aria-label="Visit Durham page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Durham
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/durham/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    18 VENUES
                                                </a>
                                                <a href="/durham/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    99 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/durham/venues/duke-coffeehouse/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">duke coffeehouse</a>, <a href="/durham/venues/bull-city-hq-2/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">bull city hq</a>, <a href="/durham/venues/motorco-music-hall/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">motorco music hall</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="durham">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/fayetteville/" class="absolute inset-0 z-10"
                                            aria-label="Visit Fayetteville page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Fayetteville
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/fayetteville/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    24 VENUES
                                                </a>
                                                <a href="/fayetteville/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    63 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/fayetteville/venues/drunk-horse-pub/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">drunk horse pub</a>, <a href="/fayetteville/venues/duh-skatezone/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">duh! skatezone</a>, <a href="/fayetteville/venues/the-gaslight/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the gaslight</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="fayetteville">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/greensboro/" class="absolute inset-0 z-10"
                                            aria-label="Visit Greensboro page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Greensboro
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/greensboro/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    193 VENUES
                                                </a>
                                                <a href="/greensboro/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    1,189 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/greensboro/venues/legitimate-business/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">legitimate business</a>, <a href="/greensboro/venues/ace-s-basement/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">ace's basement</a>, <a href="/greensboro/venues/somewhere-else-tavern/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">somewhere else tavern</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="greensboro">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/greenville/" class="absolute inset-0 z-10"
                                            aria-label="Visit Greenville page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Greenville
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/greenville/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    18 VENUES
                                                </a>
                                                <a href="/greenville/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    125 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/greenville/venues/backdoor-skatepark/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">backdoor skatepark</a>, <a href="/greenville/venues/the-perculator/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the perculator</a>, <a href="/greenville/venues/the-corner-bar/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the corner bar</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="greenville">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/raleigh/" class="absolute inset-0 z-10"
                                            aria-label="Visit Raleigh page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Raleigh
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/raleigh/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    95 VENUES
                                                </a>
                                                <a href="/raleigh/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    740 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/raleigh/venues/the-brewery/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the brewery</a>, <a href="/raleigh/venues/kings-barcade/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">kings barcade</a>, <a href="/raleigh/venues/slim-s-downtown/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">slim's downtown</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="raleigh">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/wilmington/" class="absolute inset-0 z-10"
                                            aria-label="Visit Wilmington page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Wilmington
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/wilmington/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    41 VENUES
                                                </a>
                                                <a href="/wilmington/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    196 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/wilmington/venues/the-soapbox/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">the soapbox</a>, <a href="/wilmington/venues/lucky-s/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">lucky's</a>, <a href="/wilmington/venues/mad-monk/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">mad monk</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="wilmington">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                                <div class="group relative block h-full">
                                    <!-- Shadow Block -->
                                    <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>

                                    <!-- Main Content -->
                                    <div
                                        class="relative bg-white border-2 border-black p-6 h-full transition-transform hover:-translate-y-1 hover:-translate-x-1 flex flex-col justify-between min-h-[280px]">
                                        <!-- City Link Overlay -->
                                        <a href="/winston-salem/" class="absolute inset-0 z-10"
                                            aria-label="Visit Winston-Salem page"></a>

                                        <!-- Header -->
                                        <div class="mb-2 relative z-20 pointer-events-none">
                                            <h3
                                                class="text-3xl font-black uppercase italic tracking-tighter leading-none mb-2">
                                                Winston-Salem
                                            </h3>
                                            <div class="flex flex-wrap gap-2 mb-1 pointer-events-auto">
                                                <a href="/winston-salem/venues/"
                                                    class="inline-block bg-white text-black border border-black text-sm font-mono font-bold px-3 py-1 transform -rotate-2 hover:scale-105 hover:bg-neutral-100 transition-transform">
                                                    76 VENUES
                                                </a>
                                                <a href="/winston-salem/shows/"
                                                    class="inline-block bg-black text-white text-sm font-mono font-bold px-3 py-1 transform rotate-2 hover:scale-105 hover:bg-neutral-800 transition-transform">
                                                    764 SHOWS
                                                </a>
                                            </div>
                                            
                                        </div>

                                        <!-- Venues List -->
                                        
                                            <div class="mt-auto relative z-20">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none"
                                                        viewBox="0 0 24 24">
                                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
                                                            stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="12" cy="10" r="3" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                    <p
                                                        class="text-xs uppercase font-black tracking-widest text-neutral-500">
                                                        Top
                                                        Venues</p>
                                                </div>
                                                <p class="text-sm font-bold font-mono leading-tight">
                                                    <a href="/winston-salem/venues/ziggy-s/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">ziggy's</a>, <a href="/winston-salem/venues/533-uprisings/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">533 uprisings</a>, <a href="/winston-salem/venues/ps211/"
                                                            class="hover:text-red-600 hover:underline decoration-2 underline-offset-2 transition-colors">ps211</a>
                                                </p>
                                            </div>
                                            

                                                <!-- Random Flyers -->
                                                <div
                                                    class="mt-4 pt-4 border-t-2 border-dashed border-neutral-300 relative z-20">
                                                    <div class="js-random-flyers grid grid-cols-3 gap-2"
                                                        data-city-slug="winston-salem">
                                                        <!-- Shimmer Loader 1 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 2 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                        <!-- Shimmer Loader 3 -->
                                                        <div
                                                            class="aspect-[3/4] bg-neutral-200 animate-pulse border border-black/10">
                                                        </div>
                                                    </div>
                                                </div>
                                    </div>
                                </div>
                                
                        </div>

                        <!-- Various Destinations -->
                        <div class="relative">
                            <div class="absolute inset-0 bg-neutral-200 translate-x-3 translate-y-3"></div>
                            <div class="relative bg-white border-4 border-black p-8">
                                <div class="absolute -top-6 left-8 bg-black text-white px-4 py-2 transform -rotate-2">
                                    <h3 class="text-xl font-black uppercase tracking-tighter">Various Destinations</h3>
                                </div>

                                <p
                                    class="text-sm font-bold font-mono text-neutral-500 mb-8 mt-4 uppercase tracking-widest">
                                    486
                                        shows
                                        total from these other locations:
                                </p>
                                <div class="flex flex-wrap gap-x-8 gap-y-4">
                                    
                                        <a href="/albemarle/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Albemarle
                                        </a>
                                        
                                        <a href="/apex/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Apex
                                        </a>
                                        
                                        <a href="/arden/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Arden
                                        </a>
                                        
                                        <a href="/belmont/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Belmont
                                        </a>
                                        
                                        <a href="/boiling-springs/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Boiling Springs
                                        </a>
                                        
                                        <a href="/burlington/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Burlington
                                        </a>
                                        
                                        <a href="/cary/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Cary
                                        </a>
                                        
                                        <a href="/clemmons/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Clemmons
                                        </a>
                                        
                                        <a href="/columbia-sc/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Columbia
                                        </a>
                                        
                                        <a href="/concord/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Concord
                                        </a>
                                        
                                        <a href="/conover/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Conover
                                        </a>
                                        
                                        <a href="/cornelius/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Cornelius
                                        </a>
                                        
                                        <a href="/creedmore/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Creedmore
                                        </a>
                                        
                                        <a href="/cumberland/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Cumberland
                                        </a>
                                        
                                        <a href="/dobson/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Dobson
                                        </a>
                                        
                                        <a href="/elkin/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Elkin
                                        </a>
                                        
                                        <a href="/elon/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Elon
                                        </a>
                                        
                                        <a href="/fairview/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Fairview
                                        </a>
                                        
                                        <a href="/fort-bragg/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Fort Bragg
                                        </a>
                                        
                                        <a href="/fort-mill-sc/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Fort Mill
                                        </a>
                                        
                                        <a href="/garner/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Garner
                                        </a>
                                        
                                        <a href="/gastonia/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Gastonia
                                        </a>
                                        
                                        <a href="/goldsboro/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Goldsboro
                                        </a>
                                        
                                        <a href="/graham/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Graham
                                        </a>
                                        
                                        <a href="/greenville-sc/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Greenville
                                        </a>
                                        
                                        <a href="/havelock/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Havelock
                                        </a>
                                        
                                        <a href="/henderson/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Henderson
                                        </a>
                                        
                                        <a href="/hendersonville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Hendersonville
                                        </a>
                                        
                                        <a href="/hickory/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Hickory
                                        </a>
                                        
                                        <a href="/high-point/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            High Point
                                        </a>
                                        
                                        <a href="/huntersville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Huntersville
                                        </a>
                                        
                                        <a href="/jacksonville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Jacksonville
                                        </a>
                                        
                                        <a href="/kernersville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Kernersville
                                        </a>
                                        
                                        <a href="/king/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            King
                                        </a>
                                        
                                        <a href="/lenoir/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Lenoir
                                        </a>
                                        
                                        <a href="/lewisville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Lewisville
                                        </a>
                                        
                                        <a href="/lizard-lick/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Lizard Lick
                                        </a>
                                        
                                        <a href="/marshall/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Marshall
                                        </a>
                                        
                                        <a href="/matthews/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Matthews
                                        </a>
                                        
                                        <a href="/mebane/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Mebane
                                        </a>
                                        
                                        <a href="/mill-spring/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Mill Spring
                                        </a>
                                        
                                        <a href="/mocksville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Mocksville
                                        </a>
                                        
                                        <a href="/mooresville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Mooresville
                                        </a>
                                        
                                        <a href="/mount-airy/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Mount Airy
                                        </a>
                                        
                                        <a href="/nashville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Nashville
                                        </a>
                                        
                                        <a href="/new-bern/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            New Bern
                                        </a>
                                        
                                        <a href="/newton/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Newton
                                        </a>
                                        
                                        <a href="/outer-banks/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Outer Banks
                                        </a>
                                        
                                        <a href="/pfafftown/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Pfafftown
                                        </a>
                                        
                                        <a href="/richlands/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Richlands
                                        </a>
                                        
                                        <a href="/rock-hill-sc/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Rock Hill
                                        </a>
                                        
                                        <a href="/rocky-mount/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Rocky Mount
                                        </a>
                                        
                                        <a href="/rural-hall/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Rural Hall
                                        </a>
                                        
                                        <a href="/salisbury/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Salisbury
                                        </a>
                                        
                                        <a href="/sanford/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Sanford
                                        </a>
                                        
                                        <a href="/statesville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Statesville
                                        </a>
                                        
                                        <a href="/supply/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Supply
                                        </a>
                                        
                                        <a href="/taylorsville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Taylorsville
                                        </a>
                                        
                                        <a href="/thomasville/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Thomasville
                                        </a>
                                        
                                        <a href="/wilkesboro/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Wilkesboro
                                        </a>
                                        
                                        <a href="/wrightsville-beach/"
                                            class="border-2 border-transparent hover:border-black hover:bg-neutral-100 px-2 py-1 text-sm font-black uppercase tracking-tight transition-colors">
                                            Wrightsville Beach
                                        </a>
                                        
                                </div>
                            </div>
                        </div>

                    </div>
                </section>

                <footer class="mt-auto border-t-4 border-black bg-white py-12 relative overflow-hidden">
    <!-- Decorative Texture -->
    <div
        class="absolute inset-0 opacity-5 pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]">
    </div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="flex flex-col md:flex-row items-center justify-between gap-6">
            <div class="flex flex-col gap-1 text-center md:text-left">
                <p class="font-black uppercase tracking-tighter text-2xl">
                    Punks on Paper
                </p>
                <p class="font-mono text-sm font-bold uppercase text-neutral-500">
                    North Carolina Punk Show Archive (1978-2022)
                </p>
            </div>
        </div>


    </div>
</footer>

<script src="/utils/ui-helpers.js?v=1771357168113"></script>
<script src="/utils/shared-config.js?v=1771357168113"></script>
<script type="module" src="/app.js?v=1771357168113"></script>

                    
    <!-- Show Modal -->
    <div id="show-modal" class="fixed inset-0 z-[100] hidden" aria-modal="true" role="dialog">
        <!-- Backdrop -->
        <div id="modal-backdrop"
            class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 opacity-0 ease-in-out">
        </div>

        <!-- Modal Container -->
        <div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
            <div id="modal-content"
                class="relative max-w-2xl w-full max-h-[90vh] overflow-y-auto pointer-events-auto transform scale-95 opacity-0 transition-all duration-300 ease-out will-change-[transform,opacity] border-4 border-black bg-white shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]">

                <!-- Header -->
                <div class="p-6 border-b-4 border-black bg-white flex justify-between items-start">
                    <h2 id="modal-title"
                        class="text-xl md:text-2xl font-black uppercase tracking-tighter pr-8 line-clamp-2"></h2>
                    <button id="modal-close" class="p-1 hover:bg-black hover:text-white transition-colors flex-shrink-0"
                        aria-label="Close modal">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor" stroke-width="3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="flex flex-col md:flex-row">
                    <!-- Image Section -->
                    <div id="modal-flyer-container"
                        class="w-full md:w-1/2 border-b-4 md:border-b-0 md:border-r-4 border-black relative aspect-square md:aspect-auto bg-neutral-100 min-h-[300px]">
                        <img id="modal-flyer" src="" alt="Show flyer"
                            class="absolute inset-0 w-full h-full object-cover transition-all duration-500 opacity-0">

                        <!-- No Image State -->
                        <div id="modal-no-image"
                            class="absolute inset-0 flex items-center justify-center p-6 text-center hidden">
                            <span class="font-mono text-xs uppercase text-neutral-400">No Flyer Image</span>
                        </div>

                        <!-- Price Tag Overlay -->
                        <div id="modal-price-container"
                            class="absolute bottom-4 left-4 bg-yellow-300 border-2 border-black px-2 py-1 transform -rotate-2 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hidden">
                            <span id="modal-price"
                                class="font-mono font-bold text-lg md:text-xl tracking-tighter"></span>
                        </div>
                    </div>

                    <!-- Details Section -->
                    <div class="w-full md:w-1/2 p-6 flex flex-col justify-between gap-8">
                        <div class="space-y-6">
                            <!-- Meta Data List -->
                            <div class="space-y-4 font-mono text-sm">
                                <div id="modal-bands-container">
                                    <span class="font-bold block text-xs uppercase text-neutral-500 mb-1">Bands</span>
                                    <p id="modal-bands" class="font-bold leading-tight uppercase"></p>
                                </div>

                                <div id="modal-venue-container">
                                    <span class="font-bold block text-xs uppercase text-neutral-500 mb-1">Venue</span>
                                    <a id="modal-venue-link" href="#"
                                        class="font-bold text-blue-600 hover:underline cursor-pointer uppercase block"></a>
                                </div>

                                <div id="modal-city-container">
                                    <span class="font-bold block text-xs uppercase text-neutral-500 mb-1">City</span>
                                    <a id="modal-city-link" href="#"
                                        class="font-bold text-blue-600 hover:underline cursor-pointer uppercase block"></a>
                                </div>

                                <div id="modal-date-container">
                                    <span class="font-bold block text-xs uppercase text-neutral-500 mb-1">Date</span>
                                    <p id="modal-date" class="font-bold uppercase"></p>
                                </div>
                            </div>

                            <!-- Notes Section -->
                            <div id="modal-notes-container" class="hidden">
                                <span class="font-bold block text-xs uppercase text-neutral-500 mb-1">Notes</span>
                                <p id="modal-notes" class="font-mono text-sm text-neutral-600 leading-relaxed"></p>
                            </div>
                        </div>

                        <!-- Footer Actions -->
                        <div class="pt-6 border-t-2 border-dashed border-neutral-300 space-y-4">
                            <button id="modal-copy-link"
                                class="flex items-center gap-2 text-xs font-mono font-bold uppercase hover:text-neutral-600 transition-colors w-full">
                                <svg class="w-3 h-3 stroke-current" stroke-width="2" fill="none" viewBox="0 0 24 24">
                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <span>Copy link to full page</span>
                                <span id="copy-confirmation"
                                    class="text-black font-bold opacity-0 transition-opacity duration-200 ml-2">✓
                                    COPIED</span>
                            </button>

                            <a id="modal-full-link" href="#"
                                class="w-full bg-black text-white border-2 border-black py-3 px-4 flex items-center justify-center gap-2 uppercase font-black tracking-widest text-xs hover:bg-white hover:text-black transition-colors shadow-[0px_0px_0px_0px_rgba(0,0,0,0)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-1 hover:-translate-x-1">
                                <span>View Full Page</span>
                                <svg class="w-4 h-4 stroke-current" stroke-width="3" fill="none" viewBox="0 0 24 24">
                                    <path d="M5 12h14M12 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>

</html>