.detail {
    #article {
        padding-bottom: 2rem;
        border-bottom: 3px double #efefef;
    }
    article {
        font-family: $fancy_serif;
        @include constrain_narrow;    
        margin-top: 4rem;
        h1 {
            font-family: $fancy_serif;
            line-height: 1em;
            letter-spacing: -1px;
            @include fontsize(48);
            font-weight: normal;
            margin-bottom: .25rem
        }
        ul {
            text-align: left;
            @include fontsize(18);
        }
    }
    .post-subtitle {
        font-style: italic;
        font-size: 1.4rem;
        line-height: 1.25;
        margin-top: 0;
        margin-bottom: 0;
    }
    .post-subtitle-segundo {
        @include fancy_sans;
        @include smcaps;
        @include fontsize(13);
        font-weight: bold;
        color: #999;

    }
    .post-linewrapper {
        margin-top: 1rem;
        padding-top: 1rem;
        display: inline-block;
        border-top: 1px solid #efefef;
    }
    .post-location {
        color: #b6b6b6;
        text-align: center;
        a {
            color: #b6b6b6;
            text-decoration: underline;
            text-decoration-color: $orange;
        }
        @include breakpoint(gamma) {
            text-align: left;
        }
    }
    .post-date {
        text-align: center;
        @include breakpoint(alpha) {
            text-align: left;
        }
    }
    .map {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    .post-header {
        @include fancy_sans;
        @include fontsize(18);
        color: lighten($body_font_color, 20);
        padding-bottom: 2.6rem;
        border-bottom: 1px solid #efefef;
        @include breakpoint(alpha) {
            text-align: left;
        }
        time {
        }
    }
    p:first-of-type {
        margin-top: 2.6rem;
    }
    h4, h5 {
        @include fancy_sans;
        margin: 3rem 0 0 0;
    }
    h4 + p, .afterward h4 + p {
        margin-top: .125rem;
    }
    h5 {
        margin: 0
    }
    .afterward {
        p {font-style: italic;}
        h4 {
            margin-bottom: 0;
        }
    }
    p.small {
        @include fontsize(18);
    }
    .sci {
        text-align: center;
        @include fontsize(24);
        font-weight: 400;
        margin: 0;

    }
    .sci:nth-child(3) {
        @include fontsize(18);
        margin-bottom: 2rem;
    }
    ul {
        list-style: circle;
        margin-left: 2.5em;
        list-style-position: outside;
        margin-bottom: 2.4em;
    }
    // Ack, id selector, so wrong, but easy handles the slightly different footer
    // in the dialogue section that lists all the sightings
    #endnode {
        h5 {
            @include fontsize(14);
            @include smcaps;
            @include fancy_sans;
            margin-bottom: 1rem;
            margin-top: 2rem;
        }
        ul {
            margin-bottom: 2em;
            list-style-type: none;
            padding: 0;
            li {
                color: lighten($body_font_color, 30);
                margin-bottom: 0;
                margin-top: 0;
                &:before {
                  content: "\2022";
                  color: lighten($body_font_color, 30);
                  margin-right: .35rem;
                }
            }
        }
    }
    #detail-map-canvas {
        height: 400px;
        width: 98vw;
        position: relative;
        left: 49%;
        right: 49%;
        margin-left: -48vw;
        margin-right: -49vw;
    }
}
.post-dateline {
    display: inline-block;
    margin-top: 0em;
    padding-top: 1rem;
    padding-bottom: 2.6rem;
    border-top: 1px solid #efefef;
}
header.tight {
    margin-bottom: 3rem;
    * {
        margin: 0;
        text-align: center;
    }
    h1 {
        margin-bottom: 1rem;
    }
    h2 {
        display: inline-block;
        border-top: 1px solid darken(#efefef, 10);
        padding-top: 1rem;
    }
    h3 {
        margin-top: .35rem;
    }
}
h4.post-source {
    @include fontsize(14);
    @include smcaps;
    padding-bottom: 0em;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: bold;
    color: #b6b6b6;
    a {
        color: #b6b6b6;
        &:hover {
            color: $link_color;
        }
    }
}
.post-location {
    h3 {
        display: inline;
        @include fontsize(14);
    }
    a {
        color: $secondary_link_color;
        text-decoration: none;
    }
}
.post-essay p:first-child:first-letter {
    @include fancy_sans;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}
//### PAGE NAVIGATION ###
.nav-wrapper {
    @include constrain_narrow();
    border-bottom: 3px double #efefef;
}
#page-navigation {
    margin: 2em auto;
    text-align: center;
    display: table;
    ul {
        list-style-type: none;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: 0;
    }
    li {
        margin: 6px auto;
        clear: both;
        line-height: 24px;
        text-align: center;
    }
    span {
        @include fancy_sans;
        @include fontsize(14);
        min-width: 70px;
        display: block;
        text-align: right;
        margin-right: 10px;
        float: left;
    }
    a {
        display: block;
        float: left;
        font-family: $fancy_serif;
        text-align: left;
        font-style: italic;
        color: $brown;
        text-decoration: none;
    }
}

