:root {
    --ink:#102b29;
    --cream:#f8f6ef;
    --lime:#d5f46c;
    --muted:#53645b;
    --line:#cbd2bf;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:95px;
}
body {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:Arial,sans-serif;
}
a {
    color:inherit;
}
button,a {
    -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid #397259;
    outline-offset:5px;
}
.skip {
    position:absolute;
    top:-80px;
    left:20px;
    background:var(--lime);
    padding:12px;
    z-index:100;
}
.skip:focus {
    top:10px;
}
.wrap {
    max-width:1320px;
    margin:auto;
    padding:0 6%;
}
header {
    border-bottom:1px solid var(--line);
    background:var(--cream);
}
nav {
    height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.logo {
    text-decoration:none;
    font-weight:800;
    font-size:22px;
    line-height:1.1;
}
.logo small {
    display:block;
    font-size:11px;
    letter-spacing:2px;
    margin-top:6px;
    font-weight:500;
}
.navlinks {
    display:flex;
    gap:29px;
    align-items:center;
    font-size:14px;
}
.navlinks a {
    text-decoration:none;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    background:var(--ink);
    color:var(--cream);
    padding:20px 26px;
    border-radius:50px;
    font-weight:bold;
    text-decoration:none;
    border:1px solid var(--ink);
    font-size:15px;
    cursor:pointer;
}
.button:hover {
    background:#245044;
}
.button.lime {
    background:var(--lime);
    color:var(--ink);
    border-color:var(--lime);
}
.button.lime:hover {
    background:#c7e75c;
}
.button.outline {
    background:transparent;
    color:var(--ink);
}
.arrow {
    font-size:23px;
    line-height:1;
}
.eyebrow {
    font-size:12px;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    display:block;
}
.hero {
    display:grid;
    grid-template-columns:1.04fr 1fr;
    gap:55px;
    align-items:center;
    padding-top:56px;
    padding-bottom:70px;
}
.hero h1 {
    font-family:Georgia,serif;
    font-size:clamp(48px,5.7vw,78px);
    font-weight:normal;
    line-height:1.02;
    letter-spacing:-3px;
    margin:26px 0;
}
.hero h1 em {
    font-weight:normal;
    color:#5c7151;
}
.intro {
    font-size:18px;
    line-height:1.65;
    max-width:470px;
    color:var(--muted);
}
.actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}
.trust {
    font-size:12px;
    margin-top:18px;
    color:var(--muted);
    line-height:1.6;
}
.hero-photo {
    position:relative;
    padding-bottom:28px;
}
.hero-photo img {
    display:block;
    width:100%;
    height:630px;
    object-fit:cover;
    object-position:45% 50%;
    border-radius:240px 240px 20px 20px;
}
.photo-note {
    position:absolute;
    bottom:0;
    right:-20px;
    transform:rotate(-3deg);
    background:var(--lime);
    padding:23px 30px;
    font-size:14px;
    font-weight:bold;
    border-radius:3px;
}
.photo-note span {
    display:block;
    font-family:Georgia,serif;
    font-size:32px;
    font-weight:normal;
    margin-bottom:5px;
}
.ribbon {
    background:var(--lime);
    padding:22px;
    text-align:center;
    font-size:17px;
    letter-spacing:1px;
}
.ribbon span {
    padding:0 25px;
}
.section {
    padding-top:100px;
    padding-bottom:100px;
}
.section-title {
    font-family:Georgia,serif;
    font-size:clamp(38px,4vw,56px);
    font-weight:normal;
    letter-spacing:-1.5px;
    line-height:1.1;
    margin:18px 0 24px;
}
.story {
    display:grid;
    grid-template-columns:.9fr 1fr;
    gap:90px;
    align-items:center;
}
.story img {
    width:100%;
    height:540px;
    object-fit:cover;
    border-radius:18px;
}
.bodycopy {
    font-size:17px;
    color:var(--muted);
    line-height:1.8;
}
.source {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
}
.help {
    background:var(--ink);
    color:var(--cream);
}
.help .section-title {
    max-width:620px;
}
.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:54px;
}
.step {
    border-top:1px solid #617369;
    padding-top:24px;
}
.number {
    color:var(--lime);
    font-family:Georgia,serif;
    font-size:34px;
}
.step h3 {
    font-size:23px;
    font-weight:500;
    margin:24px 0 15px;
}
.step p {
    color:#c6d1c5;
    font-size:16px;
    line-height:1.7;
    min-height:110px;
}
.step a,.textbutton {
    font-size:14px;
    font-weight:bold;
    text-underline-offset:7px;
}
.textbutton {
    background:none;
    border:0;
    padding:0;
    color:var(--lime);
    cursor:pointer;
}
.materials-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:36px;
}
.materials-head p {
    max-width:420px;
    color:var(--muted);
    line-height:1.7;
}
.reels {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.reel video {
    display:block;
    width:100%;
    aspect-ratio:9/16;
    border-radius:15px;
    background:#102b29;
}
.reel h3 {
    font-size:17px;
    font-weight:500;
    margin:20px 0 9px;
}
.reel a {
    font-size:13px;
    text-underline-offset:4px;
}
.posters {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}
.poster {
    margin:0;
}
.poster img {
    width:100%;
    aspect-ratio:4/5;
    object-fit:contain;
    background:#e8ebdf;
    border-radius:5px;
    display:block;
}
.poster figcaption {
    font-size:12px;
    line-height:1.5;
    margin-top:10px;
}
.poster a {
    display:block;
    margin-top:6px;
    text-underline-offset:3px;
}
.poster-section {
    border-top:1px solid var(--line);
    margin-top:70px;
    padding-top:50px;
}
.poster-section h3 {
    font-family:Georgia,serif;
    font-weight:normal;
    font-size:34px;
    margin:0 0 25px;
}
.faq {
    max-width:850px;
    margin:auto;
}
.faq details {
    border-bottom:1px solid var(--line);
    padding:24px 0;
}
.faq summary {
    cursor:pointer;
    font-size:18px;
    line-height:1.5;
}
.faq details p {
    font-size:16px;
    color:var(--muted);
    line-height:1.8;
}
.final {
    background:var(--lime);
    text-align:center;
    padding:85px 24px;
}
.final .section-title {
    max-width:720px;
    margin:0 auto 28px;
}
.final p {
    font-size:17px;
    line-height:1.7;
}
footer {
    padding-top:40px;
    padding-bottom:40px;
    font-size:12px;
    color:var(--muted);
    line-height:1.8;
}
.footer-row {
    display:flex;
    justify-content:space-between;
    gap:30px;
}
.status {
    min-height:24px;
    font-size:13px;
    color:var(--lime);
    margin-top:14px;
}
.mobile-donate {
    display:none;
}
@media(max-width:850px) {
    .navlinks>a:not(.button) {
        display:none;
    }
    .hero {
        gap:30px;
    }
    .hero-photo img {
        height:520px;
    }
    .hero h1 {
        font-size:56px;
    }
    .story {
        gap:40px;
    }
    .posters {
        grid-template-columns:repeat(3,1fr);
    }
    .steps {
        gap:24px;
    }
    .step p {
        min-height:150px;
    }
}
@media(max-width:600px) {
    .wrap {
        padding-left:22px;
        padding-right:22px;
    }
    nav {
        height:78px;
    }
    .logo {
        font-size:19px;
    }
    .logo small {
        font-size:9px;
    }
    .navlinks .button {
        padding:13px 18px;
        font-size:12px;
    }
    .hero {
        display:flex;
        flex-direction:column;
        gap:35px;
        padding-top:35px;
        padding-bottom:48px;
    }
    .hero h1 {
        font-size:48px;
        letter-spacing:-2px;
        margin:23px 0;
    }
    .hero-copy {
        width:100%;
    }
    .intro {
        font-size:17px;
    }
    .hero-photo {
        width:100%;
        padding-bottom:18px;
    }
    .hero-photo img {
        height:480px;
        border-radius:180px 180px 12px 12px;
    }
    .photo-note {
        right:0;
        padding:16px 22px;
    }
    .photo-note span {
        font-size:28px;
    }
    .actions .button {
        padding:18px 22px;
        font-size:14px;
    }
    .ribbon {
        font-size:13px;
        line-height:1.8;
        padding:16px;
    }
    .ribbon span {
        padding:0 9px;
    }
    .section {
        padding-top:65px;
        padding-bottom:65px;
    }
    .story {
        grid-template-columns:1fr;
        gap:35px;
    }
    .story img {
        height:380px;
    }
    .story-text {
        grid-row:1;
    }
    .section-title {
        font-size:43px;
    }
    .steps {
        grid-template-columns:1fr;
        gap:30px;
        margin-top:35px;
    }
    .step p {
        min-height:0;
    }
    .step h3 {
        margin-top:13px;
    }
    .materials-head {
        display:block;
    }
    .reels {
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        padding-bottom:25px;
        gap:18px;
    }
    .reel {
        min-width:82%;
        scroll-snap-align:start;
    }
    .posters {
        grid-template-columns:repeat(2,1fr);
        gap:18px 12px;
    }
    .footer-row {
        display:block;
    }
    .mobile-donate {
        display:block;
        position:fixed;
        bottom:15px;
        left:22px;
        right:22px;
        z-index:10;
        box-shadow:0 5px 30px #0003;
        padding:16px;
    }
    footer {
        padding-bottom:100px;
    }
    .final {
        padding:60px 22px;
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
}

[hidden] { display: none !important; }
.faq-section { padding-top: 0; }
.sponsor-section { border-top: 1px solid var(--line); }
.sponsor-section, .sponsor-block { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.sponsor-block { grid-column: 1 / -1; }
.sponsor-logo { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 25px; text-decoration: none; background: #eaf0dd; border-radius: 15px; min-height: 250px; }
.sponsor-logo img { width: min(100%, 240px); height: 190px; object-fit: contain; }
.sponsor-logo span { margin-top: 18px; font-size: 13px; }
.campaign-progress { padding-top: 35px; padding-bottom: 70px; }
.campaign-progress progress { display: block; width: 100%; height: 17px; accent-color: #426541; }
.campaign-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.campaign-item { border-top: 1px solid var(--line); padding-top: 25px; min-width: 0; }
.campaign-item p { white-space: pre-wrap; line-height: 1.7; color: var(--muted); }
.campaign-item img, .campaign-item video { width: 100%; height: 350px; object-fit: contain; border-radius: 12px; background: #e9eddf; }
.campaign-item audio { width: 100%; }
.campaign-item h3 { font-weight: 500; font-size: 22px; }
.campaign-item a { font-size: 13px; }
@media (max-width: 600px) {
    .sponsor-section, .sponsor-block { grid-template-columns: 1fr; gap: 20px; }
    .campaign-items { grid-template-columns: 1fr; }
    .sponsor-logo { min-height: 200px; }
}