/* latin */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Cormorant Garamond Bold"),
         local("CormorantGaramond-Bold"),
         url(/assets/fonts/cormorant-garamond.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: "Abel";
    src: local("Abel Regular"),
         local("Abel-Regular"),
         url(/assets/fonts/abel.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0 auto;
}

header {
    position: absolute;
    background: url(../img/thx-logo.png) center / contain no-repeat;
    top: 0rem;
    width: 14rem;
    height: 17rem;
    text-align: center;
    margin-left: calc(50% - 7rem);
}
header>h1 {
    font-family: "EB Garamond";
    font-size: 2rem;
    color: rgba(128,0,128,1);
}

body>main, body>aside {
    width: 100vw;
    max-width: 100%;
    /*! oveflow-x: hidden; */
}

main>article {
    display: flex;
    flex-flow: column nowrap;
    background: url(../img/micorrhyze.png) center / cover no-repeat;
    min-height: 100vh;
    /*! overflow: hidden; */
}

main > article section:not(#timeline).next {
	position: relative;
	background: #c6ffcd;
	font-size: larger;
	padding: 3rem;
}
main > article section:not(#timeline).next::before {
	content: " PROCHAINEMENT ";
	position: absolute;
	top: 1.5rem;
	right: -1.75rem;
    left: auto;
	padding: 0.5rem;
	background: black;
	color: #c6ffcd;
	font-size: 24pt;
	font-weight: bold;
	transform: rotate(30deg);
	border-radius: 0.5rem;
	font-family: "Blackout Midnight", "Arial black";
}

main>article section:not(#timeline) {
    background: rgba(255,255,255,0.5);
    margin-left: auto;
    margin-right: auto;
}

main>article section:first-child {
    border-radius-top-left: 1rem;
    border-radius-top-right: 1rem;
    position: relative;
    margin-top: 17rem;
    border-color: red;
    border-width: 3rem;
}
main>article section:nth-last-child(2) {
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
#call h1, #call h2 { text-align: center }
#call h1:before { content: " » "; font-size: larger }
#call h1:after  { content: " « "; font-size: larger }

#scope {
    font-family: Hack;
    font-weight: bold;
    padding: 3rem;
    background: white url(../img/thx-2021-cross.png) 95% center no-repeat;
    margin: 0;
    flex: auto;
    flex-shrink: 1;
    max-height: 14rem;
    display: flex;
    align-items: center;
}
#scope h2 {
    display: none;
}
#scope ul {
    list-style: square;
    margin: 0;
}

body>aside {
    flex: 1;
    display: flex;
    margin: 2rem;
    text-align: center;
}
body>aside section:first-child {
    flex: 1;
}
body>aside section:last-child {
    flex: 1;
}

blockquote {
    quotes: "“" "”" "‘" "’";
    font-size: 1.67rem;
    font-family: "Cormorant Garamond", "EB Garamaond", "Garamond", serif;
    letter-spacing: 0.25rem;
    line-height: 1.5;
    text-align: justify;
    text-indent: -1rem; /* make the quote appear in the left margin */
    color: #6c6c6c;
    margin: 4rem 8rem;
}
blockquote a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
blockquote::before, blockquote::after {
    font-size: 2rem;
    font-weight: bold;
    line-height: 0;
    color: #800080;
}
blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

main>article>header>h1 {
    margin-top: 15.5rem;
}
main>article>header>h1 button {
    background-color: rgba(0,0,0,0.15);
    padding: 0.5rem;
    border-radius: 0.75rem;
    color: #e45735;
    font-weight: bold;
}

#timeline {
    width: 90vw;
    max-width: 90vw;
    margin: 0 auto;
}
#timeline h2 {
    display: none;
}