.article-afterward {
    @extend %clearfix;
    @include constrain_narrow;
    padding-bottom: 2rem;
    border-bottom: 3px double #efefef;
    @include breakpoint(alpha) {
        .article-card-list {
            display: flex;
            justify-content: space-between
        }
        .article-card-mini {
            margin-bottom: 0
        }
    }
    .hedtinycaps {
        display: inline-block;
        margin-bottom: 2.5rem;
        border-bottom: 2px solid #efefef;
    }
}
.article-card-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style-type: none !important;
}
.article-card-mini, .detail .article-card-mini {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2rem;
    max-width: 100%;
    a { text-decoration: none;}
    .post-title {
        @include fontsize(24);
        text-align: center;
        line-height: 1;
        margin: 0;
    }
    .post-subtitle {
        @include fontsize(18);
        text-align: center;
        font-family: $fancy_serif;
        font-style: italic;
        font-weight: normal;
        margin: .25rem auto 0;
    }
    .post-summary, .post-date{
        text-align: center;
        display: inline-block;
        line-height: 0.6 !important;
        color: #b6b6b6;
    }
    @include breakpoint(omega) {
        max-width: 200px;
        margin-bottom: 0;
    }
    @include breakpoint(beta) {
        max-width: 235px;
    }
}
.post-mini-image {
    max-height: 220px;
    overflow: hidden;
    @include breakpoint(beta) {
        margin-bottom: 1rem;
    }
    img {
        margin-top: -20%;
    }
}


.entry-footer {
    @extend %clearfix;
    @include constrain_narrow;
    border-bottom: 3px double #efefef;
    margin-top: 2em;
    text-align: left;
    h3 {
        @include smcaps;
        @include fontsize(16);
    }
    h3 + ul {
        padding: 0;
    }
    li {
        margin: .25em 0;
        list-style-type: none;
    }
    li ul {
        columns: 2 auto;
        list-style-type: none;
        margin-left: .5rem;
        padding: 0;
    }
    li ul li:before {
      content: "\2022";
      margin-right: .45rem;
      color: lighten($body_font_color, 40);
    }
    .grouper {
        margin-top: 1em;
    }
    a {
        text-decoration: none;
        color: lighten($body_font_color, 20);
    }
    #wildlife li ul li {  
        color: lighten($body_font_color, 40);
        a {
            color: lighten($body_font_color, 10);
        }
    }
    @include breakpoint(beta) {
        padding-bottom: 2rem;
        #wildlife {  
            max-width: 55%;
            float: left;
            margin-right: 1.2rem;
        }
        #recommended-reading{
            ul { 
                list-style-type: none;
            }
            img {
                max-width: 180px;
            }
        }
    }
    aside {
        @extend %clearfix;
    }
}
#field_notes {
    @include breakpoint(beta) {
        max-width: 33%;
        float: left;
        margin-top: .15em;
        margin-left: 7em;
    }
    li:before {
      content: "\2022";
      margin-right: .35rem;
      color: $body_font_light;
    }
}
.rr-clear {
    clear: left;
}

//### FOOTNOTES ###
.footnote {
    margin: 1em auto 0 auto;
    padding: 0;
    list-style-type: none;
    p {
        font-size: 1rem;
        line-height: 1.4;
        margin-top: 0 !important;
    }
    hr {display: none;}
    ol {
        padding-left: 1em;
        @include breakpoint(alpha) {
            margin-left: 1em;
        }
    }
}
sup {
    line-height: 1;
    .footnote-ref {
        padding: 4px 3px;
        
    }
}

//### Figments ###
.downloads {
    list-style-type: none;
}

// ### Books ###
.book-metadata {
    text-align: left;
    @include fancy_sans;
    dd {
      display: inline;
      margin: 0;
    }
    dd:after{
      display: block;
      content: '';
    }
    dt{
      display: inline-block;
    }
    dt:after {
        content: ":";
    }
}
.thoughts, .highlights, .meta-cover {
    @include constrain_narrow;
    font-family: $fancy_serif;
    text-align: left;
    p {
        max-width: 100%;
    }
}
.book-cover-wrapper {
    @include constrain_wide;
    img {
        float: left;
        max-width: 20rem;
    }
}
.thoughts h5, .highlights h4 {
    font-weight: 500;
    letter-spacing: 1px;
    margin: 3em 0 .5em 0;
    @include generic_sans;
    @include smcaps;
    @include fontsize(14);
}
.highlights article:first-of-type {
    margin-top: 1em;
}
.highlink {
    @include fontsize(22);
    margin-right: .5rem;
    float: left;
    line-height: 1.6;
    color: lighten($body_font_color, 60);
    @include breakpoint(alpha) {
        margin-top: -1px;
    }
    &:visited {
        color: lighten($body_font_color, 60);
    }
}
.highlights .foot {
    @include fontsize(14);
}