:root{
    --h0:calc(var(--h1)*1.88);
    
    --padding-block:2.618em;
    --padding-inline:1.618em;
    --height:calc(56.25vmin);
    --width:calc((var(--height) * 1.77));
    --video-width:min(var(--width),100vw - (var(--padding-inline)*2));
    --video-height:calc((var(--video-width)*.5625))
}


.banner{
    flex-direction: column;
    align-items: center;
    gap:3vmin;
    padding: 1em}

header.banner,header.banner figure,header.banner figure>img{
    width: 100%;
    height: min(calc(100vh - var(--nav-2)),162vw);
    height: min(calc(100svh - var(--nav-2)),162vw);
}

@media (max-width:1000px) and (orientation: landscape){
    header.banner,header.banner figure,header.banner figure>img{
        height: 100vh;
    }
}

header.banner figure{
    -webkit-mask-image:none;
    mask-image:none
}

h1,.banner>p{
    font-family: 'roboto flex';
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-shadow:0 0 1.618em rgba(0,0,0,.13),.09em .146em .236em rgba(0,0,0,.21),.146em .236em .382em rgba(0,0,0,.21),.236em .382em .618em rgba(0,0,0,.21),.382em .618em 1em rgba(0,0,0,.21)}

h1{
    line-height: .83;
    font-stretch: 30%;
    font-weight: 500;
    margin-bottom: .382em}

header .h3{
    display: block;
    line-height: 1;
}

@media(min-width:100ch) and (min-aspect-ratio:1/1){
    h1{
        line-height: 1;
        margin-bottom: 0}
    
    header .h3{
        display: inline;
        font-size: var(--h1);
    }
    
    .banner p.small{font-size: var(--base-unit)}
}

hgroup p,.banner p{
    line-height: 1;
    font-stretch: 30%;
    font-weight: 300}

.banner p{
    position: relative;
    text-align: center
}
        
#player{
    border: none!important;
    width:var(--video-width);
    height: var(--video-height);
    margin: 0;
    position: relative;
    z-index: 8;
/*    box-shadow:0 0 2.618em rgba(0,0,0,.13),.09em .146em .236em rgba(0,0,0,.13),.146em .236em .382em rgba(0,0,0,.13),.236em .382em .618em rgba(0,0,0,.13),.382em .618em 1em rgba(0,0,0,.13),.618em 1em 1.618em rgba(0,0,0,.13)*/
}

main>header.response~:nth-child(odd),main>header.banner~:nth-child(even){background-color: #f8f8f8;}

h1{text-transform: uppercase}
.action-container{min-height: 4.236em}
#not-at-top{
    height:0;
    max-width: 38ch;
    margin-inline:0;
    border: none;
    padding: 0}

/*SIGNUP*/
.signup{
    width: 32.66ch;
    margin-right:auto;
    margin-left:auto
}

.signup h3{text-align: center}

#stats{
    width: min(100%, 45ch);
    border-color: rgba(0,91,187,.5);
    margin: 2.618em auto;
}

#stats li{margin-top:0}

#stats header{
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(0,91,187,.5)}

#stats h3,
#stats .h1{
    display: block;
    font-family: 'roboto flex';
    line-height: .85;
    font-weight: 700;
    font-stretch: 50%;
    text-transform: uppercase}

#stats .h1{color: #005BBB}

#stats .h1 span{
/*
    writing-mode: vertical-rl;
    font-size: .185em;
    font-weight: 800;
*/
/*    font-size: .618em*/
}

#stats h3{
    line-height: 1;
    font-weight: 800;
    font-stretch: 25%}

#stats sup{
    position: relative;
    top: calc(var(--h0)*-.08);
    font-size: 50%;
    font-weight: 800;
    font-stretch: 100%}

#stats .small{
    font-size: .75em;
    line-height: 1.236}

#stats ul{
    margin-top: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    gap:1em 1.618em}

/*
@media(min-width:100ch) and (min-aspect-ratio:1/1){
    :root{--h0:calc(var(--h1)*1.89)}
    
    #stats{
        width: fit-content;
        float: right;
        position: relative;
        z-index: 3;
        margin: 0 -2.618em 1em 1em}
    
    #stats header,
    #stats ul{width: fit-content;}    
    #stats li{margin-top:0}
    #stats h3{font-size: 1em}
    
    #stats .h0 span{
        writing-mode: initial;
        font-size: var(--h0);
        font-weight: 700}
}

@media (min-width:120rem){
    #stats{
        box-shadow:0 0 1ch rgba(0,0,0,.05),0 .146ch .236ch rgba(0,0,0,.05),.146ch .236ch .382ch rgba(0,0,0,.05),.236ch .382ch .618ch rgba(0,0,0,.05);
        margin: 0 -4.236em 1em 1em}
}
*/

