body {
  margin: 0;
  font-family: monospace;
  background: black;
  color: #ff00f2;
  overflow-x: hidden;

  background: radial-gradient(circle at center, #0a0a0a, #000000 80%);
}

header {
  position: relative;
  z-index: 10;
  margin-bottom: 20px;
  text-align: center; 
}

header {
  position: relative;
  z-index: 10;
}

.main-nav {
  position: relative;
  z-index: 5;
}

/* soften text glow */
.window-content {
    padding: 20px;
  text-shadow: 0 0 4px rgba(0,255,204,0.5);
}

/* STATIC OVERLAY */
.noise {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('assets/images/static.gif');
  opacity: 0.08;
  pointer-events: none;
  z-index: 999;
}

/* NAV */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  margin-top: 10px; /* ← adjust spacing */
  margin-bottom: 20px;
}

nav a {
  color: #ff00ff;
  text-decoration: none;
  transition: 0.2s;

  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 1px;
}

nav a:hover {
  color: #1eff00;
  text-shadow: 0 0 8px #00ffff;
}

.taskbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: black;
  border-top: 2px solid #ff00ff;
  display: flex;
  gap: 20px;
  padding: 10px;
}

.taskbar a {
  color: #39ff14;
  text-decoration: none;
}

.large {
  grid-column: span 2;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.status-grid div {
  background: rgba(255, 0, 255, 0.05);
  border: 1px solid #ff00ff;
  padding: 8px;
  border-radius: 8px;
}

.soft {
  background: rgba(255, 192, 203, 0.1);
  border-color: #ff77aa;
}

/* GLITCH TEXT */
.glitch {
  font-size: 3rem;
  text-align: center;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.1;
  position: relative;
  color: white;
  margin-bottom: 5px;
  padding-bottom: 25px; 
  z-index: 1;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
}

.glitch::before {
  color: #ea00ff;
  animation: glitch 0.3s infinite;
}

.glitch::after {
  color: #1eff00;
  animation: glitch 0.3s infinite reverse;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}

/* VHS SCANLINES */
body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.container {
  max-width: 900px;   /* controls how wide your site feels */
  margin: 0 auto;     /* THIS centers it */
  padding: 20px;
}

.window {
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #39ff14;
  border-radius: 14px;
  box-shadow: 0 0 12px #39ff14, 0 0 20px #ff00ff inset;
  overflow: hidden;
  width: 300px;
  padding: 6px; /* outer buffer */
  position: relative;
}

/* top bar */
.window-header {
  background: linear-gradient(90deg, #ff00ff, #39ff14);
  color: black;
  font-weight: bold;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

/* fake buttons */
.window-buttons span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  border-radius: 50%;
  background: black;
}

/* content */
.window-content {
  width: 100%;
  padding: 10px;
  color: #15ff00;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.window:nth-child(odd) {
  transform: rotate(-1deg);
}

.window:nth-child(even) {
  transform: rotate(1deg);
}

.window-image {
  width: 100%;
  height: auto;

  display: block;
}

.window-media {
  padding: 0;
}

.window-media img {
  height: auto
  width: 100%;
  display: block;
  grid-column: 1 / -1;
}

.desktop {
    justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;

  max-width: 900px;
  margin: 40px auto;
}

/* Blog */
.external-link {
  display: inline-block;
  margin-top: 10px;
  color: #39ff14;
  text-decoration: none;
}

.external-link:hover {
  text-shadow: 0 0 8px #39ff14;
}

.blog-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.blog-window {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.blog-window p {
  margin-bottom: 10px;
  opacity: 0.8;
}

.blog-window .window-content {
  padding: 25px;
}

.post {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #39ff14;
}

.post h3 {
  color: #ff00ff;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.post-content {
  font-size: 0.9rem;
  line-height: 1.4;
}

.post a {
  display: inline-block;
  margin-top: 8px;
  color: #00ffff;
  text-decoration: none;
}

.post a:hover {
  text-shadow: 0 0 8px #00ffff;
}

/* about */
.window:nth-child(3n) {
  border-color: #ff00ff;
}

.window:nth-child(3n+1) {
  border-color: #39ff14;
}

.window:nth-child(3n+2) {
  border-color: #00ffff;
}

.big {
  grid-column: span 2;
}

.profile {
  display: flex;
  gap: 10px;
  align-items: center;
}

.avatar {
  width: 120px;
  border-radius: 10px;
  border: 2px solid #ff00ff;
  box-shadow: 0 0 10px #ff00ff;
}

.stats p {
  margin: 4px 0;
}

.window-header {
  cursor: move; /* even if not draggable yet */
}

.window::after {
  content: "● ● ●";
  font-size: 0.6rem;
  position: absolute;
  top: 5px;
  right: 10px;
  color: black;
}

.window img {
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 10px;
}

.window:hover img {
  transform: scale(1.03);
}

.about-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.big {
  grid-column: span 2;
}

/* CHAOS MODE (About page only) */
.desktop-chaos {
    padding: 20px;
  position: relative;
  min-height: 1200px;
  margin-top: 80px;
  padding-top: 200px;
}

.desktop-chaos .window {
  position: absolute;
  width: 300px;
}

/* individual placements */
.w0 {  width: 300px; top: 40px; left: 80px;  z-index: 10;}

.w1 { top: 120px; left: 450px;  z-index: 9; }     /* whoami */
.w2 { top: 100px; left: 850px;   transform: rotate(2deg); z-index: 3; }     /* gremlin */

.w3 { top: 350px; left: 120px;  transform: rotate(-1deg); z-index: 2;  }    /* interests */
.w4 { top: 380px; left: 600px; }    /* sustain */

.w5 { top: 550px; left: 350px; transform: rotate(1.5deg); }    /* rules */

.w6 { top: 650px; left: 800px;}    /* music */
.w7 { top: 750px; left: 100px;  }    /* status */

.w8 { top: 820px; left: 500px; }    /* pictochat */

.glitching {
  animation: glitchShake 0.2s infinite;
  filter: hue-rotate(90deg) contrast(1.5);
}

@keyframes glitchShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 1px); }
  100% { transform: translate(0, 0); }
}

