:root {
  --ink: #0c362d;
  --green: #315b4d;
  --cream: #f7f3eb;
  --paper: #fffdf8;
  --coral: #f36f5d;
  --yellow: #f6c743;
  --pink: #f4b5af;
  --blue: #b8ddec;
  --sage: #b8cda9;
  --line: rgba(12,54,45,.2);
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font: 16px/1.55 var(--sans); margin: 0; }
button, input, textarea { font: inherit; }
img { max-width: 100%; }
.skip-link { background: var(--ink); color: #fff; left: 1rem; padding: .7rem 1rem; position: absolute; top: -5rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.sr-only { clip: rect(0,0,0,0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.announcement { background: var(--ink); color: #eaf6ee; font: 500 10px/1 var(--mono); letter-spacing: .11em; padding: 12px 24px; text-align: center; text-transform: uppercase; }
.announcement-dot { background: var(--coral); border-radius: 50%; display: inline-block; height: 7px; margin: 0 8px 1px 0; width: 7px; }
.site-header { align-items: center; background: var(--cream); display: flex; height: 88px; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1360px)/2)); position: relative; z-index: 10; }
.brand { color: var(--ink); display: inline-flex; text-decoration: none; }
.brand-logo-wrap { line-height: 0; }
.brand-logo { display: block; height: 62px; object-fit: contain; width: 62px; }
.site-header .brand-logo { height:70px; width:70px; }
.site-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 34px; }
.site-nav a { color: var(--ink); font-size: 14px; text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible, .text-link:hover { color: var(--coral); }
.menu-toggle { background: none; border: 0; color: var(--ink); cursor: pointer; display: none; height: 40px; padding: 8px; width: 40px; }
.menu-toggle span:not(.sr-only) { background: currentColor; display: block; height: 2px; margin: 4px 0; width: 24px; }
.button { align-items: center; border: 1px solid transparent; cursor: pointer; display: inline-flex; font-weight: 600; gap: 18px; justify-content: center; padding: 15px 20px; text-decoration: none; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button span, .text-link span { font-size: 19px; line-height: .6; }
.button-small { font-size: 13px; padding: 11px 15px; }
.button-ink { background: var(--ink); color: #fff; }
.button-ink:hover { background: #165546; }
.button-coral { background: var(--coral); color: #fff; }
.button-coral:hover { background: #df5b4b; }
.text-link { align-items: center; color: inherit; display: inline-flex; font-size: 14px; font-weight: 600; gap: 12px; text-decoration: none; }
.dark { color: var(--ink); }
.eyebrow { align-items: center; color: inherit; display: flex; font: 500 10px/1 var(--mono); gap: 8px; letter-spacing: .13em; margin: 0 0 22px; text-transform: uppercase; }
.eyebrow span { background: var(--coral); border-radius: 50%; display: inline-block; height: 7px; width: 7px; }
.eyebrow-dark { color: var(--ink); }
h1,h2,h3,p { margin-top: 0; }
h1 { font: 600 clamp(3.7rem,6.5vw,6.6rem)/.94 var(--serif); letter-spacing: -.07em; margin-bottom: 29px; }
h1 em,h2 em { font-style: italic; font-weight: 600; }
.hero { background: var(--ink); color: #f8f6f0; display: grid; grid-template-columns: minmax(0,1fr) minmax(460px,.9fr); min-height: 650px; overflow: hidden; padding: 90px max(24px,calc((100vw - 1360px)/2)) 70px; position: relative; }
.hero-copy { align-self: center; max-width: 680px; position: relative; z-index: 2; }
.hero-intro { color: #cde0d5; font-size: 18px; line-height: 1.6; max-width: 500px; }
.hero-actions { align-items: center; display: flex; gap: 28px; margin-top: 36px; }
.hero-gallery { height: 500px; min-width: 0; position: relative; }
.hero-gallery img { box-shadow: 18px 20px 0 rgba(246,199,67,.94); display: block; object-fit: cover; position: absolute; }
.hero-photo-main { height: 392px; left: 8%; top: 12px; width: 72%; }
.hero-photo-secondary { bottom: 0; box-shadow: -13px 14px 0 var(--coral)!important; height: 203px; right: 0; width: 48%; }
.hero-gallery-label { background: var(--paper); bottom: 44px; color: var(--ink); font: 600 13px/1.15 var(--serif); left: 0; letter-spacing: -.04em; padding: 15px 18px; position: absolute; text-transform: uppercase; z-index: 2; }
.hero-seal { align-items: center; border: 1px solid #dce5d5; border-radius: 50%; bottom: 23px; color: #f8f6f0; display: flex; font: 500 9px/1.5 var(--mono); height: 105px; justify-content: center; letter-spacing: .1em; position: absolute; right: 5px; text-align: center; text-transform: uppercase; transform: rotate(-10deg); width: 105px; z-index: 3; }
.hero-seal b { color: var(--yellow); font-size: 16px; position: absolute; right: 17px; top: 12px; }
.hero-footnote { align-items: end; bottom: 37px; color: #b7d2c1; display: flex; font: 400 10px/1.6 var(--mono); gap: 31px; left: max(24px,calc((100vw - 1360px)/2)); letter-spacing: .08em; position: absolute; text-transform: uppercase; }
.intro-band { background: var(--yellow); padding: 100px max(24px,calc((100vw - 1150px)/2)); }
.intro-layout { display: grid; gap: 130px; grid-template-columns: 1.1fr .6fr; }
.intro-layout h2,.section-heading h2,.approach-copy h2,.goals-header h2,.involved-intro h2,.accountability h2,.contact-section h2,.gallery-heading h2,.media-heading h2 { font: 600 clamp(2.8rem,5vw,5.2rem)/1 var(--serif); letter-spacing: -.065em; margin: 0; }
.intro-text { align-self: end; padding-bottom: 9px; }
.intro-text p { font-size: 18px; line-height: 1.6; }
.work-section { background: var(--ink); color: #f7f3eb; padding: 118px max(24px,calc((100vw - 1360px)/2)); }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 55px; }
.section-heading>div { max-width: 690px; }
.section-heading>p { color: #cde0d5; font-size: 16px; line-height: 1.6; max-width: 330px; }
.program-grid { display: grid; gap: 14px; grid-template-columns: repeat(4,1fr); }
.program-card { color: var(--ink); display: flex; flex-direction: column; min-height: 390px; padding: 27px; }
.card-yellow { background: var(--yellow); }.card-pink { background: var(--pink); }.card-blue { background: var(--blue); }.card-sage { background: var(--sage); }
.card-icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; font: 30px/1 var(--serif); height: 60px; justify-content: center; width: 60px; }
.card-number { font: 500 10px var(--mono); letter-spacing: .13em; margin: 45px 0 16px; }
.program-card h3 { font: 600 28px/1.04 var(--serif); letter-spacing: -.04em; margin-bottom: 13px; }
.program-card>p:not(.card-number) { font-size: 14px; line-height: 1.55; margin-bottom: 25px; }
.card-link { color: inherit; font-size: 13px; font-weight: 600; margin-top: auto; text-decoration: none; }
.card-link span { font-size: 17px; margin-left: 5px; }
.manifesto { background: #eadcce; display: grid; gap: 160px; grid-template-columns: .45fr 1fr; padding: 98px max(24px,calc((100vw - 1070px)/2)); }
.manifesto-stamp { align-self: start; border: 2px solid var(--ink); border-radius: 50%; font: 600 54px/.67 var(--serif); height: 185px; letter-spacing: -.09em; padding-top: 47px; text-align: center; transform: rotate(-8deg); width: 185px; }
.manifesto-stamp span { font: 500 15px var(--mono); letter-spacing: .03em; }.manifesto-stamp b { color: var(--coral); font: 500 18px var(--sans); position: relative; top: -60px; }
.manifesto-quote { font: 600 clamp(2.3rem,4.2vw,4.5rem)/1.06 var(--serif); letter-spacing: -.06em; max-width: 820px; }
.manifesto-copy { font-size: 17px; line-height: 1.6; max-width: 590px; }
.approach-section { background: var(--paper); display: grid; grid-template-columns: .8fr 1.1fr; min-height: 650px; }
.approach-visual { background: #dce8dd; min-height: 600px; overflow: hidden; position: relative; }
.circle { border: 1px solid var(--ink); border-radius: 50%; position: absolute; }.circle-large { height: 580px; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 580px; }.circle-mid { height: 390px; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 390px; }.circle-small { background: var(--coral); height: 150px; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 150px; }
.approach-visual svg { height: 650px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 650px; }.approach-visual svg path { fill: none; stroke: var(--ink); stroke-dasharray: 4 11; stroke-width: 2; }
.arc-text { bottom: 90px; font: 500 11px var(--mono); left: 50%; letter-spacing: .18em; position: absolute; transform: translateX(-50%) rotate(11deg); white-space: nowrap; }
.approach-copy { align-self: center; padding: 90px max(24px,calc((100vw - 1360px)/2)) 90px 10vw; }.steps { margin-top: 44px; }.steps>div { border-top: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 36px 1fr; padding: 19px 0; }.steps>div:last-child { border-bottom: 1px solid var(--line); }.steps b { font: 500 10px var(--mono); padding-top: 4px; }.steps span { display: grid; font-size: 14px; line-height: 1.55; }.steps strong { font-size: 17px; margin-bottom: 4px; }
.goals-section { background: var(--green); color: #f8f6f0; padding: 106px max(24px,calc((100vw - 1160px)/2)) 115px; }.goals-header { align-items: end; display: flex; gap: 50px; justify-content: space-between; margin-bottom: 55px; }.goals-header>div { max-width: 690px; }.goals-header>p { color: #d3e3d7; font-size: 15px; line-height: 1.6; max-width: 350px; }.goal-list { border-top: 1px solid rgba(255,255,255,.36); }.goal-list article { align-items: center; border-bottom: 1px solid rgba(255,255,255,.36); display: grid; gap: 25px; grid-template-columns: 70px 1.2fr 1fr auto; padding: 28px 0; }.goal-no { color: var(--yellow); font: 500 11px var(--mono); }.goal-list h3 { font: 600 26px/1.05 var(--serif); letter-spacing: -.035em; margin: 0; }.goal-list p { color: #d3e3d7; font-size: 14px; margin: 0; }.goal-tag { border: 1px solid rgba(255,255,255,.5); font: 500 9px var(--mono); letter-spacing: .1em; padding: 7px 9px; text-transform: uppercase; white-space: nowrap; }
.gallery-section { background: var(--cream); padding: 110px max(24px,calc((100vw - 1160px)/2)); }.gallery-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 46px; }.photo-grid { display: grid; gap: 20px; grid-template-columns: 1.45fr 1fr; }.photo-card { margin: 0; min-height: 430px; overflow: hidden; position: relative; }.photo-card-large { min-height: 530px; }.photo-card img,.press-card img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }.photo-card figcaption,.press-card figcaption { background: var(--paper); bottom: 0; display: flex; justify-content: space-between; left: 0; padding: 14px 16px; position: absolute; right: 0; }.photo-card figcaption span,.press-card figcaption span { font: 600 15px/1.2 var(--serif); }.photo-card figcaption small,.press-card figcaption small { font: 500 9px/1.4 var(--mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.media-section { background: var(--ink); color: var(--paper); padding: 110px max(24px,calc((100vw - 1160px)/2)); }.media-heading { display: grid; gap: 20px; grid-template-columns: 1.3fr .7fr; margin-bottom: 48px; }.media-heading .eyebrow,.media-heading h2 { grid-column: 1; }.media-heading>p { align-self: end; color: #cde0d5; font-size: 15px; grid-column: 2; grid-row: 1 / span 2; line-height: 1.6; margin: 0; }.press-grid { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }.press-card { background: #f4eee4; margin: 0; min-height: 530px; overflow: hidden; position: relative; }.press-card figcaption { color: var(--ink); }
.involved-section { background: var(--cream); padding: 110px max(24px,calc((100vw - 1160px)/2)) 115px; }.involved-intro { max-width: 760px; }.involved-intro>p:last-child { font-size: 17px; line-height: 1.65; margin: 24px 0 54px; max-width: 530px; }.action-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 24px; }.action-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: #476359; cursor: pointer; font-weight: 600; padding: 0 0 15px; }.action-tabs button[aria-selected="true"] { border-color: var(--coral); color: var(--ink); }.action-panel { background: var(--paper); display: grid; grid-template-columns: .8fr 1.1fr; min-height: 390px; }.action-illustration { align-items: center; display: flex; justify-content: center; overflow: hidden; position: relative; }.support-illustration { background: var(--yellow); }.volunteer-illustration { background: var(--blue); }.partner-illustration { background: var(--pink); }.action-illustration span { font: 600 clamp(9rem,17vw,15rem)/1 var(--serif); letter-spacing: -.11em; z-index: 1; }.action-illustration i { font-size: 55px; font-style: normal; position: absolute; right: 13%; top: 16%; }.action-illustration b { bottom: 23px; font: 500 9px/1.5 var(--mono); letter-spacing: .11em; position: absolute; right: 26px; text-align: right; text-transform: uppercase; }.action-content { align-self: center; padding: 48px 55px; }.panel-kicker { font: 500 10px var(--mono); letter-spacing: .13em; text-transform: uppercase; }.action-content h3 { font: 600 34px/1.04 var(--serif); letter-spacing: -.05em; margin-bottom: 14px; }.action-content>p:not(.panel-kicker) { font-size: 15px; line-height: 1.6; max-width: 510px; }.bank-details { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); margin: 25px 0 22px; }.bank-details div { border-bottom: 1px solid var(--line); padding: 12px 10px 12px 0; }.bank-details dt { font: 500 9px var(--mono); letter-spacing: .1em; margin-bottom: 4px; text-transform: uppercase; }.bank-details dd { font: 600 14px/1.35 var(--sans); margin: 0; overflow-wrap: anywhere; }.donation-links { align-items: center; display: flex; flex-wrap: wrap; gap: 20px; }.donation-links .button { font-size: 13px; padding: 13px 14px; }
.accountability { align-items: center; background: var(--coral); display: grid; gap: 90px; grid-template-columns: 1.2fr .8fr; padding: 85px max(24px,calc((100vw - 1160px)/2)); }.accountability-copy { font-size: 17px; line-height: 1.65; }
.contact-section { background: var(--ink); color: #f7f3eb; display: grid; gap: 100px; grid-template-columns: 1fr 1fr; padding: 100px max(24px,calc((100vw - 1160px)/2)); }.contact-section h2 { max-width: 590px; }.contact-intro { color: #cde0d5; font-size: 16px; line-height: 1.65; margin-top: 23px; max-width: 450px; }.contact-details { display: grid; gap: 21px; }.contact-details>a:not(.button),.contact-details>div { border-bottom: 1px solid #77988b; color: #f7f3eb; display: grid; gap: 5px; padding-bottom: 15px; text-decoration: none; }.contact-details span { color: #aac0b4; font: 500 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }.contact-details strong { font-size: 18px; font-weight: 500; line-height: 1.4; }.contact-details .button { justify-self: start; margin-top: 6px; }
.site-footer { background: #092c25; color: #e9f0e7; padding: 65px max(24px,calc((100vw - 1360px)/2)) 22px; }.footer-top { align-items: start; display: grid; grid-template-columns: 1fr 1fr auto; padding-bottom: 70px; }.footer-logo { background: #fff; height: 78px; width: 78px; }.footer-top>p { font: 600 clamp(1.6rem,2.7vw,2.7rem)/1 var(--serif); letter-spacing: -.05em; margin: 5px 0; }.footer-arrow { align-items: center; background: var(--yellow); border-radius: 50%; color: var(--ink); display: flex; font-size: 23px; height: 49px; justify-content: center; text-decoration: none; width: 49px; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.25); color: #aac0b4; display: flex; font: 400 9px var(--mono); justify-content: space-between; letter-spacing: .08em; padding-top: 20px; text-transform: uppercase; }.footer-bottom a { color: #aac0b4; }
.toast { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); color: var(--ink); font-size: 14px; left: 50%; max-width: calc(100vw - 40px); opacity: 0; padding: 13px 18px; pointer-events: none; position: fixed; top: 25px; transform: translate(-50%,-20px); transition: opacity .25s,transform .25s; z-index: 99; }.toast.show { opacity: 1; transform: translate(-50%,0); }.reveal { animation: reveal .8s ease both; }.hero-gallery { animation-delay: .16s; }@keyframes reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width:900px) { .site-nav { gap:16px; margin-right:18px; }.header-cta { display:none; }.hero { grid-template-columns:1fr; min-height:auto; padding-bottom:100px; }.hero-gallery { height:400px; margin:30px auto -60px; max-width:550px; width:100%; }.hero-photo-main { height:325px; }.hero-photo-secondary { height:160px; }.hero-footnote { display:none; }.intro-layout { gap:50px; }.program-grid { grid-template-columns:repeat(2,1fr); }.manifesto { gap:60px; }.approach-copy { padding:80px 48px; }.goal-list article { grid-template-columns:52px 1fr auto; }.goal-list article p { display:none; }.gallery-section,.media-section { padding-bottom:78px; padding-top:78px; }.photo-card { min-height:330px; }.photo-card-large { min-height:410px; }.media-heading { display:block; }.media-heading>p { margin-top:23px; max-width:420px; }.press-card { min-height:410px; }.action-content { padding:40px; }.bank-details { grid-template-columns:1fr; }.bank-details div { padding:9px 0; }.contact-section { gap:50px; }.contact-details { margin-top:42px; }.footer-top { grid-template-columns:1fr auto; }.footer-top>p { grid-column:1/-1; margin-top:45px; } }
@media (max-width:640px) { .announcement { font-size:8px; padding:11px 15px; }.site-header { height:72px; }.site-header .brand-logo { height:58px; width:58px; }.menu-toggle { display:block; margin-left:auto; }.site-nav { background:var(--cream); box-shadow:0 15px 18px rgba(0,0,0,.11); display:none; left:0; margin:0; padding:18px 24px; position:absolute; right:0; top:72px; }.site-nav.open { display:grid; gap:16px; }.hero { padding-top:58px; }.hero-gallery { height:300px; margin:24px auto -50px; max-width:480px; }.hero-photo-main { height:245px; left:5%; top:0; width:75%; }.hero-photo-secondary { height:122px; right:1%; width:48%; }.hero-gallery-label { bottom:26px; font-size:11px; padding:11px 13px; }.hero-gallery .hero-seal { bottom:8px; right:1px; }.hero-seal { height:88px; width:88px; font-size:7px; }.hero-seal b { right:9px; top:7px; }h1 { font-size:clamp(3.25rem,14.5vw,4.4rem); }.hero-intro { font-size:16px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.intro-band,.work-section,.involved-section,.goals-section { padding-bottom:72px; padding-top:72px; }.intro-layout { display:block; }.intro-layout h2 { margin-bottom:34px; }.intro-text p { font-size:16px; }.section-heading,.goals-header,.gallery-heading { display:block; }.section-heading>p,.goals-header>p { margin:23px 0 0; }.program-grid { grid-template-columns:1fr; }.program-card { min-height:315px; }.manifesto { display:block; padding-bottom:70px; padding-top:70px; }.manifesto-stamp { height:132px; font-size:39px; margin-bottom:53px; padding-top:36px; width:132px; }.manifesto-stamp span { font-size:10px; }.manifesto-stamp b { font-size:13px; top:-43px; }.approach-section { display:block; }.approach-visual { min-height:390px; }.approach-visual svg { height:450px; width:450px; }.circle-large { height:385px; width:385px; }.circle-mid { height:260px; width:260px; }.circle-small { height:100px; width:100px; }.arc-text { bottom:48px; font-size:8px; }.approach-copy { padding:65px 24px; }.goal-list article { align-items:start; grid-template-columns:35px 1fr; padding:24px 0; }.goal-list h3 { font-size:23px; }.goal-tag { grid-column:2; justify-self:start; }.photo-grid,.press-grid { grid-template-columns:1fr; }.photo-card,.photo-card-large { min-height:360px; }.photo-card figcaption,.press-card figcaption { align-items:start; display:grid; gap:5px; }.photo-card figcaption small,.press-card figcaption small { text-align:left; }.media-heading h2,.gallery-heading h2 { margin-top:21px; }.press-card { min-height:420px; }.action-tabs { gap:17px; overflow:auto; }.action-tabs button { font-size:13px; white-space:nowrap; }.action-panel { display:block; }.action-illustration { height:190px; }.action-content { padding:30px 24px; }.action-content h3 { font-size:30px; }.donation-links { align-items:flex-start; flex-direction:column; gap:14px; }.accountability,.contact-section { display:block; padding-bottom:72px; padding-top:72px; }.accountability-copy { font-size:16px; margin-top:31px; }.footer-top { padding-bottom:43px; }.footer-bottom { display:grid; gap:13px; justify-content:start; }.footer-top>p { font-size:27px; }.footer-arrow { height:45px; width:45px; }.footer-logo { height:65px; width:65px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { animation:none; }.button,.toast { transition:none; } }
