Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

43 files changed, 4207 insertions, 1370 deletions

diff --git a/design/sass/_comments.scss b/design/sass/_comments.scss
index 39c7930..4807397 100644
--- a/design/sass/_comments.scss
+++ b/design/sass/_comments.scss
@@ -1,17 +1,17 @@
 //### COMMENTS AND FORMS ###
-.comments--header {
-    @include constrain_narrow;
+.comments--wrapper {
+    @include constrain_narrow();
     @include fancy_sans;
+    text-align: left;
+    margin-top: -2em;
+}
+.comments--header {
+    @include constrain_narrow();
     line-height: 6em;
     @include fontsize(16);
     font-style: italic;
     margin-top: 2em;
 }
-.comments--wrapper {
-    @include constrain_narrow();
-    text-align: left;
-    margin-top: -2em;
-}
 .comment {
     margin-top: 2.5em;
     margin-bottom: 2.5em;
@@ -20,7 +20,15 @@
         margin-top: none;
     }
     &:after {
-        @include faded_line_after;
+        display: block;
+        content: "";
+        margin-top: 3em;
+        height: 1px;
+        width: 100%;
+        background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+        background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+        background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+        background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
     }
     &:last-child:after {
         display: none;
@@ -29,15 +37,16 @@
 .comment--head, .comment--body {
     @include breakpoint(alpha) {
         margin-left: 80px;
-        margin-top: -2rem;
+        margin-top: -1rem;
     }
 }
 .comment--head {
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 }
 .comment--body {
     margin-bottom: 3em;
     @include fontsize(22);
+    font-family: $fancy_serif;
     hr {
         width: 20%;
         overflow: visible;
@@ -49,30 +58,25 @@
     }
 }
 .who {
-    @include fancy_sans;
     @include fontsize(22);
 }
 .when {
-    @include fancy_sans;
     @include fontsize(15);
     color: #999;
     margin-left: 1em;
 }
-
 .gravatar {
     border: 2px $brown solid;
     background: transparent;
     max-width: 100%;
     padding: 0;
     float: left;
-    margin-top: 5px;
+    margin-top: -7px;
     margin-right: 8px;
     @include breakpoint(alpha) {
         margin-right: 0;
     }
 }
-
-
 .comment--form--wrapper {
     @include constrain_narrow();
     p {
@@ -119,4 +123,3 @@
         margin-bottom: 0;
     }
 }
-    
diff --git a/design/sass/_details.scss b/design/sass/_details.scss
index 53e819f..74965fd 100644
--- a/design/sass/_details.scss
+++ b/design/sass/_details.scss
@@ -1,601 +1,521 @@
-.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;
+.content {
+    margin-top: 3rem;
+}
+//************** archive grids  **********************************{{{
+.archive-grid {
+    margin-top: 2rem;
+    list-style-type: none;
+    padding: 0;
+    @include constrain_wide;
+    @include breakpoint(alpha) {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 20px;
+        row-gap: 1rem;
     }
-    h5 {
-        margin: 0
+}
+.archive-grid-quad {
+    //used for books and related posts in detail pages
+    list-style-type: none;
+    padding: 0;
+    @include breakpoint(alpha) {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 15px;
     }
-    .afterward {
-        p {font-style: italic;}
-        h4 {
-            margin-bottom: 0;
-        }
+    @include breakpoint(beta) {
+        grid-template-columns: 1fr 1fr 1fr;
     }
-    p.small {
-        @include fontsize(18);
+    @include breakpoint(epsilon) {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
     }
-    .sci {
-        text-align: center;
-        @include fontsize(24);
-        font-weight: 400;
-        margin: 0;
-
+}
+.related .archive-grid-quad {
+    //there's only 4 related items so override the 
+    //3-grid at breakpoint beta
+    @include breakpoint(beta) {
+        grid-template-columns: 1fr 1fr;
     }
-    .sci:nth-child(3) {
-        @include fontsize(18);
-        margin-bottom: 2rem;
+}
+.archive-grid-double {
+    // homepage recent
+    @include breakpoint(alpha) {
+        grid-template-columns: 1fr 1fr;
+        row-gap: 1rem;
+        grid-gap: 16px;
     }
-    ul {
-        list-style: circle;
-        margin-left: 2.5em;
-        list-style-position: outside;
-        margin-bottom: 2.4em;
+}
+.archive-grid-single {
+    // homepage popular
+    @include breakpoint(alpha) {
+        grid-template-columns: 1fr;
+        row-gap: 1rem;
+        grid-gap: 16px;
     }
-    // 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;
-                }
-            }
+}
+.recent-popular {
+    // get popular and recent lined up
+    // side by side on the hompage
+    @include constrain_wide;
+    @include breakpoint(alpha) {
+        display: flex;
+        flex-direction: row;
+        width: calc(100% + 30px);
+        .popular {
+            margin-left: 30px;
         }
     }
-    #detail-map-canvas {
-        height: 400px;
-        width: 98vw;
-        position: relative;
-        left: 49%;
-        right: 49%;
-        margin-left: -48vw;
-        margin-right: -49vw;
+}
+.archive-grid-card {
+    //container object for cards (usually an article tag)
+    a {
+        text-decoration: none;
     }
 }
-.post-dateline {
-    display: inline-block;
-    margin-top: 0em;
-    padding-top: 1rem;
-    padding-bottom: 2.6rem;
-    border-top: 1px solid #efefef;
+.archive-grid-card-simple {
+    //container object for cards with no dek
+    line-height: 1;
+    margin-bottom: 1.4rem;
 }
-header.tight {
-    margin-bottom: 3rem;
-    * {
-        margin: 0;
-        text-align: center;
-    }
-    h1 {
-        margin-bottom: 1rem;
+.related {
+    //special rules for related post grid
+    //on detail pages in jrnl and src
+    ul {
+        list-style-type: none;
+        padding: 0;
     }
-    h2 {
-        display: inline-block;
-        border-top: 1px solid darken(#efefef, 10);
-        padding-top: 1rem;
+    .card-hed {
+        text-align: center;
+        @include fancy_sans;
+        @include fontsize(20);
+        margin: 1rem auto .25rem;
     }
-    h3 {
-        margin-top: .35rem;
+    .card-smcap {
+        text-align: center;
     }
 }
-h4.post-source {
-    @include fontsize(14);
+//}}}
+//************** archive cards **********************************{{{
+.card-smcaps, .post-smcaps {
+    // formats date and location lines as small caps
     @include smcaps;
-    padding-bottom: 0em;
-    margin-bottom: 0;
-    margin-top: 0;
+    @include fontsize(13);
     font-weight: bold;
-    color: #b6b6b6;
-    a {
-        color: #b6b6b6;
-        &:hover {
-            color: $link_color;
-        }
-    }
+    margin: 0;
+    color: $body_font_light;
+}
+.card-hed {
+    // main headline of the card
+    @include fontsize(32);
+    color: darken($body_font_light,15);
+    margin: 0;
+    line-height: 1;
 }
-.post-location {
-    h3 {
-        display: inline;
-        @include fontsize(14);
+.card-hed-it {
+    // italic variant of card hed
+    // used on jrnl archives
+    @include fontsize(26);
+    line-height: 1.3;
+    font-style: italic;
+    margin: .25rem 0 .5rem;
+
+}
+.card-hed-smit {
+    // smaller italic variant of card hed
+    // used on homepage
+    @include fontsize(22);
+    line-height: 1.3;
+    font-style: italic;
+    margin: .25rem 0 .5rem;
+
+}
+.card-hed-btm {
+    // hed with a little bottom margin
+    // used in book list
+    margin-bottom: .5rem;
+}
+.card-image-sm {
+    // smaller card image
+    // used on homepage
+    max-height: 180px;
+    overflow: hidden;
+    margin-bottom: .5rem;
+    img {
+        margin-top: -20%;
     }
-    a {
-        color: $secondary_link_color;
-        text-decoration: none;
+}
+.card-image-tiny {
+    // even smaller card image used for 
+    // related posts on detail pages
+    max-height: 120px;
+    overflow: hidden;
+    margin-bottom: .5rem;
+    img {
+        width: 100%;
+        margin-top: -20%;
     }
 }
-.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;
+.card-lede {
+    // subtitle or lede
+    @include fontsize(20);
+    color: darken($body_font_light,5);
+    font-style: italic;
+    line-height: 1.6;
+    margin: 0;
 }
-//### GUIDE STUFF ###
-.product-card {
-    margin: 5rem 0;
+.card-dek {
+    // used for p test on jrnl page and elsewhere
+    @include fontsize(16);
+    line-height: 1.6;
+    margin: 0 0 .5rem;
 }
-.detail .product-link {
-    a {
-        display: block;
-        padding: 1rem;
-        background: #249bd6;
-        color: white;
-        text-transform: uppercase;
-        font-size: 16px;
-        text-decoration: none;
-    }
+.card-stars {
+    // ratings on books
+    @include fontsize(16);
+    display: block;
 }
-.buy-btn {
-    @include fancy_sans;
+.read-in {
+    // makes read in date in books look good
     display: block;
-    padding: .5rem 1rem;
-    background: #249bd6;
-    color: white;
-    text-transform: uppercase;
-    @include fontsize(16);
-    text-decoration: none;
-    margin-right: 1rem;
 }
-.buy-btn-wrapper {
-    display: flex;
-    justify-content: start;
-	align-items: center;
-	align-content: space-between;
-    h4 {
-        margin: 0 1.5rem 0 0;
-        line-height: normal;
-        &:after {
-            content: ":";
-        }
+.circle-img-wrapper {
+    // small images next to archive lists
+    border-radius: 50%;
+    width: 106px;
+    height: 106px;
+    overflow: hidden;
+    float: left;
+    border: 3px solid #666;
+    img {
+        width: 160px;
+        max-width: 160px;
     }
-    h5 {
-        margin-right: 1rem;
+    @include breakpoint(beta) {
+        margin-left: -128px;
+        margin-top: -2px;
     }
 }
-.post-guide .buy-btn-wrapper {
-    margin-top: 4rem;
-    justify-content: center;
-}
-.detail .post-guide {
-    h3 {
-        @include fontsize(27);
-        margin: 4rem 0 .5rem 0;
-        & + p {
-            margin-top: 0;
-        }
+//}}}
+//************** header, dateline and expanding map **************{{{
+.post-header {
+    @include constrain_narrow;
+    color: #555;
+    padding-bottom: 2.6rem;
+    margin-bottom: 2.6rem;
+    border-bottom: 1px solid #efefef;
+    text-align: center;
+    @include breakpoint(beta) {
+        text-align: left;
     }
 }
-//### PAGE NAVIGATION ###
-.nav-wrapper {
-    @include constrain_narrow();
-    border-bottom: 3px double #efefef;
+.post-linewrapper {
+    border-top: 1px solid #efefef;
 }
-#page-navigation {
-    margin: 2em auto;
+.post-linewrapper, .post-linewrapper h3 {
+    color: lighten($secondary-link-color, 15);
+    margin-top: 1rem;
+    padding-top: 1rem;
+    display: inline-block;
+    @include smcaps;
+    @include fancy_sans;
+    @include fontsize(14);
+    font-weight: 600;
     text-align: center;
-    display: table;
-    ul {
-        list-style-type: none;
-        margin: 0 auto;
-        width: 100%;
-        text-align: center;
-        padding: 0;
+    a {
+        color: lighten($secondary-link-color, 15);
     }
-    li {
-        margin: 6px auto;
-        clear: both;
-        line-height: 24px;
-        text-align: center;
+    time {
+        color: $secondary-link-color
     }
-    span {
-        @include fancy_sans;
-        @include fontsize(14);
-        min-width: 70px;
-        display: block;
-        text-align: right;
-        margin-right: 10px;
-        float: left;
+    @include breakpoint(beta) {
+        text-align: left;
     }
-    a {
-        display: block;
-        float: left;
-        font-family: $fancy_serif;
+}
+.post-linewrapper h3 {
+    display: inline;
+}
+.post-source {
+    @include smcaps;
+    @include fancy_sans;
+    @include fontsize(14);
+    font-weight: 600;
+    margin: 0;
+}
+.map {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+}
+#detail-map-canvas {
+    height: 400px;
+    width: 98vw;
+    position: relative;
+    left: 49%;
+    right: 49%;
+    margin-left: -48vw;
+    margin-right: -49vw;
+}
+.lttr .post-header, .lttr .post-linewrapper, .lttr .post-linewrapper h3 {
+    text-align: center;
+}
+.post-title {
+    letter-spacing: -1px;
+    margin-bottom: .25rem;
+}
+.post-subtitle {
+    @include fontsize(22);
+    font-style: italic;
+    line-height: 1.25;
+    margin-top: 0;
+    margin-bottom: 0;
+    text-align: center;
+    @include breakpoint(beta) {
         text-align: left;
-        font-style: italic;
-        color: $brown;
-        text-decoration: none;
     }
 }
-
-.article-afterward {
-    @extend %clearfix;
+//}}}
+//************** post detail *************************************{{{
+.post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) {
     @include constrain_narrow;
-    padding-bottom: 2rem;
-    .article-card-mini {
-        margin-bottom: 0
-    }
-    .hedtinycaps {
-        display: inline-block;
-        margin-bottom: 2.5rem;
-        border-bottom: 2px solid #efefef;
+}
+.post-body .picwide, .post-body .cluster {
+    @include constrain_wide;
+}
+.post-article {
+    h3  {
+        @include fancy_sans;
+        @include fontsize(26);
+        font-weight: bold;
     }
-    @include breakpoint(gamma) {
-        @include constrain(960px);
-    }
-}
-.related-bottom {
-    @extend %clearfix;
-    &:after {
-        display: block;
-        content: '';
-        @include constrain_narrow;
-        height: 30px;
-        border-bottom: 3px double #efefef;
-    }
-}
-.article-card-list {
-    padding: 0 !important;
-    margin: 0 !important;
-    list-style-type: none !important;
-    margin: 0 auto !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(20);
-        text-align: center;
-        line-height: 1.2;
-        margin: 0;
+    h4, h3 {
+        margin: 3rem 0 0 0;
+        line-height: 1.4;
     }
-    .post-subtitle {
-        @include fontsize(18);
-        text-align: center;
-        font-family: $fancy_serif;
-        font-style: italic;
-        font-weight: normal;
-        margin: .25rem auto 0;
+    h4+p, h3+p {
+        margin-top: .125rem;
     }
-    .post-summary, .post-date{
-        text-align: center;
-        display: inline-block;
-        line-height: 0.6 !important;
-        color: #b6b6b6;
+    h5 {
+        @include fancy_sans;
+        @include fontsize(20);
     }
-    @include breakpoint(omega) {
-        margin: 0 auto;
-        max-width: 70%;
-        margin-bottom: 0;
+    ul {
+        @include fontsize(22);
+        list-style: circle;
+        margin-left: 2.5em;
+        list-style-position: outside;
+        margin-bottom: 2.4em;
     }
+}
+.picwide {
     @include breakpoint(alpha) {
-        max-width: 50%;
     }
-    @include breakpoint(beta) {
-        max-width: 47%;
-        float: left;
-        margin-right: 1rem;
-        margin-bottom: 1.5rem;
-    }
-    @include breakpoint(gamma) {
-        max-width: 230px;
-        float: left;
-        margin-right: .5rem;
+}
+.picwide img {
+    max-width: 98%;
+    @include breakpoint(alpha) {
+        max-width: 100%;
     }
 }
-.post-mini-image {
-    max-height: 220px;
-    overflow: hidden;
-    @include breakpoint(beta) {
-        margin-bottom: 1rem;
+p + .picwide {
+    margin-top: 1.75rem;
+    @include breakpoint(alpha) {
+        margin-top: 2.6rem;
     }
-    img {
-        margin-top: -20%;
+}
+.row-2 {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+    * > {
+        margin-left: 5px;
     }
 }
-
-
+//}}}
+//************** post footer *************************************{{{
 .entry-footer {
-    @extend %clearfix;
     @include constrain_narrow;
+    border-top: 3px double #efefef;
     border-bottom: 3px double #efefef;
-    margin-top: 2em;
-    text-align: left;
+    margin-top: 3rem;
+    padding: 2rem;
     h3 {
+        font-weight: 600;
         @include smcaps;
         @include fontsize(16);
     }
-    h3 + ul {
+    ul {
         padding: 0;
-    }
-    li {
-        margin: .25em 0;
+        font-size: 96%;
         list-style-type: none;
+        ul {
+            list-style-type: disc;
+            padding-left: 2rem;
+            li {
+                color: $secondary-link-color;
+            }
+        }
     }
-    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;
+    @include breakpoint(gamma) {
+        display: flex;
+        flex-direction: row;
+        ul {
+            display: flex;
+            flex-direction: column;
+            font-size: 92%;
+        }
     }
-    a {
-        text-decoration: none;
-        color: lighten($body_font_color, 20);
+}
+//}}}
+//************** next/previous / you might also / footnotes ******{{{
+//}}}
+//************** homepage banner and other special elements*******{{{
+.homepage-section-header {
+    @include fontsize(28);
+    @include fancy_sans;
+}
+.banner {
+    .post-image {
+        position: relative;
+        max-height: 900px;
+        overflow: hidden;
     }
-    #wildlife li ul li {  
-        color: lighten($body_font_color, 40);
-        a {
-            color: lighten($body_font_color, 10);
+
+    @include breakpoint(beta) {
+        figcaption {
+            position: absolute;
+            margin: 0;
+            bottom: 0;
+            width: 100%;
+            z-index: 100;
+            background: rgba(0,0,0,0.6);
         }
     }
-    @include breakpoint(beta) {
-        padding-bottom: 2rem;
-        #wildlife {  
-            max-width: 55%;
-            float: left;
-            margin-right: 1.2rem;
+    .large-top-image {
+        position: relative;
+        max-height: 900px;
+        overflow: hidden;
+        max-width: 100%;
+        img {
+            margin: 0;
         }
-        #recommended-reading{
-            ul { 
-                list-style-type: none;
-            }
+        @include breakpoint(beta) {
             img {
-                max-width: 180px;
+                margin-top: -120px;
             }
         }
     }
-    aside {
-        @extend %clearfix;
-    }
 }
-#field_notes {
+.hero-text-wrapper {
+    text-align: center;
+    margin-bottom: 1rem;
+    .post-title {
+        @include fontsize(36);
+    }
     @include breakpoint(beta) {
-        max-width: 33%;
-        float: left;
-        margin-top: .15em;
-        margin-left: 7em;
+        color: white;
+        .post-title {
+            @include fontsize(42);
+            margin-bottom: .5rem;
+        }
+        .post-subtitle, .post-date, .post-location {
+            text-align: center;
+            a {
+                text-decoration: none;
+                @include fontsize(14);
+                padding: 0;
+                border: none;
+            }
+        }
     }
-    li:before {
-      content: "\2022";
-      margin-right: .35rem;
-      color: $body_font_light;
+    .post-date {
+        display: none;
     }
-}
-.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;
+    .post-linewrapper {
+        border-color: #6a6a6a;
+        text-align: center;
+        margin-top: .25rem;
+        padding-top: .25rem;
     }
-    hr {display: none;}
-    ol {
-        padding-left: 1em;
-        @include breakpoint(alpha) {
-            margin-left: 1em;
-        }
+    .btn {
+        color: white;
+        text-align: center;
+        margin: .5rem auto;
     }
 }
-sup {
-    line-height: 1;
-    .footnote-ref {
-        padding: 4px 3px;
-        
+.homepage-bio {
+    margin: 3rem auto;
+    @include constrain_wide;
+    @include breakpoint(alpha) {
+        margin: 6rem auto;
     }
 }
-
-//### Figments ###
-.downloads {
-    list-style-type: none;
-}
-
-// ### Books ###
-.book {
-    &:after {
-        display: block;
-        content: '';
-        height: 30px;
-        border-bottom: 3px solid #efefef;
-        width: 200px;
-        margin: 0 auto 3rem auto;
-        padding-left: 30px;
-    }
-}
-.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: ":";
+.homepage-map-img {
+    @include breakpoint(alpha) {
+        float: left;
+        width: 350px;
+        margin-right: 2rem;
     }
 }
-.thoughts, .highlights, .meta-cover, .dis {
-    @include constrain_narrow;
-    font-family: $fancy_serif;
-    text-align: left;
-    p {
-        max-width: 100%;
+.homepage-next {
+    margin-top: 3rem;
+    @include constrain_wide;
+    h5  {
+        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;
+        }
     }
 }
-.book-cover-wrapper {
-    @include constrain_wide;
-    img {
+// About page
+#about-luxagraf .circle-pic {
+    margin: 0 auto;
+    display: block;
+    @include breakpoint(gamma) {
         float: left;
-        max-width: 20rem;
+        margin-left: -250px;
     }
 }
-.thoughts {
-    margin-top: 4rem;
-    p:first-of-type {
-        margin-top: 0;
-    }
+.circle-pic {
+    border-radius: 50%;
+    border: 3px solid #000;
 }
-.thoughts h5, .highlights h4 {
-    font-weight: 500;
-    letter-spacing: 1px;
-    margin: 3em 0 .5em 0;
-    @include fancy_sans;
-    @include smcaps;
-    @include fontsize(14);
+//}}}
+//A few Mailing list specific styles
+.large-top-image{
+    background: #f7f7f7;
+    img {
+        max-width: 100%;
+        margin: 4rem 0;
+    }
 }
-.highlights div:first-of-type p:first-of-type {
-    margin-top: 0;
+.list-hed{
+    @include fontsize(32);
 }
-.book-highlight p:last-of-type {
+.list-subhed {
+    @include fontsize(26);
+    font-style: italic;
     margin-bottom: 0;
+
 }
-.book p:last-of-type, .highlights div:first-of-type p:last-of-type{
-    margin-top: 8px;
-}
-.highlink {
-    @include fontsize(20);
-    margin-right: .5rem;
-    float: left;
-    line-height: 1.6;
-    text-decoration: none;
-    color: lighten($body_font_color, 60);
-    @include breakpoint(alpha) {
-        margin-top: 1px;
-    }
-    &:visited {
-        color: lighten($body_font_color, 60);
-    }
-}
-.foot {
-    margin-top: 16px;
-    @include fancy_sans;
-    @include fontsize(16);
-}
-.dis {
-    @include fontsize(16);
-    text-align: center;
+//
+.section {
+    margin-top: 6rem;
 }
+
diff --git a/design/sass/_fonts.scss b/design/sass/_fonts.scss
index 1ae40f8..e69de29 100644
--- a/design/sass/_fonts.scss
+++ b/design/sass/_fonts.scss
@@ -1,43 +0,0 @@
-@font-face {
-    font-family: 'carrois_gothicregular';
-    src: url('/media/fonts/carroisgothic-regular-webfont.eot');
-    src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'),
-         url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'mffweb';
-    src: url('/media/fonts/ffmpb.woff2') format('woff2');
-    src: url('/media/fonts/ffmpb.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'mffweb';
-    src: url('/media/fonts/ffmbi.woff2') format('woff2');
-    src: url('/media/fonts/ffmbi.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'mffnweb';
-    src: url('/media/fonts/ffmn.woff2') format('woff2');
-    src: url('/media/fonts/ffmn.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'mffnbweb';
-    src: url('/media/fonts/ffmn.woff2') format('woff2');
-    src: url('/media/fonts/ffmn.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
index 08c9942..9e20f8b 100644
--- a/design/sass/_footer.scss
+++ b/design/sass/_footer.scss
@@ -1,83 +1,43 @@
-footer {
-    margin-top: 5em;
-    @include breakpoint(gamma) {
-        max-width: 960;
-    }
-    &:before {
-        @include breakpoint(beta) {
-            @include faded_line_after;
-            margin-bottom: 1.2em;
-        }
-    }
-    .footer-nav {
-        list-style-type: none !important;
-        margin-left: 0 !important;
-        border-top: 1px $brown dotted;
-        border-bottom: 1px $brown dotted;
-        padding: .5rem 0;
-        @include breakpoint(beta) {
-            border: none;
-        }
-    }
-    li {
-        display: inline;
-        margin: 0 .25em;
-        &:after {
-            content: "\00b7";
-            color: #999999;
-            padding-left: 0.75em;
-        }
-        a {
-            color: $secondary-link-color;
-            text-decoration: none;
-        }
-        ul { display:inline;}
-    }
-    li:last-of-type {
-        margin-right: 0;
-        &:after {
-            content: " ";
-        }
-    }
-    p {
-        @include fontsize(10);
-        text-align: center;
-        margin-top: 1.5em;
-        margin-bottom: 1.5em;
-    }
-}
-.black footer, .dark footer {
-    &:before {
-        @include light_faded_line_after;
-    }
-    a {
-    color: $body_font_light;
+.page-footer {
+    margin: 0 auto;
+    border-top: 1px #f3efef solid;
+    margin-top: 5rem;
+    //smcaps
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 13px;
+    font-size: .8125rem;
+    line-height: 1.2;
+    font-weight: 600;
+    text-align: center;
 }
+.page-footer ul {
+    margin: 1.5rem 0 .5rem 0;
+    list-style-type: none;
+    padding: 0;
 }
-.donate-btn {
-    display: inline-block;
-    margin-left: .5rem;
-    input[type="submit"] {
-        background: url("img/pp_donate.gif") 0 0 no-repeat;
-        border: none;
-        width: 100px;
-        text-indent: -9999em;
-        line-height: 19px;
-        padding: 2px 7px 10px;
+@media screen and (min-width: 750px) {
+    .page-footer {
+        text-align: right;
+        max-width: 96%;
     }
 }
-.liberapay-btn {
-    background: url("img/lpdonate.svg") 0 0 no-repeat;
-    text-indent: -9999em;
-    display: inline-block;
-    line-height: 25px;
-    padding: 5px 7px 3px;
-    text-decoration: none;
-    width: 70px;
+//Slight adjust for full width
+@media screen and (min-width: 1440px) {
+    .page-footer {
+        max-width: 1440px;
+    }
 }
 #license {
-    @include fancy_sans;
-    @include fontsize(12);
     text-transform: none;
+    text-align: center;
     letter-spacing: normal;
+    font-size: 14px;
+    font-size: .875rem;
+    font-weight: 300;
+}
+@media screen and (min-width: 750px) {
+    #license {
+        text-align: right;
+    }
 }
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index 4e0227b..93a283d 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -1,113 +1,48 @@
 .generic-form {
     margin: 2rem 0;
     @extend %clearfix;
-    fieldset {
-        padding: 0;
-        border: none;
-        width: 100%;
-        position: relative;
-    }
-    input[type=email] {
-        width: 210px;
-        @include fontsize(18);
-        background-color: #fff;
-        border: 2px solid darken(#efefef, 10);
-        border-radius: 5px;
-        height: 2.2rem;
-        padding: 4px 4px 4px 8px;
-        margin-right: .5rem;
-        @include breakpoint(omega){
-            width: 92%;
-        }
-        @include breakpoint(alpha){
-            width: 96%;
-        }
-    }
-    label { 
-        display: block;
-        visibility: hidden;
-        width: 0;
-        height: 0;
-    }
-    .btn-hollow {
-        @include fontsize(16);
-        display: inline-block;
-        padding: 10px 15px;
-        margin-bottom: 0;
-        line-height: 20px;
-        text-align: center;
-        vertical-align: middle;
-        cursor: pointer;
-        color: #ddd;
-        border: 0;
-        border-radius: 5px;
-        font-weight: bold;
-        transition: all 0.2s ease;
-        background: $orange;
-        &:hover {
-            color: white;
-        }
-    }
 }
-.flex {
-    display: flex;
-    .btn, .btn-hollow {
-        flex-basis: 10%;
-    }
-}
-
-
-form fieldset {
-    margin: 1rem 0;
+.generic-form fieldset {
     padding: 0;
     border: none;
     width: 100%;
     position: relative;
 }
-form fieldset label {
-    position: absolute;
-    -webkit-transform: translate3d(10px, 100%);
-    -moz-transform: translate3d(10px, 100%);
-    -ms-transform: translate3d(10px, 100%);
-    -o-transform: translate3d(10px, 100%);
-    transform: translate3d(10px, 100%);
-    @include fontsize(14);
-    @include fancy_sans;
-    color: lighten($body_font_color, 25);
-    line-height: 14px;
-    top: .7rem;
-    left: .75rem;
-    z-index: 1;
+.generic-form input[type=email] {
+    width: 210px;
+    @include fontsize(18);
+    background-color: #fff;
+    border: 2px solid darken(#efefef, 10);
+    border-radius: 5px;
+    height: 2.2rem;
+    padding: 4px 4px 4px 8px;
+    margin-right: .5rem;
+    @include breakpoint(alpha){
+        width: 96%;
+    }
 }
-input, .textarea-rounded textarea {
-    border: 1px solid #dedddd;
-    border-radius: 4px;
-    padding: 2.2rem  0 .75rem .75rem;
-    width: 96%;
-    @include fontsize(24);
-    @include fancy_sans;
+.generic-form label { 
+    display: block;
+    visibility: hidden;
+    width: 0;
+    height: 0;
 }
-
-.btn {
-    @include fontsize(15);
+.btn-hollow {
+    @include fontsize(16);
     display: inline-block;
-    border-radius: 4px;
-    -webkit-appearance: none;
-    text-decoration: none;
+    padding: 10px 15px;
+    margin-bottom: 0;
+    line-height: 20px;
+    text-align: center;
+    vertical-align: middle;
     cursor: pointer;
-    background: $link_color;
-    color: #fff;
-    border: 1px solid $link_color;
-    padding: 7px 14px;
-    white-space: nowrap;
+    color: #ddd;
+    border: 0;
+    border-radius: 5px;
+    font-weight: bold;
+    transition: all 0.2s ease;
+    background: $orange;
     &:hover {
-        background: $link_color;
-        border: 1px solid $link_color;
-    }
-}
-.newsletter-subscribe {
-    margin: 3rem 0;
-    fieldset {
-        margin: 0;
+        color: white;
     }
 }
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 5030dbf..c2c1cc0 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -1,82 +1,75 @@
-html {
-    border-top: 0.25em solid $brown;
-}
-
+//font-size: 20px
+//font-size: 1.25rem
+//alpha = 720px
+//beta = 960px
+//gamma = 1170px
+//delta = 1440px
+// *************************** Basic element styles ***********************{{{
 body {
+    font-size: 20px;
+    font-size: 1.25rem;
+    font-family: $fancy_serif;
     margin: 0 auto;
     padding: 0;
-    overflow-x: hidden;
-    font:$body_p_font;
-    color: $body_font_color;
-    text-align: center;
-    background-color: transparent
+    color: #222;
+    text-align: left;
+    max-width: 96%;
+    line-height: 1.5;
 }
-ul {
-    padding: 0;
+@media screen and (min-width: 1170px) {
+    body {
+        font-size: 24px;
+        font-size: 1.5rem;
+        max-width: 100%;
+    }
 }
 // eliminate touch delay on mobile safari
 a, button, input, select, textarea, label, summary {
     touch-action: manipulation;
 }
+// links
 a {
-    color: $body_font_color;
-    -webkit-transition: all 0.1s ease;
-    -moz-transition: all 0.1s ease;
-    -ms-transition: all 0.1s ease;
+    color: #222;
     transition: all 0.1s ease;
     text-decoration-color: $orange;
-    &:hover {
-        text-decoration: none;
-    }
-    &:visited {
-        color: $body_font_color;
-    }
 }
+a:hover {
+    text-decoration: none;
+}
+a:visited {
+    color: #222;
+}
+
 p {
     text-align: left;
-    font-family: $fancy_serif;
-    @include fontsize(20);
-    @include breakpoint(alpha){
-        @include fontsize(22);
-        line-height: 1.5;
-    }
-    @include breakpoint(beta){
-        @include fontsize(24);
+}
+@media screen and (min-width: 1170px) {
+    p { 
         line-height: 1.6;
     }
 }
 time {
-    @include smcaps;
-    @include fontsize(11);
     display: block;
-    span {
-        @include fontsize(13);
-    }
 }
 abbr {
     cursor: help;
 }
 pre {
     text-align: left;
-    @include breakpoint(alpha){
-        @include fontsize(18);
-        line-height: 1.5;
-    }
 }
-object, embed, video {
+object, embed, video, img {
     max-width: 100%;
-    width: 100%;
     height: auto;
 }
 audio {
     max-width: 100%;
-    width: 100%;
 }
 blockquote {
-    @include fontsize(18);
+    font-size: 18px;
+    font-size: 1.125rem;
     display: block;
-    border-top: 4px solid lighten($body_font_light, 20);
-    border-bottom: 4px solid lighten($body_font_light, 20);
+    border-top: 4px solid #e6e6e6;
+    border-bottom: 4px solid #e6e6e6;
     margin: 3rem 0;
     position: relative;
     text-align: left;
@@ -85,183 +78,128 @@ blockquote {
       display: block;
       text-align: right;
     }
-    @include breakpoint(alpha){
-        @include fontsize(20);
-        line-height: 1.5;
-    }
-    @include breakpoint(beta){
-        @include fontsize(22);
-        line-height: 1.6;
-    }
-}
-blockquote:before {
-    @include fancy_sans;
-    @include fontsize(68);
-    content: '\201C';
-    position: absolute;
-    top: -1.35rem;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 3rem;
-    height: 2rem;
-    color: #666;
-    text-align: center;
 }
 hr {
     border: 0; 
-    height: 1px;
-    @include faded_line_after;
     margin: 3rem 0;
-}
-img {
-    max-width: 100%;
+    display: block;
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
 }
 figure {
     margin: 0;
 }
 figcaption {
-    text-align: left;
-}
-figcaption, figcaption a {
-    @include fancy_sans;
-    @include fontsize(16);
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 16px;
+    font-size: 1rem;
     text-align: left;
     line-height: 1.9;
     padding: .3rem .5rem .3rem 0;
     color: #666;
-    border-bottom: 1px lighten($body_font_light, 20) solid;
+    border-bottom: 1px #e6e6e6 solid;
     margin-bottom: 1rem;
 }
-figcaption a:visited {
+figcaption a, figcaption a:visited {
     color: #666;
 }
 h1 {
-    font-family: $headline_font_serif;
-    @include fontsize(36);
+    font-size: 48px;
+    font-size: 3rem;
     font-weight: normal;
+    margin-bottom: 0;
+    line-height: 1;
 }
 h2 {
-    font-family: $headline_font_serif;
-    @include fontsize(28);
+    font-size: 28px;
+    font-size: 1.75rem;
     font-weight: normal;
-    text-align: left;
-    @include breakpoint(gamma){
-        @include fontsize(30);
-        line-height: 1.6;
-    }
 }
 h3 {
-    font-family: $fancy_sans;
-    @include fontsize(24);
-    text-align: left;
-    @include breakpoint(gamma){
-        @include fontsize(28);
-        line-height: 1.4;
-    }
+    font-size: 24px;
+    font-size: 1.5rem;
+    font-weight: normal;
 }
 h4 {
-    @include fontsize(20);
-    text-align: left;
-    @include breakpoint(gamma){
-        @include fontsize(22);
-        line-height: 1.4;
-    }
+    font-size: 22px;
+    font-size: 1.375rem;
 }
 h5 {
-    @include fontsize(16);
-    text-align: left;
-    @include breakpoint(gamma){
-        @include fontsize(18);
-        line-height: 1.4;
-    }
+    font-size: 16px;
+    font-size: 1rem;
 }
-.subhead {
-    font-size: 26px !important;
-    font-style: italic;
-    margin-top: 0;
-    margin-bottom: 0;
+dd {
+  display: inline;
+  margin: 0;
 }
-.subhead + p {
-    margin-top: .75rem !important;
+dd:after{
+  display: block;
+  content: '';
 }
-.essay-intro .subhead + p:first-of-type {
-    margin-top: .75rem !important;
+dt{
+  display: inline-block;
 }
-//**************  Universals ************************
-.hide {
-    display: none;
+dt:after {
+    content: ":";
 }
+//**************  Global layout ************************
+.content {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 96%;
 
-.strike {
-    text-decoration: line-through;
 }
-
-.yes {
-    background: green !important;
-    color: white;
+@media screen and (min-width: 1170px) {
+    .content {
+        max-width: 100%;
+    }
 }
-
-.no {
-    background: red !important;
-    color: white;
+@media screen and (min-width: 1440px) {
+    .content {
+        max-width: 1440px;
+    }
+}
+//**************  Universals ************************
+.hide {
+    display: none;
 }
-
 .alert {
     color: red !important;
 }
-//**************  other global classes ************************
-.sans {
-    @include generic_sans;
-}
-.bl {
-    @include smcaps;
-    @include fontsize(12);
-    font-weight: 600;
-    color: $secondary-link-color;
-}
-.italic {
-    font-style: italic;
-}
 .small {
-    font-size: 90%;
-}
-.divide-after:after {
-    margin-bottom: 3em;
-    @include faded_line_after;
+    font-size: 85%;
 }
-.margin-left-none {
-    margin-left: 0 !important;
+.buy-btn {
+    font-family: mffnweb, Helvetica, sans-serif;
+    display: block;
+    padding: .5rem 1rem;
+    background: #249bd6;
+    color: white;
+    text-transform: uppercase;
+    font-size: 16px;
+    font-size: 1rem;
+    text-decoration: none;
+    margin-right: 1rem;
 }
-//****************  Page Breadcrumbs  ************************
-
-#breadcrumbs {
-    @include constrain_wide();
-    padding: 0;
-    list-style-type: none;
-    text-align: center;
-    li {
-        display: inline;
-    }
-    a {
-        color: $secondary-link-color;
-    }
-    @include breakpoint(gamma) {
-        text-align: left;
-    }
+.buy-btn-wrapper {
+    display: flex;
+    justify-content: start;
+	align-items: center;
+	align-content: space-between;
 }
-
-.black #breadcrumbs a, .dark #breadcrumbs a {
-    color: $body_font_light;
+.buy-btn-wrapper h4 {
+    margin: 0 1.5rem 0 0;
+    line-height: normal;
 }
-//************* Dark Pages *********************
-
-.dark body {
-    background: $brown;
-    color: $body_font_light
+.buy-btn-wrapper h4:after {
+    content: ":";
 }
-
-.black body {
-    background: #000;
-    color: $body_font_light
+.buy-btn-wrapper h5 {
+    margin-right: 1rem;
 }
-
+//}}}
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 87cd180..9824ddd 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -1,189 +1,120 @@
-.header-wrapper { 
-    @include breakpoint(beta) {
-        border-bottom: 1px #f3efef solid;
-    }
+///********** class for header and footer menus *********{{{
+.menu-item {
+    color: lighten($secondary_link_color, 20);
+    display: inline-block;
+    margin: 0 0.25rem;
 }
-.site-banner {
-    @extend %clearfix;
-    margin: 0 auto;
-    @include constrain_wide;
-    @include smcaps;
-    #logo {
-        a {
-            @include fontsize(32);
-            text-decoration: none;
-            display: block;
-            font-weight: 300;
-            font-family: 'carrois_gothicregular', Helvetica, sans-serif;
-            color: $brown;
-            &:before {
-                display: block;
-                content: "home-icon";
-                text-indent: -9999em;
-                background: url("logo-new-@2x-treeonly.png") center top no-repeat;
-                width: 95px;
-                height: 65px;
-                background-size: 95px;
-                background-size: 85px;
-                //if sox
-                //background: url("img/soxlogo.svg") center top no-repeat;
-                //background-size: 60px;
-                display: block;
-                margin: 5px auto 0;
-            }
-        }
-        .sitesubtitle {
-            display: block;
-            margin-top: -8px;
-            font-family: $fancy_serif;
-            font-style: italic;
-            font-weight: 300;
-            @include fontsize(12);
-        }
-    }
-    nav {
-        border-top: 1px #444444 dotted;
-        border-bottom: 1px #444444 dotted;
-        //box-shadow: 0 3px 8px 0 #e6e6e6
-        padding-left: 20px;
-        padding-right: 20px;
-        margin-right: -20px;
-        margin-left: -20px;
-        margin-top: 1em;
-        padding: 0.25em 0.5em;
-        a {
-            text-decoration: none;
-            color: lighten(#505050, 5);
-            &:visited {
-                color: lighten(#505050, 5);
-            }
-        }
-        ul {
-            @include smcaps;
-            @include fancy_sans;
-            @include fontsize(13);
-            max-width: 100%;
-            font-weight: 600;
-            margin-top: 0.5em;
-            margin-bottom: 0.5em !important;
-            padding: 0;
-            @include constrain(85%);
-        }
-        li {
-            display: inline;
-            margin: 0 0.25em;
-            color: lighten(#505050, 30);
-            &:after {
-                content: "\00b7";
-                color: #999999;
-                padding-left: 0.75em;
-            }
-            &:last-of-type {
-                margin-right: 0;
-                &:after {
-                    content: " ";
-                }
-            }
-        }
-        @include breakpoint(beta) {
-        }
-    }
-    @include breakpoint(beta) {
-        height: 90px;
-        position: relative;
-        #logo {
-            float: left;
-            position: absolute;
-            bottom: 8px;
-            text-align: left;
-            a {
-                width: 360px;
-                line-height: 2.5em;
-                &:before {
-                    display: inline-block;
-                    background-size: 102px;
-                    //if sox
-                    //background: url("img/soxlogo.svg") center bottom no-repeat;
-                    //background-size: 70px;
-                    height: 85px;
-                    width: 105px;
-                    //if sox
-                    //width: 80px;
-                    margin-right: 10px;
-                }
-            }
-            .sitesubtitle { 
-                margin-left: 116px;
-                //if sox
-                //margin-left: 90px;
-                margin-top: -30px;
-            }
-        }
-        nav {
-            float: right;
-            border: none;
-            margin: 42px 0 0 0;
-            padding: 0;
-            ul {
-                max-width: 50em;
-            }
-        }
-    }
+.menu-item:after {
+    content: "\00b7";
+    color: #9d9d9d;
+    padding-left: 0.5rem;
 }
-
-.black header h1 a, .dark header h1 a {
-    color: $body_font_light;
-    &:before {
-        background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
-        background-size: 92px;
-    }
-    @include breakpoint(gamma) {
-        &:before {
-            background-position-y: -65px;
-        }
-    }
+.menu-item:first-of-type {
+    margin-left: 0;
+}
+.menu-item:last-of-type {
+    margin-right: 0;
 }
-
-
-.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
-    color: $body_font_light;
+.menu-item:last-of-type:after {
+    content: " ";
 }
-
-
+.menu-item a, .menu-item a:visited {
+    text-decoration: none;
+    color: $secondary_link_color;
+}
+//}}}
+///********** Header Styles *****************************{{{
 .header-wrapper {
-    @extend %clearfix;
-    margin-bottom: 1em;
-    @include breakpoint(beta) {
+    padding-top: 6px;
+    margin: 0 auto;
+    //smcaps
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: mffnweb, Helvetica, sans-serif;
+    text-align: center;
+}
+.header-wrapper a {
+    text-decoration: none;
+}
+.header-wrapper ul {
+    list-style-type: none;
+    padding: 0;
+}
+.header-wrapper nav {
+    border-top: 1px #444444 dotted;
+    border-bottom: 1px #444444 dotted;
+    margin: 1rem 0;
+    padding: 0 0.5em;
+    font-weight: 600;
+    font-size: .8125rem;;
+    line-height: 1.2;
+}
+// Rules for wider Layout
+@media screen and (min-width: 750px) {
+    .header-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
         border-bottom: 1px #f3efef solid;
-        position: relative;
-    }
-    @include breakpoint(gamma) {
-        max-width: $breakpoint-gamma;
-        margin-left: auto;
-        margin-right: auto;
+        margin-top: 1.25rem;
+        max-width: 96%;
     }
-    @include breakpoint(delta) {
-        margin-top: 1.3rem; 
-        max-width: $breakpoint-delta;
+    .header-wrapper nav {
+        border: none;
+        margin-top: 1.7rem;
     }
-    @include breakpoint(epsilon) {
-        margin-top: 1.3rem; 
-        max-width: $max_width;
+}
+//Slight adjust for full width
+@media screen and (min-width: 1440px) {
+    .header-wrapper {
+        max-width: 1440px;
     }
 }
-.detail .header-wrapper, .detail #breadcrumbs {
-    transition: opacity .5s;
-    @include breakpoint(epsilon) {
-        opacity: .8;
-        &:hover {
-            opacity: 1;
-        }
+//Logo styles
+.logo-link {
+    display: block;
+    font-weight: 300;
+    font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+    color: $secondary_link_color;
+    font-size: 2rem;
+}
+.logo-link:before {
+    display: block;
+    content: "home-icon";
+    background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+    width: 95px;
+    height: 65px;
+    background-size: 95px;
+    background-size: 85px;
+    margin: 5px auto;
+    text-indent: -9999em;
+}
+@media screen and (min-width: 750px) {
+    .logo-link {
+        text-align: left;
+        margin-top: 1.25rem;
     }
+    .logo-link:before {
+        float: left;
+        height: 85px;
+        width: 105px;
+        background-size: 102px;
+        margin: -1rem 10px -4px 0;
+    }
+}
+//handle the funky text of the subtitle
+.sitesubtitle {
+    display: block;
+    margin-top: -8px;
+    margin-bottom: 10px;
+    font-family: mffweb, Georgia, 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: 300;
+    font-size: .75rem;
 }
-
-.black .header-wrapper, .dark .header-wrapper {
-    @include breakpoint(beta) {
-        border-bottom: 1px $body_font_light solid;
+@media screen and (min-width: 750px) {
+    .sitesubtitle {
+        text-align: left;
     }
 }
-
+//}}}
diff --git a/design/sass/_lttr.scss b/design/sass/_lttr.scss
index 46abc21..7f50f2a 100644
--- a/design/sass/_lttr.scss
+++ b/design/sass/_lttr.scss
@@ -1,10 +1,7 @@
-.large-top-image{
-    background: #f7f7f7;
-    img {
-        max-width: 94%;
-        margin: 4rem 0;
-    }
+.list-hed{
+    @include fontsize(32);
 }
+
 .lttr {
     @include constrain_narrow;
     margin-top: 6rem;
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 9ccd750..111c281 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -1,6 +1,5 @@
 $brown: #201a11;
 $brown: #222;
-$light: #ccc;
 $orange: #b53a04;
 $link_color: #b53a04;
 
@@ -9,57 +8,26 @@ $fancy_serif: mffweb, Georgia, 'Times New Roman', serif;
 $fancy_sans: mffnweb, Helvetica, sans-serif;
     
 
-$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
 $body_font_color: $brown;
-$body_font_light: #b3aeae;
-$secondary-link-color: #838383;
-
-$archive_p_line_height: 1.6;
-//$light;
-$narrow-beta-width: 720px;
-$narrow-max-width: 750px;
-$max_width: 1440px;
+$body_font_light: #737373;
+$secondary-link-color: #757575;
 
 @mixin smcaps {
     @include fancy_sans;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
-@mixin plain_a {
-  border: none;
-  text-decoration: none;
-  color: $body_font_color;
-}
-
 @function calc-rem($size) {
   $remsize: $size/16;
   @return #{$remsize}rem;
 }
-
 @mixin fontsize($size) {
   font-size: $size + px;
   font-size: calc-rem($size);
 }
-
-@function calc-em($target-px, $context) {
-  @return $target-px / $context * 1em;
-}
-
-@mixin img_plain {
-    padding: 0;
-    max-width: 100%;
-    background: none;
-}
-@mixin generic-sans {
-    font-family: sans-serif;
-}
 @mixin fancy-sans {
     font-family: mffnweb, Helvetica, sans-serif;
 }
-@mixin fancy-sans-bold {
-    font-family: mffnbweb, Helvetica, sans-serif;
-    font-weight: 700;
-}
 @mixin fancy-serif {
     font-family: Georgia, Palatino, serif;
 }
@@ -75,77 +43,20 @@ $max_width: 1440px;
         clear: both;
     }
 }
-
-@mixin transparent_class {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-  filter: alpha(opacity = 90);
-  opacity: 0.9;
-}
-
-@mixin faded_line_after {
-    display: block;
-    content: "";
-    margin-top: 3em;
-    height: 1px;
-    width: 100%;
-    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
-    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
-    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
-    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
-} 
-
-//for overriding the above on dark pages:
-@mixin light_faded_line_after {
-    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-} 
-
-@mixin lighter_faded_line_after {
-    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
-    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
-} 
-
-//generic constrain function
-@mixin constrain($size) {
-    max-width: $size;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 //set an element to centered, narrowish column width
 //used mostly on columns of text
 @mixin constrain_narrow() {
-    max-width: 90%;
     margin-left: auto;
     margin-right: auto;
     @include breakpoint(beta) {
-        max-width: $narrow-beta-width;
-    }
-    @include breakpoint(gamma) {
-        max-width: $narrow-max-width;
-    }
-}
-
-@mixin constrain_archive() {
-    max-width: 94%;
-    margin-left: auto;
-    margin-right: auto;
-    @include breakpoint(alpha) {
-        max-width: 380px;
-        float: left;
+        max-width: 720px;
     }
     @include breakpoint(gamma) {
-        max-width: 680px;
+        max-width: 750px;
     }
 }
-
 //set an element to centered, wideish column width
 @mixin constrain_wide() {
-    max-width: 90%;
     margin-left: auto;
     margin-right: auto;
     @include breakpoint(gamma) {
@@ -155,9 +66,8 @@ $max_width: 1440px;
         max-width: $breakpoint-delta;
     }
     @include breakpoint(epsilon) {
-        max-width: $max_width;
+        max-width: 1440px;
     }
 }
-
-
-
+@mixin blockmenuitem() {
+}
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
index 8a0eec2..3e563aa 100644
--- a/design/sass/_queries.scss
+++ b/design/sass/_queries.scss
@@ -1,23 +1,16 @@
-$breakpoint-omega: 420px; //728
-$breakpoint-alpha: 728px; //728
+$breakpoint-alpha: 750px; //728
 $breakpoint-beta: 824px; //784
 $breakpoint-gamma: 960px;
 $breakpoint-delta: 1170px;
-$breakpoint-epsilon: $max_width;
+$breakpoint-epsilon: 1440px;
 
 @mixin breakpoint($point) {
-    @if $point == "omega" {
-        @media screen and (min-width:$breakpoint-omega ){ @content; }
-    }
     @if $point == "alpha" {
         @media screen and (min-width:$breakpoint-alpha ){ @content; }
     }
     @else if $point == "beta" {
         @media screen and  (min-width: $breakpoint-beta) { @content; }
     }
-    @else if $point == "beta-2" {
-        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
-    }
     @else if $point == "gamma" {
         @media screen and (min-width: $breakpoint-gamma)  { @content; }
     }
diff --git a/design/sass/screenv10.scss b/design/sass/screenv10.scss
new file mode 100644
index 0000000..470c111
--- /dev/null
+++ b/design/sass/screenv10.scss
@@ -0,0 +1,1447 @@
+//font-size: 20px
+//font-size: 1.25rem
+//alpha = 720px
+//beta = 960px
+//gamma = 1170px
+//delta = 1440px
+//$orange = #b53a04
+//@media screen and (min-width: 1170px) 
+
+//*********** custom fonts ******************************{{{
+@font-face {
+    font-family: 'carrois_gothicregular';
+    src: url('/media/fonts/carroisgothic-regular-webfont.eot');
+    src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'),
+         url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffweb';
+    src: url('/media/fonts/ffmpb.woff2') format('woff2');
+    src: url('/media/fonts/ffmpb.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffweb';
+    src: url('/media/fonts/ffmbi.woff2') format('woff2');
+    src: url('/media/fonts/ffmbi.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffnweb';
+    src: url('/media/fonts/ffmn.woff2') format('woff2');
+    src: url('/media/fonts/ffmn.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffnbweb';
+    src: url('/media/fonts/ffmn.woff2') format('woff2');
+    src: url('/media/fonts/ffmn.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+//}}}
+//*********** Basic element styles **********************{{{
+body {
+    font-size: 20px;
+    font-size: 1.25rem;
+    font-family: mffweb, Georgia, 'Times New Roman', serif;
+    margin: 0 auto;
+    padding: 0;
+    color: #222;
+    text-align: left;
+    max-width: 96%;
+    line-height: 1.5;
+}
+@media screen and (min-width: 1170px) {
+    body {
+        font-size: 24px;
+        font-size: 1.5rem;
+        max-width: 100%;
+    }
+}
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+// links
+a {
+    color: #222;
+    transition: all 0.1s ease;
+    text-decoration-color: #b53a04;
+}
+a:hover {
+    text-decoration: none;
+}
+a:visited {
+    color: #222;
+}
+
+p {
+    text-align: left;
+}
+@media screen and (min-width: 1170px) {
+    p { 
+        line-height: 1.6;
+    }
+}
+time {
+    display: block;
+}
+abbr {
+    cursor: help;
+}
+pre {
+    text-align: left;
+}
+object, embed, video, img {
+    max-width: 100%;
+    height: auto;
+}
+audio {
+    max-width: 100%;
+}
+blockquote {
+    font-size: 18px;
+    font-size: 1.125rem;
+    display: block;
+    border-top: 4px solid #e6e6e6;
+    border-bottom: 4px solid #e6e6e6;
+    margin: 3rem 0;
+    position: relative;
+    text-align: left;
+    font-style: italic;
+    cite {
+      display: block;
+      text-align: right;
+    }
+}
+hr {
+    border: 0; 
+    margin: 3rem 0;
+    display: block;
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+}
+figure {
+    margin: 0;
+}
+figcaption {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 16px;
+    font-size: 1rem;
+    text-align: left;
+    line-height: 1.9;
+    padding: .3rem .5rem .3rem 0;
+    color: #666;
+    border-bottom: 1px #e6e6e6 solid;
+    margin-bottom: 1rem;
+}
+figcaption a, figcaption a:visited {
+    color: #666;
+}
+h1 {
+    font-size: 48px;
+    font-size: 3rem;
+    font-weight: normal;
+    margin-bottom: 0;
+    line-height: 1;
+}
+h2 {
+    font-size: 28px;
+    font-size: 1.75rem;
+    font-weight: normal;
+    margin: 0;
+}
+h3 {
+    font-size: 24px;
+    font-size: 1.5rem;
+    font-weight: normal;
+}
+h4 {
+    font-size: 22px;
+    font-size: 1.375rem;
+}
+h5 {
+    font-size: 16px;
+    font-size: 1rem;
+}
+dd {
+  display: inline;
+  margin: 0;
+}
+dd:after{
+  display: block;
+  content: '';
+}
+dt{
+  display: inline-block;
+}
+dt:after {
+    content: ":";
+}
+form fieldset {
+    margin: 1rem 0;
+    padding: 0;
+    border: none;
+    width: 100%;
+    position: relative;
+}
+form fieldset label {
+    position: absolute;
+    font-size: 14px;
+    font-size: .875rem;
+    font-family: mffnweb, Helvetica, sans-serif;
+    color: #666;
+    line-height: 14px;
+    top: .7rem;
+    left: .75rem;
+    z-index: 1;
+}
+input, .textarea-rounded textarea {
+    border: 1px solid #dedddd;
+    border-radius: 4px;
+    padding: 2.2rem  0 .75rem .75rem;
+    width: 96%;
+    font-size: 24px;
+    font-size: 1.5rem;
+    font-family: mffnweb, Helvetica, sans-serif;
+}
+
+//}}
+//*********** Global layout **************************** {{{
+.content {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 96%;
+
+}
+@media screen and (min-width: 1170px) {
+    .content {
+        max-width: 100%;
+    }
+}
+@media screen and (min-width: 1440px) {
+    .content {
+        max-width: 1440px;
+    }
+}
+@media screen and (min-width: 750px) {
+    .post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 750px;
+    }
+}
+//}}}
+//*********** Universals ******************************* {{{
+.hide {
+    display: none;
+}
+.alert {
+    color: red !important;
+}
+.small {
+    font-size: 85%;
+}
+.btn {
+    font-size: 15px;
+    font-size: .9375rem;
+    display: inline-block;
+    border-radius: 4px;
+    -webkit-appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    background: #b53a04;
+    color: #fff;
+    border: 1px solid #b53a04;
+    padding: 4px 14px;
+    white-space: nowrap;
+}
+.btn:hover {
+    background: #b53a04;
+    border: 1px solid #b53a04;
+}
+
+.flex {
+    display: flex;
+}
+.flex .btn, .flex .btn-hollow {
+    flex-basis: 10%;
+}
+.buy-btn {
+    font-family: mffnweb, Helvetica, sans-serif;
+    display: block;
+    padding: .5rem 1rem;
+    background: #249bd6;
+    color: white;
+    text-transform: uppercase;
+    font-size: 16px;
+    font-size: 1rem;
+    text-decoration: none;
+    margin-right: 1rem;
+}
+.buy-btn-wrapper {
+    display: flex;
+    justify-content: start;
+	align-items: center;
+	align-content: space-between;
+}
+.buy-btn-wrapper h4 {
+    margin: 0 1.5rem 0 0;
+    line-height: normal;
+}
+.buy-btn-wrapper h4:after {
+    content: ":";
+}
+.buy-btn-wrapper h5 {
+    margin-right: 1rem;
+}
+.hedtinycaps {
+    //smcaps
+    font-family: mffnweb, Helvetica, sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.2;
+    font-weight: 600;
+    display: inline-block;
+    margin-bottom: 2rem;
+    border-bottom: 2px solid #efefef;
+    text-align: center;
+}
+//}}}
+//*********** Header Styles *****************************{{{
+//*********** <header> wrapper **************************{{{
+.header-wrapper {
+    padding-top: 6px;
+    margin: 0 auto;
+    //smcaps
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-family: mffnweb, Helvetica, sans-serif;
+    text-align: center;
+}
+.header-wrapper a {
+    text-decoration: none;
+}
+.header-wrapper nav {
+    border-top: 1px #444444 dotted;
+    border-bottom: 1px #444444 dotted;
+    margin: 1rem 0 .5rem 0;
+    padding: 0 0 .25rem 0;
+}
+// Rules for wider Layout
+@media screen and (min-width: 750px) {
+    .header-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        border-bottom: 1px #f3efef solid;
+        margin-top: 1.25rem;
+        max-width: 96%;
+    }
+    .header-wrapper nav {
+        border: none;
+        margin-top: 1.8rem;
+    }
+}
+//Slight adjust for full width
+@media screen and (min-width: 1440px) {
+    .header-wrapper {
+        max-width: 1440px;
+    }
+}
+//}}}
+//*********** Logo styles *******************************{{{
+.logo-link {
+    display: block;
+    font-weight: 300;
+    font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+    font-size: 2rem;
+}
+.logo-link:before {
+    display: block;
+    content: "home-icon";
+    background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+    width: 95px;
+    height: 65px;
+    background-size: 95px;
+    background-size: 85px;
+    margin: 5px auto;
+    text-indent: -9999em;
+}
+@media screen and (min-width: 750px) {
+    .logo-link {
+        text-align: left;
+        margin-top: 1.25rem;
+    }
+    .logo-link:before {
+        float: left;
+        height: 85px;
+        width: 105px;
+        background-size: 102px;
+        margin: -1rem 10px -4px 0;
+    }
+}
+//}}}
+//*********** Subtitle styles *******************************{{{
+.sitesubtitle {
+    display: block;
+    margin-top: -8px;
+    margin-bottom: 10px;
+    font-family: mffweb, Georgia, 'Times New Roman', serif;
+    font-style: italic;
+    font-weight: 300;
+    font-size: .75rem;
+}
+@media screen and (min-width: 750px) {
+    .sitesubtitle {
+        text-align: left;
+    }
+}
+//}}}
+///********** class for header and footer menus *********{{{
+.nav-item, .nav-item:visited {
+    color: #757575;
+    margin: 0 0.25rem;
+    font-family: mffnweb, Helvetica, sans-serif;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: .8125rem;;
+    line-height: 1.2;
+    text-transform: uppercase;
+}
+.nav-item:after {
+    content: "\00b7";
+    color: #9d9d9d;
+    padding-left: 0.75rem;
+}
+.nav-item:last-of-type:after {
+    content: " ";
+}
+//}}}
+//}}}
+//*********** Page Breadcrumbs **************************{{{
+.breadcrumbs {
+    font-family: mffnweb, Helvetica, sans-serif;
+    margin: 0 auto;
+    text-align: center;
+}
+@media screen and (min-width: 750px) {
+    .breadcrumbs {
+        max-width: 96%;
+        text-align: left;
+    }
+}
+@media screen and (min-width: 1440px) {
+    .breadcrumbs {
+        max-width: 1440px;
+    }
+}
+.breadcrumbs .nav-item {
+    margin: 0;
+}
+.breadcrumbs .nav-item, .breadcrumbs .nav-item a {
+    color: #808080;
+    text-decoration: none;
+}
+.breadcrumbs .nav-item:after {
+    content: "\2192";
+    padding: 0;
+}
+.breadcrumbs .nav-item:last-of-type:after {
+    content: "";
+}
+//}}}
+//*********** images ************************************{{{
+.picwide img {
+    max-width: 98%;
+}
+@media screen and (min-width: 750px) {
+    .picwide img {
+        max-width: 100%;
+    }
+}
+
+p + .picwide {
+    margin-top: 1.75rem;
+}
+@media screen and (min-width: 750px) {
+    p + .picwide {
+        margin-top: 2.6rem;
+    }
+}
+
+.row-2 {
+    display: flex;
+    flex-direction: row;
+    gap: .5rem;
+}
+.row-2 > *:last-of-type {
+    margin-left: 10px;
+}
+//}}}
+//*********** archive grids *****************************{{{
+.archive-grid {
+    max-width: 96%;
+    margin-top: 2rem;
+    margin-left: auto;
+    margin-right: auto;
+    list-style-type: none;
+    padding: 0;
+}
+.archive-grid-quad {
+    //used for books and related posts in detail pages
+    list-style-type: none;
+    padding: 0;
+}
+@media screen and (min-width: 750px) {
+    .archive-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 20px;
+        row-gap: 1rem;
+    }
+    // homepage recent
+    .archive-grid-double {
+        grid-template-columns: 1fr 1fr;
+        row-gap: 1rem;
+        grid-gap: 16px;
+    }
+    .archive-grid-quad {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 15px;
+    }
+}
+@media screen and (min-width: 860px) {
+    .archive-grid-quad {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    //there's only 4 related items so override the 
+    //3-grid at breakpoint beta
+    .related .archive-grid-quad {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+@media screen and (min-width: 1170px) {
+    .archive-grid-quad, .related .archive-grid-quad {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+}
+@media screen and (min-width: 1440px) {
+    .archive-grid {
+        max-width: 1440px;
+    }
+}
+.archive-grid-single {
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+    grid-gap: 16px;
+}
+@media screen and (min-width: 750px) {
+    // get popular and recent lined up
+    // side by side on the hompage
+    .recent-popular {
+        display: flex;
+        flex-direction: row;
+        width: calc(100% + 30px);
+    }
+     .recent-popular .popular {
+            margin-left: 30px;
+     }
+}
+.archive-grid-card a {
+    text-decoration: none;
+}
+.archive-grid-card .card-smcaps a {
+    color: #747474;
+}
+.archive-grid-card-simple {
+    //container object for cards with no dek
+    line-height: 1;
+    margin-bottom: 1.4rem;
+}
+//}}}
+//*********** archive cards *****************************{{{
+.card-smcaps, .post-smcaps {
+    // formats date and location lines as small caps
+    font-family: mffnweb, Helvetica, sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #747474;
+    font-weight: bold;
+    font-size: 13px;
+    font-size: .8125rem;
+    margin: 0;
+}
+.card-hed {
+    // main headline of the card
+    font-size: 32px;
+    font-size: 2rem;
+    color: #555;
+    margin: 0;
+    line-height: 1;
+}
+.card-hed-it {
+    // italic variant of card hed
+    // used on jrnl archives
+    font-size: 26px;
+    font-size: 1.625rem;
+    line-height: 1.3;
+    font-style: italic;
+    margin: .25rem 0 .5rem;
+
+}
+.card-hed-smit {
+    // smaller italic variant of card hed
+    // used on homepage
+    font-size: 22px;
+    font-size: 1.375rem;
+    line-height: 1.3;
+    font-style: italic;
+    margin: .25rem 0 .5rem;
+
+}
+.card-hed-btm {
+    // hed with a little bottom margin
+    // used in book list
+    margin-bottom: .5rem;
+}
+.card-image-sm {
+    // smaller card image
+    // used on homepage
+    max-height: 180px;
+    overflow: hidden;
+    margin-bottom: .5rem;
+}
+.card-image-sm img {
+    margin-top: -20%;
+}
+.card-image-tiny {
+    // even smaller card image used for 
+    // related posts on detail pages
+    max-height: 120px;
+    overflow: hidden;
+    margin-bottom: .5rem;
+    img {
+        width: 100%;
+        margin-top: -20%;
+    }
+}
+.card-lede {
+    // subtitle or lede
+    font-size: 20px;
+    font-size: 1.25rem;
+    color: #747474;
+    font-style: italic;
+    line-height: 1.6;
+    margin: 0;
+}
+.card-dek {
+    // used for p test on jrnl page and elsewhere
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.6;
+    margin: 0 0 .5rem;
+}
+.card-stars {
+    // ratings on books
+    font-size: 16px;
+    font-size: 1rem;
+    display: block;
+}
+.read-in {
+    // makes read in date in books look good
+    display: block;
+}
+.circle-img-wrapper {
+    // small images next to archive lists
+    border-radius: 50%;
+    width: 106px;
+    height: 106px;
+    overflow: hidden;
+    float: left;
+    border: 3px solid #666;
+}
+@media screen and (min-width: 750px) {
+    .circle-img-wrapper {
+        margin-left: -128px;
+        margin-top: -2px;
+    }
+}
+.circle-img-wrapper img {
+        width: 160px;
+        max-width: 160px;
+}
+//}}}
+//*********** archive lists  ****************************{{{
+.archive-wrapper{
+    //page content wrapper
+}
+.archive-hed {
+    //title of an archive page
+    font-size: 38px;
+    font-size: 2.375rem;
+    line-height: 1.1;
+    margin-bottom: .5rem;
+    text-align: center;
+}
+@media screen and (min-width: 750px) {
+    .archive-hed {
+        text-align: left;
+    }
+}
+.archive-lede {
+    // second headline below the intro
+    font-size: 22px;
+    font-size: 1.375rem;
+    line-height: 1.3;
+    font-style: italic;
+    color: #999;
+    margin-top: .5rem;
+    text-align: center;
+    border-bottom: 1px solid #efefef;
+}
+@media screen and (min-width: 750px) {
+    .archive-lede {
+        text-align: left;
+        margin-bottom: 2.4rem;
+        padding-bottom: 2.4rem;
+    }
+}
+.archive-intro {
+    //text at the top of the list/card page
+    max-width: 96%;
+    margin: 3rem auto 4rem auto;
+    border-bottom: 3px double #efefef;
+    padding-bottom: 3rem;
+}
+@media screen and (min-width: 750px) {
+    .archive-intro {
+        max-width: 750px;
+    }
+}
+.archive-intro p, .archive-intro ul {
+    font-size: 20px;
+    font-size: 1.25rem;
+    line-height: 1.5;
+}
+.archive-sans {
+    // second headline below the intro
+    max-width: 96%;
+    margin: 0 auto;
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 36px;
+    font-size: 2.25rem;
+    letter-spacing: -.5px;
+}
+@media screen and (min-width: 750px) {
+    .archive-sans {
+        max-width: 750px;
+    }
+}
+.archive-list{
+    //the ul tag for archive lists
+    max-width: 96%;
+    margin: 0 auto;
+    list-style-type: none;
+    padding: 0;
+}
+@media screen and (min-width: 750px) {
+    .archive-list {
+        max-width: 750px;
+    }
+}
+.archive-list-card {
+    // the li tag within archive lists
+    // used to control spacing
+    margin-bottom: 4rem;
+}
+.archive-list-card a {
+    text-decoration: none;
+}
+.archive-list-card-sm {
+    // less spacing in lists with no images
+    // used on essay pages and src
+    margin-bottom: 1.5rem;
+}
+//}}}
+//*********** archive pagination ************************{{{
+.pagination {
+    margin: 3rem auto 0 auto;
+    font-family: sans-serif;
+    font-size: 16px;
+    font-size: 1rem;
+}
+.pagination ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+.pagination li {
+    padding: 6px;
+}
+.pagination a {
+    text-decoration: none;
+    padding: 6px;
+    color: #333;
+    border: 1px solid #333;
+}
+.pagination a:hover {
+    color: white;
+    background: #b53a04;
+}
+.pagination .prev:before {
+    content: "\2190";
+}
+.pagination .next:after{
+    content: "\2192";
+}
+.pagination-top {
+    // currently unused but adds spacing to
+    // page nav when it's at the top
+    margin: 1rem auto 3rem;
+}
+//}}}
+//*********** header, dateline and expanding map ********{{{
+.post-header {
+    margin: 0 auto 2.6rem;
+    padding-bottom: 2.6rem;
+    border-bottom: 1px solid #efefef;
+    text-align: center;
+    color: #555;
+}
+@media screen and (min-width: 750px) {
+    .post-header {
+        text-align: left;
+        max-width: 750px;
+    }
+}
+.post-dateline {
+    display: inline-block;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid #efefef;
+    font-size: 14px;
+    font-size: .875rem;
+    //smcaps
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: #747474;
+}
+.post-dateline a {
+    color: #747474;
+}
+.post-subtitle {
+    font-style: italic;
+    font-size: 22px;
+    font-size: 1.4rem;
+    line-height: 1.25;
+}
+
+.map {
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+}
+#detail-map-canvas {
+    height: 400px;
+    width: 98vw;
+    position: relative;
+    left: 49%;
+    right: 49%;
+    margin-left: -49vw;
+    margin-right: -49vw;
+}
+//}}}
+//*********** post main elements ************************{{{
+.post-article p  {
+    margin-bottom: 1.5rem;
+}
+.post-article h3  {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 26px;
+    font-size: 1.625rem;
+    font-weight: bold;
+}
+.post-article h4, h3 {
+    margin: 3rem 0 0 0;
+    line-height: 1.4;
+}
+.post-article h4+p, .post-article h3+p {
+    margin-top: .125rem;
+}
+.post-article h5 {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 20px;
+    font-size: 1.25rem;
+}
+.post-title {
+    margin-bottom: .25rem;
+}
+.post-location, .post-location a {
+    color: #adadad
+}
+//}}}
+//*********** post footer, related, footnotes ***********{{{
+.entry-footer {
+    margin: 0 auto;
+    max-width: 96%;
+    border-top: 3px double #efefef;
+    border-bottom: 3px double #efefef;
+    margin-top: 3rem;
+    padding: 2rem;
+    font-size: 90%;
+}
+@media screen and (min-width: 750px) {
+    .entry-footer {
+        max-width: 750px;
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+.entry-footer .hedtinycaps {
+    margin-bottom: 0;
+}
+.related {
+    //slightly wider column for related posts with
+    //images on most detail pages
+    margin: 0 auto;
+    max-width: 96%;
+    text-align: center;
+}
+@media screen and (min-width: 960px) {
+    .related {
+        max-width: 960px;
+    }
+}
+.related time { display: inline;}
+.related a { text-decoration: none;}
+
+.related .card-hed {
+    text-align: center;
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 20px;;
+    font-size: 1.25rem;
+    margin: 1rem auto .25rem;
+    color: #222;
+}
+.related .card-smcap {
+    text-align: center;
+    color: #999;
+}
+
+
+
+.footnote {
+    line-height: 1;
+}
+
+
+//}}}
+//*********** jrnl interpage nav ************************{{{
+.page-navigation {
+    max-width: 96%;
+    margin: 1rem auto;
+    border-bottom: 3px double #efefef;
+    padding: 1rem 0 2rem 0;
+    text-align: center;
+}
+@media screen and (min-width: 750px) {
+    .page-navigation {
+        max-width: 750px;
+    }
+}
+.page-navigation div {
+    line-height: 1;
+}
+.page-navigation .label {
+    display: inline-block;
+    font-size: 14px;
+    font-size: .875rem;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-family: mffnweb, Helvetica, sans-serif;
+    color: #838383;
+    letter-spacing: 1px;
+    text-align: right;
+    min-width: 80px;
+}
+.page-navigation a {
+    text-decoration: none;
+    font-size: 16px;
+    font-size: 1rem;
+    font-style: italic;
+}
+//}}}
+//*********** sighting and book specific tweaks *********{{{
+.center .post-header {
+    // centers the hed 
+    text-align: center;
+    color: #222;
+}
+.center .post-smcaps {
+    text-align: center;
+}
+.post-subtitle-line{
+    font-size: 22px;
+    font-size: 1.375rem;
+    text-align: center;
+    display: inline-block;
+    border-top: #333 solid 1px;
+    margin-top: 1rem;
+    padding-top: 1rem;
+}
+.list-sm {
+    font-size: 20px;
+    font-size: 1.25rem;
+}
+.book-detail .post-hed {
+    font-size: 34px;
+    font-size: 2.125rem;
+}
+.book-detail .post-subtitle-line {
+    font-style: italic;
+}
+.book-cover-wrapper {
+    float:left;
+    padding-right: .5rem;
+}
+.book-cover-wrapper img {
+    margin-left: -.5rem;
+}
+.book-metadata {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 18px;
+    font-size: 1.125rem;
+}
+.book-highlight:after {
+    display: block;
+    content: '';
+    height: 30px;
+    border-bottom: 3px solid #efefef;
+    width: 200px;
+    margin: 0 auto 3rem auto;
+    padding-left: 30px;
+}
+.book-highlight-link {
+    font-size: 20px;
+    font-size: 1.25rem;
+    margin-right: .5rem;
+    margin-left: -1.2rem;
+    float: left;
+    line-height: 1.6;
+    text-decoration: none;
+    color: #bbb;
+}
+.book-highlight-body p:last-of-type {
+    margin-bottom: 0;
+}
+.book-highlight-footer {
+    font-size: 16px;
+    font-size: 1rem;
+    display: inline;
+}
+//}}}
+//*********** src specific tweaks and code styling ******{{{
+.highlight {
+    margin: 0 auto;
+    max-width: 96%;
+    padding: 1rem;
+    margin-bottom: 1em;
+    font-size: 20px;
+    font-size: 1.25rem;
+}
+@media screen and (min-width: 1170px) {
+    .highlight {
+        max-width: 960px;
+    }
+}
+.go:before {
+    content: "$ ";
+}
+code > .comment::after {
+    display:none;
+}
+pre{
+    white-space: pre-wrap;    
+}
+//}}}
+//*********** begging buttons ***************************{{{
+.donate {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 20px;
+    font-size: 1.25rem;
+    p {
+        line-height: 1.3;
+    }
+}
+.donate-btn {
+    display: inline-block;
+    margin-left: .5rem;
+}
+.donate-btn input[type="submit"] {
+    background: url("img/pp_donate.gif") 0 0 no-repeat;
+    border: none;
+    width: 100px;
+    text-indent: -9999em;
+    line-height: 19px;
+    padding: 2px 7px 10px;
+}
+.liberapay-btn {
+    background: url("img/lpdonate.svg") 0 0 no-repeat;
+    text-indent: -9999em;
+    display: inline-block;
+    line-height: 25px;
+    padding: 2px 7px 3px;
+    text-decoration: none;
+    width: 70px;
+}
+//}}}
+//*********** Footer Styles *****************************{{{
+.page-footer {
+    margin: 0 auto;
+    border-top: 1px #f3efef solid;
+    margin-top: 5rem;
+    //smcaps
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 13px;
+    font-size: .8125rem;
+    line-height: 1.2;
+    font-weight: 600;
+    text-align: center;
+}
+.page-footer nav {
+    margin: 1.5rem 0 .5rem 0;
+}
+@media screen and (min-width: 750px) {
+    .page-footer {
+        text-align: right;
+        max-width: 96%;
+    }
+}
+//Slight adjust for full width
+@media screen and (min-width: 1440px) {
+    .page-footer {
+        max-width: 1440px;
+    }
+}
+#license {
+    text-transform: none;
+    text-align: center;
+    font-family: mffnweb, Helvetica, sans-serif;
+    letter-spacing: normal;
+    font-size: 14px;
+    font-size: .875rem;
+    font-weight: 300;
+}
+#license a {
+    text-decoration: none;
+}
+@media screen and (min-width: 750px) {
+    #license {
+        text-align: right;
+    }
+}
+//}}}
+//*********** A few Mailing list specific styles ********{{{
+.large-top-image{
+    background: #f7f7f7;
+}
+.large-top-image img {
+    max-width: 100%;
+    margin: 4rem 0;
+}
+.list-hed{
+    font-size: 32px;
+    font-size: 2rem;
+}
+.list-subhed {
+    font-size: 26px;
+    font-size: 1.625rem;
+    font-style: italic;
+    margin-bottom: 0;
+
+}
+
+.newsletter-subscribe {
+    margin: 3rem 0;
+}
+.newsletter-subscribefieldset {
+    margin: 0;
+}
+
+//
+.section {
+    margin-top: 6rem;
+}
+//}}}
+//*********** comments **********************************{{{
+.comment-wrapper {
+    margin: 0 auto;
+    max-width: 96%;
+}
+@media screen and (min-width: 750px) {
+    .comment-wrapper {
+        max-width: 750px;
+    }
+}
+.comment-card-wrapper:after {
+    display: block;
+    margin: 4rem auto;
+    content: " ";
+    height: 1px;
+    width: 96%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0));
+}
+.comment-card-hed {
+    border-bottom: 1px solid #ececec;
+    padding-bottom: .75rem;
+}
+.comment-card-commenter {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-weight: bold;
+    font-size: 22px;
+    font-size: 1.375rem;
+    display: block;
+    line-height: 1.2
+
+}
+.comment-card-image {
+    border: 2px #222 solid;
+    float: left;
+    margin-right: 1rem;
+}
+//}}}
+//*********** homepage **********************************{{{
+.homepage-section-header {
+    font-family: mffnweb, Helvetica, sans-serif;
+    font-size: 28px;
+    font-size: 1.75rem;
+}
+.banner .large-top-image {
+    position: relative;
+    max-height: 900px;
+    overflow: hidden;
+}
+.banner .large-top-image img {
+    margin: 0;
+}
+@media screen and (min-width: 750px) {
+    .banner .large-top-image img {
+        margin-top: -120px;
+    }
+}
+
+@media screen and (min-width: 750px) {
+    .banner figcaption {
+        position: absolute;
+        margin: 0;
+        bottom: 0;
+        width: 100%;
+        z-index: 100;
+        background: rgba(0,0,0,0.6);
+    }
+}
+.hero-text-wrapper {
+    font-family: mffweb, Georgia, 'Times New Roman', serif;
+    text-align: center;
+    color: white;
+    padding-bottom: 1.5rem;
+}
+.hero-text-wrapper .post-dateline {
+    border-top: 1px solid #484848;
+}
+.hero-text-wrapper .post-smcaps, .hero-text-wrapper .post-smcaps a {
+    color: #bbb;
+}
+.hero-text-wrapper .btn {
+    margin-top: 18px;
+    color: white;
+}
+.recent-popular, .homepage-bio-section, .homepage-next {
+    margin: 6rem auto;
+    max-width: 96%;
+}
+@media screen and (min-width: 1440px) {
+    .recent-popular, .homepage-bio-section, .homepage-next {
+        max-width: 1440px;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    .homepage-map-img {
+        display: block;
+        height: auto;
+        margin: 2rem 2rem auto 0;
+        min-width: 350px;
+    }
+    .homepage-bio-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+.homepage-next {
+    margin-top: 3rem;
+}
+.homepage-next h5  {
+    text-align: center;
+}
+.homepage-next a {
+    font-family: mffnweb, Helvetica, sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 14px;
+    font-size: .875rem;
+    line-height: 1.2;
+    font-weight: 600;
+    text-decoration: none;
+    padding: 12px 10px 12px;
+    border: #b53a04 1px solid;
+}
+.homepage-next a:after {
+    content: "\21E2";
+    margin-left: 4px;
+}
+.homepage-next a:hover {
+    background: #b53a04;
+    color: white;
+}
+//}}
+//*******************Leaflet Styles *********************{{{
+.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}
+
+//}}}
+//*********** print stylesheet **************************{{{
+@media print { 
+body {
+    background: white;
+    color: black;
+    max-width: 660px;
+    font-size: 11pt;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+.header-wrapper, #breadcrumbs, #page-navigation, .post-subtitle, .comment--form--wrapper, footer {
+    display: none;
+}
+.post-source { display: none;}
+.highlight {
+    background: #f7f5f5 !important;
+}
+code, pre {
+    background: #f7f5f5 !important;
+    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+}
+a {
+}
+pre {
+    background: #f7f5f5 !important;
+    padding: .5cm .25cm;
+}
+p code {
+    padding: 0 .25cm;
+}
+.cluster img, .picwide img, .picfull img {
+    width: 80%;
+    margin: 0 auto;
+    filter: grayscale(100%);
+}
+.row-2 img {
+    width: 50%;
+    margin: 0;
+    float:left;
+    filter: grayscale(100%);
+}
+.post-body p {
+    font-size: 11pt;
+}
+.post-body h3 {
+    font-size: 19pt;
+}
+.post-body h5 {
+    font-size: 14pt;
+}
+.go:before {
+    content: "$ ";
+}
+@page {
+    @bottom-right{
+        //smcaps
+        font-family: mffnweb, Helvetica, sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-size: 13px;
+        font-size: .8125rem;
+        line-height: 1.2;
+        font-weight: 600;
+        content: "Page " counter(page) " of " counter(pages);
+        font-size: 6pt;
+        color: #666;
+        width: 2cm;
+    }
+}
+main .post--body {
+    max-width: 660px;
+    margin: 0;
+}
+figure {
+    width: 100%;
+    margin: 0;
+}
+figcaption {
+    font-family: mffnweb, Helvetica, sans-serif;
+    color: #999;
+    font-size: 9pt;
+    margin-top: 0;
+}
+.post-location {
+    font-family: mffnweb, Helvetica, sans-serif;
+    color: #333;
+    font-size: 12pt;
+    a {
+        text-decoration: none;
+        display: none;
+    }
+    .region {
+        display: inline;
+        color: #333 !important;
+    }
+}
+.entry-footer, .article-afterward, .jslghtbx {
+    display: none;
+}
+}
+//}}}
diff --git a/design/sass/_archives.scss b/design/sassold/_archives.scss
index e690bf4..b5cb4af 100644
--- a/design/sass/_archives.scss
+++ b/design/sassold/_archives.scss
@@ -43,6 +43,13 @@
         text-decoration-color: $orange !important;
 
     }
+    ul {
+        padding-left: 1rem !important;
+        list-style-type: disc !important;
+    }
+    li {
+        margin-bottom: 4px !important;
+    }
 }
 .archive-list .essay-intro {
     h2 {
@@ -65,9 +72,12 @@
     vertical-align: top;
 }
 .archive-grid {
-    margin-top: 3rem;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
     @include constrain_wide; 
     display: grid;
+    margin-top: 3rem;
     @include breakpoint(alpha){
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         grid-gap: .75rem;
@@ -77,6 +87,36 @@
         grid-gap: .75rem;
     }
 }
+.archive-circle-grid {
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-gap: 4rem;
+    grid-row-gap: 3rem;
+    margin-top: 5rem;
+    img {
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        border: 6px solid #333;
+        object-fit: cover;
+    }
+}
+
+// wrapper for archive pages, makes sure there isn't a narrow col width
+.meta-archive {
+    @include constrain_wide;
+}
+.archive-intro {
+    @include constrain_narrow;
+    border-bottom: 3px double #efefef;
+    padding-bottom: 3rem;
+    margin-bottom: 4rem;
+    margin-top: 3rem;
+    ul {
+        font-family: $fancy_serif;
+        @include fontsize(24);
+    }
+}
+
 @supports (display:grid) {
   .archive-grid > article {
     width: auto;
diff --git a/design/sassold/_comments.scss b/design/sassold/_comments.scss
new file mode 100644
index 0000000..39c7930
--- /dev/null
+++ b/design/sassold/_comments.scss
@@ -0,0 +1,122 @@
+//### COMMENTS AND FORMS ###
+.comments--header {
+    @include constrain_narrow;
+    @include fancy_sans;
+    line-height: 6em;
+    @include fontsize(16);
+    font-style: italic;
+    margin-top: 2em;
+}
+.comments--wrapper {
+    @include constrain_narrow();
+    text-align: left;
+    margin-top: -2em;
+}
+.comment {
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
+    padding-top: 3rem;
+    &:first-child {
+        margin-top: none;
+    }
+    &:after {
+        @include faded_line_after;
+    }
+    &:last-child:after {
+        display: none;
+    }
+}
+.comment--head, .comment--body {
+    @include breakpoint(alpha) {
+        margin-left: 80px;
+        margin-top: -2rem;
+    }
+}
+.comment--head {
+    margin-bottom: 1em;
+}
+.comment--body {
+    margin-bottom: 3em;
+    @include fontsize(22);
+    hr {
+        width: 20%;
+        overflow: visible;
+        padding: 0;
+        border: none;
+        border-top: 2px solid #d4d4d4;
+        color: #efefef;
+        background: none;
+    }
+}
+.who {
+    @include fancy_sans;
+    @include fontsize(22);
+}
+.when {
+    @include fancy_sans;
+    @include fontsize(15);
+    color: #999;
+    margin-left: 1em;
+}
+
+.gravatar {
+    border: 2px $brown solid;
+    background: transparent;
+    max-width: 100%;
+    padding: 0;
+    float: left;
+    margin-top: 5px;
+    margin-right: 8px;
+    @include breakpoint(alpha) {
+        margin-right: 0;
+    }
+}
+
+
+.comment--form--wrapper {
+    @include constrain_narrow();
+    p {
+        font-family: $fancy_serif;
+    }
+    input[type="submit"] {
+        display: inline-block;
+        @include fancy_sans;
+        @include fontsize(14);
+        font-weight: 600;
+        width: auto;
+        text-transform: uppercase;
+        padding: 8px 12px 7px;
+    }
+    .submit {
+        @extend %clearfix;
+        display: block;
+        margin-right: 0;
+    }
+    .submit .btn {
+        float: right;
+        &:first-of-type {
+            margin-left: 5px;
+        }
+    }
+    label {
+        left: 1.2rem !important;
+    }
+}
+.comment-form-border{
+    border-top: 3px double #efefef;
+}
+.comment--form--header {
+    margin-top: 2em;
+    .hed {
+        @include fontsize(28);
+        margin: 0;
+    }
+    .subhed {
+        font-style: italic;
+        @include fontsize(20);
+        line-height: 1.25;
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+    
diff --git a/design/sassold/_details.scss b/design/sassold/_details.scss
new file mode 100644
index 0000000..53e819f
--- /dev/null
+++ b/design/sassold/_details.scss
@@ -0,0 +1,601 @@
+.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;
+}
+//### GUIDE STUFF ###
+.product-card {
+    margin: 5rem 0;
+}
+.detail .product-link {
+    a {
+        display: block;
+        padding: 1rem;
+        background: #249bd6;
+        color: white;
+        text-transform: uppercase;
+        font-size: 16px;
+        text-decoration: none;
+    }
+}
+.buy-btn {
+    @include fancy_sans;
+    display: block;
+    padding: .5rem 1rem;
+    background: #249bd6;
+    color: white;
+    text-transform: uppercase;
+    @include fontsize(16);
+    text-decoration: none;
+    margin-right: 1rem;
+}
+.buy-btn-wrapper {
+    display: flex;
+    justify-content: start;
+	align-items: center;
+	align-content: space-between;
+    h4 {
+        margin: 0 1.5rem 0 0;
+        line-height: normal;
+        &:after {
+            content: ":";
+        }
+    }
+    h5 {
+        margin-right: 1rem;
+    }
+}
+.post-guide .buy-btn-wrapper {
+    margin-top: 4rem;
+    justify-content: center;
+}
+.detail .post-guide {
+    h3 {
+        @include fontsize(27);
+        margin: 4rem 0 .5rem 0;
+        & + p {
+            margin-top: 0;
+        }
+    }
+}
+//### 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;
+    .article-card-mini {
+        margin-bottom: 0
+    }
+    .hedtinycaps {
+        display: inline-block;
+        margin-bottom: 2.5rem;
+        border-bottom: 2px solid #efefef;
+    }
+    @include breakpoint(gamma) {
+        @include constrain(960px);
+    }
+}
+.related-bottom {
+    @extend %clearfix;
+    &:after {
+        display: block;
+        content: '';
+        @include constrain_narrow;
+        height: 30px;
+        border-bottom: 3px double #efefef;
+    }
+}
+.article-card-list {
+    padding: 0 !important;
+    margin: 0 !important;
+    list-style-type: none !important;
+    margin: 0 auto !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(20);
+        text-align: center;
+        line-height: 1.2;
+        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) {
+        margin: 0 auto;
+        max-width: 70%;
+        margin-bottom: 0;
+    }
+    @include breakpoint(alpha) {
+        max-width: 50%;
+    }
+    @include breakpoint(beta) {
+        max-width: 47%;
+        float: left;
+        margin-right: 1rem;
+        margin-bottom: 1.5rem;
+    }
+    @include breakpoint(gamma) {
+        max-width: 230px;
+        float: left;
+        margin-right: .5rem;
+    }
+}
+.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 {
+    &:after {
+        display: block;
+        content: '';
+        height: 30px;
+        border-bottom: 3px solid #efefef;
+        width: 200px;
+        margin: 0 auto 3rem auto;
+        padding-left: 30px;
+    }
+}
+.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, .dis {
+    @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 {
+    margin-top: 4rem;
+    p:first-of-type {
+        margin-top: 0;
+    }
+}
+.thoughts h5, .highlights h4 {
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin: 3em 0 .5em 0;
+    @include fancy_sans;
+    @include smcaps;
+    @include fontsize(14);
+}
+.highlights div:first-of-type p:first-of-type {
+    margin-top: 0;
+}
+.book-highlight p:last-of-type {
+    margin-bottom: 0;
+}
+.book p:last-of-type, .highlights div:first-of-type p:last-of-type{
+    margin-top: 8px;
+}
+.highlink {
+    @include fontsize(20);
+    margin-right: .5rem;
+    float: left;
+    line-height: 1.6;
+    text-decoration: none;
+    color: lighten($body_font_color, 60);
+    @include breakpoint(alpha) {
+        margin-top: 1px;
+    }
+    &:visited {
+        color: lighten($body_font_color, 60);
+    }
+}
+.foot {
+    margin-top: 16px;
+    @include fancy_sans;
+    @include fontsize(16);
+}
+.dis {
+    @include fontsize(16);
+    text-align: center;
+}
diff --git a/design/sassold/_fonts.scss b/design/sassold/_fonts.scss
new file mode 100644
index 0000000..1ae40f8
--- /dev/null
+++ b/design/sassold/_fonts.scss
@@ -0,0 +1,43 @@
+@font-face {
+    font-family: 'carrois_gothicregular';
+    src: url('/media/fonts/carroisgothic-regular-webfont.eot');
+    src: url('/media/fonts/carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/media/fonts/carroisgothic-regular-webfont.woff') format('woff'),
+         url('/media/fonts/carroisgothic-regular-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffweb';
+    src: url('/media/fonts/ffmpb.woff2') format('woff2');
+    src: url('/media/fonts/ffmpb.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffweb';
+    src: url('/media/fonts/ffmbi.woff2') format('woff2');
+    src: url('/media/fonts/ffmbi.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffnweb';
+    src: url('/media/fonts/ffmn.woff2') format('woff2');
+    src: url('/media/fonts/ffmn.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'mffnbweb';
+    src: url('/media/fonts/ffmn.woff2') format('woff2');
+    src: url('/media/fonts/ffmn.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
diff --git a/design/sassold/_footer.scss b/design/sassold/_footer.scss
new file mode 100644
index 0000000..08c9942
--- /dev/null
+++ b/design/sassold/_footer.scss
@@ -0,0 +1,83 @@
+footer {
+    margin-top: 5em;
+    @include breakpoint(gamma) {
+        max-width: 960;
+    }
+    &:before {
+        @include breakpoint(beta) {
+            @include faded_line_after;
+            margin-bottom: 1.2em;
+        }
+    }
+    .footer-nav {
+        list-style-type: none !important;
+        margin-left: 0 !important;
+        border-top: 1px $brown dotted;
+        border-bottom: 1px $brown dotted;
+        padding: .5rem 0;
+        @include breakpoint(beta) {
+            border: none;
+        }
+    }
+    li {
+        display: inline;
+        margin: 0 .25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
+        a {
+            color: $secondary-link-color;
+            text-decoration: none;
+        }
+        ul { display:inline;}
+    }
+    li:last-of-type {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
+    p {
+        @include fontsize(10);
+        text-align: center;
+        margin-top: 1.5em;
+        margin-bottom: 1.5em;
+    }
+}
+.black footer, .dark footer {
+    &:before {
+        @include light_faded_line_after;
+    }
+    a {
+    color: $body_font_light;
+}
+}
+.donate-btn {
+    display: inline-block;
+    margin-left: .5rem;
+    input[type="submit"] {
+        background: url("img/pp_donate.gif") 0 0 no-repeat;
+        border: none;
+        width: 100px;
+        text-indent: -9999em;
+        line-height: 19px;
+        padding: 2px 7px 10px;
+    }
+}
+.liberapay-btn {
+    background: url("img/lpdonate.svg") 0 0 no-repeat;
+    text-indent: -9999em;
+    display: inline-block;
+    line-height: 25px;
+    padding: 5px 7px 3px;
+    text-decoration: none;
+    width: 70px;
+}
+#license {
+    @include fancy_sans;
+    @include fontsize(12);
+    text-transform: none;
+    letter-spacing: normal;
+}
diff --git a/design/sassold/_forms.scss b/design/sassold/_forms.scss
new file mode 100644
index 0000000..4e0227b
--- /dev/null
+++ b/design/sassold/_forms.scss
@@ -0,0 +1,113 @@
+.generic-form {
+    margin: 2rem 0;
+    @extend %clearfix;
+    fieldset {
+        padding: 0;
+        border: none;
+        width: 100%;
+        position: relative;
+    }
+    input[type=email] {
+        width: 210px;
+        @include fontsize(18);
+        background-color: #fff;
+        border: 2px solid darken(#efefef, 10);
+        border-radius: 5px;
+        height: 2.2rem;
+        padding: 4px 4px 4px 8px;
+        margin-right: .5rem;
+        @include breakpoint(omega){
+            width: 92%;
+        }
+        @include breakpoint(alpha){
+            width: 96%;
+        }
+    }
+    label { 
+        display: block;
+        visibility: hidden;
+        width: 0;
+        height: 0;
+    }
+    .btn-hollow {
+        @include fontsize(16);
+        display: inline-block;
+        padding: 10px 15px;
+        margin-bottom: 0;
+        line-height: 20px;
+        text-align: center;
+        vertical-align: middle;
+        cursor: pointer;
+        color: #ddd;
+        border: 0;
+        border-radius: 5px;
+        font-weight: bold;
+        transition: all 0.2s ease;
+        background: $orange;
+        &:hover {
+            color: white;
+        }
+    }
+}
+.flex {
+    display: flex;
+    .btn, .btn-hollow {
+        flex-basis: 10%;
+    }
+}
+
+
+form fieldset {
+    margin: 1rem 0;
+    padding: 0;
+    border: none;
+    width: 100%;
+    position: relative;
+}
+form fieldset label {
+    position: absolute;
+    -webkit-transform: translate3d(10px, 100%);
+    -moz-transform: translate3d(10px, 100%);
+    -ms-transform: translate3d(10px, 100%);
+    -o-transform: translate3d(10px, 100%);
+    transform: translate3d(10px, 100%);
+    @include fontsize(14);
+    @include fancy_sans;
+    color: lighten($body_font_color, 25);
+    line-height: 14px;
+    top: .7rem;
+    left: .75rem;
+    z-index: 1;
+}
+input, .textarea-rounded textarea {
+    border: 1px solid #dedddd;
+    border-radius: 4px;
+    padding: 2.2rem  0 .75rem .75rem;
+    width: 96%;
+    @include fontsize(24);
+    @include fancy_sans;
+}
+
+.btn {
+    @include fontsize(15);
+    display: inline-block;
+    border-radius: 4px;
+    -webkit-appearance: none;
+    text-decoration: none;
+    cursor: pointer;
+    background: $link_color;
+    color: #fff;
+    border: 1px solid $link_color;
+    padding: 7px 14px;
+    white-space: nowrap;
+    &:hover {
+        background: $link_color;
+        border: 1px solid $link_color;
+    }
+}
+.newsletter-subscribe {
+    margin: 3rem 0;
+    fieldset {
+        margin: 0;
+    }
+}
diff --git a/design/sassold/_global.scss b/design/sassold/_global.scss
new file mode 100644
index 0000000..5030dbf
--- /dev/null
+++ b/design/sassold/_global.scss
@@ -0,0 +1,267 @@
+html {
+    border-top: 0.25em solid $brown;
+}
+
+body {
+    margin: 0 auto;
+    padding: 0;
+    overflow-x: hidden;
+    font:$body_p_font;
+    color: $body_font_color;
+    text-align: center;
+    background-color: transparent
+}
+ul {
+    padding: 0;
+}
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+a {
+    color: $body_font_color;
+    -webkit-transition: all 0.1s ease;
+    -moz-transition: all 0.1s ease;
+    -ms-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    text-decoration-color: $orange;
+    &:hover {
+        text-decoration: none;
+    }
+    &:visited {
+        color: $body_font_color;
+    }
+}
+p {
+    text-align: left;
+    font-family: $fancy_serif;
+    @include fontsize(20);
+    @include breakpoint(alpha){
+        @include fontsize(22);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(24);
+        line-height: 1.6;
+    }
+}
+time {
+    @include smcaps;
+    @include fontsize(11);
+    display: block;
+    span {
+        @include fontsize(13);
+    }
+}
+abbr {
+    cursor: help;
+}
+pre {
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+    }
+}
+object, embed, video {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+}
+audio {
+    max-width: 100%;
+    width: 100%;
+}
+blockquote {
+    @include fontsize(18);
+    display: block;
+    border-top: 4px solid lighten($body_font_light, 20);
+    border-bottom: 4px solid lighten($body_font_light, 20);
+    margin: 3rem 0;
+    position: relative;
+    text-align: left;
+    font-style: italic;
+    cite {
+      display: block;
+      text-align: right;
+    }
+    @include breakpoint(alpha){
+        @include fontsize(20);
+        line-height: 1.5;
+    }
+    @include breakpoint(beta){
+        @include fontsize(22);
+        line-height: 1.6;
+    }
+}
+blockquote:before {
+    @include fancy_sans;
+    @include fontsize(68);
+    content: '\201C';
+    position: absolute;
+    top: -1.35rem;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3rem;
+    height: 2rem;
+    color: #666;
+    text-align: center;
+}
+hr {
+    border: 0; 
+    height: 1px;
+    @include faded_line_after;
+    margin: 3rem 0;
+}
+img {
+    max-width: 100%;
+}
+figure {
+    margin: 0;
+}
+figcaption {
+    text-align: left;
+}
+figcaption, figcaption a {
+    @include fancy_sans;
+    @include fontsize(16);
+    text-align: left;
+    line-height: 1.9;
+    padding: .3rem .5rem .3rem 0;
+    color: #666;
+    border-bottom: 1px lighten($body_font_light, 20) solid;
+    margin-bottom: 1rem;
+}
+figcaption a:visited {
+    color: #666;
+}
+h1 {
+    font-family: $headline_font_serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+h2 {
+    font-family: $headline_font_serif;
+    @include fontsize(28);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(30);
+        line-height: 1.6;
+    }
+}
+h3 {
+    font-family: $fancy_sans;
+    @include fontsize(24);
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(28);
+        line-height: 1.4;
+    }
+}
+h4 {
+    @include fontsize(20);
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(22);
+        line-height: 1.4;
+    }
+}
+h5 {
+    @include fontsize(16);
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(18);
+        line-height: 1.4;
+    }
+}
+.subhead {
+    font-size: 26px !important;
+    font-style: italic;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.subhead + p {
+    margin-top: .75rem !important;
+}
+.essay-intro .subhead + p:first-of-type {
+    margin-top: .75rem !important;
+}
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+.yes {
+    background: green !important;
+    color: white;
+}
+
+.no {
+    background: red !important;
+    color: white;
+}
+
+.alert {
+    color: red !important;
+}
+//**************  other global classes ************************
+.sans {
+    @include generic_sans;
+}
+.bl {
+    @include smcaps;
+    @include fontsize(12);
+    font-weight: 600;
+    color: $secondary-link-color;
+}
+.italic {
+    font-style: italic;
+}
+.small {
+    font-size: 90%;
+}
+.divide-after:after {
+    margin-bottom: 3em;
+    @include faded_line_after;
+}
+.margin-left-none {
+    margin-left: 0 !important;
+}
+//****************  Page Breadcrumbs  ************************
+
+#breadcrumbs {
+    @include constrain_wide();
+    padding: 0;
+    list-style-type: none;
+    text-align: center;
+    li {
+        display: inline;
+    }
+    a {
+        color: $secondary-link-color;
+    }
+    @include breakpoint(gamma) {
+        text-align: left;
+    }
+}
+
+.black #breadcrumbs a, .dark #breadcrumbs a {
+    color: $body_font_light;
+}
+//************* Dark Pages *********************
+
+.dark body {
+    background: $brown;
+    color: $body_font_light
+}
+
+.black body {
+    background: #000;
+    color: $body_font_light
+}
+
diff --git a/design/sassold/_header.scss b/design/sassold/_header.scss
new file mode 100644
index 0000000..4bba7a7
--- /dev/null
+++ b/design/sassold/_header.scss
@@ -0,0 +1,187 @@
+.header-wrapper { 
+    @include breakpoint(beta) {
+        border-bottom: 1px #f3efef solid;
+    }
+}
+.site-banner {
+    @extend %clearfix;
+    margin: 0 auto;
+    @include constrain_wide;
+    @include smcaps;
+    #logo {
+        a {
+            @include fontsize(32);
+            text-decoration: none;
+            display: block;
+            font-weight: 300;
+            font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+            color: $brown;
+            &:before {
+                display: block;
+                content: "home-icon";
+                text-indent: -9999em;
+                background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+                width: 95px;
+                height: 65px;
+                background-size: 95px;
+                background-size: 85px;
+                //if sox
+                //background: url("img/soxlogo.svg") center top no-repeat;
+                //background-size: 60px;
+                display: block;
+                margin: 5px auto 0;
+            }
+        }
+        .sitesubtitle {
+            display: block;
+            margin-top: -8px;
+            font-family: $fancy_serif;
+            font-style: italic;
+            font-weight: 300;
+            @include fontsize(12);
+        }
+    }
+    nav {
+        border-top: 1px #444444 dotted;
+        border-bottom: 1px #444444 dotted;
+        //box-shadow: 0 3px 8px 0 #e6e6e6
+        padding-left: 20px;
+        padding-right: 20px;
+        margin-right: -20px;
+        margin-left: -20px;
+        margin-top: 1em;
+        padding: 0.25em 0.5em;
+        a {
+            text-decoration: none;
+            color: lighten(#505050, 5);
+            &:visited {
+                color: lighten(#505050, 5);
+            }
+        }
+        ul {
+            @include smcaps;
+            @include fancy_sans;
+            @include fontsize(13);
+            max-width: 100%;
+            font-weight: 600;
+            margin-top: 0.5em;
+            margin-bottom: 0.5em !important;
+            padding: 0;
+            @include constrain(85%);
+        }
+        li {
+            display: inline;
+            margin: 0 0.25em;
+            color: lighten(#505050, 30);
+            &:after {
+                content: "\00b7";
+                color: #999999;
+                padding-left: 0.75em;
+            }
+            &:last-of-type {
+                margin-right: 0;
+                &:after {
+                    content: " ";
+                }
+            }
+        }
+        @include breakpoint(beta) {
+        }
+    }
+    @include breakpoint(beta) {
+        height: 90px;
+        position: relative;
+        #logo {
+            float: left;
+            text-align: left;
+            a {
+                width: 360px;
+                line-height: 2.5em;
+                &:before {
+                    display: inline-block;
+                    background-size: 102px;
+                    //if sox
+                    //background: url("img/soxlogo.svg") center bottom no-repeat;
+                    //background-size: 70px;
+                    height: 85px;
+                    width: 105px;
+                    //if sox
+                    //width: 80px;
+                    margin-right: 10px;
+                }
+            }
+            .sitesubtitle { 
+                margin-left: 116px;
+                //if sox
+                //margin-left: 90px;
+                margin-top: -30px;
+            }
+        }
+        nav {
+            float: right;
+            border: none;
+            margin: 42px 0 0 0;
+            padding: 0;
+            ul {
+                max-width: 50em;
+            }
+        }
+    }
+}
+
+.black header h1 a, .dark header h1 a {
+    color: $body_font_light;
+    &:before {
+        background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
+        background-size: 92px;
+    }
+    @include breakpoint(gamma) {
+        &:before {
+            background-position-y: -65px;
+        }
+    }
+}
+
+
+.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
+    color: $body_font_light;
+}
+
+
+.header-wrapper {
+    @extend %clearfix;
+    margin-bottom: 1em;
+    @include breakpoint(beta) {
+        border-bottom: 1px #f3efef solid;
+        position: relative;
+    }
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.3rem; 
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-top: 1.3rem; 
+        max-width: $max_width;
+    }
+}
+.detail .header-wrapper, .detail #breadcrumbs {
+    transition: opacity .5s;
+    @include breakpoint(epsilon) {
+        opacity: .8;
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+    @include breakpoint(beta) {
+        border-bottom: 1px $body_font_light solid;
+    }
+}
+
diff --git a/design/sass/_images.scss b/design/sassold/_images.scss
index 4c0951c..4c0951c 100644
--- a/design/sass/_images.scss
+++ b/design/sassold/_images.scss
diff --git a/design/sassold/_leaflet.scss b/design/sassold/_leaflet.scss
new file mode 100644
index 0000000..b65ffb8
--- /dev/null
+++ b/design/sassold/_leaflet.scss
@@ -0,0 +1 @@
+.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}
diff --git a/design/sassold/_lttr.scss b/design/sassold/_lttr.scss
new file mode 100644
index 0000000..ea59eec
--- /dev/null
+++ b/design/sassold/_lttr.scss
@@ -0,0 +1,63 @@
+.large-top-image {
+    background: #f7f7f7;
+    img {
+        max-width: 100%;
+        margin: 4rem 0;
+    }
+}
+.lttr {
+    @include constrain_narrow;
+    margin-top: 6rem;
+    header {
+        padding-bottom: 3rem;
+        border-bottom: 1px #f0edeb solid
+    }
+}
+.lttr-box {
+    //background: #faf7f5;
+    text-align: center;
+    padding: .5rem;
+    display: inline-block;
+    //border: 1px #e0dedc solid;
+}
+.lttr-cover {
+    margin-right: 1.2rem;
+}
+#recommended-reading {
+    .book-title {
+        @include fontsize(28);
+        font-weight: 400;
+        margin-bottom: 0;
+    }
+    h6 {
+        margin-top: 0;
+        @include fontsize(18);
+        font-weight: 400;
+    }
+}
+
+#page-navigation img {
+    width: 300px;
+    height: 160px;
+    object-fit: cover;
+}
+#page-navigation h4 {
+    text-align: center;
+    @include fontsize(22);
+    @include fancy_sans;
+    color: #333;
+}
+#page-navigation .nav-title {
+     @include fontsize(22);
+     line-height: 1.5;
+}
+#page-navigation .photo-arrow-next {
+    text-align: left;
+}
+.page-nav-photo li {
+    display: inline-block;
+    margin: 0 0 0 3rem !important;
+    &:first-of-type {
+        margin-left: 0 !important;
+    }
+}
diff --git a/design/sass/_map.scss b/design/sassold/_map.scss
index e4bd5e4..e4bd5e4 100644
--- a/design/sass/_map.scss
+++ b/design/sassold/_map.scss
diff --git a/design/sassold/_mixins.scss b/design/sassold/_mixins.scss
new file mode 100644
index 0000000..9ccd750
--- /dev/null
+++ b/design/sassold/_mixins.scss
@@ -0,0 +1,163 @@
+$brown: #201a11;
+$brown: #222;
+$light: #ccc;
+$orange: #b53a04;
+$link_color: #b53a04;
+
+$headline_font_serif: mffweb, Georgia, 'Times New Roman', serif;
+$fancy_serif: mffweb, Georgia, 'Times New Roman', serif;
+$fancy_sans: mffnweb, Helvetica, sans-serif;
+    
+
+$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+$body_font_color: $brown;
+$body_font_light: #b3aeae;
+$secondary-link-color: #838383;
+
+$archive_p_line_height: 1.6;
+//$light;
+$narrow-beta-width: 720px;
+$narrow-max-width: 750px;
+$max_width: 1440px;
+
+@mixin smcaps {
+    @include fancy_sans;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+@mixin plain_a {
+  border: none;
+  text-decoration: none;
+  color: $body_font_color;
+}
+
+@function calc-rem($size) {
+  $remsize: $size/16;
+  @return #{$remsize}rem;
+}
+
+@mixin fontsize($size) {
+  font-size: $size + px;
+  font-size: calc-rem($size);
+}
+
+@function calc-em($target-px, $context) {
+  @return $target-px / $context * 1em;
+}
+
+@mixin img_plain {
+    padding: 0;
+    max-width: 100%;
+    background: none;
+}
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+@mixin fancy-sans {
+    font-family: mffnweb, Helvetica, sans-serif;
+}
+@mixin fancy-sans-bold {
+    font-family: mffnbweb, Helvetica, sans-serif;
+    font-weight: 700;
+}
+@mixin fancy-serif {
+    font-family: Georgia, Palatino, serif;
+}
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin transparent_class {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity = 90);
+  opacity: 0.9;
+}
+
+@mixin faded_line_after {
+    display: block;
+    content: "";
+    margin-top: 3em;
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+} 
+
+//for overriding the above on dark pages:
+@mixin light_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: $narrow-beta-width;
+    }
+    @include breakpoint(gamma) {
+        max-width: $narrow-max-width;
+    }
+}
+
+@mixin constrain_archive() {
+    max-width: 94%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(alpha) {
+        max-width: 380px;
+        float: left;
+    }
+    @include breakpoint(gamma) {
+        max-width: 680px;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
+
+
+
diff --git a/design/sass/_notes.scss b/design/sassold/_notes.scss
index 1386751..1386751 100644
--- a/design/sass/_notes.scss
+++ b/design/sassold/_notes.scss
diff --git a/design/sass/_pagination.scss b/design/sassold/_pagination.scss
index 7dc9cb1..7dc9cb1 100644
--- a/design/sass/_pagination.scss
+++ b/design/sassold/_pagination.scss
diff --git a/design/sass/_photos.scss b/design/sassold/_photos.scss
index 95d6c45..95d6c45 100644
--- a/design/sass/_photos.scss
+++ b/design/sassold/_photos.scss
diff --git a/design/sassold/_queries.scss b/design/sassold/_queries.scss
new file mode 100644
index 0000000..8a0eec2
--- /dev/null
+++ b/design/sassold/_queries.scss
@@ -0,0 +1,30 @@
+$breakpoint-omega: 420px; //728
+$breakpoint-alpha: 728px; //728
+$breakpoint-beta: 824px; //784
+$breakpoint-gamma: 960px;
+$breakpoint-delta: 1170px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+    @if $point == "omega" {
+        @media screen and (min-width:$breakpoint-omega ){ @content; }
+    }
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @content; }
+    }
+    @else if $point == "beta-2" {
+        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
+    }
+    @else if $point == "gamma" {
+        @media screen and (min-width: $breakpoint-gamma)  { @content; }
+    }
+    @else if $point == "delta" {
+        @media screen and (min-width: $breakpoint-delta)  { @content; }
+    }
+    @else if $point == "epsilon" {
+        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
+    }
+}
diff --git a/design/sass/_resume.scss b/design/sassold/_resume.scss
index 41fc8e1..41fc8e1 100644
--- a/design/sass/_resume.scss
+++ b/design/sassold/_resume.scss
diff --git a/design/sass/_src.scss b/design/sassold/_src.scss
index 1896979..1896979 100644
--- a/design/sass/_src.scss
+++ b/design/sassold/_src.scss
diff --git a/design/sass/_typography.scss b/design/sassold/_typography.scss
index b4e3793..b4e3793 100644
--- a/design/sass/_typography.scss
+++ b/design/sassold/_typography.scss
diff --git a/design/sassold/pdf_gen.scss b/design/sassold/pdf_gen.scss
new file mode 100644
index 0000000..b5072cd
--- /dev/null
+++ b/design/sassold/pdf_gen.scss
@@ -0,0 +1,140 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+
+body {
+    @include fancy_sans;
+}
+.subhead {
+    text-align: right;
+    width: 4cm;
+    float: right;
+    @extend %clearfix;
+    > * {
+        margin: 0;
+        font-weight: 400;
+    }
+}
+header, .row {
+    @extend %clearfix;
+    margin-top: 1cm;
+}
+.print-box {
+    width: 49%;
+    float: left;
+    > * {
+        padding: .125cm;
+        margin: 0;
+    }
+    h5, h4 {
+        @include smcaps;
+        font-size: 9pt;
+        line-height: .5;
+    }
+    h4 {
+        margin-top: -10pt;
+        font-size: 16pt;
+        line-height: 1.5;
+    }
+}
+#bill-from, #bill {
+    border: none;
+    width: 47%;
+    float: left;
+}
+#bill {
+    float: right;
+}
+#bill-to {
+    width: 47%;
+    float: right;
+}
+table {
+  font-family: "Open Sans", sans-serif;
+  line-height: 1;
+  border: 1px solid #ccc;
+  border-collapse: collapse;
+  margin: 1cm 0 0 0;
+  padding: 0;
+  width: 625px;
+}
+table caption {
+    text-align: left;
+    font-size: 10pt;
+    text-transform: uppercase;
+    font-weight: 600;
+    margin: .5em 0 .75em;
+    &:after {
+        content: ":";
+    }
+}
+table tr {
+  border: 1px solid #ddd;
+  padding: .35em;
+}
+table tr.odd { background: #f6f4f4cc;}
+thead {display: table-header-group; } 
+table th,
+table td {
+  padding: .625em .625em .625em 1em;
+  text-align: left;
+  border-right: 1px solid #ddd;
+}
+table td {
+    white-space: -o-pre-wrap; 
+    word-wrap: break-word;
+    white-space: pre-wrap; 
+    white-space: -moz-pre-wrap; 
+    white-space: -pre-wrap; 
+    font-size: 8pt;
+}
+table th {
+  font-size: 7pt;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  background: #f6f4f4;
+}
+
+table .blank {
+    white-space: normal; 
+    td {
+        padding: 1rem;
+        white-space: normal; 
+        &:last-of-type {
+            text-align: left;
+            min-width: 1.2cm;
+        }
+    }
+}
+table .right {
+    text-align: right;
+}
+table th a {
+    text-decoration: none;
+    position: relative;
+    span {
+        position: absolute;
+        top: -2px;
+    }
+}
+.smfield { min-width: 50pt;}
+table .total { font-size: 9pt !important;}
+.thanks {
+    margin-top: 40pt;
+    font-family: times, times new roman;
+    font-style: italic;
+    font-weight: 300;
+    text-align: center;
+    color: #333;
+}
+
+@page {
+    @bottom-right{
+        @include fancy_sans;
+        @include smcaps;
+        content: "Page " counter(page) " of " counter(pages);
+        font-size: 6pt;
+        color: #666;
+        width: 2cm;
+    }
+}
+
diff --git a/design/sassold/print.scss b/design/sassold/print.scss
new file mode 100644
index 0000000..666a797
--- /dev/null
+++ b/design/sassold/print.scss
@@ -0,0 +1,95 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+
+body {
+    font-family: $fancy_serif;
+    background: white;
+    color: black;
+    max-width: 660px;
+    font-size: 11pt;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+.header-wrapper, #breadcrumbs, #page-navigation, .post-subtitle, .comment--form--wrapper, footer {
+    display: none;
+}
+.post-source { display: none;}
+.highlight {
+    background: #f7f5f5 !important;
+}
+code, pre {
+    background: #f7f5f5 !important;
+    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+}
+a {
+}
+pre {
+    background: #f7f5f5 !important;
+    padding: .5cm .25cm;
+}
+p code {
+    padding: 0 .25cm;
+}
+.cluster img, .picwide img, .picfull img {
+    width: 80%;
+    margin: 0 auto;
+    filter: grayscale(100%);
+}
+.row-2 img {
+    width: 50%;
+    margin: 0;
+    float:left;
+    filter: grayscale(100%);
+}
+.post-body p {
+    font-size: 11pt;
+}
+.post-body h3 {
+    font-size: 19pt;
+}
+.post-body h5 {
+    font-size: 14pt;
+}
+.go:before {
+    content: "$ ";
+}
+@page {
+    @bottom-right{
+        @include fancy_sans;
+        @include smcaps;
+        content: "Page " counter(page) " of " counter(pages);
+        font-size: 6pt;
+        color: #666;
+        width: 2cm;
+    }
+}
+main .post--body {
+    max-width: 660px;
+    margin: 0;
+}
+figure {
+    width: 100%;
+    margin: 0;
+}
+figcaption {
+    @include fancy_sans;
+    color: #999;
+    font-size: 9pt;
+    margin-top: 0;
+}
+.post-location {
+    @include fancy_sans;
+    color: #333;
+    font-size: 12pt;
+    a {
+        text-decoration: none;
+        display: none;
+    }
+    .region {
+        display: inline;
+        color: #333 !important;
+    }
+}
+.entry-footer, .article-afterward, .jslghtbx {
+    display: none;
+}
diff --git a/design/sassold/screenv10.scss b/design/sassold/screenv10.scss
new file mode 100644
index 0000000..dadd9ee
--- /dev/null
+++ b/design/sassold/screenv10.scss
@@ -0,0 +1,24 @@
+@import "_fonts.scss";
+
+
+
+
+//@import "_mixins.scss";
+//@import "_queries.scss";
+//@import "_global.scss";
+//@import "_pagination.scss";
+//@import "_header.scss";
+//@import "_images.scss";
+//@import "_comments.scss";
+//@import "_leaflet.scss";
+//@import "_map.scss";
+//@import "_forms.scss";
+//@import "_typography.scss";
+//@import "_lttr.scss";
+//@import "_footer.scss";
+//@import "_archives.scss";
+//@import "_details.scss";
+//@import "_src.scss";
+//@import "_resume.scss";
+//@import "_photos.scss";
+//@import "_notes.scss";
diff --git a/design/sass/screenv9.scss b/design/sassold/screenv9.scss
index e8666ca..e8666ca 100644
--- a/design/sass/screenv9.scss
+++ b/design/sassold/screenv9.scss
diff --git a/design/templates/base.html b/design/templates/base.html
index 06313ea..3b9dd31 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -14,7 +14,7 @@
           title="Luxagraf RSS feed"
           href="https://luxagraf.net/rss/">
     {%block stylesheet%}<link rel="stylesheet" 
-                              href="/media/screenv9.css{%comment%}?{% now "u" %}{%endcomment%}" 
+                              href="/media/screenv10.css{%comment%}?{% now "u" %}{%endcomment%}" 
           media="screen">{%endblock%}
     <link rel="stylesheet" href="/media/print.css" media="print" title="print" />
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
@@ -23,56 +23,33 @@
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
-    <div class="wrapper" id="wrapper">
-    <div class="header-wrapper">
-        <header class="site-banner">
-            <div id="logo">
-                <a href="/" title="Home">Luxagraf</a>
-                <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span>
-            </div>
-            <nav>
-                <ul>
-                    <li><a href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a> &amp; <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a></li>
-                    <!--<li><a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a></li>-->
-                    <li><a href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a></li>
-                    <li><a href="/about" title="About Scott">About</a></li>
-                </ul>
-            </nav>
-        </header>
-    </div>
+    <header class="header-wrapper">
+        <div id="logo">
+            <a class="logo-link" href="/" title="Home">Luxagraf</a>
+            <span class="sitesubtitle">{%block sitesubtitle %}Walk Slowly{% endblock%}</span>
+        </div>
+        <nav>
+            <a class="nav-item" href="{% url "jrnl:list" %}" title="Stories of life on the road.">Jrnl</a>{%comment%} &amp; <a href="{% url "fieldnotes:list" %}" title="Short stories, snapshots of daily life on the road.">Field Notes</a>
+            <a href="{% url "guides:guide-base" %}" title="Advice, Tools, Tips and Tricks for Full Time Van or RV Life.">Guides</a>{%endcomment%}
+            <a class="nav-item" href="/newsletter/friends/" title="The 'friends of a long year' newsletter">newsletter</a>
+            <a class="nav-item" href="/about" title="About Scott">About</a>
+        </nav>
+    </header>
     {% block breadcrumbs %}{% endblock %}
     {% block primary %}{% endblock %}
     {% block extrabody %}{% endblock %}
     {% block disclaimer %}{% endblock%}
-    <footer class="bl">
-        <ul class="footer-nav">
-            <li><a href="/blogroll" title="Sites that inspire us">Blogroll</a></li>
-            <li><a href="/contact/" title="contact luxagraf">Contact</a></li>
-            <li>Follow Along:
-                <ul>
-                    <li><a href="/jrnl/feed.xml" title="RSS feed">RSS</a></li>
-                    <li><a href="/newsletter/friends/" title="Luxagraf Email Updates">Email</a></li>
-                    <li><a href="https://www.instagram.com/luxagraf" rel="me" title="luxagraf on Instagram">Instagram</a></li>
-                </ul>
-        </ul>
-         <div class="support">Support luxagraf: 
-             <div class="donate-btn">
-                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-                <input type="hidden" name="cmd" value="_s-xclick">
-                <input type="hidden" name="hosted_button_id" value="HYJFZQSBGJ8QQ">
-                <input type="submit" name="submit" title="Donate to luxagraf via PayPal">
-                </form>
-            </div>
-            <div class="donate-btn">
-                <a class="liberapay-btn" href="https://liberapay.com/luxagraf/donate"><span>Donate</span></a>
-            </div>
-        </div>
+    <footer class="page-footer">
+        <nav>
+            <a class="nav-item" href="/blogroll" title="Sites that inspire us">Blogroll</a>
+            <a class="nav-item" href="/contact/" title="contact luxagraf">Contact</a>
+            <a class="nav-item" href="/jrnl/feed.xml" title="RSS feed">RSS</a>
+        </nav>
         <p id="license">
             &copy; 2003-{% now "Y" %} 
             <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>.
         </p>
     </footer>
-    </div>
     {% block js %}{% endblock%}
 <script>
 <!--
diff --git a/design/templates/comments/list.html b/design/templates/comments/list.html
index d3fe441..c320209 100644
--- a/design/templates/comments/list.html
+++ b/design/templates/comments/list.html
@@ -4,18 +4,18 @@
 {% load bleach_tags %}
 {% load nofollow %}
 {% load comments %}
-        <div class="comments--wrapper">
+        <div class="comment-wrapper">
         {% for comment in comment_list %}
-        <div id="comment-{{ comment.id }}" class="comment">
+        <div id="comment-{{ comment.id }}" class="comment-card-wrapper">
+		    <div class="comment-card-hed">
             <noscript class="datahashloader" data-hash="{% if comment.user_email == "sng@luxagraf.net" %}d64f4854965b2b1c3ecafee4b2a66fac{%else%}{%if comment.user_email|has_grav %}{%gravatar_hash comment.user_email %}{%else%}default{%endif%}{%endif%}"> 
-                <img class="gravatar" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" />
+                <img class="comment-card-image" {% if comment.user_email == "sng@luxagraf.net" %}src="https://images.luxagraf.net/gravcache/d64f4854965b2b1c3ecafee4b2a66fac.jpg" {%else%} {%if comment.user_email|has_grav %} src="https://images.luxagraf.net/gravcache/{%gravatar_hash comment.email %}.jpg"{%else%}src="https://images.luxagraf.net/gravcache/default.jpg"{%endif%}{%endif%} alt="gravatar icon for {{comment.name}}" />
             </noscript>
-		    <div class="comment--head">
-                <span class="who"><b>{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</b></span>
-                <span class="when">{{comment.submit_date|date:"F d, Y"}} at  {{comment.submit_date|date:"g:i a"}}</span>
+                <span class="comment-card-commenter">{%if comment.url %}<a href="{{comment.url}}" rel="nofollow" target="_blank">{{comment.name}}</a>{% else %}{{comment.name}}{%endif%}</span>
+                <span class="card-smcaps">{{comment.submit_date|date:"F d, Y"}} at  {{comment.submit_date|date:"g:i a"}}</span>
             </div>
 		
-            <div class="comment--body">
+            <div class="comment-card-body">
                 {% if comment.user_email == "sng@luxagraf.net" %}
                 {{comment.comment|markdown|safe|smartypants}}
                 {%else%}
diff --git a/design/templates/lib/breadcrumbs.html b/design/templates/lib/breadcrumbs.html
index ac47d5a..025b8e4 100644
--- a/design/templates/lib/breadcrumbs.html
+++ b/design/templates/lib/breadcrumbs.html
@@ -1,14 +1,14 @@
-<ol class="bl" id="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
-        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a> &rarr;
+<nav class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
+        <span class="nav-item" itemprop="item">
+            <a href="/" itemprop="name">Home</a>
             <meta itemprop="position" content="1" />
-        </li>
-        {% for crumb in breadcrumbs %}<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-            {% if crumb_url %}
-            <a href="{{crumb_url}}" itemprop="item"><span itemprop="name">{{crumb}}</span></a>
-            <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />{% else %}
-            <span itemprop="item">
-                <span itemprop="name">{{crumb}}</span>
-            </span>{% endif %}
+        </span>{% for crumb in breadcrumbs %}{% if crumb_url %}
+        <span class="nav-item" itemprop="item">
+            <a href="{{crumb_url}}" itemprop="name">{{crumb}}</a>
+            <meta itemprop="position" content="{{ forloop.counter|add:"+1" }}" />
+        </span>{% else %}
+        <span class="nav-item" itemprop="item">
+            <span itemprop="name">{{crumb}}</span>
             <meta itemprop="position" content="2" />
-        </li>{%endfor%}
-    </ol>
+        </span>{% endif %}{%endfor%}
+    </nav>
diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html
index 48b9b99..9e7d8a3 100644
--- a/design/templates/lib/img_cluster.html
+++ b/design/templates/lib/img_cluster.html
@@ -1,8 +1,6 @@
-{% load get_image_by_size %}
-{% if caption or exif %}
-<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
+{% load get_image_by_size %}{% if caption or exif %}<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
     <a href="{%get_image_by_size image "original"%}" title="view larger image {% if image.photo_credit_source%}(photo by {{image.photo_credit_source}}){%endif%}">
-        <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
+        <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}"></a>
 {% if caption or exif %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if caption or exif %}</figcaption>
 </figure>
 {% endif %}
diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html
index 2c9b17b..9f98020 100644
--- a/design/templates/lib/img_picwide.html
+++ b/design/templates/lib/img_picwide.html
@@ -1,6 +1,4 @@
-{% load get_image_by_size %}
-{% if caption or exif or image.photo_credit_source %}
-<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%}
+{% load get_image_by_size %}{% if caption or exif or image.photo_credit_source %}<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%}
         <a itemscope itemtype="http://schema.org/ImageObject" href="{%get_image_by_size image "original"%} " title="view larger image">
             <img class="u-photo" itemprop="contentUrl" sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.slug %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.slug %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}>
         </a>
diff --git a/design/templates/locations/location_detail.html b/design/templates/locationsold/location_detail.html
index 334fa9d..334fa9d 100644
--- a/design/templates/locations/location_detail.html
+++ b/design/templates/locationsold/location_detail.html
diff --git a/design/templates/sightings/ap_detail.html b/design/templates/sightings/ap_detail.html
deleted file mode 100644
index 154d7ac..0000000
--- a/design/templates/sightings/ap_detail.html
+++ /dev/null
@@ -1,59 +0,0 @@
-{% extends 'base.html' %}
-{% load typogrify_tags %}
-{% block extrahead %}
-<style>
-#detail-map-canvas { height: 100%;}
-</style>
-{% endblock %}
-{% block bodyid %}class="detail"{%endblock%}
-{% block primary %}
-<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-        <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Dialogues</span></a>&rarr; </li>
-        <li><span itemprop="title">{{object.common_name}}</span></li>
-    </ul>
-
-    <main>
-    <article>
-        <header class="tight">
-            <h1 class="hed">{{object.common_name}}</h1>
-            <h2 class="post-subtitle">{{object.scientific_name}}</h2>
-            <h3 class="post-subtitle-segundo">Family {{object.apclass.scientific_name}} ({{object.apclass}})</h3>
-        </header>
-    {% if object.body_html %}{{object.body_html|safe|smartypants|widont}}{%endif%}
-{%if recording %}
-<div class="audio-figure">
-<audio autoplay="autoplay" controls="controls">  
-    <source src="/media/{{recording.audio}}" />  
-</audio> 
-<small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
-</div>
-{%endif%}
- {% if field_notes %}
-            <h4>Field Notes</h4>{% for note in field_notes %}
-                {{note.body_html|safe|smartypants}}
-                <p class="post-subtitle-segundo">&ndash; <a href="{{note.sighting.location.get_absolute_url}}">{{note.sighting.location}}</a>, {{note.sighting.location.comma_name}}, {{note.sighting.pub_date|date:"M Y"}}</p>
-                <hr />
-        {%endfor%}
-{%endif%}
-        <h5>Seen at</h5>
-        <ul>{%for sight in sighting %}
-            <li><a href="{{sight.location.get_absolute_url}}">{{sight.location}}</a>, {{sight.location.comma_name}}, {{sight.pub_date|date:"M Y"}}</li>
-        {%endfor%}
-</article>
-</main>
-{% endblock %}
-
-{% block js %}
-<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
-<script src="/media/js/detail.js"></script>
-<script type="text/javascript">
-sightings = [];
-{% for s in sighting %}
-sightings.push(['{{s.latitude}}', '{{s.longitude}}']);
-{% endfor %}
-window.onload = function() {
-    createBirdMap({% for s in sighting %}{% if forloop.first %}{{s.latitude}},{{s.longitude}}{%endif%}{%endfor%}, 5, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}, sightings); return false;
-}
-</script>
-{% endblock %}
diff --git a/design/templates/sightings/sighting_list.html b/design/templates/sightings/sighting_list.html
deleted file mode 100644
index d778cb2..0000000
--- a/design/templates/sightings/sighting_list.html
+++ /dev/null
@@ -1,40 +0,0 @@
-{% extends 'base.html' %}
-{% load typogrify_tags %}
-{% load pagination_tags %}
-
-{% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
-{% block metadescription %}Plants and Animals  seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %}
-{%block bodyid%}id="birds" class="archive"{%endblock%}
-
-
-{% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
-        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
-        {% if region %}{%if region.name == 'United States'%} <li><a href="{% url 'sightings:list' %}" title="See all" itemprop="url"><span itemprop="title">Plants and Animals</span></a> &rarr;</li>
-        <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Plants and Animals</span></a> &rarr;</li> 
-        <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>dialogues</li>{%endif%}
-    </ul>
-    <main class="archive-grid dialogue-grid">{% autopaginate object_list 24%}
-    <h1 class="hide">Plants and Animals seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %}
-    <article class="archive-card">{% if object.ap.image%} 
-            <div class="post--image">
-                <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
-                    {% include "lib/img_archive.html" with image=object.ap.image  %}
-                </a>
-            </div>{% endif %}
-            <h2 class="post-title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h2>
-            <time class="post-date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <div class="post-summary">
-                <span class="post-location" itemscope itemtype="http://schema.org/Place">
-                    {% if object.country_name == "United States" %}<span class="p-locality locality">{{object.location_name|smartypants|safe}}</span>, {{object.state_name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location_name|smartypants|safe}}</span>, {{object.country_name}}</a>{%endif%}
-                </span>
-            </div>
-        </article> {% endfor %}
-    </main>
-    <nav aria-label="page navigation" class="pagination">
-    {% paginate %}
-    </nav>
-{% endblock %}
-
-
-
-{% block js %}<script src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endblock%}