/* ==========================================================================
           CORE BENCHMARK THEME TOKENS (Karamoja_Project.html & Walking Witness)
           ========================================================================== */
        :root {
            --ink: #f6f3ef;
            --ink-muted: #b5b0a8;
            --muted: #bbb8bd;
            --paper: #101013;
            --paper-elevated: #17171c;
            --paper-card: #1d1d24;
            --red: #ff142c;
            --red-dark: #cc0f22;
            --red-soft: rgba(255, 20, 44, 0.14);
            --line: #ffffff1c;
            --water: #60c8d6;
            --water-blue: #38bdf8;
            --water-deep: #0284c7;
            --earth-gold: #f59e0b;
            --leaf-green: #22c55e;
            --border-subtle: rgba(246, 243, 239, 0.12);
            --border-strong: rgba(246, 243, 239, 0.22);
            --radius: 14px;
            --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.45);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 28px;
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font: 16px/1.65 'Inter', Arial, Helvetica, sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
        }

        .serif-heading {
            font-family: Georgia, 'Times New Roman', Times, serif;
        }

        /* ==========================================================================
           TOP MENU BAR (Dark Crimson Dotted World-Map Header, Borderless Tabs)
           ========================================================================== */
        .top-header {
            background-color: #0e070a;
            background-image:
                radial-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px),
                radial-gradient(rgba(255, 20, 44, 0.14) 1px, transparent 1px),
                radial-gradient(ellipse at 18% 50%, #4b0d17 0%, #24070c 48%, #0e070a 100%);
            background-size: 16px 16px, 32px 32px, 100% 100%;
            background-position: 0 0, 8px 8px, 0 0;
            border-bottom: 1px solid rgba(255, 20, 44, 0.32);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
        }

        .top-header-inner {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 24px;
            height: 86px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .ww-logo-link {
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            cursor: pointer;
            position: relative;
        }

        .nav-tabs-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .nav-tab-item {
            background: transparent;
            border: none;
            font-family: 'Inter', Arial, sans-serif;
            font-size: 0.93rem;
            font-weight: 600;
            color: #e5e0d8;
            cursor: pointer;
            padding: 9px 14px;
            position: relative;
            text-decoration: none;
            transition: color 0.22s ease;
        }

        .nav-tab-item:hover {
            color: #ffffff;
        }

        .nav-tab-item.active {
            color: #ffffff;
            font-weight: 700;
        }

        .nav-tab-item.active::after {
            content: '';
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 0;
            height: 3px;
            background: #ff142c;
            border-radius: 99px;
            box-shadow: 0 0 12px #ff142c;
        }

        @media (max-width: 920px) {
            .top-header-inner {
                height: auto;
                padding: 14px 16px;
                flex-direction: column;
                gap: 12px;
            }
            .nav-tabs-right {
                justify-content: center;
                gap: 6px;
            }
            .nav-tab-item {
                font-size: 0.84rem;
                padding: 7px 10px;
            }
        }

        .tab-view {
            display: none;
        }
        .tab-view.active {
            display: block;
        }

        /* ==========================================================================
           HOME PAGE: EXACT KARAMOJA PROJECT STYLING FROM ATTACHED SITE
           ========================================================================== */
        .wrap {
            max-width: 1240px;
            margin: auto;
            padding: 0 48px;
        }
        .hero {
            display: grid;
            grid-template-columns: 1.18fr 1fr;
            align-items: center;
            gap: 70px;
            padding: 70px 0 54px;
        }
        .eyebrow {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            font-weight: 700;
            color: #c6a7ad;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .eyebrow:before {
            content: '';
            width: 22px;
            height: 1px;
            background: var(--red);
        }
        .hero h1 {
            font: normal clamp(48px, 5.8vw, 77px)/1.07 Georgia, serif;
            letter-spacing: -2.5px;
            margin: 24px 0;
        }
        .hero h1 em {
            font-weight: normal;
            color: #ff3549;
        }
        .intro {
            max-width: 470px;
            color: var(--muted);
            font-size: 17px;
            line-height: 1.8;
        }
        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            padding: 15px 24px;
            border: 0;
            border-radius: 6px;
            background: var(--red);
            color: #fff;
            font: 700 13px Arial, sans-serif;
            text-decoration: none;
            cursor: pointer;
            transition: background .2s, transform .2s;
        }
        .button:hover {
            background: #e00020;
            transform: translateY(-2px);
        }
        .hero .button {
            margin-top: 20px;
        }
        .watch-link {
            display: inline-block;
            margin-left: 20px;
            font-size: 12px;
            text-underline-offset: 5px;
            color: #ded9dc;
        }
        .small-note {
            font-size: 11px;
            color: #b9b1b7;
            margin-top: 24px;
            display: flex;
            align-items: center;
            gap: 9px;
        }
        .status-dot {
            height: 6px;
            width: 6px;
            border-radius: 50%;
            background: #77cbb9;
            display: inline-block;
        }
        .well-panel {
            background: radial-gradient(ellipse at 50% 30%, #43212c 0, #211c24 50%, #18191f 90%);
            border: 1px solid #ffffff18;
            border-radius: 140px 140px 16px 16px;
            text-align: center;
            padding: 25px 25px 28px;
            position: relative;
            overflow: hidden;
        }
        .well-panel:before {
            content: '';
            position: absolute;
            inset: 14px;
            border: 1px solid #ffffff0c;
            border-radius: 130px 130px 8px 8px;
            pointer-events: none;
        }
        .well-panel svg {
            width: 100%;
            max-width: 340px;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .well-caption {
            font: italic 22px Georgia, serif;
            margin: 0 0 10px;
        }
        .well-sub {
            font-size: 10px;
            letter-spacing: 1.3px;
            text-transform: uppercase;
            color: #bfb6be;
            margin: 0;
        }
        .progress {
            padding: 30px 35px;
            background: #1b1a20;
            border: 1px solid var(--line);
            border-radius: 12px;
        }
        .numbers {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 20px;
        }
        .raised {
            font: 48px/1.2 Georgia, serif;
            letter-spacing: -1px;
        }
        .numbers span {
            font-size: 11px;
            color: #bcb7bf;
        }
        .goal {
            text-align: right;
            font: 30px/1.4 Georgia, serif;
        }
        .track {
            height: 8px;
            background: #36323c;
            overflow: hidden;
            border-radius: 20px;
            margin: 23px 0 13px;
        }
        .bar {
            height: 100%;
            width: 31.25%;
            background: linear-gradient(90deg, #d90020, #ff3549);
            border-radius: 20px;
            animation: fill-bar 1.8s ease-out both;
        }
        .progress-footer {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #d3ccd4;
        }
        .farm-story {
            position: relative;
            margin: 58px 0 0;
            border-radius: 12px;
            overflow: hidden;
            background: #25232a;
        }
        .farm-story img {
            display: block;
            width: 100%;
            height: 350px;
            object-fit: cover;
        }
        .farm-story:after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(0deg, #000b, transparent 65%);
            pointer-events: none;
        }
        .farm-story figcaption {
            position: absolute;
            left: 30px;
            right: 30px;
            bottom: 24px;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 15px;
        }
        .farm-story figcaption span {
            font: 32px Georgia, serif;
            color: white;
        }
        .video-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            padding: 65px 0;
            border-bottom: 1px solid var(--line);
        }
        .wrap h2 {
            font: normal 39px/1.18 Georgia, serif;
            letter-spacing: -.8px;
            margin: 18px 0;
        }
        .video-section p, .mission p {
            color: var(--muted);
            max-width: 465px;
        }
        .video-time {
            font-size: 10px;
            letter-spacing: 1.5px;
        }
        .video-section .button {
            margin-top: 12px;
        }
        .video-section iframe {
            display: block;
            width: 100%;
            max-width: 300px;
            aspect-ratio: 9/16;
            margin: auto;
            max-height: 535px;
            background: #000;
            border: 0;
            border-radius: 12px;
            box-shadow: 0 22px 55px #0004;
        }
        .mission {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 70px;
            padding: 58px 0;
        }
        .mission p {
            font-size: 15px;
        }
        .give {
            border: 1px solid #bf5b6a40;
            background: linear-gradient(130deg, #3b1923, #201a22 70%);
            border-radius: 14px;
            padding: 42px;
            margin-bottom: 38px;
        }
        .give-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 40px;
            margin-bottom: 28px;
        }
        .give-top p {
            font-size: 13px;
            color: #c9bec6;
            max-width: 340px;
        }
        .give h2 {
            margin-bottom: 0;
        }
        .methods {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }
        .method {
            padding: 26px;
            border: 1px solid #ffffff20;
            border-radius: 9px;
            background: #ffffff03;
        }
        .method h3 {
            font-size: 21px;
            margin: 0 0 10px;
        }
        .account {
            font-size: 15px;
            overflow-wrap: anywhere;
        }
        .method p {
            font-size: 12px;
            color: #c8bdc5;
            min-height: 38px;
            margin: 10px 0 20px;
        }
        .method .button {
            width: 100%;
            padding: 14px;
        }
        .copy {
            display: block;
            margin: 12px auto 0;
            font: 12px Arial, sans-serif;
            background: none;
            border: 0;
            color: #d8cfd5;
            text-decoration: underline;
            text-underline-offset: 4px;
            cursor: pointer;
            padding: 6px;
        }
        .contact-giving {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 5px 25px;
            border-top: 1px solid #ffffff25;
            margin-top: 27px;
            padding-top: 25px;
        }
        .contact-giving h3 {
            font-size: 19px;
            margin: 0 0 7px;
        }
        .contact-giving p {
            font-size: 12px;
            color: #d4c4cc;
            max-width: 470px;
            margin: 0;
        }
        .email-button {
            background: #ff142c;
            white-space: nowrap;
        }
        .contact-email {
            grid-column: 2;
            font-size: 11px;
            text-align: center;
            text-underline-offset: 4px;
            color: #e7dbe0;
        }
        .notice {
            font-size: 11px;
            color: #b5aab3;
            margin: 22px 0 0;
        }
        #copy-status {
            font-size: 12px;
            margin-top: 8px;
        }
        .editor {
            border: 1px solid var(--line);
            padding: 18px;
            border-radius: 8px;
            margin-bottom: 25px;
            background: #16151c;
        }
        .editor summary {
            cursor: pointer;
            font-size: 13px;
            font-weight: 700;
            color: #ff6b7a;
        }
        .editor p {
            font-size: 12px;
            max-width: 700px;
            color: var(--muted);
            margin-top: 8px;
        }
        .editor form {
            display: flex;
            align-items: end;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
        }
        .editor label {
            display: grid;
            gap: 5px;
            font-size: 12px;
        }
        .editor input {
            background: #24212a;
            color: white;
            border: 1px solid #6b5d6a;
            padding: 10px 12px;
            font: inherit;
            border-radius: 6px;
            width: 190px;
        }
        .wave {
            animation: sway 4s ease-in-out infinite alternate;
        }
        .wave2 {
            animation: sway 5.5s ease-in-out infinite alternate-reverse;
        }
        .bucket-motion {
            transform-origin: 180px 179px;
            animation: bucket-sway 4.5s ease-in-out infinite;
        }
        #water {
            transition: y 1.5s, height 1.5s;
        }
        @keyframes sway {
            from { transform: translateX(-12px); }
            to { transform: translateX(12px); }
        }
        @keyframes bucket-sway {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }
        @keyframes fill-bar {
            from { transform: scaleX(0); transform-origin: left; }
            to { transform: scaleX(1); transform-origin: left; }
        }
        @media (max-width: 760px) {
            .wrap { padding: 0 21px; }
            .hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 30px; }
            .hero h1 { font-size: 54px; letter-spacing: -1.7px; }
            .well-panel { max-width: 430px; width: 100%; margin: auto; }
            .video-section { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
            .mission { grid-template-columns: 1fr; gap: 0; padding: 38px 0; }
            .give { padding: 27px 21px; }
            .give-top { display: block; }
            .methods { grid-template-columns: 1fr; }
            .contact-giving { grid-template-columns: 1fr; gap: 18px; }
            .contact-email { grid-column: 1; text-align: left; }
        }

        /* ==========================================================================
           SHARED INNER TABS STYLING (Empowerment, About, Adopted Villages, Missions)
           ========================================================================== */
        .bm-container {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 24px;
        }
        .bm-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: var(--red-soft);
            border: 1px solid rgba(255, 20, 44, 0.35);
            color: #ff6b7a;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 6px 16px;
            border-radius: 999px;
            margin-bottom: 20px;
        }
        .bm-hero {
            padding: 64px 0 72px;
            border-bottom: 1px solid var(--border-subtle);
            background:
                radial-gradient(circle at 18% 15%, rgba(255, 20, 44, 0.12), transparent 42%),
                radial-gradient(circle at 82% 80%, rgba(56, 189, 248, 0.08), transparent 45%),
                var(--paper);
        }
        .bm-hero h1 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: clamp(2.15rem, 4.8vw, 3.5rem);
            line-height: 1.15;
            color: var(--ink);
            margin-bottom: 18px;
            letter-spacing: -0.015em;
        }
        .bm-hero-sub {
            max-width: 760px;
            margin: 0 auto 42px;
            font-size: 1.15rem;
            color: var(--ink-muted);
        }
        .bm-card {
            background-color: var(--paper-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius);
            box-shadow: var(--shadow-deep);
        }
        .crimson-dotted-footer {
            background-color: #0b0b0e;
            background-image:
                radial-gradient(circle at 50% 0%, rgba(255, 20, 44, 0.18), transparent 60%),
                radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 100% 100%, 18px 18px;
            border-top: 1px solid var(--border-strong);
        }

        /* ==========================================================================
           DOTTED WORLD MAP FOOTER
           ========================================================================== */
        .crimson-dotted-footer {
            background-color: #0b0b0e;
            background-image:
                radial-gradient(circle at 50% 0%, rgba(255, 20, 44, 0.18), transparent 60%),
                radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 100% 100%, 18px 18px;
            border-top: 1px solid var(--border-strong);
        }