.glitch-jump {
  animation: jump 0.2s ease;
}

@keyframes jump {
  0% { transform: translate(0,0); }
  50% { transform: translate(6px,-6px); }
  100% { transform: translate(0,0); }
}

.glitch-color {
  animation: colorShift 0.3s;
}

@keyframes colorShift {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(120deg); }
  100% { filter: hue-rotate(0deg); }
}

.glitch-text.glitching {
  animation: textFlicker 0.2s;
}

@keyframes textFlicker {
  0% { opacity: 1; }
  50% { opacity: 0.3; letter-spacing: 2px; }
  100% { opacity: 1; }
}

@media (max-width: 600px) {

  /* FORCE HEADER INTO STACK */
  header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px;
    padding-bottom: 20px;
  }

  /* MAKE TITLE TAKE FULL WIDTH */
  header h1 {
    width: 100%;
    text-align: center;
    margin: 0;
  }

  /* CONTAIN THE GLITCH */
  .glitch {
    display: block;
    position: relative;
    overflow: hidden; /* THIS is the big one */
    margin-bottom: 12px;
    padding-bottom: 30px; 
  }

  /* KILL THE OVERFLOWING GLITCH LAYERS */
  .glitch::before,
  .glitch::after {
    display: none;
  }

  /* NAV BELOW TITLE */
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

}

.about-wrapper {
  margin-top: 140px;
  position: relative;
}

audio {
  width: 100%;
  margin-top: 10px;

  filter:
    hue-rotate(90deg)
    contrast(1.2)
    brightness(1.1);
}

