.pswp img{object-fit: cover}

.trigger{
    position: absolute;
    left: 0;
    z-index: 9999;
    width: 1px;
    width: 10px;
/*    background-color: tomato*/
}

#intro header{padding:2em 0 .618em;}

/*H1*/
h1{
    width: fit-content;
    margin-inline:auto;
}

[lang="es"] #en-h1{display: none!important}
[lang="es"] #es-h1{display: block!important}

h1>span{
    display: block;
    white-space: nowrap;
    line-height: .77;
    width: fit-content;
}

#report-o{
    display: inline-block;
    position: relative;
}

#report-o::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-image: url('https://s3.theark.cloud/sp-comm-arkfiles/website/images/occ/logo/occ-logo-color.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(1.5);
    transform-origin: center 90%;
}
/*H1*/

figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:is(#intro,#share,#disciple,#pack) .circle{
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #000;
        box-shadow:0 0 1.618em rgba(0,80,0,.21),0 .09em .146em rgba(0,80,0,.34),.09em .146em .236em rgba(0,80,0,.21),.146em .236em .382em rgba(0,80,0,.13),.236em .382em .618em rgba(0,80,0,.08)
    }

:is(#intro,#share,#disciple,#pack) :is(.stat-number,.stat-title){text-shadow:0 -1px #042,1px -1px #042,1px -1px #042,1px -1px #042,1px 0 #042,1px 1px #042,1px 1px #042,-1px 1px #042,-1px 1px #042,-1px 0 #042,-1px -1px #042,-1px -1px #042,0 2px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 8px rgba(0,0,0,.1),0 8px 13px rgba(0,0,0,.1)}

@media (max-aspect-ratio:1/1){
    #mh-stat{
        height: 1px;
        top: calc((var(--nav-bar) + var(--sub-nav))*-1)
    }
    
    main>header .circle>*{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%)translateY(-50%);
    }
    
    #disciple .stat-container{
        transform: scale(.9);
    }

    #mobile-header{
        position: relative;
        z-index: 0;
        display: block;
        height: calc(calc(100vh - 1em) - var(--nav-3));
        height: calc(calc(100svh - 1em) - var(--nav-3));
        transition: background-color .5s linear;
    }
    
    #mobile-header hgroup{
        
        position: absolute;
        bottom: 0;
        left: 0;
        padding: .382em 0 0;
        text-align: center;
        color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        transition: opacity .3s linear}
    
    #mobile-header h1{
        position: relative;
        bottom: -.3ch;
        font-size: 21vw;}
    
    #mobile-header figure{
        clip-path:circle(calc(162vh - .382em) at 50% calc((162vh - (calc(100vh - 1em) - var(--nav-3)))*-1));
        clip-path:circle(calc(162vh - .382em) at 50% calc((162vh - (calc(100svh - 1em) - var(--nav-3)))*-1));
    }
    
    #mobile-header :is(figure,blockquote){
        transition: opacity .4s linear}
    
    #mh-stat.is-above-top~#mobile-header :is(figure,blockquote){opacity: 0}
    
    #mobile-header video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #mobile-header .circle{
        --stat-height:calc((min(21vmin,6.854em) * .72) + (min(3vmin,1em) * 1.382));
        --all-stats:calc(var(--stat-height)*3 + 2rem );
        --stat-cont-height:calc(100% - ((21vw * .77)*2));
        background-color: #00a651;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        height: calc(calc(100vh - 1em) - var(--nav-3));
        height: calc(calc(100svh - 1em) - var(--nav-3));
        clip-path:circle(162vh at 50% calc((162vh - (calc(100vh - 1em) - var(--nav-3)))*-1));
        clip-path:circle(162vh at 50% calc((162vh - (calc(100svh - 1em) - var(--nav-3)))*-1));
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    
    #mobile-header .circle::before{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        inset:0;
        background-color: #00a651;
        clip-path:circle(calc(162vh - .382em) at 50% calc((162vh - (calc(100vh - 1em) - var(--nav-3)))*-1));
        clip-path:circle(calc(162vh - .382em) at 50% calc((162vh - (calc(100svh - 1em) - var(--nav-3)))*-1));
        transition: opacity .3s linear}
    
    #mobile-header .circle::after{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        inset:0;
        background:linear-gradient(to bottom,rgba(0,0,0,.6)0%,rgba(0,0,0,0)calc((var(--base-unit)*2.618)*2),rgba(0,0,0,0)calc((var(--h1)*.77)*2),rgba(0,0,0,.6)100%);
        transition: opacity .3s linear}
    
    #mobile-header .stat-container{
        background-color: rgba(0,0,0,0);
        position: sticky;
        top: 1em;
        transform: none;
        height: auto;
        margin-bottom: calc((21vw * .77)*2 - .618em);
        transition: all .3s .1s linear;
        opacity: 0}
    
    #mh-stat.is-above-top~#mobile-header .circle::after{opacity: 0}
    
    #mh-stat.is-above-top~#mobile-header .stat-container{opacity: 1}
    
    #intro .copy-container blockquote:first-of-type{text-align: center}
    
    #intro>footer blockquote{margin-block: 6.854em}
    
    section header{
        height: 62vw;
        display: flex;
        flex-direction: column}
    
    section:not(#pray) header{
        margin-top: -38vw;
        transition: all .5s cubic-bezier(.36,1.65,.57,.81);
        transform: translateY(50vw)
    }
    
    blockquote:not(.lg){text-align: center}
    
    #pray h2{
        margin-block: auto 1ch;
    }
    
    section .circle{
        transform: translateY(50vw);
        transition: all .5s .1s cubic-bezier(.36,1.65,.57,.81)}
    
    section:not(#intro,#pray) .section-wrapper.visible header,
   section:not(#intro,#pray) .section-wrapper.visible .circle{
        transform: translateY(0)
    }
    
    h2{
        font-size: 13vw;
        text-align: left;
    }
    
    section .stat-title{letter-spacing: .1ch}
    
    #share header{
        margin-bottom: 8vw;
        height: auto;
        position: relative;
        z-index: 3
    }
    
    #share h2{
        color: #fff;
        letter-spacing: .08ch;
    }
    
    :is(#share,#disciple,#pack) :is(h2){
        text-shadow:0 -2px #000,1px -2px #000,2px -2px #000,2px -1px #000,2px 0 #000,2px 1px #000,2px 2px #000,-1px 2px #000,-2px 2px #000,-2px 0 #000,-2px -2px #000,-2px -1px #000,0 2px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 8px rgba(0,0,0,.1),0 8px 13px rgba(0,0,0,.1)
    }
    
    #share .circle{
        width: min(80vw,21em);
        height: min(80vw,21em);
        margin-top: -24vw;
        margin-right: .618em;
        margin-left: auto;
        
    }
    
    #share .stat-desc{margin-top: .382em}
    
    #disciple header{
        position: relative;
        z-index: 3;
    }
    
    #disciple h2{
        color: #fff;
        letter-spacing: .08ch
    }
    
    #disciple .circle{
        width: min(93vw,29em);
        height: min(93vw,29em);
        margin-top: -57vw;
        margin-inline:auto;
    }
    
    #disciple .stat{transform: translateX(2vw)translateY(7vw)}
    #pray{border-top: 2px solid #00a651}
    #pray header{justify-content: center}
    
    #pack header{
        position: relative;
        z-index: 3
    }
    
    #pack h2{
        color: #fff;
        letter-spacing: .08ch
    }
    
    #pack .circle{
        width: min(70vw,29em);
        height: min(70vw,29em);
        margin-top: -60vw;
        margin-right: .618em;
        margin-left: auto;
    }
    
    #pack .stat{scale:.85}
    
    #pack .stat-container{
        width: min(70vw,29em);
        height: min(70vw,29em);
    }
    
    #pack .stat{transform:scale(.9)translateY(6vw)}
    
    #pack .stat-title{
        font-size: 5vw;
        line-height: 1
    }
}