body > footer {
    margin-top: 2rem;
}
p.copyleft, footer > nav {
    margin: 0 auto 1rem auto;
    max-width: 42rem;
    text-align: center;
    color: #2b2b2b;
}
p.copyleft {
    max-width: 96rem;
    font-size: smaller;
    font-family: Abel, sans-serif;
}
body > footer:hover p.copyleft span:first-child::before {
    content: 'Copyleft';
    display: block;
    color: black;
    padding-right: 0.45rem;
}
body > footer:hover p.copyleft span:first-child {
    display: inline-block;
    color: transparent;
    line-height: 0;
}
footer > nav > h4 {
    font-family: "EB Garamond", serif;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
footer > nav img {
    border: 0;
    height: 32px;
    vertical-align: middle;
}
footer a {
    background-color: transparent;
    color: #08c;
    text-decoration: none;
}

@media screen and (min-width: 480px) {

    img {
        max-width: 90vw;
    }

    main>article>section:first-of-type {
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
        margin-top: 19rem;
    }
    main>article>section:first-of-type img {
        width: calc(100% + 4rem);
        margin-left: -2rem;
    }
    main>article>section {
        max-width: 64rem;
        padding: 2rem;
        /*! max-width: 100%; */
    }
    main>article>section:last-of-type {
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
    }

    #timeline {
        padding-top: 10rem;
    }

    #timeline ol {
        border-bottom: 5px solid black;
        display: flex;
        flex-flow: row nowrap;
        list-style: none;
        margin: 6rem auto;
        padding: 0;
        max-width: 80vw;
        line-height: 2rem;
    }

    #timeline li {
        border-right: 1px solid black;
        display: flow-root list-item;
        width: -moz-available;
        width: calc(100% / 14);
        word-wrap: nowrap;
        background: url(../img/bg-violet.png) bottom repeat-x;
    }

    #timeline li:first-child {
        border-left: 2px solid black;
        background: transparent;
    }

    #timeline li:nth-child(4),
    #timeline li:nth-child(5),
    #timeline li:nth-child(6),
    #timeline li:nth-child(9),
    #timeline li:nth-child(10),
    #timeline li:nth-child(11),
    #timeline li:nth-child(12) {
        background: rgba(228,87,53,0.5)  url(../img/bg-violet.png) bottom left repeat-x;
    }
    #timeline li:nth-child(7) {
        background: transparent;
    }
    #timeline li:last-child {
        border-right: 2px solid black;
        background: transparent;
    }

    #timeline li>strong {
        display: block;
        transform: rotate(-45deg);
        position: relative;
        bottom: 4rem;
    }

    #timeline li a {
        display: block;
        position: relative;
        color: black;
        font-weight: bold;
        text-decoration: none;
        font-family: Hack;
        font-size: 90%;
        z-index: 101;
    }
    /** DREAM **/
    #timeline li:nth-child(2) a {
        top: 3rem;
        width: 200%;
        text-align: center;
    }
    /** Resistance Networks **/
    #timeline li:nth-child(4) a {
        top: -3rem;
        width: 300%;
        text-align: center;
    }
    #timeline li:nth-child(8) a {
        top: 3rem;
        width: 600%;
        text-align: center;
    }
    #timeline li:nth-child(9) a {
        top: -3rem;
        width: 400%;
        text-align: center;
    }
}


@media screen and (max-width: 480px) {

    body>header {
    }

    main img {
        max-width: calc(100% + 2rem);
	margin-left: -1rem;
    }

    main section {
        padding: 1rem;
    }

    main>article section:first-of-type {
        margin-top: 19rem;
        max-width: 64rem;
    }

    #scope {
        padding-top: 14rem;
        background-position: center 2rem;
        margin-bottom: 7rem;
    }

    #timeline {
        flex: auto;
        padding-top: 10rem;
        height: 100vh;
    }

    #timeline ol {
        display: flex;
        flex-flow: column nowrap;
        list-style: none;
        padding-left: 0;
        height: calc(100vh - 14rem);
    }

    #timeline li ̣{
        background: url(../img/bg-violet.png) top left repeat-y;
        height: calc(100% / 14);
        min-height: calc(100% / 14);
        flex: 1;
        display: block;
    }
    #timeline li:first-child {
        border-top: 2px solid black;
        background: transparent;
    }
    #timeline li:nth-child(4),
    #timeline li:nth-child(5),
    #timeline li:nth-child(6),
    #timeline li:nth-child(9),
    #timeline li:nth-child(10),
    #timeline li:nth-child(11),
    #timeline li:nth-child(12) {
        background: url(../img/bg-violet.png) rgba(228,87,53,0.5) left repeat-y;
    }
    #timeline li:nth-child(7) {
        background: transparent;
    }
    #timeline li:last-child {
        border-bottom: 2px solid black;
        background: transparent;
    }
    #timeline li>strong {
        display: block;
        position: relative;
        padding: 1rem;
        text-align: center;
    }

    #timeline li a {
        display: block;
        position: relative;
        color: black;
        font-weight: bold;
        text-decoration: none;
        font-family: Hack;
        font-size: 90%;
        z-index: 101;
        text-align: center;
    }
    /** DREAM **/
    #timeline li:nth-child(2) a {
        height: 2rem;
        line-height: 2rem;
    }
    /** Resistance Networks **/
    #timeline li:nth-child(4) a {
        height: 3rem;
        line-height: 3rem;
    }
    #timeline li:nth-child(8) a {
        height: 6rem;
        line-height: 6rem;
    }
    #timeline li:nth-child(9) a {
        height: 4rem;
        line-height: 4rem;
    }

    body>aside {
        flex-flow: column-reverse wrap;
        margin: 0;
    }

    blockquote {
        margin: 0 auto;
        font-size: 1rem;
        padding: 1.5rem;
        text-align: left;
    }

    body > footer {
        font-size: smaller;
        margin: 1rem;
    }

    p.copyleft a::after {
        display: block;
    }
}