// container for archive intros
.intro {
    @include constrain_wide;
    font-family: $fancy_serif;
    @include breakpoint(alpha){
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        grid-gap: 1rem;
    }

}
// container for archive intros, narrow version
.intro-narrow {
    margin-top: 3rem;
    @include constrain_narrow;
    p {
        @include fontsize(18);
        font-style: italic;
    }
    h1 {
        @include smcaps;
        @include fontsize(18);
        text-align: left;
    }
}
.essay-intro {
    font-family: $fancy_serif;
    border-bottom: 3px double #efefef;
    padding-bottom: 3rem;
    margin-bottom: 4rem;
    margin-top: 3rem;
    p {
        font-style: normal !important;
        @include fontsize(18);
        line-height: 1.5;
        margin-top: 1.2rem !important;
        &:first-of-type {
            margin-top: 2rem !important;
        }
    }
    a {
        text-decoration: underline !important;
        text-decoration-color: $orange !important;

    }
}
.archive-list .essay-intro {
    h2 {
        @include fontsize(38);
    }
    h3 {
        font-weight: normal;
        font-family: $fancy_serif;
        @include fontsize(22);
        line-height: 1.3;
        font-style: italic; 
        margin: .25rem 0 .5rem;
    }
}

// container for archive grid items
.archive-grid > article {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}
.archive-grid {
    margin-top: 3rem;
    @include constrain_wide; 
    display: grid;
    @include breakpoint(alpha){
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        grid-gap: .75rem;
    }
    @include breakpoint(beta){
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        grid-gap: .75rem;
    }
}
@supports (display:grid) {
  .archive-grid > article {
    width: auto;
  }
}
// body class archive, article header (usually inherits h2)
.archive .post-title {
    font-family: $fancy_serif;
    @include fontsize(26);
    line-height: 1.3;
    font-style: italic; 
    margin: .25rem 0 .5rem;
    a {
        @include plain_a;
    }
}
// the date and location are small caps 
.post-date, .post-location {
    @include smcaps;
    @include fontsize(14);
    font-weight: bold;
    color: $secondary-link-color;
    line-height: 1.2;
    text-align: left;
    margin: 0;
}
// slightly larger summary than a p in this context
.post-summary {
    font-family: $fancy_serif;
    @include fontsize(16);
    line-height: $archive_p_line_height;
    margin-top: .25rem;
    text-align: left;
    margin: 0;
}

