body{background-color: #fff}

main>header~:nth-child(odd){
    background-color: rgba(0,0,0,0);
    border: none}

main>#eop+header.banner,main>#eop+header.banner figure,main>#eop+header.banner figure>img{
    height: min(calc(100vh - var(--nav-2)),100vh);
    height: min(calc(100svh - var(--nav-2)),100svh)}

.banner{padding: 1em 0 calc(1em + env(safe-area-inset-bottom))}

header.banner figure{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100vh - var(--nav-2))*.618));
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100svh - var(--nav-2))*.618));
    mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100vh - var(--nav-2))*.618));
    mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100svh - var(--nav-2))*.618))}

h1,#section-1 h2,p.h2,p.h3,#inline-give h3{
    font-family:'libre baskerville',serif ;
    line-height: 1.382;
    font-weight: 400}

.banner h1{margin-top: auto}

@media(max-width:32em){
    .banner h1{font-size: var(--h2)}
}

.banner p.small{margin-top: 1.618rem}
.banner p.small a{color: inherit}

main>header~*{scroll-margin:0}
main>header~*:not(#section-1){padding-top: 0}

div.banner{
    position: sticky;
    top: -8vh;
    z-index: -1;
    height: auto;
    padding: 0;
    background: none}

div.banner figure{position: relative}
div.banner figure img{height: 100%}
#new-schools{margin-top: -21vh}

section::after{
    z-index: -1;
    width: 100%;
    height: 100%}

#new-schools::after{background:linear-gradient(to bottom,rgba(255,255,255,0)60vh,rgba(255,255,255,.85)130vh,rgba(255,255,255,1)calc(100% - 100vh));}

#new-schools .banner figure{
    height: 110vh;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)20%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)20%)}

#new-schools .banner figure img{object-position: 63%}

#inline-give{
    padding: 1em;
    border-color: #06a542}

.above-the-top .action-container>div{
    flex-direction: column;
    gap:.618em}

.above-the-top .action-container .h4{
    font-family:'libre baskerville',serif ;
    line-height: 1.146;
    font-weight: 400;
    text-align: left;
    display: block;
    margin: 0}

@media (64em <= width <= 70em){
    .above-the-top .action-container .h4{font-size: calc(var(--base-unit)*.75)}
}

.above-the-top .action-container .h4 span{color:#06a542}

#inline-give .giving-component{
    width: 100%;
    height: auto!important}

#inline-give .diCartField label{
    position: relative;
    z-index: 1}

#change{margin-top: -21vh}

#change::after{background:linear-gradient(to bottom,rgba(255,255,255,0)60vh,rgba(255,255,255,.88)130vh,rgba(255,255,255,1)calc(100% - 200vh))}

#change .banner figure{
    height: 100vh;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)34%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)34%)}

#change .banner figure img{object-position: 68%}

section h3{
    margin:2.618em 0 1.618em;
    width: 100%!important}

figure.width-100ch{
    width:100%!important;
    margin: 2.618em 0}

/*44.953*/
.gray{
    color: #888;
/*    color: oklch(62.675% 0 0);*/
}

.gradient-text{transition: all 1.3s .5s ease-out}

.to-black.visible{
    color: #000;
    color:oklch(0% 0 0)}

.to-green{color:#06a542}

.to-yellow{
    color:#ffdb00;
    color:oklch(95% 0.5 97)}

.to-orange.visible{
    color:#ff5600;
/*    color:oklch(100% 0.5 58);*/
}

.to-magenta{
    color:#ff009e;
    color:oklch(97% 0.50 11) 55%);
}

section figure:not(header figure) img{
    border-radius: .146em;
    box-shadow:0 0 1.618em rgba(55,21,8,.21),0 .09em .146em rgba(55,21,8,.13),.09em .146em .236em rgba(55,21,8,.08),.146em .236em .382em rgba(55,21,8,.05),.236em .382em .618em rgba(55,21,8,.03)}

