/* ---General Styles--- */
html {
    
}

body {
    font-size: 16px;
    margin: 0;
}

.bg-image {
    color: rgba(0,0,0,.8);   
    background-color: rgba(255,255,255,1);  
    margin: 0; 
    background-image: url(../img/issue01/color-tiles.png);
    background-repeat: no-repeat;
    background-position: top -50px left -200px;
    background-size: 170%; 
}

h1, h2, h5, h6 {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-bottom: .25em;
    font-family: "Enriqueta";
    font-weight: 500;
    letter-spacing: 1.5px;
}

h3 {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-bottom: .25em;
    font-family: "Muli";
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;  
    font-size: .9em; 
}

h6 {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: .3em;
    font-family: "Muli";
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: .8em; 
    font-weight: 700;
    font-style: italic;
}


.smaller {
    font-size: .8em;
    display:block; 
    font-style: italic;
    text-transform: none;
    margin-bottom: 0%;
}

.author-redis {
    font-size: .8em; 
    font-style: italic;
}


a, a:visited {
    color: rgba(0,0,0,.8);
    text-decoration: none;
    transition: color .3s ease;
}

a:hover {
    color: rgba(0,0,0,.3);    
}


.begin a, .begin a:visited {
    background: black;
    text-decoration: none;
    transition: background .3s ease;
}

.begin a:hover {
    background: rgba(0,0,0,.3);    
}


p {
    color: rgba(0,0,0,.9);
}

#wrapper {
    padding: 10px;
    position: relative;
    margin: 0 auto;
}


p {
    margin: 0;
    font-family: Muli;
    font-weight: 400;
    font-size: .8em;
    line-height: 1.5;
}

ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    list-style: none;
}

#wrapper {
    width: 90%;
}

@media only screen and (min-width: 700px) and (max-width: 999px) {
    .bg-image {
        background-position: top -50px left -160px;
        background-size: 130%;  
    }

    #wrapper {
        position: relative;
        width: 88%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1000px) and (max-width: 1050px) {
    .bg-image {
        background-position: top 0px left -30px;
        background-size: 110%;  
    }

    #wrapper {
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1051px) and (max-width: 1199px) {
    .bg-image {
        background-position: top 40px left -200px;
        background-size: 110%;  
    }

    #wrapper {
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1200px) {
    .bg-image {
        background-position: top 50px left -150px;
        background-size: 100%;  
    }

    #wrapper {
        position: relative;
        width: 92%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1500px) {
    body {
        font-size: 18px; 
    }

    .bg-image {
        background-position: top 0px left -150px;
        background-size: 100%; 
    }
}

.img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .75em;
    box-shadow: 11px 10px 14px -5px rgba(138,135,138,0.79);
    border: 1px solid rgba(138,135,138,0.79);
    opacity: 1;
    transition: opacity 1s;

}

.img-wrapper:hover {
    opacity: .5;
}

.img-wrapper img {
    width: 100%;
}

section {
    position: relative;
    display: grid;
    margin-bottom: 250px;
    padding-left: 15px;
    padding-top: 25px;
}

.section-title {
    position: absolute;
    top: 0em;
    left: -1.3em;
    font-family: Muli;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 2px;
}

.section-title span {
    display: block;
    transform: rotate(90deg);
    transform-origin: center left;
    background-color: #fff;
    padding: 0 10px 0 10px;
}

#guiding-line {
    position: absolute;
    left: -1em;
    border-left: 2px solid lightgray;
    height: calc(100% - 240px);
    width: 1px;
    margin-top: 30vh;
}

@media only screen and (max-width: 700px) {
    #guiding-line {
        left: 0;
    }

    .section-title {
        left: -0.4em;
    }
}

article {
    /*display: grid;*/
    max-width: 1400px;
}


/* ---Navigation--- */
header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Enriqueta";
    font-weight: 500;
    box-sizing: border-box;
    padding: 1em 2em;
    background-color: rgba(255,255,255,.9);
    z-index: 999;
    -webkit-box-shadow: 0px -2px 7px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px -2px 7px 3px rgba(0,0,0,0..1);
    box-shadow: 0px -2px 7px 3px rgba(0,0,0,0.1);
    transition: top 0.4s ease;
}

.nav-up {
    top: -125px;
}

header .logo {
    display: flex;
    align-items: center;
}

h1 {
    font-size: 1.3em;
}

@media only screen and (min-width: 1050px) {
    header {
        flex-direction: row;
        justify-content: space-between;
    }
    
}

header .logo img {
    width: 3em;
    height: 3em;
    margin: 0 1em 0 0;
}

nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}


@media only screen and (min-width: 1050px) {
    nav {
        width: 35%;
        margin-top: 0;
    }
}

#to-top {
    width: 30px;
    height: 30px;
    display: block;
    background-image: url(../img/global/top.svg);
    background-repeat: no-repeat;
    background-position: center;
    /*position: -webkit-sticky;
    position: sticky;*/
    position: fixed;
    top: 88vh;
    left: 91%;
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 2s ease;
}


