/******************************
*** GLOBAL ********************
******************************/

html {
    font-size: 16px;
    color: #2c2925;
    background: #fffbed;
    width: 100%;
/*    scroll-behavior: smooth;*/
}
h1 {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-stretch: 125%;
    font-size: 4rem;
    line-height: 100%;
    letter-spacing: -0.1rem;
}
h2 {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-stretch: 125%;
    font-size: 3rem;
    line-height: 110%;
    letter-spacing: -0.0375rem;
}
h3 {
    font-family: "Archivo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-stretch: 125%;
    font-size: 1.5rem;
    line-height: 110%;
    letter-spacing: -0.01875rem;
}
p {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 150%;
    padding-top: 1.25rem;
}
p.standfirst {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 150%;
}
p.caption {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
    padding-bottom: 0.75rem;
}
span.italic {
    font-style: italic;
}
strong {
    font-weight: 700;
}
p.no-pad {
    padding-top: 0;
}
section {
    margin: 0 auto;
    padding: 6.75rem 1.5rem 0 1.5rem;
}
section.below-hero {
    padding: 1.5rem 1.5rem 0 1.5rem;
}

/***** 404 *****/

section.not-found {
    padding: 12rem 1.5rem 0 1.5rem;
}
.not-found h1 {
    color: #e70526;
    font-size: 6rem;
}

/***** Grid *****/

.grid-container-10 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . col col col col col col col col col col . . . .';
}
.grid-container-8 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . col col col col col col col col . . . . . .';
}
.grid {
    grid-area: col;
}

/***** Header *****/

