/* Four-colour system. Scoped to main content/header; download band and footer preserved.
   All chromatic stops derive from the four exact colours, optionally mixed with white. */
main,.site-header,.draft-bar{--orange:#F36B23;--yellow:#FEE800;--green:#4CB748;--pink:#EF3867;--warm:linear-gradient(120deg,var(--yellow),var(--orange));--fresh:linear-gradient(120deg,var(--yellow),var(--green));--expressive:linear-gradient(120deg,var(--pink),var(--orange));--tint-yellow:color-mix(in srgb,var(--yellow) 9%,white);--tint-green:color-mix(in srgb,var(--green) 7%,white);--tint-pink:color-mix(in srgb,var(--pink) 6%,white);--tint-orange:color-mix(in srgb,var(--orange) 7%,white);--ink:#252525;--muted:#5c5c5c;--line:#ddd;--accent:var(--orange)}
main{--section-gradient:var(--fresh);--chapter-tint:var(--tint-green)}
body[data-page=education] main{--section-gradient:var(--warm);--chapter-tint:var(--tint-orange)}
body[data-page=community-health] main{--section-gradient:linear-gradient(120deg,var(--green),var(--yellow));--chapter-tint:var(--tint-yellow)}
body[data-page=arts-culture] main{--section-gradient:var(--expressive);--chapter-tint:var(--tint-pink);--accent:var(--pink)}
body[data-page=special-feature] main{--section-gradient:linear-gradient(120deg,var(--yellow),var(--orange),var(--pink));--chapter-tint:var(--tint-orange)}
.draft-bar{background:linear-gradient(90deg,var(--tint-orange),var(--tint-yellow),var(--tint-green),var(--tint-pink));color:#555}
.site-header{border-color:#ddd}.site-header .nav-download{background:var(--warm);border-color:transparent;color:#252525}.site-header .nav-download:hover{background:var(--fresh)}
.site-header .impact-menu>div{border-color:#ddd;background:white;box-shadow:0 16px 32px #00000012}.site-header .impact-menu>div>a:hover{background:var(--tint-yellow)}.site-header .menu-toggle{border-color:#aaa}
main .eyebrow:before{background:var(--section-gradient)}
main .button{background:var(--warm);border-color:transparent;color:#252525}
main .button:hover{background:var(--fresh);color:#252525}
main .button.secondary{background:linear-gradient(110deg,var(--tint-yellow),var(--tint-orange));border-color:var(--orange)}
main .button.secondary:hover{background:linear-gradient(110deg,var(--tint-green),var(--tint-yellow))}
main .overview{background:linear-gradient(115deg,var(--tint-yellow),white 48%,var(--tint-green))}
main .overview:before{background:linear-gradient(90deg,var(--orange),var(--yellow),var(--green),var(--pink))}
main .stat{border-color:#ddd}main .stat strong{color:#252525}main .stat span,main .lead,main .note,main .small{color:#5c5c5c}
main .soft{background:linear-gradient(125deg,var(--chapter-tint),white 85%)}
main #our-impact{background:linear-gradient(125deg,var(--tint-yellow),white 50%,var(--tint-green))}
main #our-impact .pillar-card{--pillar-start:var(--yellow);--pillar-middle:var(--orange);--pillar-end:var(--orange);--pillar-tint:var(--tint-orange);border-color:#ddd}
main #our-impact .pillar-card:nth-child(2){--pillar-start:var(--green);--pillar-middle:var(--yellow);--pillar-end:var(--yellow);--pillar-tint:var(--tint-yellow)}
main #our-impact .pillar-card:nth-child(3){--pillar-start:var(--yellow);--pillar-middle:var(--green);--pillar-end:var(--green);--pillar-tint:var(--tint-green)}
main #our-impact .pillar-card:nth-child(4){--pillar-start:var(--pink);--pillar-middle:var(--orange);--pillar-end:var(--orange);--pillar-tint:var(--tint-pink)}
main #our-impact .pillar-card:nth-child(5){--pillar-start:var(--green);--pillar-middle:var(--yellow);--pillar-end:var(--orange);--pillar-tint:var(--tint-green)}
main #our-impact .pillar-card:hover{border-color:var(--pillar-start)}
main #our-impact .card-arrow{color:#252525}
main .feature-card{border-color:#ddd;background:linear-gradient(140deg,white 55%,var(--tint-yellow))}
main .feature-card:nth-child(even){background:linear-gradient(140deg,white 55%,var(--tint-pink))}
main .feature-card h3 span{background:var(--warm);color:#252525}
main .feature-card:nth-child(even) h3 span{background:var(--fresh)}
main .text-link{border-image:linear-gradient(90deg,var(--green),var(--yellow)) 1}
main .quote-section{background:linear-gradient(125deg,var(--tint-pink),white 60%,var(--tint-orange))}
main .quote-section:before{background:var(--expressive)}main blockquote>p{color:#252525}main blockquote footer{color:#5c5c5c}
main .sdg-list li{background:linear-gradient(110deg,var(--tint-green),var(--tint-yellow));border-color:#ddd;border-left-color:var(--green)}
main .team-list,main .team-list>details,main .chapter-nav,main .next-chapter{border-color:#ddd}
main .team-list>details[open]{background:linear-gradient(110deg,var(--chapter-tint),white)}main .team-list>details[open] summary{color:#252525}
main .person p,main .breadcrumb,main .next-chapter span,main .category-list,main caption,main td{color:#5c5c5c}
main thead{background:linear-gradient(110deg,var(--tint-yellow),var(--tint-green))}main th,main td,main .table-scroll,main .category-list li{border-color:#ddd}
main .category-list li:before{background:var(--warm)}main .category-list li:nth-child(2n):before{background:var(--fresh)}main .category-list li:nth-child(3n):before{background:var(--expressive)}
/* Unfilled photography slots are neutral, not an additional palette. */
main .placeholder,main .feature-card>.placeholder{background:#f3f3f3;border-color:#bbb;color:#666}
main .placeholder>span{background:#f3f3f3eb;color:#666}main .placeholder:before,main .placeholder:after{background:#ddd}main .placeholder i{color:#666}
/* SVG-grain finish matching the Gentle Echo artwork; never applied to text or footer. */
main,.site-header,.draft-bar{--grain:url('blobs/brand/grain.svg')}
main .button,.site-header .nav-download{--surface-gradient:var(--warm)}
main .button:hover,.site-header .nav-download:hover{--surface-gradient:var(--fresh)}
main .button.secondary{--surface-gradient:linear-gradient(110deg,var(--tint-yellow),var(--tint-orange))}
main .button.secondary:hover{--surface-gradient:linear-gradient(110deg,var(--tint-green),var(--tint-yellow))}
main .overview{--surface-gradient:linear-gradient(115deg,color-mix(in srgb,var(--yellow) 16%,white),white 48%,color-mix(in srgb,var(--green) 12%,white))}
main .soft{--surface-gradient:linear-gradient(125deg,var(--chapter-tint),white 85%)}
main #our-impact{--surface-gradient:linear-gradient(125deg,color-mix(in srgb,var(--yellow) 14%,white),white 50%,color-mix(in srgb,var(--green) 12%,white))}
main #our-impact .pillar-card{--surface-gradient:linear-gradient(155deg,color-mix(in srgb,var(--pillar-start) 28%,white),color-mix(in srgb,var(--pillar-end) 15%,white) 65%,white)}
main #our-impact .pillar-card:hover{--surface-gradient:linear-gradient(155deg,color-mix(in srgb,var(--pillar-start) 36%,white),color-mix(in srgb,var(--pillar-end) 22%,white) 75%,white)}
main .feature-card{--surface-gradient:linear-gradient(140deg,white 45%,var(--tint-yellow))}
main .feature-card:nth-child(even){--surface-gradient:linear-gradient(140deg,white 45%,var(--tint-pink))}
main .feature-card h3 span{--surface-gradient:var(--warm)}main .feature-card:nth-child(even) h3 span{--surface-gradient:var(--fresh)}
main .quote-section{--surface-gradient:linear-gradient(125deg,var(--tint-pink),white 60%,var(--tint-orange))}
main .sdg-list li{--surface-gradient:linear-gradient(110deg,var(--tint-green),var(--tint-yellow))}
main .team-list>details[open]{--surface-gradient:linear-gradient(110deg,var(--chapter-tint),white)}
main thead{--surface-gradient:linear-gradient(110deg,var(--tint-yellow),var(--tint-green))}
.draft-bar{--surface-gradient:linear-gradient(90deg,var(--tint-orange),var(--tint-yellow),var(--tint-green),var(--tint-pink))}
main .button,main .button:hover,main .button.secondary,main .button.secondary:hover,.site-header .nav-download,.site-header .nav-download:hover,main .overview,main .soft,main #our-impact,main #our-impact .pillar-card,main #our-impact .pillar-card:hover,main .feature-card,main .feature-card:nth-child(even),main .feature-card h3 span,main .feature-card:nth-child(even) h3 span,main .quote-section,main .sdg-list li,main .team-list>details[open],main thead,.draft-bar{background-image:var(--grain),var(--surface-gradient);background-size:160px 160px,100% 100%;background-repeat:repeat,no-repeat}
main #our-impact .pillar-card::before{height:9px;background-image:var(--grain),linear-gradient(110deg,var(--pillar-start),var(--pillar-middle),var(--pillar-end));background-size:160px 160px,100% 100%}
main #our-impact .pillar-card::after{display:none}
main #our-impact .card-arrow{background-image:var(--grain),linear-gradient(135deg,var(--pillar-start),var(--pillar-end));background-size:160px 160px,100% 100%}
main .overview:before{background-image:var(--grain),linear-gradient(90deg,var(--orange),var(--yellow),var(--green),var(--pink));background-size:160px 160px,100% 100%}
main .eyebrow:before,main .quote-section:before{background-image:var(--grain),var(--section-gradient);background-size:160px 160px,100% 100%}
