:root {
            --font-primary: 'Morion', Georgia, serif;
            --font-secondary: "Roboto", serif;
            --color-text: #333;
            --color-text-light: #f4f4f4;
            --color-background: #f2f3f0;
            --color-primary: #005a9c;
            --color-light-gray: #f4f4f4;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 4rem;
            --content-width: 38rem;
            --border-radius: 8px;

            --bg: #fff;
            --accent-1: #cecece;
            --accent-2: #cececeaa;
            --sticky-bar-height: 50px;
            --fg: #333; /* Added missing variable */
            --muted: #666; /* Added missing variable */
            --accent: #005a9c; /* Added missing variable */
        }

        * { margin: 0; }

        html {
            container-type: inline-size;
            scroll-behavior: smooth;
        }

        main, article, footer { display: grid; }

        .carbon_content-wrapper {
            --fgc: #dcdcdc;
            --hlc: #f8955c;
            display: grid;
            /* create the three columns of the grid */
            grid-template-columns: 0.65lh min(100cqw - 1.3lh, 550px) 0.65lh;
            justify-content: space-evenly;
            /* needed for viewport sticky skip links */
            align-items: start;
            position: relative;
            background: #28292b;
            color: var(--fgc);
            /* font-size scales with viewport 
            * within reasonable limits */
            font-family: 'Morion', serif;
            font-size: clamp(.875em, 3vw, 1.375em);
            line-height: 3;
            margin-left: calc(-20px);
            margin-right: calc(-20px);

            /* use pseudo for masked header image 
            * instead of empty div */
            &::before {
                grid-area: 1 / 1 / span 1 / span 3;
                justify-self: center;
                width: 100cqw; /* full-bleed */
                height: 60vh;
                background: 
                    url(https://interactive.nation.africa/2025/dev/tanzania_protests/images/cover.jpg)
                    50% / cover;
                /* so it goes from opaque at the top to 
                * transparent at the bottom */
                mask: linear-gradient(red, transparent);
                content: '';
            }
        }

        main {
            /* 1st (only) row, 2nd column */
            grid-area: 1 / 2;
            gap: 1em;
            /* we want its children to know its width 
            * for font sizing  */
            container-type: inline-size;
            /* ensure it's on top of header image */
            z-index: 1;
            padding-top: 60vh;
            line-height: 1.125;
        }

        h1, h2, h3, h4 { font-weight: 200; }

        article {
            gap: 1.5em;
            
            /* use clamp values; 
            * this eliminates the need for MQs and 
            * we have smooth, not abrupt transitions 
            * from one font-size to another */
            h1 { font-size: clamp(1.5rem, 25cqw, 2.0em); }

            h2 {
                font-size: clamp(1.25rem, 7cqw, 1.125em);
                font-weight: 500;
            }

            p, blockquote { line-height: 1.5; }

            blockquote {
                /* use border instead of pseudo */
                border-left: solid 4px;
                padding-left: 1em;
                font-weight: 700;
            }
        }
            
        .carbon_content-wrapper p { 
            font-size: 1.1875rem; 
            line-height: 1.75rem; 
            font-weight: 300; 
            margin-top: calc(-1 * var(--spacing-sm));
            margin-bottom: calc(-1 * var(--spacing-sm));
        }

        .carbon_content-wrapper .carbon__caption,
        .carbon_content-wrapper .carbon__figcaption { 
            font-size: 0.9rem; 
            color: var(--color-text-light); 
            text-align: left; 
            margin-top: calc(-1 * var(--spacing-sm)); 
            margin-bottom: 15px; 
        }

        .carbon_content-wrapper .carbon__note { 
            font-size: 0.9rem; 
            color: var(--color-text-light); 
            text-align: left; 
            margin-top: calc(-1 * var(--spacing-sm)); 
        }

        .carbon_content-wrapper .carbon__highlighted-text {
            font-size: 0.9rem; 
            color: var(--color-text-light); 
            text-align: left; 
            margin-top: calc(-1 * var(--spacing-sm));
            background-color: gray; 
            border-radius: 5px;
            padding: 5px 10px;
            display: inline-block;
        }

        .carbon_content-wrapper .carbon__author-byline {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            margin-top: var(--spacing-md);
            color: var(--color-text-light);
            font-family: var(--font-secondary);
            font-size: 0.85rem;
        }

        .carbon_content-wrapper .carbon__author-byline__img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            margin-top: 0;
        }

        .carbon_content-wrapper .carbon__author-byline span { line-height: 1; }

        .carbon_content-wrapper img,
        .carbon_content-wrapper video { 
            max-width: 100%; 
            height: auto; 
            display: block; 
            margin-top: 20px; 
            aspect-ratio: auto; 
        }

        .carbon_content-wrapper .carbon__full-width__img {
            width: 100%;
            max-height: 85vh;
            object-fit: cover;
            object-position: center;
            border-radius: 0;
        }

        .carbon_content-wrapper .carbon__wide-media {
            width: 100%; 
            margin: 1.5rem 0;
            max-width: 100%;
        }

        @media (min-width: 39rem) {
            .carbon_content-wrapper .carbon__wide-media {
                width: calc(100% + 18rem); 
                margin-left: -9rem;
                margin-right: -9rem; 
                margin-top: 1.5rem;
                margin-bottom: 0.5rem;
                max-width: none;
            }
        }

        .carbon_content-wrapper .carbon__wide-media > * {
            width: 100%;
            display: block;
        }

        /* -------------------------
        Scrolly container & sticky map
        ------------------------- */
        .carbon_content-wrapper .carbon-map-content__scrolly-container{
            grid-column: 1 / -1; /* Break out of main grid */
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-top: 50px;
            margin-left: -50vw;
            margin-right: -50vw;
        }

        .carbon_content-wrapper #map{
            position: sticky;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }

        /* -------------------------
        Story list (chapters)
        Mobile-first: centered panels
        ------------------------- */
        .carbon_content-wrapper .carbon-map-content__story{
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 6vh;
            padding: 4vh 0;
            align-items: center; /* center on mobile */
            pointer-events: none; /* allow clicks to pass to map unless over a chapter */
        }

        .carbon_content-wrapper .carbon-map-content__chapter{
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(5px);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            
            /* Mobile-first margins: centered with 1rem side gutters */
            margin: 5vh 1rem;
            padding: 1rem 1.5rem; /* Reduced padding for mobile */
            
            max-width: 450px;
            color: black;
            pointer-events: auto; /* re-enable pointer events for chapters */
        }

        .carbon_content-wrapper .carbon-map-content__chapter h3{
            margin: .1rem 0 .6rem 0;
            font-family: 'Morion', serif;
            font-size: 1.5rem;
            font-weight: 500;
        }

        .carbon_content-wrapper .carbon-map-content__chapter p{
            margin: 0 0 .9rem 0;
            color: var(--color-text);
            font-weight: 300;
            font-size: 1.15rem;
            line-height: 1.5rem;
        }

        /* Active marker */
        .carbon_content-wrapper .carbon-map-content__chapter--active{
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 12px 40px rgba(0,0,0,0.12);
            outline: none;
        }

        /* -------------------------
        Namespaced figure + figcaption
        Scoped under .carbon-map-content__story
        ------------------------- */
        .carbon-map-content__story .carbon-map-content__figure{
            margin: 1rem 0 0.25rem 0;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            display: block;
        }

        .carbon-map-content__story .carbon-map-content__figure img,
        .carbon-map-content__story .carbon-map-content__figure video{
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
            margin-top: 0;
        }

        .carbon-map-content__story .carbon-map-content__figcaption{
            display: block;
            padding: .55rem .75rem;
            font-size: .92rem;
            color: var(--muted);
            text-align: left;
            background: #fbfbfb;
            border-top: 1px solid #eee;
        }

        /* -------------------------
        Desktop: alternate left / right
        Chapters that are left/right use placement modifiers
        ------------------------- */
        @media (min-width: 768px){
            .carbon-map-content__story{
                align-items: stretch;
                padding: 6vh 0;
            }

            /* We wrap each chapter in a flex row helper to position left/right.
            Simpler: control alignment on the chapter element itself via justify-content on parent container (.chapter-row).
            */
            .carbon-map-content__chapter{
                width: min(45vw, 520px);
                /* min-height: 65vh; */
                margin: 0;
            }

            /* helper rows (we use the chapter itself for alignment) */
            .carbon-map-content__chapter--left{
                margin-left: 5vw;
                margin-right: auto;
                align-self: flex-start;
            }

            .carbon-map-content__chapter--right{
                margin-right: 5vw;
                margin-left: auto;
                align-self: flex-end;
            }

            /* Active border depending on side for clearer affordance */
            .carbon-map-content__chapter--active.carbon-map-content__chapter--left{
                border-left: 5px solid var(--accent);
            }
            .carbon-map-content__chapter--active.carbon-map-content__chapter--right{
                border-right: 5px solid var(--accent);
            }
        }

        /* small, pleasant defaults for images/videos on very small screens */
        @media (max-width: 420px){
            .carbon-map-content__chapter{
                padding: 1rem;
                min-height: 56vh;
            }
        }

        /* Custom marker styles */
        .custom-marker {
            width: 30px;
            height: 30px;
            background-color: #f41313;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            cursor: pointer;
            position: relative;
        }

        /* subtle pulsing ring */
        .custom-marker::after {
            content: "";
            position: absolute;
            left: -10px;
            top: -10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(244,19,19,0.12);
            z-index: -1;
            animation: marker-ripple 1800ms infinite ease-out;
        }

        @keyframes marker-ripple {
            0% { transform: scale(.6); opacity: .6; }
            70% { transform: scale(1.6); opacity: 0; }
            100% { transform: scale(.6); opacity: 0; }
        }

        /* active state */
        .custom-marker.active {
            transform: scale(1.15);
            box-shadow: 0 6px 18px rgba(244,19,19,0.45);
        }

        /* popup minor styling (scoped via className below) */
        .mapboxgl-popup.marker-popup .mapboxgl-popup-content {
            padding: 0.6rem 0.8rem;
            border-radius: 8px;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
        }

        .mapboxgl-popup.marker-popup h4 { 
            margin: .1rem 0 .25rem 0; 
            font-size: 1rem; 
        }

        .mapboxgl-popup.marker-popup p { 
            margin: 0; 
            font-size: .9rem; 
            color: #666; 
        }

        .carbon_content-wrapper .carbon-footer__container {
            gap: 2em;
            padding: min(4.5em, 5vw + 4em) 0;
            border-image: conic-gradient(#222325 0 0) fill 0//0 50vw 1em; /* double slash is valid CSS */
            line-height: 1.5;
            margin-top: 20px;
        }

        .carbon_content-wrapper .carbon-footer__container p {
            font-size: 1.0rem;
            margin-top: 10px;
        }