main,main>*{position: relative}

main{
    --display-ch:.6546;
}

.copy-container{
    position: relative;
    z-index: 3;
    overflow: hidden;}

main>footer{padding-inline: max(1.618rem,3vw)}

section header,
#intro>footer,
.copy-container>*:not(div){
    margin-inline: max(1.618rem,3vw);
}

.grid{
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(32ch, 1fr));
    gap:1ch;}

main>footer{
    margin-top: 1.618em;
    padding-block:1em;}

footer blockquote{text-align: center}

.circle{
    position: relative;
    width: 100%;
    height: min(100vw,100vh);
}

@media(min-aspect-ratio:1.001/1){
    section:not(#intro,#pray) .copy-container>*:not(div){margin-inline:0}
    
    .section-wrapper{position: relative;}
    
    .circle{
        width: min(38vw,32rem);
        height: min(38vw,32rem);
        position: sticky;
        top: 0;
        top: calc((100vh - min(38vw,32rem))/2);
        z-index: 99;
        margin-bottom: calc((100vh - min(38vw,32rem))/2);
        border: .382rem solid #000!important;
    }
    
    #intro .circle{
        margin-left: calc((50% - min(38vw,32rem))/2);
        margin-right: auto;
        margin-bottom: 1.618em
    }
    
    section:not(#intro,#pray) .circle{
        margin-right: calc((50% - min(38vw,32rem))/2);
        margin-left: auto;}
    
    .copy-container{width: 50%}
    section:not(#intro,#pray) .copy-container{margin-top: -38vw}
    section:not(#intro,#pray) .copy-container{padding-inline:max(1.618rem,3vw) 0}
    
    :is(#intro,#pray) header,
    :is(#intro,#pray) .copy-container{
        margin-right: 0;
        margin-left: auto;}

    :is(#intro,#pray) .copy-container{
        padding-inline:0 max(1.618rem,3vw);
        padding-inline:0;
    }
    
    #intro .section-wrapper{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    #intro .copy-container{
        align-self: flex-end;
        margin: 0;
        margin-top: calc(-50vw - var(--nav-3));
        margin-top: calc(-100vw - ((100vw - 100vh)/-2));
        width: 100%;
    }
    
    #pray .copy-container>*:not(div){margin-inline:0 max(1.618rem,3vw)}
    :is(#share,#disciple,#pray,#pack) .copy-container header{display: block}
    #disciple .copy-container header{width: 50vw}
    :is(#share,#disciple,#pray,#pack) .section-wrapper>header{display: none}
    
    h1, :is(#share,#disciple,#pray,#pack) h2{
        font-size: var(--h1);
        text-align: left;
        word-break: keep-all;
        text-shadow:3px 3px #fff,8px 8px #ddd;
    }
    
    :is(#share,#disciple,#pack) .circle{margin-top: -30vh}
    :is(#share,#disciple,#pack) .copy-container{overflow: unset}
    
    #pray .copy-container{overflow: unset}  
    :is(#share,#disciple,#pack) .copy-container{
        margin-top: calc(-100vw - min(38vw,32rem) - ((100vh - min(38vw,32rem))/2) + 30vh)!important
    }
    
    .dummy{
        width: 62vw;
        height: 100vw;
        position: relative;
        z-index: -1;
        opacity: 0;
    }
    
    #intro .dummy{
        margin-top: calc((100vw - 100vh)/-2);
        z-index: 9999;
        clip-path: circle(50vw at 12vw 50%);
        float: left;
        shape-outside: circle(50vw at calc(12vw + min(1.618em,3vw)) 50vh);
    }
    
    @supports (hanging-punctuation: first) and (-webkit-appearance: none) {
        #intro .dummy{
            margin-top: 0;
        }
    }
    
    :is(#share,#disciple,#pack) .dummy{
        margin:0 min(1.618em,3vw) 0 0!important;
        float: right;
        clip-path: circle(50vw at 50vw 50%);
        shape-outside: circle(50vw at 50vw 50%);
    }
    
    :is(#share,#disciple,#pack) .copy-container{
        width: 100%;
    }
    
    :is(#intro,#share,#disciple,#pack) .copy-container>:is(p:not(blockquote p),blockquote,figure,hr){
        width: 50%
    }
    
    :is(#disciple,#pack) .video-container{
        width: calc(35% - min(1.618em,3vw))!important;
        margin-top: 0
    }
    
    @media(min-width:99rem){
        .adjust-for-float{
            width: calc(50% - min(4.236em,5vw))!important;
            width:50%!important
        }
        
        .adjust-for-float img{display: inline}
    }
    
    @media(min-width:136rem){
        #share .adjust-for-float{
            width: calc(41% - min(4.236em,5vw))!important;
/*            width:50%!important*/
        }
        
        #pack .adjust-for-float{
            width: calc(48% - min(4.236em,5vw))!important;
/*            width:50%!important*/
        }
    }
    
    #intro .copy-container>:is(p:not(blockquote p),blockquote){
        width: 50%;
        margin-left: auto
    }
    
    #intro .copy-container>figure{
        margin-bottom: 2.61em;
        margin-left: auto;
    }
    
    :is(#intro,#share,#disciple,#pack) p:not(blockquote p){text-align: justify}
    :is(#share,#disciple,#pack) .copy-container header{padding-top: min(12vw,24vh)}
    
    @media(max-width:99rem){#disciple h2{font-size:calc(var(--h1)*.8)}}
    @media(max-width:86rem){#disciple h2{font-size:calc(var(--h1)*.85)}}
    
    .circle-container{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding-top: calc(100vw - ((100vw - 100vh)/4) - min(38vw,32rem))
    }
    
    #intro header{
        width: 38.2vw;
        margin-inline:auto 0;
    }
    
    #intro>footer{
        margin-right: max(1em,((100% - 100ch) / 2));
        margin-left: max(1em,((100% - 100ch) / 2))
    }
}

main>footer{
    border-top: 1px solid #ccc;
    background-color: #f5f5f5;
    padding-top: 1.618em
}