/* ---Introduction/Landing Page--- */
#intro {
    grid-template-columns: 1fr;
    grid-gap: 40px;
    margin-top: 25vh;
    margin-bottom: 250px;
}

#intro section {
    padding-top: 0;
}

#intro .left-block {
    display: flex;
    flex-direction: column;
    justify-content: right;
    text-align: right;
}

#intro .left-block span {
    font-family: Enriqueta;
    font-size: 3.5em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
}

#intro .issue2 {
    line-height: .9 !important;
}



#intro .left-block span:first-of-type {
    font-size: 2em;
    font-weight: normal;
}

#intro .left-block aside {
    display: flex;
    flex-direction: column;
    /*align-self: flex-end;*/
    margin-top: 50px;
    font-family: "Enriqueta";
    font-weight: 500;
    font-style: italic;
    font-size: 1.2em;
    padding-right: 0%;
    border-right: 0px solid black;
}

#intro .left-block a {
    text-transform: lowercase;
}

@media only screen and (min-width: 700px) and (max-width: 999px) {
    #intro .left-block span {
        line-height: .9;
    }
}

#intro .right-block p {
    margin-bottom: 2%;
}

@media only screen and (min-width: 1050px) {
    #intro {
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
        height: calc(94vh - 150px);
        margin-bottom: 150px;
    }

    #intro .right-block {
        max-width: 600px;
    }

    #intro .left-block span {
        line-height: .8;
    }
}


.wrap {
    white-space: pre;
    margin-bottom: 1%;
}


/*--ESSAYS--*/

/* ---FEATURES--- */

#essays, #works, #featured {
    display: grid;
    grid-gap: 250px;
}

#essays article, #works article, #featured article {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    margin: 0 auto;
}

@media only screen and (min-width: 1050px) {
    #essays, #works, #featured {
        grid-gap: 150px;
    }

    #essays article, #works article, #featured article {
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}

@media only screen and (min-width: 1050px) {
    #essays, #works, #featured {
        grid-gap: 150px;
    }

    #essays article, #works article, #featured article {
        grid-template-columns: 1fr 1fr;
    }
}






/* ---FEATURES--- */

#features {
    display: grid;
    grid-gap: 250px;
}

#features article {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    margin: 0 auto;
}

@media only screen and (min-width: 1050px) {
    #features {
        grid-gap: 150px;
    }

    #features article {
        grid-template-columns: 1fr 1fr;
    }
}




/* ---SIMULATIONS--- */

/*#simulations {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 100px;
    padding-left: 5%;
    padding-right: 5%;
}

@media only screen and (min-width: 1050px) {
    #simulations {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 40px;
    }
}

#simulations article {
    align-items: start;
}*/

#simulations {
    display: grid;
    grid-gap: 250px;
}

#simulations article {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    margin: 0 auto;
}

@media only screen and (min-width: 1050px) {
    #simulations {
        grid-gap: 150px;
    }

    #simulations article {
        grid-template-columns: 1fr 1fr;
    }
}




/* ---Probes--- */

#probes {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 100px;
    padding-left: 5%;
    padding-right: 5%;
}

@media only screen and (min-width: 1050px) {
    #probes {
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}

#probes article {
    align-items: start;
}



/* ---Reviews--- */

#reviews {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 100px;
}

@media only screen and (min-width: 1050px) {
    #reviews {
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
}



/* ---Rediscoveries--- */

#rediscoveries {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px;
}

#rediscoveries .left-block {
    margin: 0;
    width: 100%;
}

#rediscoveries .left-block p {
    column-count: 1;
    column-gap: 0;
    margin-bottom: 15px;
}

#rediscoveries .right-block {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 50px;
    font-size: .9em;
}

@media only screen and (min-width: 1050px) {
    #rediscoveries {
        grid-template-columns: 1fr;
    }

    #rediscoveries .left-block {
    column-count: 2;
    column-gap: 20px;
    }

    #rediscoveries .right-block {
    grid-template-columns: 1fr 1fr;
    }
}



/* ---Insights--- */

#insights {
    grid-template-columns: 1fr;
    grid-gap: 100px;      
    margin-bottom: 150px;    
}

@media only screen and (min-width: 1400px) {
    #insights article p {
        width: 90%;
    }
}


@media only screen and (min-width: 1050px) {
    #insights {
        grid-template-columns: 1fr 1fr;
        grid-gap: 100px; 
        padding: 0 5% 0 5%;     
    }
}



/* ---Footer--- */

footer {
    display: grid;
    padding-bottom: 1em;
    font-family: Enriqueta;
    font-weight: 500;
}

footer h5 {
    width: 100%;
    text-align: center;
    margin-bottom: .5em;
    font-size: 1.1em;
}

footer nav {
    width: 25%;
    border: 0px solid red;
    margin: 1% auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    text-align: center;
    grid-gap: 20%;
}

footer nav div {
    border: 0px solid green;
    padding: 5%;
}

footer nav img {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    footer nav {
        width: 12%;
    }
}



@media only screen and (min-width: 1050px) {
    footer nav {
        width: 8%;
    }
}


