/* --- RESET & VARS (Keep global or scope body/html resets) --- */
        * { box-sizing: border-box; }
        
        :root {
            --bg: #f7f2ea;
            --ink: #222;
            --bubble-bg: #fff;
            --bubble-border: #222;
            --bubble-padding: 13px 13px;
            --bubble-radius: 14px;
            --bubble-margin: 20px;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 4rem;
        }

        @import url("//hello.myfonts.net/count/28f8bc");
        @font-face { 
        font-family: 'SequentialistBB';
        src: url('http://thenewcode.com/assets/fonts/28F8BC_3_0.woff') format('woff'); }

        /* Hide body scrollbar, we scroll the .carbon_content-wrapper .parallax div instead */
        html, body {
            margin: 0;
            padding: 0;
            background-color: #f5eee6;
            height: 100%;
            /* Keep overflow hidden for the main document to allow the parallax container to handle scrolling */
            overflow: hidden; 
            font-family: 'SequentialistBB', system-ui, sans-serif;
        }

        /* --- OUTER WRAPPER FOR SCOPING --- */
        .carbon_content-wrapper {
            /* This div contains all the scoped styles */
            height: 100%; /* Ensure it fills the viewport */
            width: 100%;
        }

        /* --- SCOPED CSS CLASSES --- */

        /* --- PARALLAX CONTAINER (The Scroller) --- */
        .carbon_content-wrapper .parallax {
            perspective: 100px; /* Depth of field */
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto; /* This element handles scrolling */
            position: relative;
            scroll-behavior: smooth;
        }

        /* --- HEADER GROUP (3D Layers) --- */
        .carbon_content-wrapper .parallax__header {
            position: relative;
            height: 100vh; /* Full screen start */
            transform-style: preserve-3d;
            z-index: -1;
        }

        /* Image layers configuration */
        .carbon_content-wrapper .parallax__layer {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            transform-origin: center;
        }

        .carbon_content-wrapper .parallax__layer img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Depth adjustments */
        .carbon_content-wrapper .parallax__layer__0 { transform: translateZ(-300px) scale(4); }
        .carbon_content-wrapper .parallax__layer__1 { transform: translateZ(-250px) scale(3.5); }
        .carbon_content-wrapper .parallax__layer__2 { transform: translateZ(-200px) scale(3); }
        .carbon_content-wrapper .parallax__layer__3 { transform: translateZ(-150px) scale(2.5); }
        .carbon_content-wrapper .parallax__layer__4 { transform: translateZ(-100px) scale(2); }
        .carbon_content-wrapper .parallax__layer__5 { transform: translateZ(-50px) scale(1.5); }
        .carbon_content-wrapper .parallax__layer__6 { transform: translateZ(0px) scale(1); }

        /* The Heading Title */
        .carbon_content-wrapper .parallax__heading {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) translateZ(-10px) scale(1.1); /* Slight depth */
            z-index: 100;
            font-family: 'Morion', cursive;
            text-transform: uppercase;
            letter-spacing: 0.5rem;
            line-height: 1.4;
            font-size: clamp(1.8rem, 2.34vw + 1.33rem, 2.5rem);
            color: #000;
            background-color: rgba(248, 214, 90, 0.9);
            padding: 40px 20px;
            text-align: center;
            max-width: 80%;
            width: 420px;
        }

        /* --- MAIN CONTENT (Standard Flow) --- */
        .carbon_content-wrapper .content-layer {
            position: relative;
            z-index: 2;
            padding-top: 300px;
            padding-bottom: 100px;
            background-image: url("https://interactive.nation.africa/2025/dev/after_five/images/light_bg.png");
            top: -14%;
            background-repeat: repeat-x;
        }

        /* --- TEXT STYLES --- */
        .carbon_content-wrapper .narrative-text {
            width: calc(80% - 40px);
            max-width: 700px;
            margin: 100px auto 100px; 
            padding: 60px 40px;
            background: #fff;
            border: 5px solid var(--ink);
            box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
            font-family: "Comic Neue", cursive;
            font-weight: 300;
            font-style: italic;
            font-size: 1.4rem;
            line-height: 1.6;
            text-align: center;
            border-image: url(https://interactive.nation.africa/2025/dev/after_five/images/comic-frame.png) 22 16 16 22;
            transform: none; 
        }
        
        .carbon_content-wrapper .narrative-text h1 { margin-bottom: 12px; font-size: clamp(20px,3.8vw,32px); }

        /* --- SCENE STYLES --- */
        .carbon_content-wrapper .scene-wrapper { 
            position: relative; 
            width: 100%; 
            height: 200vh; /* Scroll distance for the sticky scene */
        }

        .carbon_content-wrapper .scene { 
            position: sticky; 
            top: 0; 
            height: 100vh; 
            width: 100%; 
            overflow: hidden; 
            background: #f5eee6;
        }

        .carbon_content-wrapper .img-wrap {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .carbon_content-wrapper .scene-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- BUBBLE STYLES --- */
        .carbon_content-wrapper .speech-layer { 
            position: absolute; inset:0; pointer-events: none; z-index: 10; 
        }

        .carbon_content-wrapper .bubble {
            position: absolute;
            padding: var(--bubble-padding);
            background: var(--bubble-bg);
            border: 3px solid var(--bubble-border);
            border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
            box-shadow: 6px 8px 0 rgba(0,0,0,0.08);
            opacity: 0;
            transform: translateY(8px) scale(0.97);
            transition: opacity 360ms ease, transform 360ms ease;
            pointer-events: auto;
            z-index: 12;
            font-family: "Comic Neue", cursive;
            font-weight: 400;
            font-style: italic;
            font-size: clamp(14px, 1.9vw, 18px);
            line-height: 1.2;
            /* max-width: 40ch; */
        }

        .carbon_content-wrapper .bubble.visible { opacity: 1; transform: translateY(0) scale(1); }
        .carbon_content-wrapper .bubble.fading  { opacity: 0; transform: translateY(-6px) scale(.98); }

        /* Bubble Tails */
        .carbon_content-wrapper .bubble::after, .carbon_content-wrapper .bubble::before {
            content: ''; position: absolute; bottom: -20px; left: 50%;
            transform: translateX(-50%); width: 0; height: 0; z-index: 2;
        }
        /* Default Center Tail */
        .carbon_content-wrapper .bubble::after { border-width: 25px 15px 0 10px; border-style: solid; border-color: var(--ink) transparent transparent transparent; }
        .carbon_content-wrapper .bubble::before { bottom: -14px; z-index: 3; border-width: 20px 12px 0 7px; border-style: solid; border-color: var(--bubble-bg) transparent transparent transparent; }

        /* Left configuration */
        .carbon_content-wrapper .bubble.left { left: var(--bubble-margin); transform: none; }
        .carbon_content-wrapper .bubble.left::after, .carbon_content-wrapper .bubble.left::before { left: 28px; transform: none; }

        /* Right configuration */
        .carbon_content-wrapper .bubble.right { left: auto; right: var(--bubble-margin); transform: none; }
        .carbon_content-wrapper .bubble.right::after, .carbon_content-wrapper .bubble.right::before { left: auto; right: 28px; transform: none; }
        
        /* Center configuration */
        .carbon_content-wrapper .bubble.center { transform: translateX(-50%); }

        /* Responsive */
        @media (max-width: 600px) {
            .carbon_content-wrapper .narrative-text { padding: 30px 20px; font-size: 1.2rem; margin-top: 50px; }
            .carbon_content-wrapper .bubble { max-width: 70vw; }
        }

        /* --- Scroll Hint --- */
        .carbon_content-wrapper .scroll-hint {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--ink);
            color: #fff;
            padding: 10px 15px;
            border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
            font-size: 1rem;
            animation: bounce 2s infinite;
            z-index: 20;
        }
        /* Keyframes are global, but we can scope the hint class */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
            40% {transform: translateY(-10px);}
            60% {transform: translateY(-5px);}
        }

        .author-byline {
            display: flex;
            flex-wrap: wrap; 
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-top: var(--spacing-md);
            font-family: "Comic Neue", cursive;
            font-style: italic;
            font-size: 0.85rem;
        }
        .author-byline img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        .author-byline span { line-height: 1; }

        /* --- FOOTER STYLES --- */
        .carbon_content-wrapper .footer {
            background-color: var(--ink);
            color: var(--bg);
            padding: 100px 40px;
            text-align: left;
            font-family: "Comic Neue", cursive;
            font-style: italic;
            z-index: 1; /* Keep it above the parallax body, but below content-layer */
            position: relative;
            
        }

        .carbon_content-wrapper .footer p {
            font-size: 1rem;
            opacity: 0.7;
            max-width: 420px;
            margin-top: 1.5rem;
        }