input[type="submit"] {
    background: #39ff14;
    color: black;
    border: none;
    padding: .5rem 1rem;
    cursor: pointer;
    margin-left: .5rem;
}

.codex-desktop {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: auto;
    background-image: url("assets/images/codex-wallpaper.png");
    background-position: center 10%;
    background-repeat: no-repeat;
    background-size: 60%;
    overflow: hidden;
}

.codex-window {
    position: absolute;
    width: 400px;
    max-width: 400px;
    height: auto;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #15ff00;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(21, 255, 0, 0.5);
    color: white;
    z-index: 10;
    padding: 0;
    margin: 0;
    transform: none;
}

#space {
    top: 150px;
    left: 35%;
    transform: translateX(-50%);
}

#tools {
    top: 200px;
    left: 45%;
    transform: translateX(-50%);
}

#signal {
    top: 250px;
    left: 55%;
    transform: translateX(-50%);
}

#static {
    top: 300px;
    left: 40%;
    transform: translateX(-50%);
}

.codex-hidden {
  display: none;
}

.codex-window a {
    color: #00ff00;
    text-decoration: none;
}

.codex-window a:hover {
    color: #ff00ff;
}

.codex-titlebar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #00ff00;
    color: black;
    padding: 6px;
    font-weight: bold;
}

.codex-icon {
    display: flex;
    flex-direction: column;

    width: 100px;

    background: none;
    border: none;

    color: white;

    cursor: pointer;

    text-align: center;
}

.codex-icons {
    display: flex;
    flex-direction: column;

    gap: 20px;

    position: absolute;
    top: 20px;
    right: 20px;
}

.codex-taskbar {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 40px;

    background: #2ab836;
}

.codex-clock {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    border: 2px solid #00ff00;
    padding: 15px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 5;
}

#clock-time {
    font-size: 2rem;
    text-align: center;
    color: #00ff00;
}

#clock-date {
    text-align: center;
    color: #00ff00;
    font-size: 0.9rem;
}