/* ---Artist's Landing Page--- */
.artist-landing {
    grid-template-columns: 1fr;
    grid-gap: 40px;
    margin-top: 25vh;
}

.artist-landing section {
    padding-top: 0;
}

.artist-landing .left-block {
    border: 1px solid black;
}

.artist-landing .right-block {
    border: 1px solid black;
}


@media only screen and (min-width: 700px) and (max-width: 999px) {

}

@media only screen and (min-width: 1050px) {
    .artist-landing {
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }

}




/* ---Archive Page--- */

#archive {
    padding: 5%;
}

.issuebox {
    min-height: 100px;
    margin-top: 150px;
    display: grid;
    grid-template-columns: 1fr;
}

.textbox {
    padding: 2%;
    border: 0px solid red;
}

@media only screen and (min-width: 600px) {
   .issuebox {
    margin-top: 15%;
    grid-template-columns: 1fr 1fr;
    } 

    .textbox {
    padding: 6%;
    border: 0px solid red;
}
}






/* ---Submissions Page--- */


#submissions {
    margin:0 auto;
    padding: 2%;
    margin-top: 150px;
}

@media only screen and (min-width: 600px) {
    #submissions {
    max-width: 700px;
    margin:0 auto;
    padding: 10%;
    margin-top: 3%;
    }
}



/* ---About Page--- */
#about {
    margin:0 auto;
    padding: 2%;
    margin-top: 150px;
}

@media only screen and (min-width: 600px) {
    #about {
    max-width: 700px;
    margin:0 auto;
    padding: 10%;
    margin-top: 3%;
    }
}



/*-----Works Intro Page-----*/

#grid-work {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    margin-top: 20vh;
    margin-bottom: 150px;
    border: 0px solid red;
}

.work-meta {
    width:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 0px solid orange;
}

.work-meta img {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.55);
}

.work-text {
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    font-size: 1em;
    border: 0px solid green;
}



.work-meta ul {
    display: flex;
    flex-direction: column;
    /*align-self: flex-end;*/
    margin-top: 1%;
    font-family: "Muli";
    text-transform: none;
    /*font-style: italic;*/
    /*font-weight: 700;*/
    letter-spacing: 1.5px;
    font-size: .9em;
    padding-right: 0%;
    border-right: 0px solid black;
    line-height: 1.4; 
}


.work-meta li:nth-last-child(2) {
  font-size: .8em;
  font-style: italic;
}

.work-meta h2 {
    font-size: 1.3em;
}

.work-meta h3 {
    font-size: 1.1em;
    margin-top: 1%;
    text-transform: lowercase;
}

.work-meta li {
    margin-top: 2%;
}

h3 .author-upper {
    text-transform: uppercase;
    font-style: normal;
}

.work-author {
   font-weight: bold;
}


.work-bio {
    margin-top: 20px;
    font-size: .9em;
    border-top: 1px dashed #8c8b8b ;
    padding-top: 12px;
}



.begin {
    font-family: Muli;
    font-style: normal;
    font-size: 1.2em;
    margin-top: 20px;
    transform: skew(-15deg);
    padding: 2%;
    letter-spacing: .5;
    font-weight: 400;
}

.begin li {
    display: inline-block;
    margin-top: 0px;
    background: black;
    color: white;
}

.begin a:link, .begin a:visited {
    background: black;
    color: white;  
    padding: 2px 1px;   
}

.begin a:hover, .begin a:focus {
    background: #999;
    color: white;    
}



@media only screen and (min-width: 700px) {
   #grid-work {
        grid-template-columns: 1.2fr 2.8fr;
        grid-gap: 30px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .work-text {
       
    }

    .work-meta {
        justify-content: right;
        text-align: right;
    }

    .work-meta ul {
         margin-top: 3%;
    }

    .work-meta h3 {
        margin-top: 3%;
    }

    .work-meta img {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }


}


/*---Quotes----*/

blockquote   {
  color: #333;
    margin-bottom: 40px;
    line-height: 1.7;
    /*font-weight: bold;*/
    /*font-family:'Habibi';*/
    background: #f9f9f9;
  border-left: 5px solid #ccc;
  margin: 1.3em 10px;
  padding: 3px 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote p {
  font-size: .9em;
    margin-bottom: 2px;
}

code {
    font-weight: normal;
    font-family: courier, monospace;
}

blockquote span {
  font-size: .8em;
    font-style: italic;
    margin-top: 7px;
    text-align: right;
    display: block;
}

/*
#rediscoveries p:first-child:first-letter {
  color: black;
  float: left;
  font-family: Muli;
  font-size: 3.3em;
  line-height: .7;
  padding-top: .5%;
  padding-right: 1%;
}*/

strong {
    font-family: "Muli";
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

p a:link, p a:visited {
            text-decoration: underline;
            text-decoration-style: dotted;
        }

#submissions li a:link, #submissions li a:visited {
            text-decoration: underline;
            text-decoration-style: dotted;
        }



/*----MENU--- */

.small-triangle {
    font-size: .6em !important;
    padding: 1%;
}




/*NOTES*/
#notes {
    display: none;
}

#note-button {
    font-size:  .9em;
}