@import url("layout.css");
/*@import url("buttons.css");*/
@import url("donation-item.css");
@import url("scroll-x.css");
/*REMOVE UNNECESSARY @imports*/

/*BEGIN CUSTOM CSS*/
:root{
    --ch-unit:calc(var(--base-unit)*.56);
}

@media(max-width:120rem){
    :where(main>*>*>*:not(a,button,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup *,small,.small)){width: min(100%, var(--ch-unit)*50)}
}

.sub-nav{display: none}

main{
    font-family: 'roboto serif',georgia,serif;
    font-stretch: 85%;
    font-weight: 382;
}

/*
main::after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: tomato;
    position: fixed;
    top: calc(50% - 1px);
    left: 0;
    z-index: 999
}
*/

#main-header{
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1.618em 0;
}

#main-header>div{
    display: flex;
    flex-direction: column;
    gap: 1em
}

h1,h2,h3{
    font-stretch: 50%;
    font-weight: 618;
    /*text-wrap:balance;*/
}

h1{
    letter-spacing: -.02ch;    text-wrap:balance;
}

.donationItem{
    font-family: roboto,system-ui;
    font-weight: normal;
    font-stretch: normal
}

h3,
p.h3{
    font-weight: 382;
    font-stretch: 50%;
    font-style: italic;
    line-height: 1.382
}

h2+h3{margin-top: 1rem}

.action-container{margin-inline:auto}

.above-the-top .action-container>div{
    justify-content: center;
    align-items: center;
    gap:.618em;
    padding: .618em;
}

.above-the-top #motivator{
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-stretch: 50%;
}

.above-the-top #motivator div{
    font-weight: 618;
    height: 1lh;
    overflow:hidden;
    position: relative
}

.above-the-top #motivator li{
    white-space: nowrap;
}

.above-the-top #motivator i{color: #555}

.above-the-top .donationItem{
    margin-inline:0;
    width: auto;
    font-size: var(--small);
    text-transform: uppercase
}

#above-the-top{margin-top: -1em}
section{position: relative}
section:first-of-type{padding-bottom: 4.236em}

section+section{
    padding-top: min(13vh,6.854em)!important;
}

main::before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: -1;
    background:url(analog-noise.jpg);
    opacity: .03
}
            
section::after{
    content: '';
    display: block;
    width: 100%;
    height: 100vh;
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: all 3s linear
}
    
section.at-center::after{
    opacity: .13;
}

#medical.at-center::after{
    background-color: #373c6b;
}

#food-and-water.at-center::after{
    background-color: #fac260;
}

#livelihoods.at-center::after{
    background-color: #c95390;
    opacity: .18
}

#trauma.at-center::after{
    background-color: #d6966b;
}

#literacy.at-center::after{
    background-color: #0c5ec9;
    opacity: .08
}

#leadership.at-center::after{
    background-color: #dee594;
}
            