/* Override mobile for codex */
@media (max-width: 600px) {
    .codex-desktop {
        height: 100vh;
        overflow: hidden;
    }
    
    .codex-window {
        width: 300px;
        max-width: 300px;
    }
}

        /* --- Killer Clowns Book Page --- */
        :root {
            --neon-lime: #39FF14;
            --neon-mag: #FF00FF;
            --deep-space: #0A0E27;
            --clown-mint: #B8E0D2;
            --terminal-font: 'Courier New', Courier, monospace;
            --display-font: 'Arial Black', Impact, sans-serif;
        }

        /* --- BASE RIG --- */
        .clown-page* { margin: 0; padding: 0; box-sizing: border-box; }

        clown-page {
            background-color: var(--deep-space);
            color: var(--clown-mint);
            font-family: var(--terminal-font);
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

        /* Starfield Background */
        .clown-page::before {
            content: '';
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background-image: 
                radial-gradient(1px 1px at 10% 10%, #fff, transparent),
                radial-gradient(1px 1px at 20% 20%, var(--neon-lime), transparent),
                radial-gradient(2px 2px at 30% 30%, var(--neon-mag), transparent),
                radial-gradient(1px 1px at 40% 40%, #fff, transparent),
                radial-gradient(2px 2px at 50% 50%, var(--clown-mint), transparent);
            background-size: 150px 150px;
            opacity: 0.4;
            z-index: -2;
            animation: drift 20s linear infinite;
        }

        @keyframes drift {
            from { background-position: 0 0; }
            to { background-position: 150px 150px; }
        }

        /* CRT Scanline Overlay */
        .clown-page::after {
            content: '';
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 2px, 3px 100%;
            pointer-events: none;
            z-index: 999;
        }

        /* --- HERO SECTION --- */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            text-align: center;
            border-bottom: 2px dashed var(--neon-lime);
        }

        /* Marquee Frame for Cover */
        .cover-frame {
            border: 4px solid var(--neon-mag);
            padding: 10px;
            background: rgba(255, 0, 255, 0.1);
            box-shadow: 0 0 20px var(--neon-mag), inset 0 0 20px var(--neon-mag);
            margin-bottom: 2rem;
            max-width: 400px;
            width: 100%;
            position: relative;
        }

        /* Lightbulb dots around the frame */
        .cover-frame::before {
            content: '';
            position: absolute;
            top: -8px; left: -8px; right: -8px; bottom: -8px;
            border: 2px dotted var(--neon-lime);
            pointer-events: none;
            animation: marqueeBlink 1s infinite alternate;
        }

        @keyframes marqueeBlink {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        .cover-frame img {
            width: 100%;
            height: auto;
            display: block;
            filter: contrast(1.1) saturate(1.2);
        }

        /* GLITCH TITLE */
        .glitch-title {
            font-family: var(--display-font);
            font-size: clamp(2rem, 5vw, 4.5rem);
            color: var(--neon-mag);
            text-transform: uppercase;
            position: relative;
            text-shadow: 0.05em 0 0 rgba(255,0,0,0.75),
                        -0.025em -0.05em 0 rgba(0,255,0,0.75),
                        0.025em 0.05em 0 rgba(0,0,255,0.75);
            animation: glitch 500ms infinite;
            letter-spacing: 2px;
            line-height: 1.1;
            margin-bottom: 1rem;
        }

        .glitch-title span {
            display: block;
            font-size: 0.6em;
            color: var(--neon-lime);
            text-shadow: 0 0 10px var(--neon-lime);
            letter-spacing: 5px;
        }

        @keyframes glitch {
            0% { text-shadow: 0.05em 0 0 rgba(255,0,0,0.75), -0.05em -0.025em 0 rgba(0,255,0,0.75), -0.025em 0.05em 0 rgba(0,0,255,0.75); }
            14% { text-shadow: 0.05em 0 0 rgba(255,0,0,0.75), -0.05em -0.025em 0 rgba(0,255,0,0.75), -0.025em 0.05em 0 rgba(0,0,255,0.75); }
            15% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.75), 0.025em 0.025em 0 rgba(0,255,0,0.75), -0.05em -0.05em 0 rgba(0,0,255,0.75); }
            49% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.75), 0.025em 0.025em 0 rgba(0,255,0,0.75), -0.05em -0.05em 0 rgba(0,0,255,0.75); }
            50% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,0.75), 0.05em 0 0 rgba(0,255,0,0.75), 0 -0.05em 0 rgba(0,0,255,0.75); }
            99% { text-shadow: 0.025em 0.05em 0 rgba(255,0,0,0.75), 0.05em 0 0 rgba(0,255,0,0.75), 0 -0.05em 0 rgba(0,0,255,0.75); }
            100% { text-shadow: -0.025em 0 0 rgba(255,0,0,0.75), -0.025em -0.025em 0 rgba(0,255,0,0.75), -0.025em -0.05em 0 rgba(0,0,255,0.75); }
        }

        .tagline {
            font-size: 1.2rem;
            color: var(--clown-mint);
            max-width: 600px;
            margin: 0 auto;
            text-shadow: 0 0 5px var(--clown-mint);
        }

        /* --- COMING SOON BANNER --- */
        .release-banner {
            background: var(--neon-mag);
            color: var(--deep-space);
            padding: 1rem 0;
            margin: 2rem 0;
            border-top: 3px solid var(--neon-lime);
            border-bottom: 3px solid var(--neon-lime);
            box-shadow: 0 0 20px var(--neon-mag);
            overflow: hidden;
            position: relative;
            max-width: 800px;
            width: 100%;
        }

        .release-banner::before {
            content: '⚠';
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            animation: warningBlink 0.5s infinite alternate;
            z-index: 2;
        }

        .release-banner::after {
            content: '⚠';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            animation: warningBlink 0.5s infinite alternate;
            z-index: 2;
        }

        @keyframes warningBlink {
            0% { opacity: 0.2; }
            100% { opacity: 1; text-shadow: 0 0 10px var(--neon-lime); }
        }

        /* --- COMING SOON BANNER --- */
        .release-banner {
            background: var(--neon-mag);
            padding: 1rem 0;
            margin: 2rem 0;
            border-top: 3px solid var(--neon-lime);
            border-bottom: 3px solid var(--neon-lime);
            box-shadow: 0 0 20px var(--neon-mag);
            overflow: hidden; /* Hides the overflow */
            position: relative;
            width: 100%;
        }

        .marquee-container {
            width: 100%;
            overflow: hidden;
        }

        .marquee-content {
            display: flex;
            width: max-content; /* Forces it to be as wide as the text */
            animation: seamlessScroll 20s linear infinite; /* 20s is a steady, readable crawl */
            gap: 2rem; /* Space between the duplicated blocks */
        }

        /* The magic: it only scrolls exactly 50% of its total width */
        @keyframes seamlessScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); } 
        }

        .release-stamp {
            display: inline-block;
            border: 3px solid var(--neon-lime);
            padding: 0.5rem 1.5rem;
            color: var(--neon-lime);
            font-weight: bold;
            text-shadow: 0 0 10px var(--neon-lime);
            animation: stampGlitch 3s infinite;
            margin-right: 1rem;
        }

        @keyframes stampGlitch {
            0%, 100% { transform: skew(0deg); }
            20% { transform: skew(-2deg); }
            40% { transform: skew(2deg); }
            60% { transform: skew(-1deg); }
            80% { transform: skew(1deg); }
        }

        @keyframes marqueeScroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        .release-stamp {
            display: inline-block;
            border: 3px solid var(--neon-lime);
            padding: 0.5rem 1.5rem;
            margin: 0 1rem;
            color: var(--neon-lime);
            font-weight: bold;
            text-shadow: 0 0 10px var(--neon-lime);
            animation: stampGlitch 3s infinite;
        }

        @keyframes stampGlitch {
            0%, 100% { transform: skew(0deg); }
            20% { transform: skew(-2deg); }
            40% { transform: skew(2deg); }
            60% { transform: skew(-1deg); }
            80% { transform: skew(1deg); }
        }

        .distribution-warning {
            font-size: 0.85rem;
            color: var(--clown-mint);
            margin-top: 0.5rem;
            font-style: italic;
            text-shadow: 0 0 5px var(--clown-mint);
        }

        /* --- MAIN CONTENT CONTAINER --- */
        main {
            max-width: 900px;
            margin: 0 auto;
            padding: 4rem 2rem;
        }

        section {
            margin-bottom: 4rem;
        }

        h2 {
            font-family: var(--display-font);
            color: var(--neon-lime);
            font-size: 2rem;
            border-bottom: 2px solid var(--neon-mag);
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            text-shadow: 0 0 10px var(--neon-lime);
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 600px) {
            .hero { padding: 1rem; }
            .cover-frame { max-width: 100%; }
        }

  /* --- Killer Clowns Picture Frames --- */
  /* --- NEON IMAGE FRAMES --- */
