/* =========================================================
   CSAf — "Soft" palette on top of the glass layer.
   Light, airy, low-saturation. Brand colours are used as
   gentle tints and small accents, never as big deep blocks.
   ========================================================= */
:root{
  --ink:#1F2E2B;                 /* softer near-black for text */
  --text:#26332F;
  --muted:#66726E;
  --paper:#F6F7F5;
  --teal:#3F8C93;                /* brand teal, toned down */
  --emerald:#3F8C93;
  --gold:#B48E4E;
  --gold-2:#C9A86E;
  --mist:#EEF3F1;
  --graphite:#34413E;            /* the one darker surface, used sparingly */
  --tint:linear-gradient(145deg,#E6F1EE,#E8EEF5);
}

/* Wallpaper: barely-there colour */
body:before{
  background:
    radial-gradient(40vmax 40vmax at 10% 15%,rgba(63,140,147,.10),transparent 70%),
    radial-gradient(36vmax 36vmax at 90% 30%,rgba(90,130,180,.08),transparent 70%),
    radial-gradient(32vmax 32vmax at 70% 88%,rgba(110,180,140,.09),transparent 70%),
    radial-gradient(28vmax 28vmax at 18% 82%,rgba(201,168,110,.08),transparent 70%)}
.kicker:after{box-shadow:0 0 0 4px rgba(63,140,147,.12)}
.statement-text .sw.hl{color:var(--teal)}
.sec-lede{color:var(--muted)}

/* ---------- Hero: light frosted panel instead of deep green */
.hero{background:var(--tint);color:var(--ink);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 60px -40px rgba(31,46,43,.25)}
.hero:after{background:linear-gradient(90deg,rgba(246,247,245,.92) 0%,rgba(246,247,245,.55) 48%,rgba(246,247,245,0) 80%)}
.hero .aurora{opacity:.28;filter:blur(110px) saturate(.6)}
#africa{--map-dot:63,140,147;--map-hi:180,142,78;--map-dot-k:1.6}
.hero .grain{display:none}
.hero .eyebrow{color:var(--gold)}
.hero .eyebrow:after{box-shadow:0 0 0 4px rgba(201,168,110,.18)}
.hero-title em{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--gold)}
.hero-lede{color:var(--muted)}
.hero .btn-light{background:var(--graphite);color:#fff}
.hero .btn-ghost{color:var(--ink);background:rgba(255,255,255,.55);border-color:rgba(31,46,43,.12)}
.chip{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);box-shadow:0 14px 30px -18px rgba(31,46,43,.3)}
.chip b{color:var(--ink)}.chip span{color:var(--muted)}
.scroll-cue{border-color:rgba(31,46,43,.2)}.scroll-cue span{background:var(--ink)}

/* Inner-page headers get the same light treatment */
.page-hero{background:var(--tint);color:var(--ink);margin:10px;border-radius:38px;padding-top:150px;border:1px solid rgba(255,255,255,.9)}
.page-hero .aurora{opacity:.2;filter:blur(110px) saturate(.6)}
.page-hero .grain{display:none}
.page-hero h1 em{color:var(--gold)}
.page-hero p{color:var(--muted)}
.page-hero .kicker.light,.page-hero .eyebrow{color:var(--gold)}
.page-hero a:not(.btn){color:var(--teal)}

/* Navigation */
.nav,.nav.solid{background:rgba(255,255,255,.7)}

