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

21 files changed, 2193 insertions, 2988 deletions

diff --git a/design/sass/_archives.scss b/design/sass/_archives.scss
deleted file mode 100644
index e690bf4..0000000
--- a/design/sass/_archives.scss
+++ /dev/null
@@ -1,485 +0,0 @@
-// container for archive intros
-.intro {
-    @include constrain_wide;
-    font-family: $fancy_serif;
-    @include breakpoint(alpha){
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
-        grid-gap: 1rem;
-    }
-
-}
-// container for archive intros, narrow version
-.intro-narrow {
-    margin-top: 3rem;
-    @include constrain_narrow;
-    p {
-        @include fontsize(18);
-        font-style: italic;
-    }
-    h1 {
-        @include smcaps;
-        @include fontsize(18);
-        text-align: left;
-    }
-}
-.essay-intro {
-    font-family: $fancy_serif;
-    border-bottom: 3px double #efefef;
-    padding-bottom: 3rem;
-    margin-bottom: 4rem;
-    margin-top: 3rem;
-    p {
-        font-style: normal !important;
-        @include fontsize(18);
-        line-height: 1.5;
-        margin-top: 1.2rem !important;
-        &:first-of-type {
-            margin-top: 2rem !important;
-        }
-    }
-    a {
-        text-decoration: underline !important;
-        text-decoration-color: $orange !important;
-
-    }
-}
-.archive-list .essay-intro {
-    h2 {
-        @include fontsize(38);
-    }
-    h3 {
-        font-weight: normal;
-        font-family: $fancy_serif;
-        @include fontsize(22);
-        line-height: 1.3;
-        font-style: italic; 
-        margin: .25rem 0 .5rem;
-    }
-}
-
-// container for archive grid items
-.archive-grid > article {
-    display: inline-block;
-    width: 32%;
-    vertical-align: top;
-}
-.archive-grid {
-    margin-top: 3rem;
-    @include constrain_wide; 
-    display: grid;
-    @include breakpoint(alpha){
-        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-        grid-gap: .75rem;
-    }
-    @include breakpoint(beta){
-        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
-        grid-gap: .75rem;
-    }
-}
-@supports (display:grid) {
-  .archive-grid > article {
-    width: auto;
-  }
-}
-// body class archive, article header (usually inherits h2)
-.archive .post-title {
-    font-family: $fancy_serif;
-    @include fontsize(26);
-    line-height: 1.3;
-    font-style: italic; 
-    margin: .25rem 0 .5rem;
-    a {
-        @include plain_a;
-    }
-}
-// the date and location are small caps 
-.post-date, .post-location {
-    @include smcaps;
-    @include fontsize(14);
-    font-weight: bold;
-    color: $secondary-link-color;
-    line-height: 1.2;
-    text-align: left;
-    margin: 0;
-}
-// slightly larger summary than a p in this context
-.post-summary {
-    font-family: $fancy_serif;
-    @include fontsize(16);
-    line-height: $archive_p_line_height;
-    margin-top: .25rem;
-    text-align: left;
-    margin: 0;
-}
-
-.archive-list {
-    @include constrain_narrow;
-    @include breakpoint(epsilon) {
-    }
-    text-align: left;
-    h1, .list-title {
-        text-align: left;
-        @include fancy_sans;
-        @include fontsize(36);
-        font-weight: normal;
-    }
-    span {
-        @include fancy_sans;
-        @include smcaps;
-        @include fontsize(13);
-        font-weight: bold;
-        color: #999;
-    }
-    ul {
-        padding: 0;
-        list-style-type: none;
-    }
-    a { 
-        text-decoration: none;
-        color: lighten($body_font_color, 20);
-        &:hover {
-            color: $link_color;
-        }
-    }
-    h2, .list-hed {
-        font-family: $fancy_serif;
-        @include fontsize(32);
-        margin: 0;
-        line-height: 1.1;
-    }
-    p {
-        margin: 0;
-        @include fontsize(20);
-        font-style: italic;
-    }
-}
-// Specific pages vary slightly
-// Books
-.book-grid {
-    @include breakpoint(alpha){
-        grid-gap: .75rem;
-        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    }
-    @include breakpoint(beta){
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        grid-gap: .75rem;
-    }
-    .post-title {
-        @include fontsize(22);
-        line-height: 1.4;
-    }
-    .author {
-        @include smcaps;
-        font-weight: 400;
-        @include fontsize(12);
-        text-align: left;
-        margin: 0;
-
-    }
-    .book-stars {
-        display: block;
-    }
-}
-
-// Dialogues
-.dialogue-grid {
-    .post-title {
-        font-style: normal; 
-        @include fontsize(22);
-        line-height: 1.4;
-    }
-}
-// Dialogues, used in both archives and details
-.sci {
-    font-style: italic; 
-    @include fontsize(18);
-}
-
-// figments 
-.figments-grid {
-    @include constrain_narrow;
-    .post-title {
-        font-style: normal; 
-        @include smcaps;
-        @include fontsize(16);
-    }
-}
-
-.wide-list {
-    @include constrain_wide;
-    li {
-        margin-top: 3rem;
-        margin-left: auto;
-        margin-top: auto;
-        margin-bottom: 3rem;
-    }
-    .permalink {
-        display: block;
-        text-align: left;
-    }
-    @include breakpoint(gamma) {
-        li {
-            display: flex;
-        }
-        .wide-wrapper {
-            flex: 3 0px;
-            order: 1;
-        }
-        a {
-            flex: 3 0px;
-            order: 2;
-        }
-        .post-summary p {
-            @include fontsize(20);
-            margin-right: 2rem;
-        }
-    }
-}
-
-// Homepage
-#home .header-wrapper {
-    margin-bottom: 0;
-}
-#home section {
-    @extend %clearfix;
-    @include constrain_wide;
-    margin-top: 4rem;
-    margin-bottom: 4rem;
-}
-#home section.bio-short {
-    margin-bottom: 6rem;
-}
-@include breakpoint(gamma){
-    .recent {
-        max-width: 64%;
-        width: 64%;
-        float: left;
-    }
-    .popular {
-        max-width: 33%;
-        width: 33%;
-        float: right;
-    }
-}
-.banner {
-    margin-top: 0 !important;
-    .post-image {
-        overflow: hidden;
-    }
-    article {
-        position: relative;
-    }
-    figcaption {
-        border: none;
-        position: absolute;
-        margin: 0;
-        bottom: 0;
-        width: 100%;
-        z-index: 100;
-        background: rgb(0, 0, 0);
-        background: rgba(0, 0, 0, 0.6);
-        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-        filter: alpha(opacity = 70);
-        font-weight: 400;
-        padding-bottom: 30px;
-        time {display: none;}
-        .btn {text-decoration: none; color: white; }
-    }
-    .hero-text-wrapper {
-        padding-top: 2rem;
-        @include constrain_narrow;
-        color: white;
-        font-family: $headline_font_serif;
-        .post-title, .post-subtitle { 
-            font-style: normal;
-            text-align: center;
-            margin-bottom: 0;
-            line-height: 1;
-            @include fontsize(42);
-            a {
-                color: white;
-                margin-bottom: 0;
-                text-decoration: none;
-            }
-        }
-        .post-subtitle {
-            font-style: italic;
-            @include fontsize(22);
-            margin-top: .45rem;
-        }
-        .post-location {
-            text-align: center;
-            margin-top: .5rem;
-            .h-adr {
-                border-top: 1px solid #423f3f;
-                display: inline-block;
-                padding-top: .5rem;
-            }
-        }
-        a { 
-            color: $body_font_light;
-            padding: 0;
-            border: none;
-            margin-top: .5rem;
-        }
-    }
-    .post-location {
-        color: lighten($body_font_light, 5);
-        a {
-            color: lighten($body_font_light, 5);
-            text-decoration: none;
-            @include fontsize(14);
-        }
-    }
-    .btn {
-        @include smcaps;
-        @include fancy_sans_bold;
-        @include fontsize(12);
-        line-height: 1;
-        display: block;
-        max-width: 40px;
-        background: #b53a04;
-        border-radius: .35em;
-        color: white !important;
-        text-transform: uppercase;
-        padding: .85rem 1rem .55rem !important;
-        text-align: center;
-        margin: 2rem auto 0;
-    }
-    @include breakpoint(gamma){
-        max-height: 900px;
-        .post-image {
-            max-height: 900px;
-        }
-    }
-}
-.homepage-map-img {
-    width: 350px;
-    height: auto;
-    @include breakpoint(delta){
-        float: left;
-        width: 350px;
-        margin-right: 2rem;
-    }
-
-}
-@include breakpoint(delta){
-    .addafter {
-        &:after {
-            content: "to the left";
-        }
-    }
-    .subcontent {
-        border: 0;
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-    }
-}
-.homepage-section-header {
-    @include fancy_sans;
-    @include fontsize(24);
-    font-weight: normal;
-    text-align: left;
-    @include breakpoint(gamma){
-        @include fontsize(28);
-        line-height: 1.4;
-    }
-}
-.popular, .recent {
-    .post-title {
-        @include fontsize(22);
-        font-weight: 400;
-    }
-    .post-image {
-        max-height: 12rem;
-        overflow: hidden;
-    }
-    img {
-        margin-top: -20%
-    }
-}
-.homepage-next {
-    margin: 0 auto;
-    text-align: center;
-    a {
-        @include fontsize(14);
-        @include fancy_sans;
-        @include smcaps;
-        font-weight: 500;
-        text-decoration: none;
-        padding: 12px 10px 12px;
-        border: $link_color 1px solid;
-        &:after {
-            content: "\21E2";
-            margin-left: 4px;
-        }
-        &:hover {
-            background: $link_color;
-            color: white;
-        }
-    }
-}
-.essay-archive {
-    li {
-        margin-bottom: 2.8rem;
-    }
-}
-.fancy-archive-list {
-    li { margin-bottom: 3.8rem }
-    p {
-        line-height: 1.3;
-        margin-top: 4px;
-    }
-    h3.p-summary {
-        @include fontsize(22);
-        font-weight: 300;
-        font-family: $headline_font_serif;
-        font-style: italic;
-        margin-top: .25rem;
-        margin-bottom: .25rem;
-        line-height: 1.2;
-    }
-    .post-location {
-        margin: .5rem 0 0 0;
-    }
-}
-.circle-img-wrapper {
-    width: 106px;
-    height: 106px;
-    float: left;
-    overflow: hidden;
-    border-radius: 50%;
-    border: 3px solid #666;
-    margin-right: .5rem;
-    img {
-        width: 160px;
-        max-width: 160px;
-    }
-    @include breakpoint(gamma) {
-        margin-left: -128px;
-        margin-top: -4px;
-    }
-}
-
-
-//.note-pad-top {
-//    //make a field note among photos stand out more
-//    margin-top: 8rem !important;
-//    &:before {
-//        margin-bottom: 2.5rem; 
-//        @include faded_line_after;
-//    }
-//}
-//.note-pad-bottom {
-//    //make a field note among photos stand out more
-//    margin-bottom: 8rem !important;
-//    &:after {
-//        @include faded_line_after;
-//    }
-//}
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/_images.scss b/design/sass/_images.scss
deleted file mode 100644
index 4c0951c..0000000
--- a/design/sass/_images.scss
+++ /dev/null
@@ -1,108 +0,0 @@
-.picwide, .cluster, .pic960 {
-    // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
-    // I tweaked it slightly to add a bit of margin
-    width: 96vw;
-    position: relative;
-    left: 48%;
-    right: 48%;
-    margin-left: -46vw;
-    margin-right: -50vw;
-    @include breakpoint(gamma) {
-        width: 98vw;
-        position: relative;
-        left: 49%;
-        right: 49%;
-        margin-left: -48.5vw;
-        margin-right: -49.5vw;
-    }
-    @include breakpoint(epsilon) {
-        $margin: ($max_width - $narrow-max-width)/2;
-        left: 0; 
-        right: 0;
-        margin-left: -$margin;
-        margin-left: -$margin;
-        width: $max_width;
-        max-width: $max_width;
-    }
-}
-p + .picwide {
-    margin-top: 1.5rem;
-    @include breakpoint(gamma) {
-        margin-top: 2.5rem;
-    }
-}
-.picwide + p {
-    margin-top: 1.5rem;
-    @include breakpoint(gamma) {
-        margin-top: 2.5rem;
-    }
-}
-.cluster {
-    margin-bottom: 2rem;
-    margin-top: 2rem;
-    @include breakpoint(gamma) {
-        margin-bottom: 3rem;
-        margin-top: 3rem;
-    }
-}
-.row-2 {
-    a:last-of-type img, figure:last-of-type {
-        width: 49.7%;
-        float: right;
-        margin-right: 0;
-    }
-    a:first-of-type img, figure:first-of-type {
-        width: 49.7%;
-        float: left;
-        margin-left: 0;
-        margin-right: .3%;
-    }
-    &:after {
-        @extend %clearfix;
-        margin-bottom: .5rem;
-    }
-    figure:first-of-type img, figure:last-of-type img {
-        width: 100%;
-    }
-}
-.banner .post-image {
-    // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
-    // I tweaked it slightly to add a bit of margin
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}
-.embed-wrapper {
-    @include constrain_wide;
-    @include breakpoint(gamma) {
-        margin-left: auto;
-        margin-right: auto;
-    }
-}
-.embed-container { 
-    position: relative; 
-    padding-bottom: 56.25%; 
-    height: 0; 
-    overflow: hidden; 
-    max-width: 100%; 
-    margin-bottom: 1rem;
-} 
-.embed-container iframe, .embed-container object, .embed-container embed { 
-    position: absolute; 
-    top: 0; 
-    left: 0; 
-    width: 100%; 
-    height: 100%; 
-}
-.pullpicleft {
-    display: none;
-    @include breakpoint(gamma) {
-        display: block;
-        float: left;
-        margin-left: -280px;
-        padding-right: 1rem;
-    }
-}
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/_map.scss b/design/sass/_map.scss
deleted file mode 100644
index e4bd5e4..0000000
--- a/design/sass/_map.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.map--wrapper {
-    @include constrain_wide;
-    max-width: 99%;
-    margin-top: 2em;
-}
-#map-canvas {
-    height: 300px;
-    img { max-width: 100%; padding: 0; margin: 0; background: none;}
-    @include breakpoint(alpha) {
-        height: 400px;
-    }
-    @include breakpoint(beta) {
-        height: 500px;
-    }
-    @include breakpoint(gamma) {
-        border: 10px $brown solid;
-        width: 80%;
-        float: right;
-    }
-    @include breakpoint(delta) {
-        height: 600px;
-        width: 84%;
-    }
-}
-
-.map-legend {
-    @include constrain_wide;
-    text-align: left;
-    &:after {
-        content: " ";
-        display: table;
-        clear: both;
-    }
-    h4 {
-        font-family: sans-serif;
-        @include fontsize(14);
-        @include smcaps;
-        font-weight: bold;
-        margin: 1em 0 0.25em;
-        @include breakpoint(gamma) {
-            @include fontsize(13);
-        }
-    }
-    a { color: $body_font_color;}
-    li {
-        display: inline;
-        &:after {
-            content: ",";
-        }
-        @include breakpoint(gamma) {
-            display: block;
-            @include fontsize(13);
-            &:after {
-                content: "";
-            }
-        }
-    }
-}
-
-.infowin {
-  h4 {
-    margin: 0 0 5px 0;
-    font-weight: normal;
-  }
-  .date {
-    text-transform: uppercase;
-    font-size: 11px;
-    letter-spacing: 1px;
-  }
-  p {
-    font-size: 1em;
-  }
-}
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/_notes.scss b/design/sass/_notes.scss
deleted file mode 100644
index 1386751..0000000
--- a/design/sass/_notes.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-//****************  Notes Structure ************************
-
-.notes main, .notes--permalink main {
-    @include constrain_narrow();
-    margin-top: 1em;
-    h1 {
-        margin-bottom: 0;
-        @include fontsize(28);
-        @include breakpoint(beta) {
-            @include fontsize(28);
-            text-align: left;
-        }
-    }
-}
-.notes .h-entry, .notes--permalink .h-entry {
-    @extend %clearfix;
-    border: none;
-    padding: 0;
-    margin-top: 3em;
-    @include breakpoint(beta) {
-        margin-top: 2em;
-    }
-    &:first-of-type {
-        margin-top: 1em;
-    }
-    &:after {
-        @include faded_line_after;
-        @include breakpoint(beta) {
-            margin-top: 8.5em;
-        }
-    }
-}
-.note--title {
-    @include constrain_narrow;
-    text-align: left;
-    font-weight: 400;
-    font-size: 1.5em;
-    letter-spacing: 0px;
-    margin-bottom: .5rem !important;
-    a {
-        text-decoration: none;
-        color: $body_font_color !important;
-    }
-}
-
-.note--date {
-    @include smcaps;
-    @include fontsize(11);
-    text-align: center;
-    margin-bottom: 4px;
-    @include breakpoint(beta) {
-        float: right;
-        margin-top: 0;
-    }
-    a {
-        color: $brown;
-        text-decoration: none;
-    }
-}
-.note--date-container{
-    @extend %clearfix;
-    
-}
-.e-content {
-    @extend %clearfix;
-}
-.note--location {
-    text-align: center;
-    margin-top: 0;
-    @include breakpoint(beta) {
-        float: left;
-    }
-}
-.note--footer {
-    margin-top: 1.7em;
-    @include breakpoint(beta) {
-        margin-top: 0;
-    }
-}
-.month--divider {
-    margin-top: 2em;
-}
-.month--header {
-    @include constrain_narrow();
-    @include smcaps;
-    @include fontsize(12);
-    font-weight: normal;
-    font-family: sans-serif;
-    text-align: left;
-    margin-bottom: 3em;
-    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
-}
-.notes--permalink {
-    .h-entry {
-        margin-top: 3em;    
-        @include breakpoint(gamma) {
-            margin-top: 5em;    
-        }
-    }
-    .e-content figure.picwide { margin-left: -300px !important}
-    &:after {
-        background: none;
-    }
-    .note--title {
-        // @include fontsize(24);
-    }
-    .note--footer {
-        margin-top: 2em;
-        @include constrain_narrow();
-        @include breakpoint(beta) {
-            margin-top: 1em;
-        }
-    }
-    #page-navigation {
-        clear: both;
-        margin-top: 10em;
-    }
-}
-/*
-@include breakpoint(beta) {
-    .notes {
-      main h1 {
-        float: none;
-        margin-bottom: 1em;
-        width: 100%;
-      }
-      main {
-          @include constrain(680px);
-          margin-bottom: 5em;
-      }
-      article footer {
-        margin-top: 1em;
-      }
-      article p {
-        float: none;
-      }
-      .note--location {
-        float: left;
-      }
-      .note--date {
-        float: right;
-      }
-      .note--twitter {
-        clear: both;
-        float: right;
-        padding-top: 1em;
-      }
-      time {
-        display: inline;
-        float: right;
-      }
-    }
-
-    .permalink {
-      main {
-        margin-top: 5em;
-      }
-    }
-}
-*/
diff --git a/design/sass/_pagination.scss b/design/sass/_pagination.scss
deleted file mode 100644
index 7dc9cb1..0000000
--- a/design/sass/_pagination.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.pagination {
-    @include generic_sans;
-    margin-top: 2em;
-    margin-bottom: 2em;
-    font-weight: 400;
-    line-height: 2.3;
-    li {
-        display: inline;
-    }
-    a {
-        text-decoration: none;
-        border: 1px solid lighten($body_font_color, 30);
-        color: lighten($body_font_color, 20);
-        padding: 9px 6px 6px 6px;
-        margin-left: .25em;
-        margin-right: .25em;
-    }
-    .prev {
-        border: none;
-        &:before {
-            content: "\2190";
-        }
-    }
-    .next {
-        border: none;
-        &:after {
-            content: "\2192";
-            margin-left: .35em;
-        }
-    }
-    @include breakpoint(beta) {
-        .prev {
-            margin-right: 2em;
-        }
-        .next {
-            margin-left: 2em;
-        }
-        .current {
-            color: $link_color;
-            margin-right: .5em;
-            margin-left: .5em;
-        }
-    }
-}
diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss
deleted file mode 100644
index 95d6c45..0000000
--- a/design/sass/_photos.scss
+++ /dev/null
@@ -1,521 +0,0 @@
-// ##############################################
-// Photo Gallery pages
-// ##############################################
-
-// Add padding and create grid layout at various widths:
-.image-gallery--list {
-    @include constrain_wide;
-    margin-top: 3em;
-    li {
-        display: inline-block;
-        margin-bottom: 10px;
-    }
-}
-@include breakpoint(alpha) {
-    .first, .third {
-        padding-right: 10px;
-    }
-}
-@include breakpoint(gamma) {
-    .first, .third {
-        padding-right: 0;
-    }
-    .one {
-        padding-right: 6px;
-    }
-    .two {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-    .three {
-        padding-left: 6px;
-    }
-}
-@include breakpoint(delta) {
-    .one, .two, .three {
-        padding: 0;
-    }
-    .first {
-        padding-right: 6px;
-    }
-    .second, .third {
-        padding-left: 6px;
-        padding-right: 6px;
-    }
-    .fourth {
-        padding-left: 6px;
-    }
-}
-
-//########### GALLERY FIGURES AND CAPTIONS ################
-.image-gallery--figure {
-    position: relative;
-    margin: 0;
-    width: 280px;
-    .image-gallery--legend {
-        display: block;
-        @include transparent_class;
-        position: absolute;
-        left: 0;
-        bottom: -10px;
-        width: 272px;
-        background: $brown;
-        color: #999999;
-    }
-    h1 {
-        @include smcaps;
-        @include fontsize(13);
-        margin: 8px 0 4px 8px;
-        text-align: left;
-        color: white;
-    }
-    p {
-        @include fontsize(12);
-        margin: 8px 0 4px 8px;
-        padding-bottom: 6px;
-    }
-}
-
-.image-gallery--wrapper {
-    @include constrain_wide;
-    .figcaption {
-        background: lighten(#000, 12);
-        margin: -6px 0 0 0;
-        padding: 1em 1em .5em 1em;
-        border-radius: 0 0 0.5em 0.5em;
-        &:after {
-            content: " ";
-            display: table;
-            clear: both;
-        }
-    }
-    h6 a {
-        color: darken($body_font_light, 20); 
-        text-decoration: none;
-        font-family: sans-serif;
-    }
-    img { background: none; max-width: 100%; padding: 0;}
-}
-.directions {
-    color: darken($body_font_light, 35);
-    text-align: center;
-    @include fontsize(13);
-    margin-top: 3em;
-    display: none;
-}
-.caption { 
-    float: left;
-    font-family: sans-serif;
-    min-height: 32px;
-    padding-right: 1.5em;
-    @include breakpoint(beta) {
-        width: 50%;
-        border-right: darken($body_font_light, 45) 1px solid;
-        min-height: 55px;
-    }
-    @include breakpoint(gamma) {
-        width: 65%;
-        padding-right: 2.5em;
-    }
-    @include breakpoint(delta) {
-        width: 70%;
-    }
-}
-.figcaption--title, .figcaption--date {
-    float: left;
-    font-weight: normal;
-    line-height: 24px;
-    vertical-align: bottom;
-    margin: 0;
-    display: block;
-}
-.figcaption--title {
-    margin-right: 1em;
-}
-.figcaption--date {
-    margin-top: 2px;
-}
-.caption .map-link { 
-    @include smcaps;
-    @include fontsize(13);
-    float: right;
-    text-decoration: none;
-    padding: 7px 14px 5px;
-    background: lighten(#000, 18);
-    color: $body_font_light;
-    border-radius: 25px;
-    &:hover {
-        background: $orange;
-    }
-}
-.figcaption--desc {
-    @include fontsize(13);
-    padding-top: .5em;
-    margin-bottom: 0;
-    clear: left;
-    margin-left: 0;
-    text-align: left;
-}
-.photo-options {
-    float: right;
-    font-family: sans-serif;
-    p{
-        @include fontsize(13);
-        margin-top: 12px;
-        margin-bottom: 2px;
-        color: darken($body_font_light, 35);
-        &:first-of-type {
-            margin-top: 4px;
-        }
-    }
-    a { color: darken($body_font_light, 35);}
-}
-.photo-options, .caption .map-link {
-  display: none;
-}
-@include breakpoint(beta) {
-    .photo-options, .caption .map-link, .directions {
-        display: block;
-    }
-}
-.fig { position: relative;}
-.image-gallery--wrapper .map-container {
-    left: -3%;
-    background: url("/media/img/mapbg-black.png") no-repeat top left !important;
-    @include breakpoint(beta) {
-        left: 4%;
-    }
-    @include breakpoint(gamma) {
-        left: 22%;
-    }
-    @include breakpoint(delta) {
-        left: 34%;
-    }
-}
-
-.map-wrapper {
-    width: 400px;
-    height: 328px;
-    position: absolute;
-    bottom: 27px;
-    margin: 0px 0 0 44px;
-}
-
-.daily-figure {
-    figcaption {
-        max-width: 1432px;
-    }
-}
-
-//.figcaption {
-//  clear: both;
-//  background: #1a1713;
-//  -moz-border-radius: 0 0 0.5em 0.5em;
-//  -webkit-border-radius: 0 0 0.5em 0.5em;
-//  border-radius: 0 0 0.5em 0.5em;
-//  color: white;
-//  margin: -0.25em 0 0 0;
-//  padding: 1em 0 1em 0;
-//  z-index: 100;
-//}
-//
-//.caption {
-//  width: 100%;
-//  float: none;
-//  p {
-//    font: normal 0.75em Helvetica, Verdana, sans-serif;
-//    margin: 0.5em 0 0 0.75em;
-//    padding-bottom: 0.25em;
-//  }
-//}
-
-.circle-pic {
-    border-radius: 50%;
-    border: 3px solid #000;
-}
-#about-luxagraf .circle-pic {
-    float: left;
-    margin-left: -250px;
-}
-
-//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss
-
-/**
-*   VARS
-**/
-
-// font-sizes
-$font-size-huge: 2.8em;
-$font-size-big: 2em;
-$font-size-medium: 1.4em;
-
-$def-color-1: #FFFFFF;
-$def-color-2: #B9CED2;
-
-$border-color-1: #9C9FA5;
-
-$def-font-color: #6c7176;
-$font-color-highlight: #A99929;
-$font-color-hover-1: #C3B919;
-
-$darkblue: #3F658B;
-@mixin prefixr($var, $val) {
-  -webkit-#{$var}: $val;
-  -moz-#{$var}: $val;
-  -o-#{$var}: $val;
-  -ms-#{$var}: $val;
-  $var: $val;
-}
-
-/* IE8 Stuff */
-.jslghtbx-ie8.jslghtbx {
-  background-image: url('../img/trans-bck.png');
-  display: none;
-  &.jslghtbx-active {
-    display: block;
-  }
-  .jslghtbx-contentwrapper > img {
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-    display: block;
-  }
-  .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img {
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-  }
-}
-
-/* Main wrapper */
-.jslghtbx {
-  font-family: sans-serif;
-  overflow: auto;
-  visibility: hidden;
-  position: fixed;
-  z-index: 2;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0);
-  &.jslghtbx-active {
-    visibility: visible;
-    background-color: rgba(0, 0, 0, 0.85);
-  }
-}
-
-/* loading-animation */
-.jslghtbx-loading-animation {
-  margin-top: -60px;
-  margin-left: -60px;
-  width: 120px;
-  height: 120px;
-  top: 50%;
-  left: 50%;
-  display: none;
-  position: absolute;
-  z-index: -1;
-  & > span {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
-    margin: 5px;
-    background-color: #fff;
-    @include prefixr(transition, all .3s ease-in-out);
-    &.jslghtbx-active {
-      margin-bottom: 60px;
-    }
-  }
-}
-
-.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation {
-  display: block;
-}
-
-.jslghtbx-nooverflow {
-  overflow: hidden !important; // prevent showing of scrollbars on prev/next
-}
-
-.jslghtbx-contentwrapper {
-  margin: auto;
-  visibility: hidden;
-  & > img {
-    background: #fff;
-    padding: .5em;
-    display: none;
-    height: auto;
-    margin-left: auto;
-    margin-right: auto;
-    opacity: 0;
-  }
-}
-
-.jslghtbx-contentwrapper.jslghtbx-wrapper-active {
-  visibility: visible;
-  & > img {
-    display: block;
-    opacity: 1;
-  }
-}
-
-/* Caption */
-.jslghtbx-caption {
-  display: none;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 5px;
-  margin-bottom: 5px;
-  max-width: 450px;
-  color: #fff;
-  text-align: center;
-  font-size: .9em;
-}
-
-.jslghtbx-active .jslghtbx-caption {
-  display: inline;
-  margin-right: 1em;
-}
-
-/* Animation Stuff */
-.jslghtbx-contentwrapper.jslghtbx-animate > img {
-  opacity: 0;
-}
-
-.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
-  @include prefixr(transition, opacity .2s ease-in-out);
-}
-
-.jslghtbx-contentwrapper > img.jslghtbx-animating-next {
-  opacity: 1;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-}
-
-.jslghtbx-contentwrapper > img.jslghtbx-animating-prev {
-  opacity: 1;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-}
-
-.jslghtbx-contentwrapper > img.jslghtbx-animate-init {
-  opacity: 1;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-}
-
-.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
-  cursor: pointer;
-}
-
-/* Controls */
-.jslghtbx-close {
-  position: fixed;
-  right: 23px;
-  top: 23px;
-  margin-top: -4px;
-  font-size: 2em;
-  color: $def-color-1;
-  cursor: pointer;
-  @include prefixr(transition, all .3s ease-in-out);
-  &:hover {
-    text-shadow: 0 0 10px #fff;
-  }
-  @media screen and(max-width: 1060px) {
-    font-size: 1.5em;
-  }
-}
-
-.jslghtbx-next,
-.jslghtbx-prev {
-  display: none;
-  position: fixed;
-  top: 50%;
-  max-width: 6%;
-  max-height: 250px;
-  cursor: pointer;
-  @include prefixr(transition, all .2s ease-in-out);
-  &.jslghtbx-active {
-    display: block;
-  }
-  & > img {
-    width: 100%;
-  }
-
-}
-
-.jslghtbx-next {
-  right: .6em;
-  &.jslghtbx-no-img:hover {
-    border-left-color: #787878;
-  }
-  @media screen and(min-width: 451px) {
-    right: .6em;
-    &.jslghtbx-no-img {
-      border-top: 20px solid transparent;
-      border-bottom: 20px solid transparent;
-      border-left: 20px solid #FFF;
-    }
-  }
-  @media screen and(max-width: 600px) {
-    &.jslghtbx-no-img {
-      right: 5px;
-      padding-left: 0;
-      border-top: 60px solid transparent;
-      border-bottom: 60px solid transparent;
-      border-left: 15px solid #FFF;
-    }
-  }
-  @media screen and(max-width: 450px) {
-    right: .2em;
-    padding-left: 20px;
-  }
-}
-
-.jslghtbx-prev {
-  left: .6em;
-  &.jslghtbx-no-img:hover {
-    border-right-color: #787878;
-  }
-  @media screen and(min-width: 451px) {
-    left: .6em;
-    &.jslghtbx-no-img {
-      border-top: 20px solid transparent;
-      border-bottom: 20px solid transparent;
-      border-right: 20px solid #FFF;
-    }
-  }
-  @media screen and(max-width: 600px) {
-    &.jslghtbx-no-img {
-      left: 5px;
-      padding-right: 0;
-      border-top: 60px solid transparent;
-      border-bottom: 60px solid transparent;
-      border-right: 15px solid #FFF;
-    }
-  }
-  @media screen and(max-width: 450px) {
-    left: .2em;
-    padding-right: 20px;
-  }
-}
-
-.jslghtbx-thmb {
-  @media screen and(min-width: 451px) {
-    margin: 1em;
-  }
-  @media screen and(max-width: 450px) {
-    margin: 1em 0;
-  }
-  padding: 2px;
-  max-width: 100%;
-  max-height: 140px;
-  cursor: pointer;
-  box-shadow: 0px 0px 3px 0px #000;
-  @include prefixr(transition, all .3s ease-in-out);
-  &:hover {
-    box-shadow: 0px 0px 14px 0px #000;
-  }
-}
-
-.p-link {
-    color: white !important;
-    @include fontsize(14);
-    &:after {
-        content: "\2197";
-    }
-}
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/_resume.scss b/design/sass/_resume.scss
deleted file mode 100644
index 41fc8e1..0000000
--- a/design/sass/_resume.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-.head {
-    @extend %clearfix;
-    @include constrain(780px);
-    margin-top: 4em;
-}
-.resume main header {
-    width: 100%;
-    h1 {
-        @include fontsize(36);
-        text-transform: uppercase;
-        letter-spacing: 3px;
-        font-weight: 600;
-        line-height: 1;
-        margin-bottom: 0;
-        color: #444;
-    }
-    h2 {
-        margin-top: .5em !important;
-        @include fontsize(14);
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-style: italic;
-        color: #333;
-    }
-    @include breakpoint(gamma) {
-        width: 60%;
-        float: left;
-        text-align: left;
-        margin-top: .5em;
-    }
-}
-.h-resume {
-    h3,h2 {
-        @include constrain_narrow;
-        text-align: left;
-    }
-    h3 {
-        font-family: sans-serif;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-size: 0.75rem;
-        margin-top: 4em;
-        margin-bottom: 3em;
-        border-bottom: 1px dotted #333;
-    }
-    h2 {
-        margin-top: 2.5em;
-        margin-bottom: .25em;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        font-size: 1rem;
-    }
-    h2 a, h2 a:visited {
-        text-decoration: none;
-        color: #444;
-    }
-}
-.meta {
-    list-style-type: none;
-    display: inline;
-    @include constrain_narrow;
-    text-align: left;
-    margin-bottom: 1em;
-    time{
-        display: inline;
-    }
-}
-.p-experience { 
-    &:after { 
-        @include faded_line_after;
-    }
-    &:last-of-type:after {
-        background: #fff;
-    }
-}
-.p-organization { 
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        @include fontsize(13);
-
-}
-.p-skill {
-    font-weight: bold;
-}
-.contact {
-    margin: 2em 0 1.5em;
-    @include constrain_narrow;
-    li {
-        display: block;
-        @extend %clearfix;
-    }
-    @include breakpoint(gamma) {
-        width: 160px;
-        float: right;
-        margin: 1.9em 0 1.5em;
-        li {
-            display: block;
-        }
-    }
-  h6, a {
-    font-size: 13px;
-    font-size: 0.8125rem;
-    line-height: 1.8;
-    margin: 0;
-    display: block;
-    float: left;
-  }
-  h6 {
-    font-size: 11px;
-    font-size: 0.6875rem;
-    line-height: 2.1;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    &:after {
-      content: ":";
-      margin-right: 5px;
-    }
-  }
-  a {
-    font-family: sans-serif;
-  }
-}
-.publications-list  {
-    list-style-type: none;
-    text-align: left;
-    @include constrain_narrow;
-    h2 {
-        @include smcaps;
-        @include fontsize(11);
-        font-weight: 400;
-        text-align: left;
-        border-bottom: 1px dotted #333;
-        margin-bottom: 2em;
-        &:first-of-type {
-            margin-top: 3em;
-        }
-    }
-    h3, time {
-        display: inline;
-    }
-    h3 {
-        @include fontsize(20);
-        @include fancy_serif;
-    }
-    time:before {
-        content: "\00a0 \00a0"
-    }
-    ul {
-        list-style-type: none;
-    }
-}
-.publisher {
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-.pub-title {
-    margin-bottom: 1.75em;
-    a {
-        color: $brown;
-        text-decoration: none;
-        font-weight: 400;
-    }
-}
-.resume h6 {
-    @include constrain_narrow;
-    text-align: left;
-    font-weight: 400;
-    @include fontsize(12);
-}
-.toc {
-    @include constrain_narrow;
-    text-align: left;
-    a {
-        color: $brown;
-    }
-    ul {
-        list-style-type: none;
-    }
-}
diff --git a/design/sass/_src.scss b/design/sass/_src.scss
deleted file mode 100644
index 1896979..0000000
--- a/design/sass/_src.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-pre{
-    white-space: pre-wrap;    
-}
-.latest {
-    @include constrain_narrow;
-    @include fontsize(12);
-    @include smcaps;        
-    font-weight: 400;
-}
-.src-archive {
-    @include constrain_narrow;
-    .topic-hed {
-        @include fontsize(20);
-        margin-top: 1.5em;
-        margin-bottom: 1.5em;
-        @include breakpoint(beta) {
-            @include fontsize(28);
-            margin-top: 1em;
-        }
-    }
-    article {
-        margin-bottom: 3em;
-        p { 
-            color: lighten($body_font_color, 15);
-        }
-    }
-    h2 {
-        @include fontsize(22);
-        font-weight: 400;
-        margin-bottom: .25em;
-        a {
-            color: $body_font_color;
-            color: lighten($body_font_color, 15);
-            text-decoration: none;
-        }
-    }
-
-    p {
-        text-align: left;
-        @include fontsize(16);
-    }
-
-    @include breakpoint(beta) {
-        text-align: left;
-    }
-}
-.src-topics {
-    @include smcaps;
-    @include fontsize(11);
-}
-.src article {
-    ul { 
-        @include constrain_narrow;
-        margin-top: 2em;
-        margin-bottom: 2em;
-    }
-    ul li {
-        text-align: left;
-        list-style: none;
-        margin-left: .5rem;
-        padding-left: .5rem;
-        font-size: 1.5rem;
-    }
-    ul li:before {
-         content:"·";
-         display: inline-block;
-         vertical-align: bottom;
-         font-size: 2.8rem;
-         margin-right: 1rem;
-         line-height: 2.8rem;
-    }
-    ol {
-        text-align: left;
-        @include constrain_narrow;
-        padding-left: 1em;
-        @include fontsize(18);
-        @include breakpoint(beta) {
-            max-width: 580px;
-            @include fontsize(17);
-        }
-        li {
-            margin-top: .75em;
-        }
-    }
-    .footnote ol {
-        list-style-position: outside;
-        @include breakpoint(beta) {
-            max-width: 680px;
-        }
-    }
-    p code, li code {
-        @include fontsize(20);
-        padding: 3px;
-        background: #eaeaea;
-    }
-    h3 {
-        font-family: $fancy_serif;
-        @include fontsize(32);
-        margin: 3.5rem 0 1rem;
-        //letter-spacing: 1px;
-        //border-bottom: 1px #a19d9d dotted;
-        //text-transform: uppercase;
-    }
-    h5 {
-        @include fontsize(22);
-        margin: 3rem 0 -.75rem 0;
-        text-transform: uppercase;
-        border-bottom: 1px #a19d9d dotted;
-        @include fancy_sans;
-        text-align: left;
-    }
-}
-
-.highlight {
-    padding: 1rem;
-    margin-bottom: 1em;
-    // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/
-    // I tweaked it slightly to add a bit of margin
-    width: 50vw;
-    position: relative;
-    left: 33%;
-    right: 33%;
-    margin-left: -20vw;
-    margin-right: -20vw;
-    pre {
-    }
-}
-.go:before {
-    content: "$ ";
-}
-code > .comment::after {
-    display:none;
-}
-#book-page .book-list {
-    @include constrain_narrow;
-    @include breakpoint(beta) {
-        .book-list-item {
-            width: 45%; 
-        }
-    }
-}
-#book-page section {
-    @include constrain_narrow;
-    max-width: 100%;
-    @include breakpoint(gamma) {
-        margin-left: 80px;
-        p {
-            margin-left: 0;
-        }
-    }
-}
-.paypal-form-wrapper {
-    @include constrain_narrow;
-    text-align: left;
-        @include breakpoint(gamma) {
-        form {
-            margin: 2em 5em;
-        }
-    }
-}
-
-@include breakpoint(beta) {
-    .btn-top {
-        margin-left: 1.2em
-    }
-    .btn-bottom {
-        margin-left: 5em;
-    }
-}
-
-.dotted {
-    list-style-type: disc;
-    li {
-        margin-top: .5em;
-        margin-bottom: .5em;
-    }
-    @include breakpoint(gamma) {
-        font-size: 1.25rem;
-        line-height: 1.6;
-    }
-}
-#donate p {
-    @include fancy_sans;
-    @include fontsize(18);
-    line-height: 1.4;
-}
diff --git a/design/sass/_typography.scss b/design/sass/_typography.scss
deleted file mode 100644
index b4e3793..0000000
--- a/design/sass/_typography.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.hedtinycaps {
-    @include fontsize(16);
-    @include fancy_sans;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-.article-afterward > .hedtinycaps, p > .hedtinycaps {
-    text-align: left;
-}
-
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/screenv9.scss b/design/sass/screenv9.scss
deleted file mode 100644
index e8666ca..0000000
--- a/design/sass/screenv9.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@import "_fonts.scss";
-@import "_mixins.scss";
-@import "_queries.scss";
-@import "_global.scss";
-@import "_pagination.scss";
-@import "_header.scss";
-@import "_archives.scss";
-@import "_details.scss";
-@import "_images.scss";
-@import "_comments.scss";
-@import "_leaflet.scss";
-@import "_map.scss";
-@import "_src.scss";
-@import "_resume.scss";
-@import "_photos.scss";
-@import "_notes.scss";
-@import "_forms.scss";
-@import "_typography.scss";
-@import "_lttr.scss";
-@import "_footer.scss";