/* One interactive scene, with the visitor in control of its rhythm. */
.reading-line{height:3px;background:var(--gold);position:absolute;left:0;bottom:0;width:100%;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero-discover{display:inline-flex;align-items:center;gap:12px;margin-top:26px;min-height:44px;font-size:18px;font-weight:800;text-decoration:none;color:var(--green)}
.hero-discover span{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--green);border-radius:50%;font-size:24px;transition:transform .3s}
.hero-discover:hover span{transform:rotate(45deg)}
.light-story{background:var(--navy);color:white;padding:72px 0;overflow:hidden;position:relative}
.light-story .wrap{display:grid;grid-template-columns:.85fr 1.35fr;gap:56px;align-items:center}
.light-copy h2{font-size:calc(clamp(38px,4.3vw,60px) + 6px);max-width:12ch;line-height:1.03}
.light-copy>p{color:#c1d0df;font-size:21px;max-width:36ch;margin-top:22px}
.place-choice{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}
.place-choice button{min-height:44px;padding:10px 18px;border:1px solid #73839c;border-radius:30px;font-size:19px;font-weight:800;background:transparent;color:white}
.place-choice button[aria-pressed=true]{background:#eaae19;border-color:#eaae19;color:#071d49}
.light-request{border-top:1px solid #506281;padding-top:22px}
.light-request>strong{display:block;font-size:23px;line-height:1.3;max-width:26ch}
.light-quantity{display:flex;align-items:center;gap:14px;margin:12px 0}
.light-quantity b{font-size:70px;font-weight:900;letter-spacing:-.07em;line-height:1;color:#f3c949;font-variant-numeric:tabular-nums}
.light-quantity span{max-width:17ch;color:#e2eaf3;font-size:20px;line-height:1.4}
.light-request p{font-size:18px;color:#c1d0df;max-width:38ch}
.light-request a{display:inline-block;font-weight:800;font-size:18px;text-underline-offset:5px;margin-top:16px;padding:8px 0}
.light-stage{position:relative;min-width:0}
.light-scene{position:relative;background:#112b43;border:1px solid #496077;border-radius:130px 24px 24px 24px;overflow:hidden;isolation:isolate}
.light-scene>svg{width:100%;height:auto;display:block;stroke:none;fill:none;aspect-ratio:600/390}
.scene-sky{fill:#112b43;transition:fill 1s}.scene-land{fill:#1b3f3e;transition:fill 1s}.is-lit .scene-sky{fill:#19384c}.is-lit .scene-land{fill:#275a40}
.scene-terrace{fill:#254f43}.scene-path{fill:#657066}.scene-lines{stroke:#d9e6d2;stroke-width:1.4;fill:none;opacity:.35;transition:opacity .8s}.is-lit .scene-lines{opacity:.85}
.scene-poles{stroke:#809da6;stroke-width:3;fill:none;stroke-linecap:round}.scene-head{fill:#839ca6;stroke:#d6e3de;stroke-width:.8;transition:fill .6s}
.scene-beams,.scene-pools{opacity:0;transition:opacity 1s}.is-lit .scene-beams{opacity:.28}.is-lit .scene-pools{opacity:.25}.is-lit .scene-head{fill:#ffeaa5}
.scene-beams{fill:url(#beamFill);stroke:none}.scene-pools{fill:#f6d66c}.scene-stars{fill:#bed3db;opacity:.6}.scene-tree{fill:#2e6445}.scene-trunk{stroke:#73816c;stroke-width:3}.scene-benches{stroke:#b5a27b;stroke-width:4;fill:none;stroke-linecap:round}.scene-person{fill:#d5bc8d}.scene-solar{fill:#234658;stroke:#86acb7;stroke-width:1.2}

.scene-caption{position:absolute;top:23px;right:20px;font-size:16px;color:#c8d8e1;border:1px solid #698492;padding:5px 11px;border-radius:20px;letter-spacing:.02em}
.light-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px}
.light-switch{display:flex;align-items:center;gap:12px;flex-shrink:0;border:0;background:#f3c949;color:#071d49;border-radius:40px;min-height:50px;padding:12px 20px;font-size:19px;font-weight:900;box-shadow:0 5px 0 #030f2c}
.switch-track{width:32px;height:19px;border:1px solid #071d49;border-radius:20px;padding:3px;display:block}.switch-track:after{content:'';display:block;width:11px;height:11px;border-radius:50%;background:#071d49;transition:transform .3s}.light-switch[aria-pressed=true] .switch-track:after{transform:translateX(12px)}
.light-controls p{font-size:16px;color:#b4c8d8;line-height:1.6;max-width:22ch}
.light-footnote{display:block;text-align:center;color:#b4c8d8;font-size:16px;margin-top:16px}
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.project-card{scroll-margin-top:130px}.project-card:target{outline:3px solid var(--gold);outline-offset:5px}
.project-top h3{font-size:32px}.project-body{padding:25px;gap:18px}.project-body>p{font-size:19px}.project-image-wrap{overflow:hidden;position:relative}.project-image{height:245px;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.project-illustration{height:245px;position:relative;overflow:hidden;display:flex;align-items:flex-end;gap:14px;padding:25px;background:#102e44;color:#f3c949}
.project-illustration.solar{background:#e6eee8;color:#086b30}.project-illustration>svg{position:absolute;right:7%;top:18px;width:110px;height:135px;stroke-width:1.5;opacity:.65;transform:rotate(-9deg)}
.project-illustration>strong{font-size:95px;letter-spacing:-.08em;line-height:1;font-weight:900;z-index:1}.project-illustration>span{font-size:18px;line-height:1.4;max-width:15ch;padding-bottom:6px;z-index:1}.project-illustration:after{content:'';position:absolute;inset:25% 0 -20%;background:radial-gradient(ellipse at 80% 0,#f3c94928,transparent 65%);pointer-events:none}
.project-story{border-top:1px solid var(--line);padding-top:7px}.project-story summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:19px;font-weight:800}.project-story summary::-webkit-details-marker{display:none}.project-story summary:after{content:'+';font-size:29px;font-weight:500;transition:transform .3s}.project-story[open] summary:after{transform:rotate(45deg)}.project-story p{padding:6px 0 12px;white-space:pre-line;font-size:19px}.project-story summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.project-pending{font-size:17px!important;display:flex;align-items:center;gap:8px;color:var(--muted)!important}.project-pending:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.section-copy h2,.section-heading h2{position:relative}.section-copy h2:after,.section-heading h2:after{content:'';display:block;width:58px;height:5px;border-radius:5px;background:var(--gold);margin-top:22px;transform:scaleX(.15);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1)}.section-copy h2.discovered:after,.section-heading h2.discovered:after{transform:scaleX(1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.project-card:hover .project-image{transform:scale(1.045)}.hero-art .place-sticker{translate:var(--art-x,0px) var(--art-y,0px);transition:translate .3s ease-out}.hero-art .sunburst{translate:calc(var(--art-x,0px) * -1) calc(var(--art-y,0px) * -1)}.light-switch:hover{transform:translateY(-2px)}}
@media(prefers-reduced-motion:no-preference){.light-story.discovered .scene-stars{animation:stars-arrive 1.5s ease-out both}@keyframes stars-arrive{from{opacity:0}to{opacity:.6}}.project-story[open] p{animation:story-open .3s ease-out}@keyframes story-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}}
@media(max-width:1050px){.light-story .wrap{grid-template-columns:1fr 1.3fr;gap:32px}.light-copy h2{font-size:49px}.light-controls{flex-wrap:wrap}.light-controls p{max-width:none}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.project-card:first-child .project-image-wrap,.project-card:first-child .project-image{height:100%;min-height:310px}}
@media(max-width:700px){.light-story{padding:48px 0}.light-story .wrap{grid-template-columns:minmax(0,1fr);gap:30px}.light-copy h2{font-size:49px;max-width:16ch}.light-copy>p{font-size:20px;max-width:43ch;margin-top:16px}.place-choice{margin:20px 0}.light-request{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}.light-request>strong{font-size:21px}.light-quantity{margin:0;gap:10px}.light-quantity b{font-size:62px}.light-quantity span{font-size:18px}.light-request p{grid-column:1/-1;max-width:none}.light-request a{grid-column:1/-1;margin-top:0}.light-scene{border-radius:85px 20px 20px 20px}.light-controls{gap:12px}.light-controls p{max-width:19ch}.light-switch{padding:11px 15px;font-size:18px}.scene-caption{font-size:14px;right:12px;top:15px}.project-grid{grid-template-columns:minmax(0,1fr)}.project-card:first-child{grid-column:auto;display:flex}.project-card:first-child .project-image{height:260px;min-height:0}.project-card:first-child .project-image-wrap{min-height:0;height:auto}.project-top h3{font-size:34px}.hero-discover{margin-top:16px;font-size:17px}.project-illustration{height:220px}.light-footnote{text-align:left}}
@media(max-width:380px){.light-copy h2{font-size:44px}.light-request{grid-template-columns:1fr}.light-quantity{margin:4px 0}.light-controls p{max-width:none}.light-scene{border-radius:65px 16px 16px 16px}}
@media(prefers-reduced-motion:reduce){.light-story *, .project-story p{animation:none!important;transition:none!important}.hero-art .place-sticker,.hero-art .sunburst{translate:none!important}.section-copy h2:after,.section-heading h2:after{transform:none}.hero-discover:hover span{transform:none}}
@media print{.light-story,.reading-line,.hero-discover{display:none}.project-grid{display:block}.project-card{break-inside:avoid;margin-bottom:20px}}

:root{--focus-ring:#071d49}:root[data-theme="dark"]{--focus-ring:#f3c949;--red:#ff9a8d}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;box-shadow:0 0 0 6px var(--bg)}
.light-story a:focus-visible,.light-story button:focus-visible{outline-color:white;box-shadow:0 0 0 6px #071d49}

/* The current two campaigns have equal space on the page. */
.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-amounts dt{font-size:17px;color:var(--muted)}.project-amounts dd{margin:4px 0 0;font-size:28px;font-weight:900;color:var(--ink);letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:1050px){.project-card:first-child{grid-column:auto;display:flex}.project-card:first-child .project-image{height:245px;min-height:0}.project-card:first-child .project-image-wrap{min-height:0;height:auto}}
@media(max-width:700px){.project-grid{grid-template-columns:minmax(0,1fr)}}

/* Movement responds to the visitor; scrolling is never trapped. */
html{scroll-behavior:smooth}
body.mobile-experience{--motion-ease:cubic-bezier(.22,.61,.36,1)}
.mobile-experience :is(a,button,summary){transition:background-color 300ms var(--motion-ease),color 300ms var(--motion-ease),transform 350ms var(--motion-ease),box-shadow 350ms var(--motion-ease)}
.mobile-experience :is(a,button,summary):focus-visible{outline:3px solid var(--focus-ring,var(--gold));outline-offset:4px}
.mobile-experience .active-campaign :is(a,button,summary):focus-visible{outline-color:white}
.mobile-experience :is(button,.button):active{transform:scale(.98)}
.mobile-experience :is(.scene-sky,.scene-land,.scene-head,.scene-lines,.scene-beams,.scene-pools,.project-image,.switch-track:after){transition-duration:400ms;transition-timing-function:var(--motion-ease)}
.mobile-experience .section-copy h2:after,.mobile-experience .section-heading h2:after{transition:none;transform:none}
.mobile-experience .donation-nudge{animation-duration:350ms;animation-timing-function:var(--motion-ease)}
.mobile-experience .project-card{transform:perspective(1000px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg));transition:transform 350ms var(--motion-ease),box-shadow 350ms var(--motion-ease);backface-visibility:hidden}
.mobile-experience .project-card.is-tilting{will-change:transform;box-shadow:0 16px 36px #071d4914}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mobile-experience *, .mobile-experience *:before,.mobile-experience *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mobile-experience .project-card,.mobile-experience :is(a,button):active{transform:none!important;will-change:auto!important}}

.mobile-experience .public-receipt{margin-block:28px;border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,24px);background:var(--surface)}.public-receipt summary{cursor:pointer;font-weight:850;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--ink)}.public-receipt p,.public-receipt figcaption{font-size:1.0625rem;color:var(--text);margin-block:16px;line-height:1.6}.public-receipt figure{margin:20px 0 0}.public-receipt img{width:100%;height:auto;object-fit:contain;background:white;border:1px solid var(--line);border-radius:8px}.public-receipt a span{display:inline-block;min-height:44px;padding-block:12px;font-size:1.0625rem;font-weight:750}

/* Keep the original resolution, fit by default, and pan at native size on demand. */
.mobile-experience dialog.receipt-modal{width:min(1000px,calc(100% - 32px));max-width:none;height:fit-content;max-height:85vh;max-height:85dvh;padding:clamp(16px,3vw,24px);border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);overflow:auto;box-shadow:0 24px 64px #071d4940}
.receipt-modal::backdrop{background:#071d4999}
.receipt-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.receipt-toolbar h2{font-size:clamp(1.125rem,1rem + .5vw,1.5rem);line-height:1.4;letter-spacing:-.02em}
.receipt-toolbar button{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:10px;font-size:28px;background:var(--soft);color:var(--ink)}
#zoomReceipt{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;font-size:1rem;font-weight:800;background:var(--soft);color:var(--ink);margin-bottom:16px}
.receipt-viewport{width:100%;max-height:60vh;max-height:60dvh;overflow:auto;overscroll-behavior:contain;border-radius:8px;background:white;touch-action:pan-x pan-y;outline-offset:2px}
.receipt-viewport img{display:block;width:100%;height:auto;max-width:960px;margin-inline:auto;object-fit:contain}
.receipt-modal.is-zoomed .receipt-viewport img{width:960px;max-width:none;margin:0}