main>:last-child{padding-bottom:11em}

@media(min-aspect-ratio:1/1){
    #change aside,
    main>*>*>*:not(a,aside,.banner figure,button,div,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup p,small,.small){
        width: min(100%, var(--ch-unit,.56125em)*55);
        width: 49%}
    
    main>*>*{
        margin-right: max(1em,((100% - 100ch) / 3));
        margin-left: max(1em,((100% - 100ch) / 3))}
    
    header.banner figure{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100vh - var(--nav-2))*.5));
        -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100svh - var(--nav-2))*.5));
        mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100vh - var(--nav-2))*.5));
        mask-image:linear-gradient(to top,rgba(0,0,0,.3)0,rgba(0,0,0,1)calc((100svh - var(--nav-2))*.5))}
    
    .banner h1{font-size: var(--h1)}
    div.banner figure{overflow: hidden}
    
    div.banner figure img{
        box-shadow: none;
        transform-origin: left top;
        transform: scale(1.2);
        max-width: none}
    
    #new-schools{margin-top: -34vh;}
    
    #new-schools::after{
        background:linear-gradient(to bottom,rgba(255,255,255,0)150vh,rgba(255,255,255,1)250vh,rgba(255,255,255,1)calc(100% - 100vh),rgba(255,255,255,1)calc(100% - 4.236em)),linear-gradient(to right,rgba(255,255,255,.8)0,rgba(255,255,255,.8)38%,rgba(255,255,255,0)62%);
        -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0)100vh,rgba(0,0,0,1)135vh);
        mask-image:linear-gradient(to bottom,rgba(0,0,0,0)100vh,rgba(0,0,0,1)135vh)}
    
    #new-schools .banner{height: 100%}
    
    #new-schools .banner figure{
        min-height: 108vh;
        height: auto;}
    #inline-give{width:calc(50% - 1.618em)}
    #change{margin-top: 0}
    #change::after{background:linear-gradient(to bottom,rgba(255,255,255,0)30%,rgba(255,255,255,1)calc(40% + 100vh)),linear-gradient(to right,rgba(255,255,255,.93)0,rgba(255,255,255,.8)38%,rgba(255,255,255,0)62%)}
    
    #change div.banner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        padding-top: calc((var(--h3)*1.382)*3)}
    
    #change .banner figure{
        height: auto;
        position: sticky;
        top: calc((100vh - 66vw)/2);
        -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)21%);
        mask-image:linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)21%);
        min-height: 100vh;
        height: auto;}
    
    #change .banner figure img{aspect-ratio:unset!important;}
    
    #change .banner + header{
        margin-top: calc(-180vh + 4.236em);
        margin-top: 0}
    
    #magenta{margin: 2.618em 0}
    
    #striking{
    color: #555;
    color: oklch(50% 0 0)}
    
    @media(min-width:64em){
        .grid.half{gap:2.618em}
        .above-the-top .action-container>div{right: max(1em,((100vw - 100ch) / 3))}
        main>:last-child{padding-bottom:4.236em}
    }

    @media(min-width:120em){
        main>*>*{
            margin-right: max(1em,((100% - 100ch) / 4));
            margin-left: max(1em,((100% - 100ch) / 4))}
        .above-the-top .action-container>div{right: max(1em,((100vw - 100ch) / 4))}
    }
}

@media(min-width:47em){
    .grid.half figure{order: 2}
    .grid.half div{order: 1}
}
.audio{
    color: inherit;
    text-decoration: underline!important;
    position: relative;
}
/*

.audio::after{
    content: '';
    display: inline-block;
    width: var(--base-unit);
    height: calc(var(--base-unit)*1.03);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><polygon width='10' height='16' fill='%23888' points='16 0 6.15 8 0 8 0 18 6.15 18 16 26 16 0'/></svg>");
    background-position: center;
    background-size: .618em;
    background-repeat: no-repeat;
    transform: translateY(.146em)
}*/