/*PHOTO WIPE*/
@media(min-width:100ch) and (min-aspect-ratio:1/1){
    #overview{
        padding-bottom: 0;
        border-bottom: none}
    
/*    #overview section:first-of-type p:first-of-type{}*/
    
    #overview>header{
        padding-bottom: 1.618em;
        margin-left: 3vw;
        margin-left: max(3vw,((50% - 62ch)/2))}
    
    #overview>header h2{width: min(100%,(var(--ch)*100))}
    
    #overview>div{
        border-top: 1px solid #f8f8f8;
        margin-top: 0;
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 4.236em;
        position: relative}
    
    #overview>div section{
        margin-right: 0;
        margin-left: 0;
        width: 50%}
    
    #overview section>*:not(#img-wipe,.signup,#short-story,#stats,.button){
        margin-right: max(3vw,((100% - 62ch)/2));
        margin-left: max(3vw,((100% - 62ch)/2));
    }
    
/*
    #overview section>*:not(#img-wipe,.signup,blockquote,.button){
        text-align: justify
    }
*/
    
    #overview .button{
        margin-right: auto;
        margin-left: auto
    }
    
    #img-wipe{
        display: block;
        width: 50%;
        height: 100%;
        clip-path: none;
        position: absolute;
        top: 0;
        right: 0;
        
    }

    #img-wipe::after{
        width: 100%;
        height: 100%;
        background:linear-gradient(to right,rgba(0,0,0,.13)0%,rgba(0,0,0,.08)2%,rgba(0,0,0,.05)3%,rgba(0,0,0,.03)5%,rgba(0,0,0,.02)8%,rgba(0,0,0,0)13%);
    }

    #img-wipe div{
        width: 100%;
        height: calc(100vh - 6.854em);
        height: 100%;
        position: relative;
        top: 0}

    #img-wipe figure{
        margin-bottom: 0!important;
        position: relative;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        width: 100%;
        height: 33.33%}

    #img-wipe img{
        position: fixed;
        top: 2.618em;
        top: 0;
        right: 0;
        width: 50%;
        height:calc(100vh - 2.618em);
        height: 100vh;
/*
        box-shadow:
            inset .382em 0 .618em rgba(0,0,0,.9),
            inset .618em 0 2em rgba(0,0,0,.9),
            inset 1em 0 1.618em rgba(0,0,0,.9),
            inset 1.618em 0 2.618em rgba(0,0,0,.9);
*/
    }
    
/*
    #img-wipe figure:first-of-type img{
        position: sticky;
        width: 100%;
        height: calc(100vh - 2.618em);
        margin-left: auto
    }
*/
    
    #img-wipe figcaption{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        color: #fff;
        width: 100%;
        padding:2.618em 1em 1em;
        background:linear-gradient(to top,rgba(0,0,0,.8)0%,rgba(0,0,0,0)100%)
    }
}

/*
@media (min-width:120rem){
    #overview>header{margin-left: max(3vw,((38% - 62ch)/2));}
    #overview>div section{width: 38%}
    #img-wipe{width: 62%}
    #img-wipe img{width: 62%}
}
*/

/*ASIDE*/
#short-story{
    padding: 1em;
    margin: 2.618em auto 4.236em;
    width: min(100%, var(--ch-unit)*62);
}

#short-story img{border-radius: .236em .236em 0 0;}

#overview blockquote:last-of-type{margin:2.618em 0 0}

@media(min-width:100ch) and (min-aspect-ratio:1/1){
    #short-story{width: min((100% - 6vw), var(--ch-unit)*62);}
}

/*PHOTOS*/
#photos{
    border: none;
    padding: 0}

.photo-gallery{
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(33.33%, 1fr));
    gap:0}

@media(max-width:100ch){
    .photo-gallery{grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));}
    .photo-gallery a[hidden]{display: block}
}

/*TABS*/
#add-con{background: #f8f8f8}

#add-con header{
    flex-direction: column;
    gap:1em;
    position: sticky;
    top: calc(((var(--h2) * 1.236)*-1) + 2rem);
    padding: 1em 0;
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.618em
}

.selectSection {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1ch;
    width: 100%;
    height: 2.618em;
    margin: 0 auto}

.selectSection button {margin: 0}
        
.active {
    background: #06f!important;
    color: #fff!important}
        
.content:not(:first-child) {display: none}
        
.contentSection{
    margin:0 max(1em, ((100% - 100ch)/2));
    scroll-margin:11em
}

@media(min-width:100ch) and (min-aspect-ratio:1/1){
    
    #add-con{padding-bottom: 6.854em}
    
    #containers [aria-label="Articles"]{
        width: min(100%, var(--ch-unit)*62);
    }
    
    #containers [aria-label="Podcasts"] ul{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        gap:1ch
    }
    
    #containers [aria-label="Articles"] li+li{margin-top: 1em}
}