.neon-frame {
    background: rgba(10, 14, 39, 0.85); /* Deep space tint */
    border: 3px solid var(--neon-mag);
    border-radius: 12px;
    box-shadow: 0 0 15px var(--neon-mag), inset 0 0 15px rgba(57, 255, 20, 0.3);
    overflow: hidden;
    max-width: 400px;
    margin: 1.5rem auto;
    transition: all 0.3s ease;
    position: relative;
}

.neon-frame:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 25px var(--neon-lime), inset 0 0 20px rgba(255, 0, 255, 0.4);
    border-color: var(--neon-lime);
}

.frame-header {
    background: linear-gradient(90deg, var(--neon-mag), var(--neon-lime));
    color: var(--deep-space);
    font-weight: bold;
    padding: 6px 12px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--deep-space);
}

.frame-header .dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--deep-space);
}

.neon-frame {
    /* ... keep your existing background, border, shadows, etc ... */
    width: 320px;
    height: 400px; /* Fixed height for the card */
    flex-shrink: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.neon-frame img {
    width: 100%;
    height: 500px; /* Fixed height for the image area */
    object-fit: cover; /* Crops the image to fill the box without distortion */
    padding: 10px;
}

.frame-caption {
    padding: 0 12px 12px;
    color: var(--clown-mint);
    font-size: 0.9rem;
    text-align: center;
    text-shadow: 0 0 5px var(--clown-mint);
    flex-grow: 1; /* Pushes caption to bottom */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.frame-caption {
    padding: 0 12px 12px;
    color: var(--clown-mint);
    font-size: 0.9rem;
    text-align: center;
    text-shadow: 0 0 5px var(--clown-mint);
}

/* --- HORIZONTAL GALLERY TRACK --- */
.evidence-scroll {
    display: flex;
    overflow-x: auto; /* Enables the horizontal scroll */
    gap: 2rem; /* Space between the frames */
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    /* Hide the ugly default scrollbar track on Firefox */
    scrollbar-color: var(--neon-lime) var(--deep-space); 
}

/* Hack the Webkit/Chrome scrollbar to match the vibe */
.evidence-scroll::-webkit-scrollbar {
    height: 10px;
}
.evidence-scroll::-webkit-scrollbar-track {
    background: var(--deep-space);
    border: 1px solid var(--neon-mag);
    border-radius: 5px;
}
.evidence-scroll::-webkit-scrollbar-thumb {
    background: var(--neon-lime);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--neon-lime);
}


/* --- DIGITAL TOLLBOOTHS --- */

.grid-tollbooth {
  border: 2px solid #00ff00; /* Acid green border */
  padding: 20px;
  margin: 2rem auto;
  max-width: 600px;
  background-color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
  text-align: center;
}

.grid-tollbooth h3 {
  color: #ff00ff; /* Hot pink */
  margin-top: 0;
  margin-bottom: 1.5rem;
  letter-spacing: 2px;
  font-family: monospace;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.buy-btn {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #ff00ff;
  color: #ff00ff;
  text-decoration: none;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  transition: all 0.2s ease;
  background: transparent;
  position: relative;
}

.buy-btn:hover {
  background: #ff00ff;
  color: #000;
  box-shadow: 0 0 20px #ff00ff; /* Neon glow */
  transform: skewX(-5deg); /* Glitch skew */
  text-shadow: 0.02em 0 0 rgba(0, 255, 255, 0.8); /* RGB split on text */
}

/* --- READER TRANSMISSIONS GRID --- */
.transmission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.quote-card {
    background: rgba(10, 14, 39, 0.9);
    border: 2px solid var(--neon-mag);
    padding: 1.5rem;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.quote-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--neon-lime);
    border-color: var(--neon-lime);
}

.quote-header {
    color: var(--neon-lime);
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--neon-lime);
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}

.quote-status {
    color: var(--neon-mag);
    text-shadow: 0 0 5px var(--neon-mag);
}

.quote-text {
    color: var(--clown-mint);
    font-style: italic;
    line-height: 1.6;
    font-size: 1.05rem;
    flex-grow: 1;
}

.quote-text::before { 
    content: '"'; 
    color: var(--neon-mag); 
    font-size: 1.5rem; 
    font-weight: bold;
    margin-right: 2px;
}
.quote-text::after { 
    content: '"'; 
    color: var(--neon-mag); 
    font-size: 1.5rem; 
    font-weight: bold;
    margin-left: 2px;
}

/* --- blog readability override --- */
.blog-window .window-content {
  font-size: 1.1rem;
  line-height: 1.6;
}