header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    margin: 0 auto;
    padding: 0 1.5rem;
    top: 0;
    background: #fffbed;
    display: inline-block;
    line-height: 0;
}
.header-container {
    padding: 0.75rem 0.25rem 0.75rem 0.75rem;
    border-bottom: 1px solid #2c2925;
    display: inline-block;
    width: 100%;
}
.header-logo {
    float: left;
    padding: 1.125rem 0;
}
.header-links {
    display: inline-block;
    position: relative;
    float: right;
}
.header-apple {
    padding: 0.5rem;
    margin-left: 0.5rem;
    border-radius: 0.75rem;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.header-apple:hover {
    background: #f7cefa;
}
.apple-logo {
    width: 2.75rem;
    height: 2.75rem;
}
.header-spotify {
    padding: 0.5rem;
    margin-left: 0.25rem;
    border-radius: 0.75rem;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.header-spotify:hover {
    background: #b3ffda;
}
.spotify-logo {
    width: 2.75rem;
    height: 2.75rem;
}

/***** Footer *****/

footer {
    background: #2c2925;
    width: 100%;
    padding: 4.5rem 1.5rem 0 1.5rem;
    margin-top: 6.75rem;
}
.grid-footer {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . flogo flogo flogo . . . fcred fcred fcred fcred fcred fcred . .';
}
.footer-credit {
    grid-area: fcred;
    color: #fffbed;
}
.footer-logo {
    grid-area: flogo;
    display: flex;
    align-items: flex-end;
}
.qmul-logo {
    margin-top: 1.5rem;
}
.copyright {
    padding: 0.75rem 0 1.25rem 0;
    margin-top: 4.5rem;
    background: #121212;
    color: #fffbed;
    border-radius: 0.75rem 0.75rem 0 0;
}

/***** Social *****/

.social {
    border-top: 1px solid #2c2925;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . soc soc soc soc soc soc soc soc soc soc soc soc . .';
}
.grid-social {
    grid-area: soc;
}
.grid-social h2 {
    display: block;
    margin: 6.75rem 0 2.25rem 0;
}
.social-links {
    display: inline-block;
}
.social-links p {
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 0.5rem;
}
.button-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.instagram .button-icon {
    background: url('../icons/instagram.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.twitter .button-icon {
    background: url('../icons/twitter.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.instagram,
.twitter {
    padding: 0.5rem;
    border: 0.125rem solid #fbe475;
    background-color: #fbe475;
    transition: all 0.3s ease-in-out;
    border-radius: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-block;
}
.instagram {
    margin: 0 0.5rem 0 0;
}
.instagram:hover, 
.twitter:hover {
    background: #fffbed;
    border: 0.125rem solid #2c2925;
}

/***** Links *****/

.links a,
a.ext-link {
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 150%;
    color: #2c2925;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.25rem;
    transition: all 0.3s ease-in-out;
    vertical-align: text-bottom;
    display: inline-block;
    background: none;
}
.links a:hover,
a.ext-link:hover {
    color: #121212;
    text-decoration-style: solid;
    text-underline-offset: 0.3125rem;
    text-decoration-thickness: 0.125rem;
}

a.ext-link {
    font-weight: 400;
    vertical-align: bottom;
}

/******************************
*** HOME PAGE *****************
******************************/

/***** Hero *****/

.home-hero {
    margin: 0 auto;
    padding: 8.5rem 1.5rem 0 1.5rem;
}
.hero-container {
    display: grid;
    grid-auto-columns: 5fr;
    grid-auto-rows: 1fr;
    gap: 0;
    grid-template-areas:
    "the the shape-1 shape-2 shape-3"
    "shape-4 next next next shape-5"
    "shape-6 shape-7 shape-8 act act"
    "bsap bsap bsap . .";
}
.shape{
    transform-origin: center;
    animation: shaperotate 4000ms infinite;
    animation-timing-function: cubic-bezier(0.75,0,0,1);
}
.shape-container {
    width: 100%;
}
.s1{
    animation-delay: 1000ms;
}
.s2{
    animation-delay: 2000ms;
}
.s3{
    animation-delay: 1333ms;
}
.s4{
    animation-delay: 333ms;
}
.s5{
    animation-delay: 1667ms;
}
.s6{
    animation-delay: 667ms;
}
.s7{
    animation-delay: 2333ms;
}
.s8{
    animation-delay: 0;
}
@keyframes shaperotate {
    0% {transform: rotate(0deg);}
    33% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

/***** About *****/

.box {
    padding: 6.75rem 0;
    border-radius: 0.75rem;
}
.grid-container-about {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . . . . . . . . . . abt abt abt abt .';
    position: absolute;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.grid-about {
    grid-area: abt;
}

/***** Cards *****/

.cards-container {
    padding-top: 4.5rem;
    display: grid;
    grid-auto-columns: 4fr;
    grid-auto-rows: 1fr;
    gap: 1rem;
    grid-template-areas: 
    "ep-1 ep-2 ep-3 ep-4"
    "ep-5 ep-6 ep-7 ep-8";
}
h3.placeholder {
    text-align: center;
    color: #e70526;
}
.card-placeholder {
    background: #ffd1be;
    border-radius: 0.75rem;
    padding: 4.5rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ep-1 {
    background: #fbe475;
    transition: all 0.3s ease-in-out;
}
.ep-2 {
    background: #bbfffc;
    transition: all 0.3s ease-in-out;
}
.ep-3 {
    background: #ffcbd7;
    transition: all 0.3s ease-in-out;
}
.ep-4 {
    background: #f7cefa;
    transition: all 0.3s ease-in-out;
}
.ep-5 {
    background: #b3e6ff;
    transition: all 0.3s ease-in-out;
}
.ep-6 {
    background: #ffd1be;
    transition: all 0.3s ease-in-out;
}
.ep-7 {
    background: #c9bfff;
    transition: all 0.3s ease-in-out;
}
.ep-8 {
    background: #b3ffda;
    transition: all 0.3s ease-in-out;
}
.card {
    border-radius: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #2c2925;
    transition: all 0.3s ease-in-out;
    border: 0.25rem solid transparent;
}
.card:hover h3 {
    text-decoration: underline;
}
.card img {
    border-radius: 0.5rem;
}
.ep-1:hover {
    border: 0.25rem solid #ff7c01;
}
.ep-2:hover {
    border: 0.25rem solid #02aa9a;
}
.ep-3:hover {
    border: 0.25rem solid #e70526;
}
.ep-4:hover {
    border: 0.25rem solid #e05bf9;
}
.ep-5:hover {
    border: 0.25rem solid #1e9bff;
}
.ep-6:hover {
    border: 0.25rem solid #f72605;
}
.ep-7:hover {
    border: 0.25rem solid #2f2392;
}
.ep-8:hover {
    border: 0.25rem solid #018f2e;
}
.card-text {
    padding: 0 0.75rem 1rem 0.75rem;
    transition: all 0.3s ease-in-out;
    border-radius: 0 0 0.75rem 0.75rem;
}

/***** Credits *****/

.grid-credits {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . col1 col1 col1 col1 col2 col2 col2 col2 col3 col3 col3 col3 . .';
    margin-top: 1.5rem;
}
.cred-col1 {
    grid-area: col1;
}
.cred-col2 {
    grid-area: col2;

}
.cred-col3 {
    grid-area: col3;
}
.line2 {
    padding-top: 1.25rem;
}

/***** Event *****/

.grid-event {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 . eventcol2 eventcol2 eventcol2 eventcol2 .';
    margin-top: 1.5rem;
}
.event-col1 {
    grid-area: eventcol1;
}
.event-col2 {
    grid-area: eventcol2;
}
.event-box {
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 2px solid #E70526;
}
.event-col2 p{
    margin-left: 2rem; 
    text-indent: -2rem;
    padding-bottom: 1.25rem;
}
.event-col2 p:before{
    content: "";
    background-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}
.location:before {
    background: url("../icons/location.svg");
}
.date:before {
    background: url("../icons/calendar.svg");
}
.time:before {
    background: url("../icons/schedule.svg");
}
.access:before {
    background: url("../icons/accessibility.svg");
}
.price:before {
    background: url("../icons/theaters.svg");
}
button.event-cta {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    background: #E70526;
    border-radius: 0.75rem;
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 65%;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    width: 100%;
}
button.event-cta:hover {
    background: #121212;  
}
button.event-cta label {
    width: 100%;
}
.cta-wrapper {
    display: block;
    margin-top: 1.25rem;
}

/******************************
*** EPISODE PAGES *************
******************************/

.ep-hero {
    padding: 0 1.5rem;
}
.grid-hero {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. text text text text text text text text . . img img img img .';
    padding: 8.5rem 0 6.75rem 0;
    border-radius: 0 0 0.75rem 0.75rem;
}
.hero-text {
    grid-area: text;
}
.mimg {
    display: none;
}
.dimg {
    grid-area: img;
}
.hero-links {
    display: flex;
    align-items: center;
    margin-top: 2.25rem;
}
.hero-links p {
    display: inline-block;
    vertical-align: text-bottom;
}
.links {
    margin-top: 1rem;
}
.links p {
    display: inline-block;
    vertical-align: text-bottom;
}
.hero-links .buttons {
    display: inline-block;
    vertical-align: text-bottom;
}
.hero-links .links {
    display: inline-block;
    vertical-align: text-bottom;
}
.ep1-bg {
    background: #fbe475;
}
.ep2-bg {
    background: #bbfffc;
}
.ep3-bg {
    background: #ffcbd7;
}
.ep4-bg {
    background: #f7cefa;
}
.ep5-bg {
    background: #b3e6ff;
}
.ep6-bg {
    background: #ffd1be;
}
.ep7-bg {
    background: #c9bfff;
}
.ep8-bg {
    background: #b3ffda;
}
button.apple,
button.spotify {
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    background: #2c2925;
    border-radius: 0.75rem;
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 65%;
    margin-left: 0.5rem;
    border: 2px #2c2925 solid;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
button.apple:hover,
button.spotify:hover {
    background: #fffbed;
    color: #2c2925;
}
button label {
    float: left;
    display: inline-block;
    padding: 0.125rem 0;
    line-height: 1;
    cursor: pointer;
}
.button-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    
}
button.apple .button-icon {
    margin-left: 1rem;
    background: url('../icons/icon-apple.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
button.spotify .button-icon {
    margin-left: 1rem;
    background: url('../icons/icon-spotify.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
button.spotify {
    margin-right: 0.5rem;
}

/***** More eps *****/

.grid-more {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(16, 1fr);
    grid-template-areas: '. . more more more more more more more more . nav nav nav . .';
}
.grid-more h2 {
    grid-area: more;
}
.more-nav {
    grid-area: nav;
    display: inline-block;
}
.button-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.prev .button-icon {
    background: url('../icons/prev.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.next .button-icon {
    background: url('../icons/next.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.prev,
.next {
    padding: 0.5rem;
    border: 0.125rem solid transparent;
    transition: all 0.3s ease-in-out;
    border-radius: 1.5rem;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-block;
    float: right;
    margin-left: 0.5rem;
}
.prev:hover, 
.next:hover {
    background: #fffbed;
    border: 0.125rem solid #2c2925;
}
.inactive {
    opacity: 0.2;
}
.inactive:hover {
    background: initial;
    border: 0.125rem solid transparent;
}

/******************************
*** MEDIA QUERIES *************
******************************/

@media only screen and (max-width: 1200px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.75rem;
    }
    h3 {
        font-size: 1.25rem;
    }
    p {
        font-size: 1.125rem;
    }
    p.standfirst {
        font-size: 1.25rem;
    }
    .links a,
    .share a,
    .hero-text a,
    a.ext-link {
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 960px) {
    .grid-container-10 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(16, 1fr);
        grid-template-areas: '. col col col col col col col col col col col col col col .';
    }
    .grid-container-8 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(16, 1fr);
        grid-template-areas: '. col col col col col col col col col col col col col col .';
    }
    .cards-container {
        padding-top: 4.5rem;
        display: grid;
        grid-auto-columns: 4fr;
        grid-auto-rows: 1fr;
        gap: 1rem;
        grid-template-areas: 
        "ep-1 ep-2"
        "ep-3 ep-4"
        "ep-5 ep-6"
        "ep-7 ep-8";
    }
    .grid-credits {
        grid-template-areas: '. col1 col1 col1 col1 col1 col2 col2 col2 col2 col2 col3 col3 col3 col3 col3';
    }
    .cred-col1 {
        grid-area: col1;
    }
    .cred-col2 {
        grid-area: col2;

    }
    .cred-col3 {
        grid-area: col3;
    }
    .line2 {
        padding-top: 1.25rem;
    }
    .grid-event {
        grid-template-areas: '. eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 eventcol1 . eventcol2 eventcol2 eventcol2 eventcol2 eventcol2 eventcol2';
    }
    .grid-footer {
        grid-template-areas: '. flogo flogo flogo flogo . . fcred fcred fcred fcred fcred fcred fcred fcred .';
    }
    .grid-hero {
        grid-template-areas: '. text text text text text text text text text text img img img img .';
        padding: 8.5rem 0 4.5rem 0;
    }
    .grid-more {
        grid-template-areas: '. more more more more more more more more . nav nav nav nav nav .';
    }
    .social {
        grid-template-areas: '. soc soc soc soc soc soc soc soc soc soc soc soc soc soc .';
    }
    section.below-hero {
        padding: 1.25rem 1.25rem 1.25rem 1.25rem;
    }
    .box {
        padding: 4.5rem 0;
    }
}

@media only screen and (max-width: 768px) {
    .grid-container-10 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(16, 1fr);
        grid-template-areas: 'col col col col col col col col col col col col col col col col';
    }
    .grid-container-8 {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(16, 1fr);
        grid-template-areas: 'col col col col col col col col col col col col col col col col';
    }
    .social {
        grid-template-areas: 'soc soc soc soc soc soc soc soc soc soc soc soc soc soc soc soc';
    }
    .grid-social h2 {
        margin: 4.5rem 0 2.25rem 0;
    }
    header {
        padding: 0;
    }
    .header-container {
        padding: 0.75rem 1.125rem;
        border-bottom: 1px solid #2c2925;
        display: inline-block;
        width: 100%;
    }
    section{
        padding: 4.5rem 1.25rem 0 1.25rem;
    }
    section.about,
    section.more-eps {
        padding: 4.5rem 0 0 0;
    }
    .ep-hero {
        padding: 0;
    }
    .grid-hero {
        display: block;
        padding: 7.5rem 1.5rem 4.5rem 1.5rem;
    }
    .grid-hero img {
        width: 66.67%;
    }
    .hero-links {
        display: block;
    }
    .hero-links p {
        display: block;
    }
    .hero-links span p, 
    .hero-links span a {
        display: inline-block;
    }
    .buttons .apple,
    .buttons .spotify {
        margin-top: 1rem;
    }
    button.apple {
        margin-left: 0;
    }
    .mimg {
        display: block;
    }
    .dimg {
        display: none;
    }
    .grid-more {
        grid-template-areas: 'more more more more more more more more more . nav nav nav nav nav nav';
    }
    .grid-credits {
        display: block;
        margin-top: 1.5rem;
    }
    .cred-col2,
    .cred-col3 {
        padding-top: 1.25rem;
    }
    .grid-event {
        display: block;
        margin-top: 1.5rem;
    }
    .event-box {
        margin-top: 1.5rem;
    }
    .cta-wrapper {
        margin-top: 0;
    }
    footer {
        padding: 4.5rem 0 0 0;
        margin-top: 4.5rem;
    }
    .grid-footer {
        grid-template-areas: 'flogo flogo flogo flogo flogo flogo . fcred fcred fcred fcred fcred fcred fcred fcred .';
        padding: 0 1.25rem;
    }
    .copyright {
        padding: 0.75rem 1.25rem 1.25rem 1.25rem;
    }
    .box {
        padding: 4.5rem 1.25rem;
    }
    section.below-hero {
        padding: 1.25rem;
    }
}
@media only screen and (max-width: 600px) {
    .home-hero {
        padding: 7.5rem 1.25rem 0 1.25rem;
    }
    .hero-container {
        grid-auto-columns: 3fr;
        grid-template-areas: 
        "the the shape-1" 
        "shape-2 shape-3 shape-4"
        "next next next"
        "shape-5 shape-6 shape-7"
        "shape-8 act act"
        "bsap bsap bsap";
    }
    .header-logo {
        padding: 0;
    }
    .header-container {
        padding: 1rem 1.125rem;
    }
    .cards-container {
        padding-top: 4.5rem;
        display: grid;
        grid-auto-columns: 4fr;
        grid-auto-rows: 1fr;
        gap: 1rem;
        grid-template-areas: 
        "ep-1"
        "ep-2"
        "ep-3"
        "ep-4"
        "ep-5"
        "ep-6"
        "ep-7"
        "ep-8";
    }
    .grid-footer {
        display: block;
    }
    .footer-credit {
        margin-top: 2.25rem;
    }
    .grid-container-about {
        grid-template-areas: '. . . . . . . . . . abt abt abt abt abt abt';
    }
}
@media only screen and (max-width: 360px) {
    .grid-more {
        display: block;
    }
    .more-nav {
        margin-top: 1rem;
        display: inline-block;
    }
}