@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap');

    /* ===== RESET & BASE ===== */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: #000010;
      background-image:
        radial-gradient(ellipse at 20% 50%, rgba(255, 0, 200, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 255, 0.04) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
      color: #e0e0e0;
      font-family: 'VT323', monospace;
      font-size: 18px;
      min-height: 100vh;
    }

    /* ===== SCANLINE OVERLAY ===== */
    body::before {
      content: '';
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }

    /* ===== MARQUEE BAR ===== */
    .marquee-bar {
      background: linear-gradient(90deg, #ff00cc, #ff6600, #ffff00, #00ff88, #00ccff, #cc00ff, #ff00cc);
      background-size: 400% 100%;
      animation: gradientShift 4s linear infinite;
      padding: 6px 0;
      overflow: hidden;
    }
    .marquee-bar marquee {
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      color: #000;
      letter-spacing: 2px;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      100% { background-position: 400% 50%; }
    }

    /* ===== HEADER ===== */
    header {
      text-align: center;
      padding: 30px 20px 20px;
      border-bottom: 3px double #ff00cc;
      position: relative;
    }

    .logo-wrapper {
      display: inline-block;
      position: relative;
    }

    h1 {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(28px, 6vw, 64px);
      color: #fff;
      text-shadow:
        0 0 10px #ff00cc,
        0 0 20px #ff00cc,
        0 0 40px #ff00cc,
        4px 4px 0px #cc00aa,
        8px 8px 0px #990088;
      letter-spacing: 4px;
      animation: flickerGlow 3s infinite alternate;
      line-height: 1.3;
    }

    @keyframes flickerGlow {
      0%   { text-shadow: 0 0 10px #ff00cc, 0 0 20px #ff00cc, 0 0 40px #ff00cc, 4px 4px 0 #cc00aa, 8px 8px 0 #990088; }
      40%  { text-shadow: 0 0 8px #ff00cc, 0 0 16px #ff00cc, 0 0 30px #ff00cc, 4px 4px 0 #cc00aa, 8px 8px 0 #990088; }
      60%  { text-shadow: 0 0 14px #ff44dd, 0 0 28px #ff44dd, 0 0 55px #ff44dd, 4px 4px 0 #cc00aa, 8px 8px 0 #990088; }
      100% { text-shadow: 0 0 10px #ff00cc, 0 0 22px #ff00cc, 0 0 45px #ff00cc, 4px 4px 0 #cc00aa, 8px 8px 0 #990088; }
    }

    .tagline {
      font-family: 'VT323', monospace;
      font-size: 22px;
      color: #00ffff;
      margin-top: 10px;
      text-shadow: 0 0 8px #00ffff;
      letter-spacing: 2px;
    }

    .header-badges {
      margin-top: 16px;
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .badge {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      padding: 4px 8px;
      border: 2px solid;
      letter-spacing: 1px;
    }
    .badge-netscape { border-color: #aaaaff; color: #aaaaff; }
    .badge-new      { border-color: #ffff00; color: #ffff00; background: rgba(255,255,0,0.1); animation: blink 1s step-end infinite; }
    .badge-best     { border-color: #ff6600; color: #ff6600; }

    @keyframes blink {
      50% { opacity: 0; }
    }

    /* ===== MAIN LAYOUT ===== */
    .container {
      max-width: 860px;
      margin: 0 auto;
      padding: 20px 16px;
    }

    /* ===== SECTION BOXES ===== */
    .box {
      border: 3px solid;
      margin-bottom: 24px;
      position: relative;
    }
    .box-pink   { border-color: #ff00cc; box-shadow: 0 0 12px rgba(255,0,204,0.4), inset 0 0 30px rgba(255,0,204,0.03); }
    .box-cyan   { border-color: #00ffff; box-shadow: 0 0 12px rgba(0,255,255,0.4), inset 0 0 30px rgba(0,255,255,0.03); }
    .box-yellow { border-color: #ffff00; box-shadow: 0 0 12px rgba(255,255,0,0.4), inset 0 0 30px rgba(255,255,0,0.03); }
    .box-green  { border-color: #00ff88; box-shadow: 0 0 12px rgba(0,255,136,0.4), inset 0 0 30px rgba(0,255,136,0.03); }
    .box-orange { border-color: #ff6600; box-shadow: 0 0 12px rgba(255,102,0,0.4), inset 0 0 30px rgba(255,102,0,0.03); }

    .box-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 11px;
      padding: 8px 14px;
      letter-spacing: 2px;
      border-bottom: 2px solid currentColor;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .box-pink   .box-title { background: rgba(255,0,204,0.15); color: #ff00cc; border-color: #ff00cc; }
    .box-cyan   .box-title { background: rgba(0,255,255,0.15); color: #00ffff; border-color: #00ffff; }
    .box-yellow .box-title { background: rgba(255,255,0,0.15); color: #ffff00; border-color: #ffff00; }
    .box-green  .box-title { background: rgba(0,255,136,0.15); color: #00ff88; border-color: #00ff88; }
    .box-orange .box-title { background: rgba(255,102,0,0.15); color: #ff6600; border-color: #ff6600; }

    .box-content {
      padding: 18px;
      line-height: 1.7;
    }

    /* ===== SPINNING STAR ===== */
    .spin {
      display: inline-block;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* ===== ABOUT SECTION ===== */
    .about-text {
      font-size: 20px;
      color: #e0e0e0;
    }
    .about-text strong { color: #ff00cc; }
    .about-text em     { color: #00ffff; font-style: normal; }

    /* ===== HOSTS ===== */
    .hosts {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .host-card {
      flex: 1;
      min-width: 200px;
      border: 2px dashed #ff00cc;
      padding: 14px;
      text-align: center;
      background: rgba(255,0,204,0.05);
    }
    .host-avatar {
      width: 64px;
      height: 64px;
      border: 3px solid #ff00cc;
      border-radius: 50%;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      background: #0a000a;
      box-shadow: 0 0 10px #ff00cc;
    }
    .host-name {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #ffff00;
      margin-bottom: 6px;
    }
    .host-bio { font-size: 16px; color: #cccccc; }

    /* ===== EPISODES ===== */
    .episode-list { list-style: none; }
    .episode-item {
      border-bottom: 1px dashed #00ffff44;
      padding: 14px 0;
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .episode-item:last-child { border-bottom: none; }
    .ep-num {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #000;
      background: #00ffff;
      padding: 4px 7px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .ep-title {
      font-size: 20px;
      color: #00ffff;
    }
    .ep-title a {
      color: #00ffff;
      text-decoration: none;
    }
    .ep-title a:hover { color: #ffffff; text-decoration: underline; }
    .ep-desc { font-size: 16px; color: #aaaaaa; margin-top: 4px; }
    .ep-coming {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      color: #ffff00;
      border: 1px solid #ffff00;
      padding: 2px 5px;
      display: inline-block;
      margin-top: 6px;
      animation: blink 1.2s step-end infinite;
    }

    /* ===== LISTEN LINKS ===== */
    .listen-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 4px;
    }
    .listen-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      padding: 10px 14px;
      text-decoration: none;
      display: inline-block;
      letter-spacing: 1px;
      transition: all 0.1s;
    }
    .listen-btn:hover { transform: translate(-2px, -2px); filter: brightness(1.3); }
    .btn-redcircle { background: #ff6600; color: #000; border: 2px solid #ff9944; }
    .btn-apple     { background: #cc44ff; color: #fff; border: 2px solid #ee88ff; }
    .btn-spotify   { background: #1db954; color: #000; border: 2px solid #44dd77; }
    .btn-rss       { background: #ffaa00; color: #000; border: 2px solid #ffcc44; }

    /* ===== SOCIAL / LINKS ===== */
    .links-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .social-link {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      padding: 8px 12px;
      text-decoration: none;
      border: 2px solid #00ff88;
      color: #00ff88;
      background: rgba(0,255,136,0.05);
      letter-spacing: 1px;
      transition: all 0.1s;
    }
    .social-link:hover {
      background: rgba(0,255,136,0.2);
      transform: translate(-2px, -2px);
      box-shadow: 2px 2px 0 #00ff88;
    }

    /* ===== DIVIDER ===== */
    .neon-divider {
      height: 2px;
      background: linear-gradient(90deg, transparent, #ff00cc, #00ffff, #ffff00, #00ff88, transparent);
      margin: 10px 0 24px;
      border: none;
    }

    /* ===== UNDER CONSTRUCTION ===== */
    .under-construction {
      text-align: center;
      padding: 16px;
      border: 3px dashed #ffff00;
      margin-bottom: 24px;
      background: rgba(255,255,0,0.03);
    }
    .uc-text {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #ffff00;
      letter-spacing: 2px;
      animation: blink 0.8s step-end infinite;
    }
    .caution-stripe {
      height: 12px;
      background: repeating-linear-gradient(
        45deg,
        #ffff00,
        #ffff00 10px,
        #000000 10px,
        #000000 20px
      );
      margin: 10px 0;
      opacity: 0.7;
    }

    /* ===== GUESTBOOK ===== */
    .guestbook-entry {
      border-left: 3px solid #ff6600;
      padding: 10px 14px;
      margin-bottom: 14px;
      background: rgba(255,102,0,0.04);
    }
    .gb-name {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #ff6600;
      margin-bottom: 4px;
    }
    .gb-msg { font-size: 18px; color: #cccccc; }
    .gb-date { font-size: 14px; color: #666; margin-top: 4px; }

    /* ===== HIT COUNTER ===== */
    footer {
      text-align: center;
      padding: 30px 20px;
      border-top: 3px double #ff00cc;
      margin-top: 10px;
    }
    .hit-counter {
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      color: #00ff88;
      margin-bottom: 12px;
      display: inline-block;
      border: 2px solid #00ff88;
      padding: 8px 16px;
      background: #001100;
      letter-spacing: 2px;
    }
    .counter-digits {
      color: #00ff88;
      font-family: 'Press Start 2P', monospace;
      letter-spacing: 4px;
      font-size: 14px;
      display: block;
      text-shadow: 0 0 8px #00ff88;
    }
    .footer-copy {
      font-size: 14px;
      color: #444;
      margin-top: 14px;
      letter-spacing: 1px;
    }
    .footer-copy a { color: #666; }
    .webring {
      margin-top: 16px;
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #444;
      letter-spacing: 1px;
    }
    .webring a { color: #666; text-decoration: none; }
    .webring a:hover { color: #aaa; }

    /* ===== PIXEL ART CASSETTE (CSS) ===== */
    .cassette-wrap {
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
    .cassette {
      width: 80px;
      height: 48px;
      background: #222;
      border: 2px solid #ff00cc;
      border-radius: 4px;
      position: relative;
      box-shadow: 0 0 8px #ff00cc;
    }
    .cassette::before,
    .cassette::after {
      content: '';
      width: 16px;
      height: 16px;
      border: 2px solid #ff00cc;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      background: #000;
    }
    .cassette::before { left: 10px; }
    .cassette::after  { right: 10px; }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 600px) {
      h1 { font-size: 28px; }
      .box-title { font-size: 9px; }
      .listen-btn, .social-link { font-size: 7px; padding: 8px 10px; }
    }

    /* =========================================================
       SITE NAV (added — links to Episodes + Business Inquiries)
       Same pixel-badge look as your existing .badge/.listen-btn
       ========================================================= */
    .site-nav {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      padding: 16px 0 0;
    }
    .nav-link {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      padding: 8px 14px;
      letter-spacing: 1px;
      text-decoration: none;
      border: 2px solid;
      transition: all 0.1s;
    }
    .nav-link:hover { transform: translate(-2px, -2px); filter: brightness(1.3); }
    .nav-home    { border-color: #ff00cc; color: #ff00cc; background: rgba(255,0,204,0.08); }
    .nav-episode { border-color: #00ffff; color: #00ffff; background: rgba(0,255,255,0.08); }
    .nav-biz     { border-color: #ff6600; color: #ff6600; background: rgba(255,102,0,0.08); }
    .nav-link[aria-current="page"] { background: currentColor; }
    .nav-link[aria-current="page"].nav-home    { color: #000010; }
    .nav-link[aria-current="page"].nav-episode { color: #000010; }
    .nav-link[aria-current="page"].nav-biz     { color: #000010; }

    /* =========================================================
       EPISODES PAGE — filter bar, tag pills, pagination
       Sits inside box-cyan to match the homepage episode box
       ========================================================= */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }
    .filter-bar input[type="search"],
    .filter-bar select {
      font-family: 'VT323', monospace;
      font-size: 17px;
      padding: 6px 10px;
      background: #000010;
      color: #e0e0e0;
      border: 2px solid #00ffff;
    }
    .filter-bar input[type="search"]:focus,
    .filter-bar select:focus,
    .nav-link:focus-visible,
    .tag-pill:focus-visible,
    .pagination button:focus-visible {
      outline: 2px dashed #ffff00;
      outline-offset: 2px;
    }

    .tag-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }
    .tag-pill {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      padding: 6px 10px;
      letter-spacing: 1px;
      border: 2px solid #ff00cc;
      color: #ff00cc;
      background: transparent;
      cursor: pointer;
    }
    .tag-pill.active { background: #ff00cc; color: #000010; }

    .episode-art-thumb {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border: 2px dashed #ffff00;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Press Start 2P', monospace;
      font-size: 6px;
      color: #ffff00;
      text-align: center;
      overflow: hidden;
    }
    .episode-art-thumb img { width: 100%; height: 100%; object-fit: cover; }

    .no-results {
      text-align: center;
      color: #666;
      font-size: 18px;
      padding: 20px 0;
    }

    .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .pagination button {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      min-width: 30px;
      padding: 8px 10px;
      background: #000010;
      color: #00ffff;
      border: 2px solid #00ffff;
      cursor: pointer;
    }
    .pagination button[aria-current="true"] { background: #00ffff; color: #000010; }
    .pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

    /* =========================================================
       BUSINESS INQUIRIES PAGE — "loud suit" palette
       Same bones (scanlines, pixel font, box system) recolored
       gold / maroon / black instead of pink / cyan — power-suit
       energy instead of shell-suit energy.
       ========================================================= */
    body.suit-mode {
      background-color: #0a0500;
      background-image:
        radial-gradient(ellipse at 20% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(170, 0, 51, 0.06) 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(255,215,0,0.025) 0 14px, transparent 14px 28px);
    }
    .suit-mode .marquee-bar {
      background: linear-gradient(90deg, #ffd700, #aa0033, #ffd700);
      background-size: 200% 100%;
    }
    .suit-mode h1 {
      text-shadow:
        0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 40px #ffd700,
        4px 4px 0px #aa0033, 8px 8px 0px #550018;
    }
    .suit-mode .tagline { color: #ffd700; text-shadow: 0 0 8px #ffd700; }
    .suit-mode header { border-bottom: 3px double #ffd700; }
    .suit-mode footer { border-top: 3px double #ffd700; }

    .box-gold   { border: 3px solid #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.4), inset 0 0 30px rgba(255,215,0,0.03); margin-bottom: 24px; }
    .box-gold .box-title { background: rgba(255,215,0,0.15); color: #ffd700; border-bottom: 2px solid #ffd700; font-family: 'Press Start 2P', monospace; font-size: 11px; padding: 8px 14px; letter-spacing: 2px; display:flex; align-items:center; gap:10px; }
    .box-gold .box-content { padding: 18px; line-height: 1.7; font-size: 18px; color: #e0e0e0; }

    .biz-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 440px;
      margin: 0 auto;
    }
    .biz-form label {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #ffd700;
      letter-spacing: 1px;
    }
    .biz-form input,
    .biz-form textarea {
      font-family: 'VT323', monospace;
      font-size: 18px;
      padding: 8px 10px;
      background: #0a0500;
      color: #e0e0e0;
      border: 2px solid #ffd700;
    }
    .biz-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      padding: 12px;
      background: #ffd700;
      color: #0a0500;
      border: 2px solid #fff3b0;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.1s;
    }
    .biz-btn:hover { transform: translate(-2px, -2px); filter: brightness(1.15); }