/* Buttons */
.btn-gold{background:#D9BE8A;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -8px rgba(180,142,78,.6)}
.btn-dark{background:var(--graphite)}

/* Icons: soft tinted tiles, not bright gradients */
.ico,.pillar .ico,.theme .ico,.front .ico,.theme:hover .ico{
  background:rgba(63,140,147,.11)!important;color:var(--teal)!important;
  box-shadow:inset 0 0 0 1px rgba(63,140,147,.12)}

/* Pillars: the middle one is glass too, just a little warmer */
.feature-pillar{background:rgba(255,255,255,.75);color:var(--text);border-color:rgba(255,255,255,.9)}
.feature-pillar .p-body{color:var(--muted)}
.feature-pillar .p-tag{color:var(--gold)}
.feature-pillar .p-num{color:var(--gold);background:rgba(201,168,110,.14)}
.feature-pillar .p-list{border-color:rgba(31,46,43,.08)}
.p-num{color:var(--teal);background:rgba(63,140,147,.1)}
.innovation{background:rgba(255,255,255,.6)}

/* "What we do": detail side is light glass */
.back{background:rgba(255,255,255,.82);color:var(--text);border-color:rgba(255,255,255,.95)}
.back p{color:var(--muted)}
.back .go{color:var(--teal)}

/* Featured initiative: the one calm darker card, no glow */
.feature-card{background:var(--graphite);box-shadow:0 30px 60px -40px rgba(31,46,43,.45)}
.feature-visual{background:#3A4845}
.feature-copy .kicker.light{color:#D9BE8A}

/* Vision, mission, values: light */
.vm{background:transparent;color:var(--text)}
.vm-bg{display:none}
.vm-card,.value{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 40px -30px rgba(31,46,43,.25)}
.vm .kicker.light{color:var(--gold)}
.vm-text{color:var(--ink)}
.value h3{color:var(--ink)}
.value p{color:var(--muted)}
.value .v-num{color:var(--gold)}
.value .v-hint{color:#98A29E}
.values .value:hover,.values .value:focus{background:rgba(255,255,255,.85)}
.value:hover:after,.value:focus:after{background:none}

/* Insight thumbnails: same shapes, gentle colours */
.post-art{filter:saturate(.45) brightness(1.35) contrast(.85)}

/* Learn Hub banner */
.course{background:rgba(255,255,255,.6)}
.course h2 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--teal)}

/* Call to action: light */
.cta{background:var(--tint);color:var(--ink);border:1px solid rgba(255,255,255,.9)}
.cta:before{background:radial-gradient(circle,rgba(201,168,110,.14),transparent 65%)}
.cta p{color:var(--muted)}

/* Footer: soft graphite instead of near-black green */
.footer{background:var(--graphite);color:rgba(255,255,255,.72)}
.page-hero p.lede{color:var(--muted)}
.crumbs{color:var(--muted)}.crumbs a:hover{color:var(--ink)}

/* =========================================================
   Inner pages
   ========================================================= */
/* Header text that was white on dark */
.art-meta{color:var(--muted)}
.cs-profile span{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);color:var(--text)}
.cs-profile span b{color:var(--gold)}

/* Darker cards: one calm graphite, no glows */
.featured-post,.evidence-box,.q-card,.stat-inline,.aside-card,.map-wrap,.band{background:var(--graphite)}
.featured-post{border-radius:32px;box-shadow:0 30px 60px -40px rgba(31,46,43,.45)}
.featured-post .fp-art{background:#3A4845}
.featured-post .fp-art:after,.post-art:after{filter:saturate(.45) brightness(1.15)}
.aside-card:before,.map-wrap:before,.band:before{opacity:.25;filter:saturate(.4)}
.stat-inline b{background:none;-webkit-background-clip:initial;background-clip:initial;color:#E3CFA3}
.evidence-box,.q-card,.stat-inline,.aside-card{border-radius:26px}
.map-wrap{border-radius:36px}

/* Insights: signature series becomes an inset rounded panel */
.series-block.signature{background:var(--graphite);margin:0 10px 70px;border-radius:38px}

/* Initiative case cards: same art, gentler colour */
.case{background:var(--graphite);border-radius:28px}
.case .bg{filter:saturate(.45) brightness(1.1)}
.case:after{background:linear-gradient(0deg,rgba(40,52,49,.9) 15%,rgba(40,52,49,.15) 75%)}
.case .role-chip{background:#E3CFA3;color:var(--ink)}

/* Small dark hover states use the soft graphite */
.fchip.on,.mod:hover,.cs-nav a:hover,.methods span:hover,.svc[open] .pm,.reasons input:checked+span{background:var(--graphite);border-color:var(--graphite)}
.steps b{background:var(--graphite);color:#E3CFA3}
.steps:before{background:linear-gradient(90deg,var(--gold-2),var(--teal));opacity:.5}
.band{margin:0 10px;border-radius:38px}

/* Mobile menu: light frosted sheet */
@media (max-width:900px){
  .nav.open .menu{background:#FAFBFA;box-shadow:0 30px 60px -20px rgba(31,46,43,.35);border:1px solid rgba(255,255,255,.95)}
  .nav.open .menu>a,.nav.open .dd-btn{color:var(--ink)}
  .nav.open .dd-panel{background:rgba(31,46,43,.04);border:0;border-radius:18px}
  .nav.open .dd-panel b{color:var(--ink)}
  .nav.open .dd-panel span{color:var(--muted)}
  .nav.open .menu>a.menu-hub{background:#D9BE8A}
}
.progress{background:var(--teal);opacity:.7}

/* Soft drawings behind the whole site (research, data, land and water) */
html::before,body::after{content:"";position:fixed;inset:-8%;z-index:-4;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat}
html::before{background-image:url(../img/motif/csaf-far.svg);filter:blur(8px);opacity:.28;animation:wall 90s ease-in-out infinite alternate}
body::after{background-image:url(../img/motif/csaf-near.svg);filter:blur(3px);opacity:.1;z-index:-3;animation:wall 120s ease-in-out infinite alternate-reverse}
@media (prefers-reduced-motion:reduce){html::before,body::after{animation:none}}