.archive-list {
    @include constrain_narrow;
    @include breakpoint(epsilon) {
    }
    text-align: left;
    h1, .list-title {
        text-align: left;
        @include fancy_sans;
        @include fontsize(36);
        font-weight: normal;
    }
    span {
        @include fancy_sans;
        @include smcaps;
        @include fontsize(13);
        font-weight: bold;
        color: #999;
    }
    ul {
        padding: 0;
        list-style-type: none;
    }
    a { 
        text-decoration: none;
        color: lighten($body_font_color, 20);
        &:hover {
            color: $link_color;
        }
    }
    h2, .list-hed {
        font-family: $fancy_serif;
        @include fontsize(32);
        margin: 0;
        line-height: 1.1;
    }
    p {
        margin: 0;
        @include fontsize(20);
        font-style: italic;
    }
}
// Specific pages vary slightly
// Books
.book-grid {
    @include breakpoint(alpha){
        grid-gap: .75rem;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    @include breakpoint(beta){
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        grid-gap: .75rem;
    }
    .post-title {
        @include fontsize(22);
        line-height: 1.4;
    }
    .author {
        @include smcaps;
        font-weight: 400;
        @include fontsize(12);
        text-align: left;
        margin: 0;

    }
    .book-stars {
        display: block;
    }
}

// Dialogues
.dialogue-grid {
    .post-title {
        font-style: normal; 
        @include fontsize(22);
        line-height: 1.4;
    }
}
// Dialogues, used in both archives and details
.sci {
    font-style: italic; 
    @include fontsize(18);
}

// figments 
.figments-grid {
    @include constrain_narrow;
    .post-title {
        font-style: normal; 
        @include smcaps;
        @include fontsize(16);
    }
}

.wide-list {
    @include constrain_wide;
    li {
        margin-top: 3rem;
        margin-left: auto;
        margin-top: auto;
        margin-bottom: 3rem;
    }
    .permalink {
        display: block;
        text-align: left;
    }
    @include breakpoint(gamma) {
        li {
            display: flex;
        }
        .wide-wrapper {
            flex: 3 0px;
            order: 1;
        }
        a {
            flex: 3 0px;
            order: 2;
        }
        .post-summary p {
            @include fontsize(20);
            margin-right: 2rem;
        }
    }
}

// Homepage
#home .header-wrapper {
    margin-bottom: 0;
}
#home section {
    @extend %clearfix;
    @include constrain_wide;
    margin-top: 4rem;
    margin-bottom: 4rem;
}
#home section.bio-short {
    margin-bottom: 6rem;
}
@include breakpoint(gamma){
    .recent {
        max-width: 64%;
        width: 64%;
        float: left;
    }
    .popular {
        max-width: 33%;
        width: 33%;
        float: right;
    }
}
.banner {
    margin-top: 0 !important;
    .post-image {
        overflow: hidden;
    }
    article {
        position: relative;
    }
    figcaption {
        border: none;
        position: absolute;
        margin: 0;
        bottom: 0;
        width: 100%;
        z-index: 100;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.6);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
        filter: alpha(opacity = 70);
        font-weight: 400;
        padding-bottom: 30px;
        time {display: none;}
        .btn {text-decoration: none; color: white; }
    }
    .hero-text-wrapper {
        padding-top: 2rem;
        @include constrain_narrow;
        color: white;
        font-family: $headline_font_serif;
        .post-title, .post-subtitle { 
            font-style: normal;
            text-align: center;
            margin-bottom: 0;
            line-height: 1;
            @include fontsize(42);
            a {
                color: white;
                margin-bottom: 0;
                text-decoration: none;
            }
        }
        .post-subtitle {
            font-style: italic;
            @include fontsize(22);
            margin-top: .45rem;
        }
        .post-location {
            text-align: center;
            margin-top: .5rem;
            .h-adr {
                border-top: 1px solid #423f3f;
                display: inline-block;
                padding-top: .5rem;
            }
        }
        a { 
            color: $body_font_light;
            padding: 0;
            border: none;
            margin-top: .5rem;
        }
    }
    .post-location {
        color: lighten($body_font_light, 5);
        a {
            color: lighten($body_font_light, 5);
            text-decoration: none;
            @include fontsize(14);
        }
    }
    .btn {
        @include smcaps;
        @include fancy_sans_bold;
        @include fontsize(12);
        line-height: 1;
        display: block;
        max-width: 40px;
        background: #b53a04;
        border-radius: .35em;
        color: white !important;
        text-transform: uppercase;
        padding: .85rem 1rem .55rem !important;
        text-align: center;
        margin: 2rem auto 0;
    }
    @include breakpoint(gamma){
        max-height: 900px;
        .post-image {
            max-height: 900px;
        }
    }
}
.homepage-map-img {
    width: 350px;
    height: auto;
    @include breakpoint(delta){
        float: left;
        width: 350px;
        margin-right: 2rem;
    }

}
@include breakpoint(delta){
    .addafter {
        &:after {
            content: "to the left";
        }
    }
    .subcontent {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}
.homepage-section-header {
    @include fancy_sans;
    @include fontsize(24);
    font-weight: normal;
    text-align: left;
    @include breakpoint(gamma){
        @include fontsize(28);
        line-height: 1.4;
    }
}
.popular, .recent {
    .post-title {
        @include fontsize(22);
        font-weight: 400;
    }
    .post-image {
        max-height: 12rem;
        overflow: hidden;
    }
    img {
        margin-top: -20%
    }
}
.homepage-next {
    margin: 0 auto;
    text-align: center;
    a {
        @include fontsize(14);
        @include fancy_sans;
        @include smcaps;
        font-weight: 500;
        text-decoration: none;
        padding: 12px 10px 12px;
        border: $link_color 1px solid;
        &:after {
            content: "\21E2";
            margin-left: 4px;
        }
        &:hover {
            background: $link_color;
            color: white;
        }
    }
}
.essay-archive {
    li {
        margin-bottom: 2.8rem;
    }
}
.fancy-archive-list {
    li { margin-bottom: 3.8rem }
    p {
        line-height: 1.3;
        margin-top: 4px;
    }
    h3.p-summary {
        @include fontsize(22);
        font-weight: 300;
        font-family: $headline_font_serif;
        font-style: italic;
        margin-top: .25rem;
        margin-bottom: .25rem;
        line-height: 1.2;
    }
    .post-location {
        margin: .5rem 0 0 0;
    }
}
.circle-img-wrapper {
    width: 106px;
    height: 106px;
    float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #666;
    margin-right: .5rem;
    img {
        width: 160px;
        max-width: 160px;
    }
    @include breakpoint(gamma) {
        margin-left: -128px;
        margin-top: -4px;
    }
}