.green{color: #00a651}
#answered-prayer h4{text-shadow:.05em .05em #fff,.146em .146em rgba(0,0,0,.13)}

#answered-prayer{
    border-block: 2px solid #00a651;
    background-color: #f5f5f5;
    margin-bottom: 4.236em
}

#answered-prayer h3{margin: 2.618em max(1.618rem,3vw) .618em}

.scroll-x{
    display: flex;
    align-items: flex-start;
    gap:5%;
    margin-inline:unset;
    margin-bottom: 2.618em;
    padding:1ch 5%;
    overflow-x: auto}

/*Scroll Snap*/
.scroll-x.scroll-snap{
    padding-top: 1em;
    padding-bottom: 1em;
    align-items: flex-start}

.scroll-x.scroll-snap>*{
    flex: 0 0 95%;
    border: 3px solid #00a651;
    border-radius: 1em;
    padding: 1em;
    background-color: #fff
}

@media(prefers-reduced-motion:no-preference){
    .scroll-snap{scroll-snap-type: x mandatory}
    .scroll-snap>*{scroll-snap-align: center}
}

@media(min-aspect-ratio:1.001/1){
    #pray .copy-container blockquote:first-of-type{text-align: center}
    .copy-container{position: static}
    #intro{margin-bottom: 4.236em}
    
    #intro header{
        display: block;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 35vw;
        width: auto;
        height: calc(100vh - var(--nav-3));
        padding: 0;
        margin:0 0 50vh auto;
        margin-bottom: 0
    }
    
    #intro .copy-container{overflow: unset}
    #intro .copy-container>p:first-of-type{margin-top: 0}
    #intro header blockquote{text-align: center}
    figure+blockquote{margin-top: 1.618em!important}
    
    .scroll-x{
        justify-content: center;
        gap:1em;
        margin-inline:unset!important;
        margin-bottom: 2.618em;
        padding:1ch max(1.618rem,3vw);
    }
    
    .scroll-x.scroll-snap>*{flex: 0 0 calc((100% - 2em)/3)}
    #answered-prayer p{font-size: .75em}
    
    #pray{
        border-top: 2px solid #00a651;
        padding-top: 4.236em
    }
    
    #pray .section-wrapper .video-container{display: block}
    #pray .copy-container .video-container{display: none}
    
    #pray .video-container{
        width: calc(50vw - max(1.618rem,3vw));
        position: sticky;
        top: calc((100vh - (45vw * .5625))/2);
        border-radius: 0 1ch 1ch 0;
        overflow: hidden;
    }
    
    #pray .copy-container{margin-top: calc(((45vw * .5625))*-.98);}
    #pray h2{text-align: center}
}

.copy-container>figure :is(img,iframe){border-radius: 1em}
.copy-container>figure:not(.video-container){aspect-ratio:1.618/1;}
figure.photo a:not(:first-of-type){display: none}

figure.photo a{
    position: relative;
    aspect-ratio:1.618/1
}

figure.photo a span{
    position: absolute;
    top: -.618em;
    right: -.618em;
    display: block;
    width: 1.618em;
    height: 1.618em;
    background-color: #00a651;
    font-family: roboto,system-ui;
    line-height: 1.45;
    font-weight: 400;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border:2px solid #000;
    border-radius: 50%
}

.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
    transform: scale(1.4)
}

.pswp__button--arrow--left:before{
    transform-origin: left;
}

.pswp__button--arrow--right:before {
    transform-origin: right;
}

.pswp__caption{
    display: none
}