/* 1. GLOBAL RESET & BASE TYPOGRAPHY */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            height: 100%;
            background-color: #000;
            font-family: 'Montserrat', sans-serif;
        }

        /* Nuclear White Text Rule — !important needed here as blanket override */
        body, p, span, div, h3, a {
            color: #ffffff !important;
        }
        
        section {
            box-shadow: inset 0 0 120px rgba(0,0,0,0.6);
        }

        /* 2. THE SCROLL ENGINE */
        .scroller {
            height: 100vh;
            overflow-y: scroll;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }

        .scroller::-webkit-scrollbar { display: none; }

        /* 3. THE MODULE ARCHITECTURE */
        .module {
            height: 100vh;
            width: 100%;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Split Logic */
        .module-split {
            display: flex;
            width: 100%;
            max-width: 1400px;
            height: 100%;
            flex-direction: row;
            margin: 0 auto;
        }

        .mode-vertical { flex-direction: column; }

        .module-split.reverse { flex-direction: row-reverse; }

        /* Content Side */
        .content-side {
            flex: 1;
            padding: 4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 10;
        }

        /* Alignment Rules */
        .module-split:not(.reverse) .content-side { align-items: flex-start; text-align: left; }
        .module-split.reverse .content-side { align-items: flex-end; text-align: right; }
        .mode-vertical .content-side { align-items: center; text-align: center; }

        /* Typography */
        h1, h2 {
            font-family: 'Bangers', system-ui;
            font-size: clamp(2.5rem, 6vw, 5rem);
            color: #ffcc00;
            text-shadow: 4px 4px 0px #602010;
            text-transform: uppercase;
            line-height: 1;
            margin-bottom: 1rem;
        }

        p {
            font-size: clamp(1rem, 1.5vw, 1.25rem);
            line-height: 1.6;
            max-width: 500px;
            padding-top: 0.5em;
        }

        /* IMAGE SIDE */
        .image-side {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .comic-asset {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            border-radius: 15px;
            border: 1px solid white;
            display: block;
        }

        /* 4. ID-BASED COLOR SYSTEM */
        #hero     { background-color: #0a152a; } /* Deep Space Blue */
        #conflict { background-color: #2a0a0b; } /* Dark Blood Red */
        #friends  { background-color: #0a2a1a; } /* Deep Forest Green */
        #cta      { background-color: #0a2420; } /* Dark Gold */
        #author   { background-color: #1a0a2a; } /* Deep Void Purple */

        /* 5. CTA & SPECIAL ELEMENTS */
        .data-container {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
            flex-wrap: wrap;
        }
        
        #cta .module-split .content-side {
            text-align: center;
            align-items: center;
        }    
        .chip {
            background: rgba(255, 204, 0, 0.15);
            padding: 0.6rem 1.2rem;
            border-radius: 50px;
            font-size: 0.85rem;
            color: #ffcc00;
            text-transform: uppercase;
            border: 1px solid rgba(255, 204, 0, 0.3);
        }

        .cta-button {
            margin-top: 3rem;
            padding: 1.2rem 3.5rem;
            background-color: #e63946;
            text-decoration: none;
            font-family: 'Bangers', system-ui;
            font-size: 2.5rem;
            border-radius: 8px;
            display: inline-block;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        /* !important needed here to override the nuclear white rule on hover */
        .cta-button:hover {
            transform: scale(1.1) rotate(-2deg);
            background-color: #ffcc00 !important;
            color: #000 !important;
        }
        
        #author footer {
            width: 100%;
            padding: 1rem 2rem;
            text-align: center;
            font-size: 0.8rem;
            opacity: 0.5;
        }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .module-split,
            .module-split.reverse,
            .mode-vertical { flex-direction: column !important; }

            /* !important needed to override split alignment rules */
            .content-side {
                padding: 2rem;
                align-items: center !important;
                text-align: center !important;
                flex: 1;
            }

            .image-side { flex: 1; width: 100%; height: 50vh; }
        }