section:not(#leadership) .square-img-container{opacity: 1;}    
section{padding-block: 0!important}
    
section:last-of-type{padding-bottom: 6.854em!important}
section>*{transition: all 1s linear}
section:has(+section.at-center)>*{opacity: .3;}

@media (min-width:57.618rem){
    .above-the-top .action-container>div{
        border-radius:0!important;
        width:100%!important;
        height: 4.236em;
        bottom: 0;
    }
    
    @media(min-aspect-ratio:1/1){
        :root{
            --w:min(50vw - 1.618em,50ch - .809em);
            --h:min(var(--w),75vh);
        }
        
        .hide-when-wide{display: none!important}
        
        #main-header{
            justify-content: center;
            width: var(--w);
            height: calc(100vh - var(--nav-2));
            margin-left: max(1em,((100% - 100ch) / 2));
            padding-block: 0
        }
        
        #main-header>div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-inline: 0;
        }
        
        #main-header p{margin-inline: 0}
        
        .action-container{
            margin-inline: 0;
            width: auto;
            justify-content: flex-start;
        }

        .action-container>div{
            width: min(100%, var(--ch-unit)* 38);
        }
        
        .above-the-top .action-container>div{
            border: none!important;
            padding: 0;
            width:var(--w)!important;
            height: calc((100vh - var(--h))/2);
            box-shadow:none!important;
            background-color: rgba(255,255,255,0)!important;
            z-index: 9999;
        }

        .above-the-top #motivator,
        .donationItem{margin-inline:0;}
            
        .above-the-top .action-container>div::after{
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            z-index: -1;
            background:linear-gradient(to top,rgba(255,255,255,0)0,rgba(255,255,255,.9)calc(50% - .5em),rgba(255,255,255,.9)calc(50% + .5em),rgba(255,255,255,0)100%);
            mask-image: linear-gradient(to right,rgba(0,0,0,0)0,rgba(0,0,0,1)20%,rgba(0,0,0,1)70%,rgba(0,0,0,0)100%);
        }
        
        section:not(#medical)>div{position: relative;}
        #medical{padding-top: 0}
        
        section>div{
            width: var(--w);
            margin-right: 0;
        }
        
        #ongoing>div{
            min-height: calc(var(--w)*.618)
        }
        
        .grad-text{
            font-variation-settings: "GRAD" 0;
            position: relative;
            z-index: 2;
            transition: all .5s linear
        }
        
        .grad-text.at-center{
            font-variation-settings: "GRAD" 100;
        }
        
        .grad-text::after{
            content: '';
            display: block;
            width: 100%;
            width: calc(100% + 8ch);
            height: 100%;
            height: calc(100% + 2lh);
            position: absolute;
            top: 0;
            top: -1lh;
            left: -4ch;
            z-index: -1;
            background:linear-gradient(to top,rgba(255,255,255,0)0,rgba(255,255,255,.9)30%,rgba(255,255,255,.9)70%,rgba(255,255,255,0)100%);
            mask-image: linear-gradient(to right,rgba(0,0,0,0)0,rgba(0,0,0,1)20%,rgba(0,0,0,1)80%,rgba(0,0,0,0)100%);
            transition: all .8s linear;
            opacity: 0
        }
        
        .grad-text.at-center::after{opacity: 1}
        
        section:not(#leadership) .square-img-container.at-center{
            opacity: 1
        }
        
        .square-img-container{
            display: block;
            position: absolute;
            top: 0;
            right: max(1em,((100% - 100ch) / 2));
            margin-top: 0;
            width: var(--w);
            height: 100%;
        }
        
        #medical .square-img-container{
            height: calc(100% + 100vh - var(--nav-2));
            top: calc((100vh - var(--nav-2))*-1);
            padding-bottom: 0
        }
        
        section:not(#medical) .square-img-container{
            right: calc((var(--w) + 1.618em)*-1)
        }
        
        .square-img-wrap{
            width: var(--w);
            height: var(--h);
            position: sticky;
            top: calc((100vh - var(--h))/2);
            box-shadow:0 0 1ch rgba(0,0,0,.08),0 .146ch .236ch rgba(0,0,0,.08),.146ch .236ch .382ch rgba(0,0,0,.08),.236ch .382ch .618ch rgba(0,0,0,.08);
            border-radius: .15em;
            overflow: clip;
        }
        
        #medical .square-img-wrap{
            margin-top: calc((100vh - var(--nav-2) - var(--h))/2);
        }
        
        #ongoing .square-img-wrap{
            height: calc(var(--w)*.618 + ((var(--small) * 1.618) * 2))!important;
            position: relative;
            top: 0;
            box-shadow: none
        }
        
        .square-img-wrap figure{
            width: var(--w);
            height: var(--h);
            position: absolute;
            top: 0;
            right: 0;
            transition:all .8s cubic-bezier(.38,0,.62,1)
        }
        
        #ongoing .square-img-wrap :is(figure,img){height: 100%}
        
        .square-img-wrap figure:first-of-type{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
        
        section:not(#livelihoods,#trauma,#literacy) .square-img-wrap figure:not(:first-of-type){
            clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
        }
        
        .square-img-wrap img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition:all .5s cubic-bezier(.38,0,.62,1);
        }
        
        .square-img-wrap figure:not(:first-of-type) img{object-position: left}
        
        #ongoing .square-img-wrap figure{
            position: relative;
        }
        
        #ongoing .square-img-wrap figure img{
            height: calc(var(--w)*.618);
            box-shadow:0 0 1ch rgba(0,0,0,.08),0 .146ch .236ch rgba(0,0,0,.08),.146ch .236ch .382ch rgba(0,0,0,.08),.236ch .382ch .618ch rgba(0,0,0,.08);
            border-radius: .15em;
        }
        
        .quote{
            position: relative;
            display: flex;
            align-items: flex-end;
            overflow: clip
        }
        
        .quote::after{
            content: '';
            display: block;
            width: 100%;
            height: 50%;
            position: absolute;
            bottom: 0;
            left: 0;
            mask-image:linear-gradient(to top,rgba(0,0,0,1)0%,rgba(0,0,0,0)100%);
            background-color: rgba(0,0,0,.6);
        }
        
        .quote img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%
        }
        
        .quote blockquote{
            padding: 1em;
            width: 100%;
            color: #fff;
            position: relative;
            z-index: 3;
        }
        
        .quote:not(:first-child) blockquote{
            transform: translateX(100%);
            transition: all 1s cubic-bezier(.38,0,.62,1)
        }
        
        .quote p{
            font-size: var(--h3);
            line-height: 1.236;
            font-weight: 382;
            font-stretch: 50%;
            text-wrap:balance;
            font-variation-settings: "GRAD" -50;
            text-shadow:0 .1ch .2ch rgba(0,0,0,.3),.1ch .2ch .3ch rgba(0,0,0,.3),.2ch .3ch .5ch rgba(0,0,0,.3)
        }
        
        .quote footer{
            margin-top: .618em;
            text-align: right;
        }
        
        cite{font-style: normal;}
        
        #medical>.space>*+*:not(.square-img-container),
        #food-and-water>.space>*+*:not(.square-img-container),
        #livelihoods>.space>*+*:not(.square-img-container),
        #trauma>.space>*+*:not(.square-img-container),
        #leadership>.space>*+*:not(.square-img-container){
            margin-top: 0;
            padding-top: 1.618em
        }
        
        /*HEADER IMG OPACITY*/
        #medical .square-img-container figure:nth-of-type(1){opacity: 0}
        #main-header.at-center~#medical .square-img-container figure:nth-of-type(1),
        #med2t.at-center~.square-img-container figure:nth-of-type(1){
            opacity: 1
        }
        
        /*FIGURE WIPE*/
        #med2t.at-center~.square-img-container figure:nth-of-type(2),
        #med3t.at-center~.square-img-container figure:nth-of-type(2),
        #med3t.at-center~.square-img-container figure:nth-of-type(3),
        #med4t.at-center~.square-img-container figure:nth-of-type(3),
        #med4t.at-center~.square-img-container figure:nth-of-type(4),
        #med5t.at-center~.square-img-container figure:nth-of-type(4),
        #med5t.at-center~.square-img-container figure:nth-of-type(5),
        #med6t.at-center~.square-img-container figure:nth-of-type(5),
        #med6t.at-center~.square-img-container figure:nth-of-type(6),
        #fw2t.at-center~.square-img-container figure:nth-of-type(3),
        #fw3t.at-center~.square-img-container figure:nth-of-type(3),
        #fw3t.at-center~.square-img-container figure:nth-of-type(4),
        #fw4t.at-center~.square-img-container figure:nth-of-type(4),
        #lead2t.at-center~.square-img-container figure:nth-of-type(2),
        #lead3t.at-center~.square-img-container figure:nth-of-type(2),
        #lead3t.at-center~.square-img-container figure:nth-of-type(3),
        body:has(#footer-widgets.visible) #leadership .square-img-container figure:nth-of-type(3){
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
        
        /*PREVENT LAST IMG FROM WIPING ON FADE OUT*/
        main:has(#ongoing.at-center) #medical .square-img-container figure:nth-of-type(6),
        main:has(#livelihoods.at-center) #food-and-water .square-img-container figure:nth-of-type(3)
        {
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
        }
        
        /*IMG OBJECT POSITION*/
        #med2t.at-center~.square-img-container figure:nth-of-type(2) img,
        #med3t.at-center~.square-img-container figure:nth-of-type(2) img,
        #med3t.at-center~.square-img-container figure:nth-of-type(3) img,
        #med4t.at-center~.square-img-container figure:nth-of-type(3) img,
        #med4t.at-center~.square-img-container figure:nth-of-type(4) img,
        #med5t.at-center~.square-img-container figure:nth-of-type(4) img,
        #med5t.at-center~.square-img-container figure:nth-of-type(5) img,
        #med6t.at-center~.square-img-container figure:nth-of-type(5) img,
        #med6t.at-center~.square-img-container figure:nth-of-type(6) img,
        #fw2t.at-center~.square-img-container figure:nth-of-type(3) img,
        #fw3t.at-center~.square-img-container figure:nth-of-type(3) img,
        #fw3t.at-center~.square-img-container figure:nth-of-type(4) img,
        #fw4t.at-center~.square-img-container figure:nth-of-type(4) img,
        #lead3t.at-center~.square-img-container figure:nth-of-type(3) img,
        #leadership.at-center .square-img-container:not(.at-center) figure:nth-of-type(3) img,
        body:has(#footer-widgets.visible) #leadership .square-img-container figure:nth-of-type(3) img{object-position: center}
        
        #lead2t.at-center~.square-img-container figure:nth-of-type(2) img,
        #lead3t.at-center~.square-img-container figure:nth-of-type(2) img{
            object-position: 80%
        }
        
        main:has(#ongoing.at-center) #medical .square-img-container figure:nth-of-type(6) img,
        main:has(#livelihoods.at-center) #food-and-water .square-img-container figure:nth-of-type(3) img{object-position: center}
        
        /*BLOCKQUOTE POSITION*/
        #med2t.at-center~.square-img-container figure:nth-of-type(2) blockquote,
        #med3t.at-center~.square-img-container figure:nth-of-type(2) blockquote,
        #med3t.at-center~.square-img-container figure:nth-of-type(3) blockquote,
        #med4t.at-center~.square-img-container figure:nth-of-type(3) blockquote,
        #fw2t.at-center~.square-img-container figure:nth-of-type(3) blockquote,
        #fw3t.at-center~.square-img-container figure:nth-of-type(3) blockquote,
        #fw3t.at-center~.square-img-container figure:nth-of-type(4) blockquote,
        #lead2t.at-center~.square-img-container figure:nth-of-type(2) blockquote,
        #lead3t.at-center~.square-img-container figure:nth-of-type(2) blockquote{transform:translateX(0)}
        
        main:has(#livelihoods.at-center) #food-and-water .square-img-container figure:nth-of-type(4) blockquote{transform:translateX(0);}
        
        :is(#livelihoods,#trauma,#literacy) blockquote,
        #food-and-water .square-img-container figure:nth-of-type(2) blockquote{transform:translateX(0);}
        
        #food-and-water .square-img-container figure:nth-of-type(2){
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)!important
        }
        
        #fw1t~.square-img-container figure:nth-of-type(2) blockquote,
        #tr1t~.square-img-container figure:nth-of-type(2) blockquote,
        #tr2t~.square-img-container figure:nth-of-type(3) blockquote,
        #live1t~.square-img-container figure:nth-of-type(2) blockquote,
        #lit1t~.square-img-container figure:nth-of-type(2) blockquote{opacity: 0}
        
        #fw1t.at-center~.square-img-container figure:nth-of-type(2) blockquote,
        #tr1t.at-center~.square-img-container figure:nth-of-type(2) blockquote,
        #tr2t.at-center~.square-img-container figure:nth-of-type(3) blockquote,
        #live1t.at-center~.square-img-container figure:nth-of-type(2) blockquote,
        #lit1t.at-center~.square-img-container figure:nth-of-type(2) blockquote{opacity: 1}
    }  
}

@media(min-width:100rem){
    :root{
        --w:min(50vw - 2.618em,62ch - 1.309em);
        --base-unit:clamp(1rem, 0.5vw + 1rem, 2.618rem);
    }
    :where(main>*>*>*:not(a,button,figcaption,h1,.h1,h2,.h2,header,header img,header video,hgroup,hgroup *,small,.small)){width: min(100%, var(--ch-unit)*62)}
    :where(main>*>*){margin-inline: max(1.618em,((100% - 124ch) / 2))}
    
    #main-header{
        margin-left: max(1.618em,((100% - 124ch) / 2))
    }
    
    .above-the-top .action-container>div,
    .square-img-container{
        right: max(1.618em,((100% - 124ch) / 2));
    }
    
    section:not(#medical) .square-img-container{
        right: calc((var(--w) + 1.618em)*-1)
    }
}