/*****************
Let's make a website!
******************/

* {
    box-sizing: border-box;
    text-rendering: optimizelegibility;
}

body {
    background-color: #fafafa;
    color: #222;
    margin: 0 auto;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 145%;
}

p {
    font-family: 'Minion Pro', Calluna, 'Times New Roman', Georgia, serif;
    line-height: 140%;
    font-size: 110%;
}

section {
    max-width: 55rem;
    margin: 0 auto;
}

section.text, article {
    max-width: 40rem;
    padding: 1rem;
}

article { margin: 0 auto; }

article hr { width: 40%; max-width: 16em; margin: 4em auto; }
article ul, article ol {
    font-family: 'Times New Roman', Georgia, serif;
    line-height: 140%;
    font-size: 110%;
}

article figure { margin: 2em 0; }
article figure figcaption, article cite { font-size: 75%; line-height: 1.3; color: gray; margin-top: 1em; }

hr {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin: 2rem 0;
}

img.fullimg {
    display: block;
    width: 100%;
}

figure.limit img { max-width: 25rem; margin-left: auto; margin-right: auto; }

.twitter-tweet { margin: 3em auto !important;}

/*****************
Type
******************/

a { color: gray; }
a:hover { color: crimson; }
p a { text-decoration: none; border-bottom: 1px solid #bbb; }
p a:hover { border-bottom-color: crimson; }

b.label { display: block; font-weight: normal; color: #333; }
em.detail { font-style: normal; font-size: 12px; color: #bbb; }

small, time { font-weight: 400; color: gray; font-size: 0.8rem; font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1, h2, h3, h4 { font-size: 1rem; font-weight: 600; }
h2+p { margin-top: 0; }
section.text>h1 { margin-top: 0; }
article>h1 { font-size: 1.8rem; line-height: 115%; text-align: center; font-weight: 600; margin-bottom: 5rem; }

blockquote { margin-left: 0; text-indent: -0.5em; font-size: 90%;}
blockquote cite { color: gray; font-style: normal; display: block; text-indent: 0; }
article blockquote { text-indent: 0; margin-left: 2em; color: #666;}

ul.buttons { list-style: none; margin: 0; padding: 0; }
ul.buttons li { display: inline-block; margin-right: 0.3em; }

ul.buttons li a {
    display: block;
    text-decoration: none;
    background-color: #ddd;
    font-size: 70%;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 1em;
    border-radius: 3px;
    font-weight: 500;
}

ul.buttons li:first-child a { background-color: #222; color: white; }
ul.buttons li:first-child:hover a { background-color: crimson; }

/*****************
Navigation
******************/

header { padding: 1rem; border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 1rem; font-size: 80%; }
header h1 { font-size: 1em; font-weight: 400; color: #222; margin: 0; }
header nav ul { list-style: none; margin: 0 auto; padding: 0; display: inline-block; }
header nav ul li { display: inline-block; margin-right: 1.5rem; padding-bottom: 0.5rem; }
header nav ul li:last-child { margin-right: 0; }
header a { border: none; color: gray; text-decoration: none; padding-bottom: 2px; }
header a.active { color: #222; border-bottom: 2px solid #222; }
header a:hover { color: crimson; }
svg.monogram { width: 1.75em; fill: #222; }
a.name { font-weight: 500; color: #222; font-size: 16px; }

/* change header to black on custom pages */
body.custom a.name { color: #fff; }
body.custom header { background-color: #151515; border-bottom: none; margin-bottom: 0; }
body.custom header a.active { color: #fff; border-bottom: 2px solid #aaa; }
body.custom header h1 { color: #fff; }
body.custom svg.monogram { fill: #fff; }
article.fullwidth { margin: 0; padding: 0; max-width: none; }
article.fullwidth p { max-width: 38rem; margin-left: auto; margin-right: auto; }

/*****************
Footer
******************/
footer {
    color: gray;
    font-weight: 400;
    padding: 2rem 1rem;
    margin-top: 1rem;
    font-size: 14px;
    line-height: 1.4;
    background-color: #e5e5e5;
}

footer a { color: gray; border-bottom-color: lightgray; }
footer h2 { font-size: 1em; margin: 0; color: #333; }
footer div.copyline {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 1em;
    margin-top: 2em;
    font-size: 12px;
}
#mc_embed_signup:after {
    content: '';
    clear: both;
    display: table;
}

#mc_embed_signup form { margin: 0; padding: 0 !important; }
#mc_embed_signup form input {
    display: inline-block !important;
    line-height: 1;
    font-size: 13px;
    border: none;
    padding: 7px 3px !important;
    border-radius: 3px;
}
#mc_embed_signup form input.email { margin: 1em 0 0 0; width: 200px; background-color: #fff;}
#mc_embed_signup form input[type='submit'] {
    line-height: 1;
    background-color: transparent;
    color: #333;
    padding: 9px 10px !important;
}

@media (min-width: 700px) {
    footer .title { float: left; }
    #mc_embed_signup form input.email { margin-top: 0.3em; }
    #mc_embed_signup form { float: right; }
}

/*****************
Library
******************/

body.library section:not(.footersection) {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -mx-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto 3rem;
}

body.library section a {
    width: 50%;
    font-size: 12px;
    line-height: 18px;
    margin-top: 2rem;
    text-align: center;
    text-decoration: none;
    color: #333;
}

body.library section a:hover { color: crimson; }
body.library section a:hover b.label { color: crimson; }

body.library section div.imgcontainer {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 100%;
}

body.library section div.imgcontainer img {
    display: block;
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    margin-bottom: 0.5rem;
    transition: opacity 0.15s ease-in;
    -webkit-transition: opacity 0.15s ease-in;
    -moz-transition: opacity 0.15s ease-in;
    -ms-transition: opacity 0.15s ease-in;
}

/*****************
Writing/About Intro
******************/
p.intro {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    margin-top: -2rem;
    font-weight: 300;
}

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

img.avatar { border-radius: 100%; max-width: 225px; width: 100%; margin: 0 auto 4rem; }


/*****************
Grid Layout
******************/

.grid { padding: 1rem; margin: 0 auto; max-width: 30rem; }
.grid a { text-decoration: none; }
.grid a b.label, .grid a em.detail { display: block; font-size: 90%; line-height: 1.4; }
.grid a img { margin-bottom: 1rem; }
.grid div { margin-bottom: 1rem; }
.grid div a p { color: #333; text-decoration: none !important; }
.grid a:hover b.label { color: crimson; }


/*****************
Mods for Featured Writing
******************/

section.featured div.grid { padding: 0; max-width: none; }
section.featured div.grid a img { width: 50%; margin-bottom: 0; float: left; margin-right: 1em; }
section.featured div.grid a:after { content: ''; display: table; clear: both; }

/*****************
List Layout
******************/

div.textspace + div.textspace { border-top: 1px solid rgba(0,0,0,0.1); }
ul.tablelist, ul.tablelist li { list-style: none; margin: 0; padding: 0; line-height: 1.4;}
ul.tablelist li { border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 90%; }
ul.tablelist li:last-child { border-bottom: none; }
ul.tablelist li a { border-bottom: 0; text-decoration: none; display: block; padding: 0.5rem 0 0.6rem; }
ul.tablelist li a:hover b.label { color: crimson; }
section.featured, section.writinglist { margin-left: 1rem; margin-right: 1rem; }
section.featured, section.writinglist aside { border-bottom: 1px solid rgba(0,0,0,0.1); }
section.writinglist aside h2 { margin-top: 2em; }
/*section.writinglist div.textspace:last-child { border-bottom: 1px solid rgba(0,0,0,0.1);}*/
div.writingwrapper section:last-child { margin-bottom: 0; }
div.writingwrapper + footer { margin-top: 0; }
/*body:not(.writingindex) div.writingwrapper { padding-top: 1rem; background-color: #efefef; }
body:not(.writingindex) div.writingwrapper { padding-top: 1rem; }*/

ul.tablelist li a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    -moz-align-items: baseline;
    -ms-align-items: baseline;
    align-items: baseline;
    justify-content: space-between;
}

/*****************
Media Queries
******************/
@media (min-width: 500px) {
    header { margin-bottom: 0; padding: 2rem; border-bottom: none; }
    header .navwrapper{ text-align: center; }
    .grid {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 57rem;
        padding: 0 1em;
    }
    .grid div { width: 50%; }
    .grid div:nth-child(odd) { padding-right: 0.5em; }
    .grid div:nth-child(even) { padding-left: 0.5em; }
    section.featured { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 1.25rem; }
    section.featured h2 { margin-top: 0; }
    section.featured .grid div a { display: block; }
    section.featured .grid div a:after { display: none; clear: none; }
    section.featured .grid div a img { float: none; margin-right: 0; margin-bottom: 0.5em; width: 100%; }
}

@media (min-width: 600px) {
    body.library section a { font-size: 13px; }

    div.textspace {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: baseline;
        -moz-align-items: baseline;
        -ms-align-items: baseline;
        align-items: baseline;
    }

    div.textspace.top {
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        align-items: flex-start;
    }
    div.textspace aside { width: 25%; }
    div.textspace>div { width: 75%; }
    section.writinglist aside { border-bottom: none; }
    section.writinglist { margin: 0 1em 1em 1em; }
    section.writinglist aside h2 { margin: 0; }
    body:not(.writingindex) div.writingwrapper { padding-top: 2.5rem; }
}

/* stretch out figures and images if window is wide enough */
@media (min-width: 46rem) {
    body:not(.custom) article figure { margin-left: -2rem; margin-right: -3rem; }
    body:not(.custom) article figure figcaption { margin-left: 2rem; margin-right: 3rem; }
}

/* center listings */
@media (min-width: 60rem) {
    section.featured, section.writinglist { margin-left: auto; margin-right: auto; }
}

/* Change library column counts */
@media (min-width: 500px) { body.library section a { width: 33.3333%; } }
@media (min-width: 700px) { body.library section a { width: 25%; } }
@media (min-width: 900px) { body.library section a { width: 20%; } }