/*BASIC LAYOUT*/
main{position: relative}
main>header~*{padding: 2.618em 0 4.236em}
main>*>*{margin:0 max(1em,((100% - 100ch) / 2))}
main>*>*>*:not(a,aside,button,div,h1,.h1,h2,.h2,h3,.h3,header,hgroup,hgroup p,small){width: min(100%, var(--ch-unit)*62)}
.space>*+*{margin-top: 1.618em}

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

main>header.response~:nth-child(odd),main>header.banner~:nth-child(even){
    background-color: rgba(0,0,0,.02);
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08)}

/*BASIC TYPOGRAPHY*/
:root{
    --base-unit:1em;
    /*BASED ON THE W/H RATIO OF "0" IN ROBOTO*/
    --ch-unit:calc(var(--base-unit)*.56125);
    --h5:calc(var(--base-unit)*1.05);
    --h4:calc(var(--h5)*1.08);
    --h3:calc(var(--h4)*1.13);
    --h2:calc(var(--h3)*1.21);
    --h1:calc(var(--h2)*1.34);
    --h0:calc(var(--h2)*1.55);
    --small:calc(var(--base-unit)*.75)}

@supports(font-size:clamp(1rem, 0.38vw + .93rem, 1.382rem)){:root{--base-unit:clamp(1rem, 0.48vw + 0.9rem, 1.63rem)}}

main{
    font-size: var(--base-unit, 1em);
    line-height: 1.618;
    hanging-punctuation: first force-end last;
    accent-color:#06f}

.h0,h1,.h1,h2,.h2,hgroup p strong{font-weight: 900}
.h0{font-size: var(--h0,3.067em)}

h1,.h1{
    font-size: var(--h1,1.978em);
    line-height: 1.146}

h2,.h2{
    font-size: var(--h2,1.476em);
    line-height: 1.236}

blockquote,figcaption,h3,.h3,h4,.h4,h5,.h5,h6,.h6,hgroup p,small,.small{line-height: 1.382}
h3,.h3,hgroup p{font-size: var(--h3,1.22em)}
h4,.h4,blockquote p{font-size: var(--h4,1.08em)}
h5,.h5{font-size: calc(var(--h5,1.05em))}
h6,.h6{font-size: calc(var(--base-unit))}

blockquote{
    margin: 2.618em 0;
    padding-left:1em;
    border-left:.618em solid rgba(0,0,0,.15)}

blockquote footer{text-align: end}
blockquote small{display: block}
blockquote cite,address{font-style: normal}
figcaption,small,.small,sub,sup{font-size:var(--small,.75em)}
.h0,sub,sup{line-height:1}
q{font-style: italic}

figcaption{
    color: rgba(0,0,0,.6);
    padding: 1ch}

main ul,main ol{padding-left:1em}

main ul[role="list"],main ol[role="list"]{
    list-style:none;
    padding-left:0}

dt{font-weight: bold}

main a{
    color: #06f;
    text-decoration: underline;
    font-weight: 700}

main a,main button{
    cursor: pointer;
    transition:all .5s ease;}

main a[class]{text-decoration: none}

@media(hover:hover){
    main a:hover,main button:hover{filter:brightness(1.2)}
}

/*ELEMENTS*/
/*FORCE GOLDEN RATIO ON IMAGES*/
figure img,.photo-gallery img{
    aspect-ratio:1.618/1;
    object-fit: cover}

/*BRIGHTCOVE VIDEO EMBED*/
.video-container iframe{
    aspect-ratio:16/9;
    border: none}

@supports not (aspect-ratio:16/9){
    .video-container{position: relative}
    .video-container div{padding-top: 56.25%}

    .video-container iframe{
        position: absolute; 
        top: 0px;
        left: 0px; 
        width: 100%; 
        height: 100%}
}