version 9 of stylesheet

57 files changed, 1878 insertions, 393 deletions

diff --git a/design/assets/tree-eye.jpg b/design/assets/tree-eye.jpg
index 256c99a..ecf24d3 100644
--- a/design/assets/tree-eye.jpg
+++ b/design/assets/tree-eye.jpg
diff --git a/design/sass/_archives.scss b/design/sass/_archives.scss
new file mode 100644
index 0000000..3da3af2
--- /dev/null
+++ b/design/sass/_archives.scss
@@ -0,0 +1,321 @@
+// container for archive intros
+.intro {
+    @include constrain_wide;
+    @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;
+    }
+}
+
+// container for archive grid items
+.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;
+    }
+}
+// body class archive, article header (usually inherits h2)
+.archive .post-title {
+    @include fontsize(24);
+    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(12);
+    line-height: 1.2;
+    text-align: left;
+    margin: 0;
+}
+// slightly larger summary than a p in this context
+.post-summary {
+    @include fontsize(15);
+    line-height: $archive_p_line_height;
+    margin-top: .25rem;
+    text-align: left;
+    margin: 0;
+}
+
+// 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%;
+        float: left;
+    }
+    .popular {
+        max-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 {
+        @include constrain_narrow;
+        color: white;
+        font-family: $headline_font_serif;
+        h2 { 
+            text-align: center;
+            margin-bottom: 0;
+            line-height: 1;
+            a {
+                color: white;
+                margin-bottom: 0;
+                font-family: $headline_font_serif;
+                text-decoration: none;
+                @include fontsize(36);
+            }
+        }
+        a { 
+            color: $body_font_light;
+            padding: 0;
+            border: none;
+        }
+        .post-summary {
+            text-align: center;
+        }
+        .p-summary {
+            display: block;
+            margin-top: .75rem;
+            @include fontsize(20);
+        }
+    }
+    .post-location {
+        color: lighten($body_font_light, 5);
+    }
+    .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);
+    }
+    .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 8px;
+        border: $link_color 1px solid;
+        &:after {
+            content: "\21E2";
+            margin-left: 4px;
+        }
+        &:hover {
+            background: $link_color;
+            color: white;
+        }
+    }
+}
diff --git a/design/sass/_comments.scss b/design/sass/_comments.scss
new file mode 100644
index 0000000..52ff6b1
--- /dev/null
+++ b/design/sass/_comments.scss
@@ -0,0 +1,122 @@
+//### COMMENTS AND FORMS ###
+.comments--header {
+    @include constrain_narrow;
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    line-height: 6em;
+    @include fontsize(16);
+    font-style: italic;
+    &:before {
+        @include faded_line_after;
+        margin-top: 2em;
+    }
+}
+.comments--wrapper {
+    @include constrain_narrow();
+    text-align: left;
+    margin-top: -2em;
+}
+.comment {
+    margin-top: 2.5em;
+    margin-bottom: 2.5em;
+    &:first-child {
+        margin-top: none;
+    }
+    &:after {
+        @include faded_line_after;
+    }
+    &:last-child:after {
+        display: none;
+    }
+}
+.comment--head, .comment--body {
+    margin-left: 80px;
+}
+.comment--head {
+    margin-bottom: 1em;
+}
+.comment--body {
+    margin-bottom: 3em;
+}
+.who {
+    font-family: Helvetica Neue, Helvetica, sans-serif;
+    @include fontsize(18);
+}
+.when {
+    @include fontsize(13);
+    margin-left: 1em;
+    font-style: italic;
+}
+
+.gravatar {
+    border: 2px $brown solid;
+    background: transparent;
+    max-width: 100%;
+    padding: 0;
+    float: left;
+    margin-top: 5px;
+}
+
+
+.comment--form--wrapper {
+    @include constrain_narrow();
+    &:before {
+        @include faded_line_after;
+    }
+}
+.comment--form--header {
+    margin-top: 2em;
+}
+.comment--form {
+    margin: 0 auto;
+    @include breakpoint(delta) {
+        margin-left: 20%
+    }
+    label {
+        display: block;
+        font-weight: 500;
+        letter-spacing: 1px;
+        font-family: "Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+        @include fontsize(13);
+    }
+    input, textarea {
+        padding: .25em;
+        border: #c5c5c5 1px solid;
+        border-radius: .125em;
+        color: darken($body_font_light, 20);
+        width: 100%;
+        @include breakpoint(gamma) {
+            width: 70%;
+        }
+    }
+    input[type="submit"] {
+        width: auto;
+        color: white;
+        letter-spacing: 1px;
+        background: $orange;
+        font: bold .65em Verdana,sans-serif;
+        text-transform: uppercase;
+        border: none;
+        border-radius: .25em;
+        padding: 8px 12px 7px;
+    }
+    blockquote {
+        margin: 3em 0;
+        p {
+            @include fontsize(18);
+        }
+    }
+    h2, h3 { text-align: left}
+}
+.comment--form--header-h1 {
+    @include breakpoint(delta) {
+        text-align: left;
+        margin-left: 30%;
+        @include fontsize(24);
+    }
+}
+.cform-arc { 
+    @include breakpoint(delta) {
+        margin-left: 30%;
+    }
+}
+
diff --git a/design/sass/_details.scss b/design/sass/_details.scss
new file mode 100644
index 0000000..9f98789
--- /dev/null
+++ b/design/sass/_details.scss
@@ -0,0 +1,273 @@
+.detail {
+    article {
+        @include constrain_narrow;    
+        margin-top: 4rem;
+    }
+    .map {
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+    }
+    .post-header {
+        @include breakpoint(alpha) {
+            text-align: left;
+        }
+        time {
+        }
+    }
+    .sci {
+        text-align: center;
+        @include fontsize(24);
+        font-weight: 400;
+        margin: 0;
+
+    }
+    .sci:nth-child(3) {
+        @include fontsize(18);
+        margin-bottom: 2rem;
+    }
+    // Ack, id selector, so wrong, but easy handles the slightly different footer
+    // in the dialogue section that lists all the sightings
+    #endnode {
+        h5 {
+            @include fontsize(14);
+            @include smcaps;
+            @include fancy_sans;
+            margin-bottom: 1rem;
+            margin-top: 2rem;
+        }
+        ul {
+            margin-bottom: 2em;
+            list-style-type: none;
+            padding: 0;
+            li {
+                color: lighten($body_font_color, 30);
+                margin-bottom: 0;
+                margin-top: 0;
+                &:before {
+                  content: "\2022";
+                  color: lighten($body_font_color, 30);
+                  margin-right: .35rem;
+                }
+            }
+        }
+    }
+    #detail-map-canvas {
+        height: 400px;
+        width: 98vw;
+        position: relative;
+        left: 49%;
+        right: 49%;
+        margin-left: -48vw;
+        margin-right: -49vw;
+    }
+}
+
+//### PAGE NAVIGATION ###
+#page-navigation {
+    margin: 2em auto;
+    @include constrain_narrow();
+    text-align: center;
+    display: table;
+    ul {
+        list-style-type: none;
+        margin: 0 auto;
+        width: 100%;
+        text-align: center;
+        padding: 0;
+    }
+    li {
+        margin: 6px auto;
+        clear: both;
+        line-height: 24px;
+        text-align: center;
+    }
+    span {
+        min-width: 70px;
+        display: block;
+        text-align: right;
+        margin-right: 10px;
+        margin-top: 2px;
+        float: left;
+    }
+    a {
+        display: block;
+        float: left;
+        text-align: left;
+        font-style: italic;
+        color: $brown;
+        text-decoration: none;
+    }
+}
+
+.entry-footer {
+    @extend %clearfix;
+    margin-top: 2em;
+    text-align: left;
+    h3 + ul {
+        padding: 0;
+    }
+    li {
+        margin: .25em 0;
+    }
+    li ul {
+        columns: 2 auto;
+        list-style-type: none;
+        margin-left: .5rem;
+        padding: 0;
+    }
+    li ul li:before {
+      content: "\2022";
+      margin-right: .45rem;
+      color: lighten($body_font_color, 40);
+    }
+    .grouper {
+        margin-top: 1em;
+    }
+    a {
+        text-decoration: none;
+        color: lighten($body_font_color, 20);
+    }
+    #wildlife li ul li {  
+        color: lighten($body_font_color, 40);
+        a {
+            color: lighten($body_font_color, 10);
+        }
+    }
+    @include breakpoint(beta) {
+        margin-bottom: 4em;
+        #wildlife {  
+            max-width: 55%;
+            float: left;
+            margin-right: 1.2rem;
+        }
+        #recommended-reading{
+            ul { 
+                list-style-type: none;
+            }
+            img {
+                max-width: 180px;
+            }
+        }
+    }
+    aside {
+        @extend %clearfix;
+        margin-bottom: 3em;
+    }
+    &:after, &:before {
+        @include faded_line_after;
+        @include breakpoint(beta) {
+            display: block;
+            margin-bottom: 2em;
+        }
+    }
+}
+#field_notes {
+    @include breakpoint(beta) {
+        max-width: 33%;
+        float: left;
+        margin-top: .15em;
+        margin-left: 7em;
+    }
+    li:before {
+      content: "\2022";
+      margin-right: .35rem;
+      color: $body_font_light;
+    }
+}
+.rr-clear {
+    clear: left;
+}
+
+//### FOOTNOTES ###
+.footnote {
+    margin: 1em auto 0 auto;
+    padding: 0;
+    list-style-type: none;
+    &:before, &:after {
+        @include faded_line_after;
+        @include breakpoint(beta) {
+            margin-bottom: 2em;
+        }
+    }
+    p {
+        font-size: 1rem;
+        line-height: 1.4;
+    }
+    hr {display: none;}
+    ol {
+        padding-left: 1em;
+        @include breakpoint(alpha) {
+            margin-left: 1em;
+        }
+    }
+}
+
+//### Figments ###
+.downloads {
+    list-style-type: none;
+}
+
+// ### Books ###
+
+.book-metadata {
+    text-align: left;
+    dd {
+      display: inline;
+      margin: 0;
+    }
+    dd:after{
+      display: block;
+      content: '';
+    }
+    dt{
+      display: inline-block;
+    }
+    dt:after {
+        content: ":";
+    }
+}
+.thoughts, .highlights, .meta-cover {
+    @include constrain_narrow;
+    text-align: left;
+    p {
+        max-width: 100%;
+    }
+}
+.book-cover-wrapper {
+    @include constrain_wide;
+    img {
+        float: left;
+        max-width: 20rem;
+    }
+}
+.thoughts h5, .highlights h4 {
+    font-weight: 500;
+    letter-spacing: 1px;
+    margin: 3em 0 .5em 0;
+    @include generic_sans;
+    @include smcaps;
+    @include fontsize(14);
+}
+.highlights article:first-of-type {
+    margin-top: 1em;
+}
+.highlink {
+    margin-right: 1em;
+    float: left;
+    font-size: 0.75em;
+    line-height: 1.6;
+    color: lighten($body_font_color, 60);
+    @include breakpoint(alpha) {
+        margin-top: 0.5em;
+    }
+    &:visited {
+        color: lighten($body_font_color, 60);
+    }
+}
+.highlights .foot {
+    @include fontsize(14);
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index c5b7ca2..0ae77a3 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -6,12 +6,14 @@ body {
     margin: 0 auto;
     padding: 0;
     overflow-x: hidden;
-    font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
-    color: $body_font;
+    font:$body_p_font;
+    color: $body_font_color;
     text-align: center;
     background-color: transparent
 }
-
+ul {
+    padding: 0;
+}
 // eliminate touch delay on mobile safari
 a, button, input, select, textarea, label, summary {
     touch-action: manipulation;
@@ -29,16 +31,15 @@ a {
         color: $orange;
     }
 }
-
 p {
-    @include constrain_narrow();
     text-align: left;
+    @include fontsize(18);
     @include breakpoint(alpha){
-        @include fontsize(18);
+        @include fontsize(20);
         line-height: 1.5;
     }
-    @include breakpoint(gamma){
-        @include fontsize(20);
+    @include breakpoint(beta){
+        @include fontsize(22);
         line-height: 1.6;
     }
 }
@@ -67,16 +68,59 @@ object, embed, video {
     max-width: 100%;
     height: auto;
 }
-
+hr {
+    border: 0; 
+    height: 1px;
+    @include faded_line_after;
+    margin: 3rem 0;
+}
 img {
     max-width: 100%;
 }
-
+figure {
+    margin: 0;
+}
+figcaption {
+    text-align: left;
+}
+figcaption, figcaption a {
+    @include fancy_sans;
+    @include fontsize(14);
+    text-align: left;
+    line-height: 1.9;
+    padding: .3rem .5rem .3rem 0;
+    color: #666;
+    border-bottom: 1px lighten($body_font_light, 20) solid;
+    margin-bottom: 1rem;
+}
+figcaption a:visited {
+    color: #666;
+}
 h1 {
-    font-family:  Georgia, 'Times New Roman', serif;
+    font-family: $headline_font_serif;
     @include fontsize(36);
     font-weight: normal;
 }
+h2 {
+    font-family: $headline_font_serif;
+    @include fontsize(28);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(30);
+        line-height: 1.6;
+    }
+}
+h3 {
+    @include fancy_sans;
+    @include fontsize(24);
+    font-weight: normal;
+    text-align: left;
+    @include breakpoint(gamma){
+        @include fontsize(28);
+        line-height: 1.4;
+    }
+}
 //**************  Universals ************************
 .hide {
     display: none;
@@ -113,45 +157,6 @@ h1 {
 .small {
     font-size: 90%;
 }
-.hed {
-    @include fancy_sans;
-    @include fontsize(24);
-    font-weight: 500;
-    @include breakpoint(beta) {
-        text-align: left;
-        @include fontsize(32);
-    }
-}
-
-.subhead {
-    font-style: italic;
-    font-weight: 400;
-    margin-top: 0;
-    @include constrain_narrow;
-    @include breakpoint(beta) {
-        text-align: left;
-    }
-}
-.mailing-list--wrapper {
-    @include constrain_narrow;
-    @include breakpoint(gamma) {
-        margin-top: 3em;
-        max-width: 580px;
-        h5 {
-            margin-bottom: .5em;
-            margin-top: 2em;
-        }
-    }
-    h5 { 
-        font-weight: normal;
-        text-align: left;
-        @include fontsize(18);
-    }
-    &:before {
-        @include faded_line_after;
-        margin-top: 5em;
-    }
-}
 .divide-after:after {
     margin-bottom: 3em;
     @include faded_line_after;
@@ -160,6 +165,8 @@ h1 {
 
 #breadcrumbs {
     @include constrain_wide();
+    padding: 0;
+    list-style-type: none;
     text-align: center;
     li {
         display: inline;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 10174e3..409ba93 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -33,6 +33,7 @@ header[role="banner"] {
         font-size: 0.675em;
         font-style: italic;
         font-weight: 300;
+        text-align: center;
     }
     @include breakpoint(beta) {
         float: left;
diff --git a/design/sass/_images.scss b/design/sass/_images.scss
new file mode 100644
index 0000000..dca9710
--- /dev/null
+++ b/design/sass/_images.scss
@@ -0,0 +1,98 @@
+.picwide, .cluster {
+    // 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;
+    }
+    &:after {
+        @extend %clearfix;
+        margin-bottom: .5rem;
+    }
+}
+
+.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%; 
+    height: auto; 
+} 
+.embed-container iframe, .embed-container object, .embed-container embed { 
+    position: absolute; 
+    top: 0; 
+    left: 0; 
+    width: 100%; 
+    height: 100%; 
+}
diff --git a/design/sass/_map.scss b/design/sass/_map.scss
index f7d958b..e4bd5e4 100644
--- a/design/sass/_map.scss
+++ b/design/sass/_map.scss
@@ -41,7 +41,7 @@
             @include fontsize(13);
         }
     }
-    a { color: $body_font;}
+    a { color: $body_font_color;}
     li {
         display: inline;
         &:after {
diff --git a/design/sass/_mixins.scss b/design/sass/_mixins.scss
index 0e29edf..5fafd95 100644
--- a/design/sass/_mixins.scss
+++ b/design/sass/_mixins.scss
@@ -3,24 +3,41 @@ $brown: #222;
 $light: #ccc;
 $orange: #b53a04;
 $link_color: #b53a04;
-$body_font: $brown;
+
+$headline_font_serif: Georgia, 'Times New Roman', serif;
+
+$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+$body_font_color: $brown;
 $body_font_light: #b3aeae;
-//$light;
 
-$max_width: 1280px;
+$archive_p_line_height: 1.6;
+//$light;
+$narrow-beta-width: 640px;
+$narrow-max-width: 700px;
+$max_width: 1440px;
 
 @mixin smcaps {
   text-transform: uppercase;
   letter-spacing: 1px;
 }
+@mixin plain_a {
+  border: none;
+  text-decoration: none;
+  color: $body_font_color;
+}
 
-@function calc-em($target-px, $context) {
-  @return $target-px / $context * 1em;
+@function calc-rem($size) {
+  $remsize: $size/16;
+  @return #{$remsize}rem;
 }
 
-@mixin fontsize($size: 24, $base: 16) {
-    font-size: $size + px;
-    font-size: ($size / $base) * 1rem;
+@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 {
@@ -28,20 +45,16 @@ $max_width: 1280px;
     max-width: 100%;
     background: none;
 }
-
 @mixin generic-sans {
     font-family: sans-serif;
 }
-
 @mixin fancy-sans {
     font-family: Helvetica, sans-serif;
 }
-
 @mixin fancy-sans-bold {
     font-family: Helvetica, sans-serif;
     font-weight: 600;
 }
-
 %clearfix {
     *zoom: 1;
     &:before {
@@ -102,7 +115,20 @@ $max_width: 1280px;
     margin-left: auto;
     margin-right: auto;
     @include breakpoint(beta) {
-        max-width: 640px;
+        max-width: $narrow-beta-width;
+    }
+    @include breakpoint(gamma) {
+        max-width: $narrow-max-width;
+    }
+}
+
+@mixin constrain_archive() {
+    max-width: 94%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(alpha) {
+        max-width: 380px;
+        float: left;
     }
     @include breakpoint(gamma) {
         max-width: 680px;
@@ -124,3 +150,6 @@ $max_width: 1280px;
         max-width: $max_width;
     }
 }
+
+
+
diff --git a/design/sass/_pagination.scss b/design/sass/_pagination.scss
index 404aeb7..7dc9cb1 100644
--- a/design/sass/_pagination.scss
+++ b/design/sass/_pagination.scss
@@ -9,8 +9,8 @@
     }
     a {
         text-decoration: none;
-        border: 1px solid lighten($body_font, 30);
-        color: lighten($body_font, 20);
+        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;
diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss
index db165ae..3ea883f 100644
--- a/design/sass/_queries.scss
+++ b/design/sass/_queries.scss
@@ -1,7 +1,5 @@
-$breakpoint-alpha: 38em; //608
-$breakpoint-alpha-2: 450px;
-$breakpoint-beta: 49em; //784
-$breakpoint-beta-2: 620px;
+$breakpoint-alpha: 728px; //728
+$breakpoint-beta: 824px; //784
 $breakpoint-gamma: 960px;
 $breakpoint-delta: 1170px;
 $breakpoint-epsilon: $max_width;
diff --git a/design/sass/screenv9.scss b/design/sass/screenv9.scss
new file mode 100644
index 0000000..71bafa4
--- /dev/null
+++ b/design/sass/screenv9.scss
@@ -0,0 +1,13 @@
+@import "_fonts.scss";
+@import "_mixins.scss";
+@import "_queries.scss";
+@import "_global.scss";
+@import "_pagination.scss";
+@import "_header.scss";
+@import "_footer.scss";
+@import "_archives.scss";
+@import "_details.scss";
+@import "_images.scss";
+@import "_comments.scss";
+@import "_leaflet.scss";
+@import "_map.scss";
diff --git a/design/sass/_birds.scss b/design/sass/v8/_birds.scss
index c50b22e..c50b22e 100644
--- a/design/sass/_birds.scss
+++ b/design/sass/v8/_birds.scss
diff --git a/design/sass/_books.scss b/design/sass/v8/_books.scss
index 01d293f..db38624 100644
--- a/design/sass/_books.scss
+++ b/design/sass/v8/_books.scss
@@ -92,26 +92,6 @@
         margin-top: 3em;    
     }
 }
-.book-metadata {
-    text-align: left;
-    dd {
-      display: inline;
-      margin: 0;
-    }
-    dd:after{
-      display: block;
-      content: '';
-    }
-    dt{
-      display: inline-block;
-    }
-    dt:after {
-        content: ":";
-    }
-    @include breakpoint(gamma) {
-        margin-left: 80px;
-    }
-}
 .book-title {
     @include constrain_wide;
     line-height: 1.3;
@@ -142,46 +122,4 @@
         }
     }
 }
-.thoughts, .highlights, .meta-cover {
-    @include constrain_narrow;
-    text-align: left;
-    p {
-        max-width: 100%;
-        @include breakpoint(gamma) {
-            margin-left: 80px;
-        }
-    }
-}
-.meta-cover {
-}
-.thoughts h5, .highlights h4 {
-    font-weight: 500;
-    letter-spacing: 1px;
-    margin: 3em 0 .5em 0;
-    @include generic_sans;
-    @include smcaps;
-    @include fontsize(14);
-    @include breakpoint(gamma) {
-        margin-left: 80px;
-    }
-}
-.highlights article:first-of-type {
-    margin-top: 1em;
-}
-.highlink {
-    margin-right: 1em;
-    float: left;
-    font-size: 0.75em;
-    line-height: 1.6;
-    color: lighten($body_font, 60);
-    @include breakpoint(alpha) {
-        margin-top: 0.5em;
-    }
-    &:visited {
-        color: lighten($body_font, 60);
-    }
-}
-.highlights .foot {
-    @include fontsize(14);
-}
 
diff --git a/design/sass/_figments.scss b/design/sass/v8/_figments.scss
index e834469..e834469 100644
--- a/design/sass/_figments.scss
+++ b/design/sass/v8/_figments.scss
diff --git a/design/sass/v8/_fonts.scss b/design/sass/v8/_fonts.scss
new file mode 100644
index 0000000..dfe632a
--- /dev/null
+++ b/design/sass/v8/_fonts.scss
@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'carrois_gothicregular';
+    src: url('carroisgothic-regular-webfont.eot');
+    src: url('carroisgothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('carroisgothic-regular-webfont.woff') format('woff'),
+         url('carroisgothic-regular-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+
+}
diff --git a/design/sass/v8/_footer.scss b/design/sass/v8/_footer.scss
new file mode 100644
index 0000000..9bfe4b7
--- /dev/null
+++ b/design/sass/v8/_footer.scss
@@ -0,0 +1,55 @@
+footer[role="contentinfo"] {
+    margin-top: 5em;
+    @include breakpoint(gamma) {
+        max-width: 960;
+    }
+    &:before {
+        @include breakpoint(beta) {
+            @include faded_line_after;
+            margin-bottom: 1.2em;
+        }
+    }
+    ul {
+        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: $brown;
+            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[role="contentinfo"], .dark footer[role="contentinfo"] {
+    &:before {
+        @include light_faded_line_after;
+    }
+    a {
+    color: $body_font_light;
+}
+}
+
diff --git a/design/sass/v8/_global.scss b/design/sass/v8/_global.scss
new file mode 100644
index 0000000..c5b7ca2
--- /dev/null
+++ b/design/sass/v8/_global.scss
@@ -0,0 +1,186 @@
+html {
+    border-top: 0.25em solid $brown;
+}
+
+body {
+    margin: 0 auto;
+    padding: 0;
+    overflow-x: hidden;
+    font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+    color: $body_font;
+    text-align: center;
+    background-color: transparent
+}
+
+// eliminate touch delay on mobile safari
+a, button, input, select, textarea, label, summary {
+    touch-action: manipulation;
+}
+a {
+    color: $orange;
+    -webkit-transition: all 0.1s ease;
+    -moz-transition: all 0.1s ease;
+    -ms-transition: all 0.1s ease;
+    transition: all 0.1s ease;
+    &:hover {
+        text-decoration: none;
+    }
+    &:visited {
+        color: $orange;
+    }
+}
+
+p {
+    @include constrain_narrow();
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+    }
+    @include breakpoint(gamma){
+        @include fontsize(20);
+        line-height: 1.6;
+    }
+}
+time {
+    @include smcaps;
+    @include fontsize(11);
+    display: block;
+    span {
+        @include fontsize(13);
+    }
+}
+abbr {
+    cursor: help;
+}
+pre {
+    @include constrain_narrow();
+    text-align: left;
+    @include breakpoint(alpha){
+        @include fontsize(18);
+        line-height: 1.5;
+        margin-top: 2em;
+        margin-bottom: 2em;
+    }
+}
+object, embed, video {
+    max-width: 100%;
+    height: auto;
+}
+
+img {
+    max-width: 100%;
+}
+
+h1 {
+    font-family:  Georgia, 'Times New Roman', serif;
+    @include fontsize(36);
+    font-weight: normal;
+}
+//**************  Universals ************************
+.hide {
+    display: none;
+}
+
+.strike {
+    text-decoration: line-through;
+}
+
+.yes {
+    background: green !important;
+    color: white;
+}
+
+.no {
+    background: red !important;
+    color: white;
+}
+
+.alert {
+    color: red !important;
+}
+//**************  other global classes ************************
+.sans {
+    @include generic_sans;
+}
+.bl {
+    @include smcaps;
+    @include fontsize(11);
+}
+.italic {
+    font-style: italic;
+}
+.small {
+    font-size: 90%;
+}
+.hed {
+    @include fancy_sans;
+    @include fontsize(24);
+    font-weight: 500;
+    @include breakpoint(beta) {
+        text-align: left;
+        @include fontsize(32);
+    }
+}
+
+.subhead {
+    font-style: italic;
+    font-weight: 400;
+    margin-top: 0;
+    @include constrain_narrow;
+    @include breakpoint(beta) {
+        text-align: left;
+    }
+}
+.mailing-list--wrapper {
+    @include constrain_narrow;
+    @include breakpoint(gamma) {
+        margin-top: 3em;
+        max-width: 580px;
+        h5 {
+            margin-bottom: .5em;
+            margin-top: 2em;
+        }
+    }
+    h5 { 
+        font-weight: normal;
+        text-align: left;
+        @include fontsize(18);
+    }
+    &:before {
+        @include faded_line_after;
+        margin-top: 5em;
+    }
+}
+.divide-after:after {
+    margin-bottom: 3em;
+    @include faded_line_after;
+}
+//****************  Page Breadcrumbs  ************************
+
+#breadcrumbs {
+    @include constrain_wide();
+    text-align: center;
+    li {
+        display: inline;
+    }
+    a { color: $brown;}
+    @include breakpoint(gamma) {
+        text-align: left;
+    }
+}
+
+.black #breadcrumbs a, .dark #breadcrumbs a {
+    color: $body_font_light;
+}
+//************* Dark Pages *********************
+
+.dark body {
+    background: $brown;
+    color: $body_font_light
+}
+
+.black body {
+    background: #000;
+    color: $body_font_light
+}
diff --git a/design/sass/v8/_header.scss b/design/sass/v8/_header.scss
new file mode 100644
index 0000000..10174e3
--- /dev/null
+++ b/design/sass/v8/_header.scss
@@ -0,0 +1,154 @@
+header[role="banner"] {
+    margin: 0 auto;
+    @include smcaps;
+    a {
+        text-decoration: none;
+    }
+    h1 {
+        margin: -10px 0 0 0;
+        padding: 0;
+    }
+    h1 a {
+        display: block;
+        margin: 0.25em auto 0 auto;
+        font-size: 0.875em;
+        font-weight: 300;
+        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+        line-height: 0.75em;
+        color: $brown;
+    }
+    h1 a:before {
+        content: "home-icon";
+        text-indent: -9999em;
+        width: 95px;
+        height: 75px;
+        background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+        background-size: 95px;
+        background-size: 85px;
+        display: block;
+        margin: 0.75em auto 0;
+    }
+    h2 {
+        margin-top: 0.25em;
+        font-size: 0.675em;
+        font-style: italic;
+        font-weight: 300;
+    }
+    @include breakpoint(beta) {
+        float: left;
+        position: relative;
+        bottom: 0;
+        h1, h2 {
+            text-align: left;
+        }
+        h1 {
+            width: 360px;
+        }
+        h1 a { line-height: 2.5em;}
+        h1 a:before {
+            display: inline-block;
+            background-size: 102px;
+            height: 85px;
+            width: 105px;
+            margin-right: 10px;
+        }
+        h2 { margin-left: 116px;
+             margin-top: -30px;
+        }
+    }
+}
+.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;
+        }
+    }
+}
+
+
+nav[role="navigation"] {
+    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: #505050;
+    }
+    ul {
+        @include smcaps;
+        max-width: 100%;
+        font-weight: 300;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        padding: 0;
+        @include constrain(85%);
+    }
+    li {
+        display: inline;
+        margin: 0 0.25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
+    }
+    li.last {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
+    @include breakpoint(beta) {
+        float: right;
+        border: none;
+        margin: 52px 0 0 0;
+        padding: 0;
+        ul {
+            max-width: 50em;
+        }
+    }
+}
+.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
+    color: $body_font_light;
+}
+
+
+.header-wrapper {
+    @extend %clearfix;
+    margin-bottom: 1em;
+    @include breakpoint(beta) {
+        border-bottom: 1px $brown solid;
+        position: relative;
+    }
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.5em; 
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-top: 1.5em; 
+        max-width: $max_width;
+    }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+    @include breakpoint(beta) {
+        border-bottom: 1px $body_font_light solid;
+    }
+}
+
diff --git a/design/sass/_homepage.scss b/design/sass/v8/_homepage.scss
index db375ed..db375ed 100644
--- a/design/sass/_homepage.scss
+++ b/design/sass/v8/_homepage.scss
diff --git a/design/sass/_house.scss b/design/sass/v8/_house.scss
index a0604b6..a0604b6 100644
--- a/design/sass/_house.scss
+++ b/design/sass/v8/_house.scss
diff --git a/design/sass/_inbox.scss b/design/sass/v8/_inbox.scss
index c1801d9..c1801d9 100644
--- a/design/sass/_inbox.scss
+++ b/design/sass/v8/_inbox.scss
diff --git a/design/sass/v8/_leaflet.scss b/design/sass/v8/_leaflet.scss
new file mode 100644
index 0000000..b65ffb8
--- /dev/null
+++ b/design/sass/v8/_leaflet.scss
@@ -0,0 +1 @@
+.leaflet-map-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-pane,.leaflet-tile-container,.leaflet-overlay-pane,.leaflet-shadow-pane,.leaflet-marker-pane,.leaflet-popup-pane,.leaflet-overlay-pane svg,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}.leaflet-container{overflow:hidden;-ms-touch-action:none}.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none}.leaflet-marker-icon,.leaflet-marker-shadow{display:block}.leaflet-container img{max-width:none !important}.leaflet-container img.leaflet-image-layer{max-width:15000px !important}.leaflet-tile{filter:inherit;visibility:hidden}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-box{width:0;height:0}.leaflet-overlay-pane svg{-moz-user-select:none}.leaflet-tile-pane{z-index:2}.leaflet-objects-pane{z-index:3}.leaflet-overlay-pane{z-index:4}.leaflet-shadow-pane{z-index:5}.leaflet-marker-pane{z-index:6}.leaflet-popup-pane{z-index:7}.leaflet-vml-shape{width:1px;height:1px}.lvml{behavior:url(#default#VML);display:inline-block;position:absolute}.leaflet-control{position:relative;z-index:7;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-control{float:left;clear:both}.leaflet-right .leaflet-control{float:right}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-fade-anim .leaflet-tile,.leaflet-fade-anim .leaflet-popup{opacity:0;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.leaflet-fade-anim .leaflet-tile-loaded,.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{opacity:1}.leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1);-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1);-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1);transition:transform .25s cubic-bezier(0,0,.25,1)}.leaflet-zoom-anim .leaflet-tile,.leaflet-pan-anim .leaflet-tile,.leaflet-touching .leaflet-zoom-animated{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}.leaflet-clickable{cursor:pointer}.leaflet-container{cursor:-webkit-grab;cursor:-moz-grab}.leaflet-popup-pane,.leaflet-control{cursor:auto}.leaflet-dragging .leaflet-container,.leaflet-dragging .leaflet-clickable{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing}.leaflet-container{background:#ddd;outline:0}.leaflet-container a{color:#0078A8}.leaflet-container a.leaflet-active{outline:2px solid orange}.leaflet-zoom-box{border:2px dotted #38f;background:rgba(255,255,255,.5)}.leaflet-container{font:12px/1.5 "Helvetica Neue",Arial,Helvetica,sans-serif}.leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:4px}.leaflet-bar a,.leaflet-bar a:hover{background-color:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:black}.leaflet-bar a,.leaflet-control-layers-toggle{background-position:50% 50%;background-repeat:no-repeat;display:block}.leaflet-bar a:hover{background-color:#f4f4f4}.leaflet-bar a:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-bar a:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:none}.leaflet-bar a.leaflet-disabled{cursor:default;background-color:#f4f4f4;color:#bbb}.leaflet-touch .leaflet-bar a{width:30px;height:30px;line-height:30px}.leaflet-control-zoom-in,.leaflet-control-zoom-out{font:bold 18px 'Lucida Console',Monaco,monospace;text-indent:1px}.leaflet-control-zoom-out{font-size:20px}.leaflet-touch .leaflet-control-zoom-in{font-size:22px}.leaflet-touch .leaflet-control-zoom-out{font-size:24px}.leaflet-control-layers{box-shadow:0 1px 5px rgba(0,0,0,.4);background:#fff;border-radius:5px}.leaflet-control-layers-toggle{background-image:url(images/layers.png);width:36px;height:36px}.leaflet-retina .leaflet-control-layers-toggle{background-image:url(images/layers-2x.png);background-size:26px 26px}.leaflet-touch .leaflet-control-layers-toggle{width:44px;height:44px}.leaflet-control-layers .leaflet-control-layers-list,.leaflet-control-layers-expanded .leaflet-control-layers-toggle{display:none}.leaflet-control-layers-expanded .leaflet-control-layers-list{display:block;position:relative}.leaflet-control-layers-expanded{padding:6px 10px 6px 6px;color:#333;background:#fff}.leaflet-control-layers-selector{margin-top:2px;position:relative;top:1px}.leaflet-control-layers label{display:block}.leaflet-control-layers-separator{height:0;border-top:1px solid #ddd;margin:5px -10px 5px -6px}.leaflet-container .leaflet-control-attribution{background:#fff;background:rgba(255,255,255,.7);margin:0}.leaflet-control-attribution,.leaflet-control-scale-line{padding:0 5px;color:#333}.leaflet-control-attribution a{text-decoration:none}.leaflet-control-attribution a:hover{text-decoration:underline}.leaflet-container .leaflet-control-attribution,.leaflet-container .leaflet-control-scale{font-size:11px}.leaflet-left .leaflet-control-scale{margin-left:5px}.leaflet-bottom .leaflet-control-scale{margin-bottom:5px}.leaflet-control-scale-line{border:2px solid #777;border-top:none;line-height:1.1;padding:2px 5px 1px;font-size:11px;white-space:nowrap;overflow:hidden;-moz-box-sizing:content-box;box-sizing:content-box;background:#fff;background:rgba(255,255,255,.5)}.leaflet-control-scale-line:not(:first-child){border-top:2px solid #777;border-bottom:none;margin-top:-2px}.leaflet-control-scale-line:not(:first-child):not(:last-child){border-bottom:2px solid #777}.leaflet-touch .leaflet-control-attribution,.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{box-shadow:none}.leaflet-touch .leaflet-control-layers,.leaflet-touch .leaflet-bar{border:2px solid rgba(0,0,0,.2);background-clip:padding-box}.leaflet-popup{position:absolute;text-align:center}.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:12px}.leaflet-popup-content{margin:13px 19px;line-height:1.4}.leaflet-popup-content p{margin:18px 0}.leaflet-popup-tip-container{margin:0 auto;width:40px;height:20px;position:relative;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:white;box-shadow:0 3px 14px rgba(0,0,0,.4)}.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;padding:4px 4px 0 0;text-align:center;width:18px;height:14px;font:16px/14px Tahoma,Verdana,sans-serif;color:#c3c3c3;text-decoration:none;font-weight:700;background:transparent}.leaflet-container a.leaflet-popup-close-button:hover{color:#999}.leaflet-popup-scrolled{overflow:auto;border-bottom:1px solid #ddd;border-top:1px solid #ddd}.leaflet-oldie .leaflet-popup-content-wrapper{zoom:1}.leaflet-oldie .leaflet-popup-tip{width:24px;margin:0 auto;-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)";filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678,M12=0.70710678,M21=-0.70710678,M22=0.70710678)}.leaflet-oldie .leaflet-popup-tip-container{margin-top:-1px}.leaflet-oldie .leaflet-control-zoom,.leaflet-oldie .leaflet-control-layers,.leaflet-oldie .leaflet-popup-content-wrapper,.leaflet-oldie .leaflet-popup-tip{border:1px solid #999}.leaflet-div-icon{background:#fff;border:1px solid #666}
diff --git a/design/sass/_mailing-list.scss b/design/sass/v8/_mailing-list.scss
index 561c059..561c059 100644
--- a/design/sass/_mailing-list.scss
+++ b/design/sass/v8/_mailing-list.scss
diff --git a/design/sass/v8/_map.scss b/design/sass/v8/_map.scss
new file mode 100644
index 0000000..f7d958b
--- /dev/null
+++ b/design/sass/v8/_map.scss
@@ -0,0 +1,73 @@
+.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;}
+    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/v8/_mixins.scss b/design/sass/v8/_mixins.scss
new file mode 100644
index 0000000..0e29edf
--- /dev/null
+++ b/design/sass/v8/_mixins.scss
@@ -0,0 +1,126 @@
+$brown: #201a11;
+$brown: #222;
+$light: #ccc;
+$orange: #b53a04;
+$link_color: #b53a04;
+$body_font: $brown;
+$body_font_light: #b3aeae;
+//$light;
+
+$max_width: 1280px;
+
+@mixin smcaps {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+@function calc-em($target-px, $context) {
+  @return $target-px / $context * 1em;
+}
+
+@mixin fontsize($size: 24, $base: 16) {
+    font-size: $size + px;
+    font-size: ($size / $base) * 1rem;
+}
+
+@mixin img_plain {
+    padding: 0;
+    max-width: 100%;
+    background: none;
+}
+
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+
+@mixin fancy-sans {
+    font-family: Helvetica, sans-serif;
+}
+
+@mixin fancy-sans-bold {
+    font-family: Helvetica, sans-serif;
+    font-weight: 600;
+}
+
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin transparent_class {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity = 90);
+  opacity: 0.9;
+}
+
+@mixin faded_line_after {
+    display: block;
+    content: "";
+    margin-top: 3em;
+    height: 1px;
+    width: 100%;
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+    background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+} 
+
+//for overriding the above on dark pages:
+@mixin light_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: 640px;
+    }
+    @include breakpoint(gamma) {
+        max-width: 680px;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
diff --git a/design/sass/_normalize.scss b/design/sass/v8/_normalize.scss
index c451141..c451141 100644
--- a/design/sass/_normalize.scss
+++ b/design/sass/v8/_normalize.scss
diff --git a/design/sass/_notes.scss b/design/sass/v8/_notes.scss
index ef49655..ef49655 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/v8/_notes.scss
diff --git a/design/sass/v8/_pagination.scss b/design/sass/v8/_pagination.scss
new file mode 100644
index 0000000..404aeb7
--- /dev/null
+++ b/design/sass/v8/_pagination.scss
@@ -0,0 +1,44 @@
+.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, 30);
+        color: lighten($body_font, 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/v8/_photos.scss
index d152bf4..d152bf4 100644
--- a/design/sass/_photos.scss
+++ b/design/sass/v8/_photos.scss
diff --git a/design/sass/_projects.scss b/design/sass/v8/_projects.scss
index 0bf4db2..0bf4db2 100644
--- a/design/sass/_projects.scss
+++ b/design/sass/v8/_projects.scss
diff --git a/design/sass/v8/_queries.scss b/design/sass/v8/_queries.scss
new file mode 100644
index 0000000..db165ae
--- /dev/null
+++ b/design/sass/v8/_queries.scss
@@ -0,0 +1,31 @@
+$breakpoint-alpha: 38em; //608
+$breakpoint-alpha-2: 450px;
+$breakpoint-beta: 49em; //784
+$breakpoint-beta-2: 620px;
+$breakpoint-gamma: 960px;
+$breakpoint-delta: 1170px;
+$breakpoint-epsilon: $max_width;
+
+@mixin breakpoint($point) {
+    @if $point == "alpha" {
+        @media screen and (min-width:$breakpoint-alpha ){ @content; }
+    }
+    @if $point == "alpha-2" {
+        @media screen and (min-width:$breakpoint-alpha-2 ){ @content; }
+    }
+    @else if $point == "beta" {
+        @media screen and  (min-width: $breakpoint-beta) { @content; }
+    }
+    @else if $point == "beta-2" {
+        @media screen and  (min-width: $breakpoint-beta-2) { @content; }
+    }
+    @else if $point == "gamma" {
+        @media screen and (min-width: $breakpoint-gamma)  { @content; }
+    }
+    @else if $point == "delta" {
+        @media screen and (min-width: $breakpoint-delta)  { @content; }
+    }
+    @else if $point == "epsilon" {
+        @media screen and (min-width: $breakpoint-epsilon)  { @content; }
+    }
+}
diff --git a/design/sass/_resume.scss b/design/sass/v8/_resume.scss
index 37cc20e..37cc20e 100644
--- a/design/sass/_resume.scss
+++ b/design/sass/v8/_resume.scss
diff --git a/design/sass/_src.scss b/design/sass/v8/_src.scss
index 309a8b8..309a8b8 100644
--- a/design/sass/_src.scss
+++ b/design/sass/v8/_src.scss
diff --git a/design/sass/_writing_archive.scss b/design/sass/v8/_writing_archive.scss
index 69397b1..69397b1 100644
--- a/design/sass/_writing_archive.scss
+++ b/design/sass/v8/_writing_archive.scss
diff --git a/design/sass/_writing_details.scss b/design/sass/v8/_writing_details.scss
index 5cf7479..9ba4015 100644
--- a/design/sass/_writing_details.scss
+++ b/design/sass/v8/_writing_details.scss
@@ -278,6 +278,7 @@ img.picwide {
 }
 figure.picwide img.picwide {
     margin: auto !important;
+    padding: 0 !important;
     @include breakpoint(epsilon) {
         margin-left: 0;
     }
@@ -291,7 +292,7 @@ figure.picwide img.picwide {
     }
     @include breakpoint(epsilon) {
         margin-left: -300px;
-        max-width: $max_width *.99;
+        max-width: 100% !important;
     }
 }
 .src .picwide, .h-entry figure.picwide {
diff --git a/design/sass/iev8.scss b/design/sass/v8/iev8.scss
index 574ab55..574ab55 100644
--- a/design/sass/iev8.scss
+++ b/design/sass/v8/iev8.scss
diff --git a/design/sass/screenv8.scss b/design/sass/v8/screenv8.scss
index 71988d2..71988d2 100644
--- a/design/sass/screenv8.scss
+++ b/design/sass/v8/screenv8.scss
diff --git a/design/templates/admin/income/monthly.html b/design/templates/admin/income/monthly.html
new file mode 100644
index 0000000..920d074
--- /dev/null
+++ b/design/templates/admin/income/monthly.html
@@ -0,0 +1,57 @@
+{% extends "admin/base_site.html" %}
+{% load i18n admin_urls admin_static %}
+
+{% block breadcrumbs %}
+    <div class="breadcrumbs">
+        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
+        &rsaquo; <a href="/admin/income/">Income</a>
+        &rsaquo; <a href="/admin/income/invoice/">Invoices</a>
+        &rsaquo; <a href="/admin/income/invoice/{{object.id}}/change/">{{object.title}}</a>
+    </div>
+{% endblock %}
+{% block content %}
+	
+<h1>{% trans "EDR Invoice for the month of" %} {{object.title}}</h1>
+
+
+<div style="float: left; width: 45%">
+<div class="results">
+<table id="result_list">
+<thead>
+<tr>
+
+<th scope="col" class="sortable column-title">
+   <div class="text"><a href="?o=1">Date</a></div>
+   <div class="clear"></div>
+</th>
+<th scope="col" class="sortable column-status">
+   <div class="text"><a href="?o=5">Time Start</a></div>
+   <div class="clear"></div>
+</th>
+<th scope="col" class="sortable column-status">
+   <div class="text"><a href="?o=5">Time Finish</a></div>
+   <div class="clear"></div>
+</th>
+<th scope="col" class="sortable column-status">
+   <div class="text"><a href="?o=5">Total</a></div>
+   <div class="clear"></div>
+</th>
+<th scope="col" class="sortable column-status">
+   <div class="text"><a href="?o=5">Work Done</a></div>
+   <div class="clear"></div>
+</th>
+</tr>
+</thead>
+<tbody>
+
+    {% for object in object_list %}
+    <tr class="{% cycle 'row1' 'row2' %}"><th class="field-title"><a href="/admin/income/invoiceitem/{{object.id}}/change/">{{object.time_start|date:"M d"}}</a></th><td class="field-status">{{object.time_start|date:"h:i"}}</td><td class="field-payment_status">{{object.time_end|date:"h:i"}}</td><td class="field-pub_date nowrap">{{object.total}}-{{object.rounded_total}}</td><td class="field-payment_status">{{object.work_done}}</td></tr>
+{% endfor %}
+<tr class="row2"><th class="field-title">&nbsp;</th><td class="field-status"></td><td class="field-payment_status"></td><td class="field-pub_date nowrap"></td></tr> <tr class="row2"><th class="field-title">Total Hours:</th><td class="field-status">{{total_hours}}</td><td class="field-payment_status"></td><td class="field-pub_date nowrap"></td></tr>
+<tr class="row2"><th class="field-title">Total Billed:</th><td class="field-status">${{total_billed}}</td><td class="field-payment_status"></td><td class="field-pub_date nowrap"></td></tr>
+</tbody>
+</table>
+</div>
+<p style="margin: 2rem 0; background: #79aec8; width: 120px; padding: 1rem;"><a style="color:white !important;" href="{% url 'download-invoice' object.slug %}">Generate Invoice</a></p>
+
+{% endblock %}
diff --git a/design/templates/archives/books.html b/design/templates/archives/books.html
index 1c139e6..59bac34 100644
--- a/design/templates/archives/books.html
+++ b/design/templates/archives/books.html
@@ -4,30 +4,30 @@
 {% load pagination_tags %}
 {% block pagetitle %} Books | luxagraf {% endblock %}
 {% block metadescription %}Books I've read and thoughts on them. {% endblock %}
-{%block bodyid%}class="books" id="books-archive"{%endblock%}
+{%block bodyid%}class="archive" id="books-archive"{%endblock%}
 
 {% block primary %}
     <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
         <li>Books</li>
     </ul>
-        <main role="main">{% autopaginate object_list 24 %}
+    <main>{% autopaginate object_list 24 %}
         <h1 class="hide">Books</h1>
-<div class="book-list projects--intro">
-        <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p>
-        <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>
-</div>
-    <nav class="pagination">{% paginate %}
-    </nav>
-       <div class="book-list"> {% for object in object_list %}
-            <article class="book-list-item {% cycle "odd" "even" %} {% cycle "uno" "dos" "tres" %}" itemscope itemtype="http://schema.org/Book">
+        <div class="intro">
+                <p>I wear glasses because as a child I would stay up late, covers pulled over my head, reading by the dim light of a dying flashlight. At least that's what an eye doctor told me when I was younger. Probably a load of crap, but I still love reading and I still often do it by poor light far later in the night than is reasonable.</p>
+                <p>I've always taken notes while reading, usually with a pen and paper, but sometimes as highlights in the Kindle. And of course since I have all this stuff in text files I thought might as well put it online. So here you have it, books I've read and things I've thought about them.</p>
+        </div>
+        <nav class="pagination">{% paginate %}
+        </nav>
+        <div class="archive-grid book-grid"> {% for object in object_list %}
+            <article class="archive-card" itemscope itemtype="http://schema.org/Book">
                 {% if object.image %}<div class="img-wrapper"><a href="{{object.get_absolute_url}}"><img itemprop="image" src="{{object.get_image_url}}" alt="cover art for {{object.title}} by {{object.author_name}}"/></a></div>{%endif%}
-            <h2 itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2>
-            <h4 itemprop="author">{{object.author_name}}</h4>
-            <div itemprop="review" itemscope itemtype="http://schema.org/Review">
-                {% if object.rating %}<span class="book-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span>{%endif%}
-                <span class="hide" itemprop="author">Scott Gilbertson</span>
-                <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
+                <h2 class="post-title" itemprop="name"><a href="{{object.get_absolute_url}}">{{object.title|amp|smartypants|widont|safe}}</a></h2>
+                <h4 class="author" itemprop="author">{{object.author_name}}</h4>
+                <div class="post-summary" itemprop="review" itemscope itemtype="http://schema.org/Review">
+                    {% if object.rating %}<span class="book-stars" itemprop="reviewRating">{% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</span>{%endif%}
+                    <span class="hide" itemprop="author">Scott Gilbertson</span>
+                    <meta itemprop="datePublished" content="{{object.read_date|date:'F Y'}}"><span class="read-in">Read in: {{object.read_date|date:"F Y"}}</span></div>
         </article>
         {% endfor %}</div>
     <nav class="pagination">{% paginate %}
diff --git a/design/templates/archives/figments.html b/design/templates/archives/figments.html
index 1ef636f..da7628e 100644
--- a/design/templates/archives/figments.html
+++ b/design/templates/archives/figments.html
@@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
+{%block bodyid%}class="archive" id="figments-archive"{%endblock%}
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
     <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>{% if series %}
@@ -8,16 +9,18 @@
     <li>Figments</li>{%endif%}
     </ul>
     <main role="main" id="figments-archive" class="fig-archive">
-    <h1>Figments of Imagination</h1>
-    <p class="intro">I dislike the term &#8220;fiction&#8221; because it implies that there is a non-fiction and I categorically deny that such a thing can exist. So I call these stories &#8220;less true stories mostly made up&#8221; and hope for the best, where &#8220;the best&#8221; is that you enjoy them.</p>
-    
-    {% for object in object_list %}
-    <article id="{{object.slug}}{{object.pk}}" class="h-entry hentry figment" itemscope itemType="http://schema.org/CreativeWork">
-        <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url permalink">{{object.title|smartypants|safe}}</a></h2>
+    <div class="intro-narrow">
+        <h1>Figments of Imagination</h1>
+        <p>The term &#8220;fiction&#8221; makes me uncomfortable because it implies that there is a corresponding term &#8220;non-fiction&#8221;, which would mean &#8220;truth&#8221;, and I don't think such a thing exists. There is no absolute truth when it comes to recording the world around you. It is always your subjective observations that allow you to record impressions in words. So I call these stories &#8220;less true stories mostly made up&#8221; and hope for the best, where &#8220;the best&#8221; is that you enjoy them.</p>
+    </div>
+    <div class="archive-grid figments-grid"> {% for object in object_list %}
+    <article id="{{object.slug}}{{object.pk}}" class="h-entry hentry" itemscope itemType="http://schema.org/CreativeWork">
+        <h2 class="p-name entry-title post-title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url permalink">{{object.title|smartypants|safe}}</a></h2>
         <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
         <p class="hide p-category">Fiction</p>
         <p class="p-summary entry-summary">{{object.dek|safe|smartypants|widont}} <a href="{{object.get_absolute_url}}">Read&nbsp;&#8674;</a></p>
     </article>
         {%endfor%}
+    </div>
     </main>
 {% endblock %}
diff --git a/design/templates/archives/homepage-light.html b/design/templates/archives/homepage-light.html
index 1d02e86..e9bc241 100644
--- a/design/templates/archives/homepage-light.html
+++ b/design/templates/archives/homepage-light.html
@@ -8,96 +8,92 @@
 
     {%block extrahead%}
 <style>
-    .homepage--hero {
+@media screen and (min-width: 1440px) {
+    .banner .post-image img {
         margin-top: {{homepage.image_offset_vertical}};
     }
+}
 </style>
 {%endblock%}
-{%block bodyid%}id="home" class="has-hero v082016"{%endblock%}
+{%block bodyid%}id="home" class="archive"{%endblock%}
 
 {% block primary %}<section class="banner">{% with object=homepage.featured %}
         <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
-                    {%with image=homepage.featured_image%}
-                    <img class="u-photo post-image homepage--hero"  itemprop="image" sizes="(max-width: 960px) 100vw"
-srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-                                                                                     {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%}src="{% get_image_by_size image size.name %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">
-                    {%endwith%}
+            <figure class="post-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{%with image=homepage.featured_image%}
+                    <img class="u-photo"  itemprop="image" sizes="(max-width: 960px) 100vw"
+srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endwith%}
                 </a>
+                <figcaption> 
+                    <div class="hero-text-wrapper">
+                    <h2 class="p-name entry-title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants}}</a></h2>
+                    <p class="p-author author hide" itemprop="author">Scott Gilbertson</p>
+                    <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                    <p class="post-summary">
+                        <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">{% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, {{object.state.name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, {{object.country.name}}{%endif%}</span>
+                        <span class="p-summary" itemprop="description">
+                            {{homepage.tag_line|safe|smartypants}}
+                        </span>
+                    </p>
+                    <a href="{{object.get_absolute_url}}" class="u-url btn" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">Read</a>
+                    </div>
+                </figcaption>
+            </figure>
+    </article>{% endwith %} 
+   </section>
+    <section class="bio-short">
+        <h1 class="homepage-section-header">About Luxagraf</h1>
+        <img src="/media/img/usa-resize.svg" alt="map of travels" class="homepage-map-img" />
+        <p>After nearly two years exploring the U.S. in our home, a 1969 Dodge Travco RV, we left the states to spend the winter in Mexico.</p>
+        <p>We left our former home in Athens, GA in the Spring of 2017. We were most recently in <span class="p-location h-adr adr " itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if location.location.state.country.name == "United States" %}<span class="p-locality locality">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.code|safe}}{%else%}<span class="p-region">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.country.name|safe}}</a>{%endif%}</span>. The map <span class="addafter"><span class="subcontent">above</span></span> has a rough sketch of our route to date. You can read about our adventures in the <a href="/jrnl/">journal</a> section. There's more about us on the <a href="/about">about page</a> </p>
+    </section>
+    <section class="recent-popular">
+        <div class="recent">
+        <h1 class="homepage-section-header">Recent</h1>
+        <div  class="archive-grid">{% for object in recent %}
+        <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
+            <div class="post-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %}
+                    {% include "lib/img_archive.html" with image=object.featured_image %}
+                    {%else%}
+                    <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a>
             </div>
-            <div class="hero--wrapper">
-            <h2 class="p-name entry-title post--title main--header" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants}}</a></h2>
-            <p class="p-author author hide" itemprop="author">Scott Gilbertson</p>
-            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p class="post--location main--location">
-                <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+            <h2 class="p-name entry-title post-title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
+            <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
+            <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <p class="post-summary">
+                <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
-                </span>
-            </p>
-            <p class="p-summary main--tag">
-            {{homepage.tag_line|safe|smartypants}}
+                </span> 
             </p>
-            <a href="{{object.get_absolute_url}}" class="u-url btn" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">Read</a>
+        </article> {% endfor %}
         </div>
-    </article>{% endwith %} 
-   </section>
-    <div class="homepage--about homepage--section">
-        <h3 class="homepage--arc-header">About Luxagraf</h3>
-        <p>Luxagraf is the notebook I use to record things for posterity. Something that, in an earlier age, you'd accidentally leave in the backseat of a taxi. Here it exists as long as there's energy to keep the internet on.</p>
-        <p>About us: We're currently exploring North America in our new home, a 1969 Dodge Travco RV.</p>
-            <p>We left our former home in Athens, GA in the Spring of 2017. We were most recently in <span class="p-location h-adr adr " itemprop="contentLocation" itemscope itemtype="http://schema.org/Place"> {% if location.location.state.country.name == "United States" %}<span class="p-locality locality">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.code|safe}}{%else%}<span class="p-region">{{location.location.name|smartypants|safe}}</span>, {{location.location.state.country.name|safe}}</a>{%endif%}</span>. The map over there has a rough sketch of our route to date. You can read about our adventures in the <a href="/jrnl/">journal</a> section. </p>
-    </div>
-    <div class="homepage--section">
-    <section class="homepage--bright archive homepage--arc-big">
-        <h1 class="homepage--arc-header">Most Recent</h1>
-        {% for object in recent %}
-        <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
-                    <img src="{% for size in object.featured_image.sizes.all%}{% if size.name == 'featured_jrnl'%}{% get_image_by_size object.featured_image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" />
+        </div>
+        <div class="popular">
+        <h1 class="homepage-section-header">Popular</h1>
+        <div class="archive-grid">{% for object in homepage.popular.all %}
+        <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
+            <div class="post-image">
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %}
+                    {% include "lib/img_archive.html" with image=object.featured_image %}
+                    {%else%}
+                    <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a>
             </div>
-            <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
-            <p class="p-author author hide" itemprop="author">Scott Gilbertson</p>
-            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p class="post--location">
-                <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+            <h2 class="p-name entry-title post-title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
+            <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
+            <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <p class="post-summary">
+                <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
                 </span>
             </p>
-        </article>{% endfor %}
+        </article> {% endfor %}
+        </div>
+        </div>
     </section>
-    <section class="archive homepage--bright popular">
-        <h1 class="homepage--arc-header">Popular</h1>
-        <div class="arc-col">{% for object in homepage.popular.all %}
-        <article class="h-entry hentry {%cycle "odd" "even"%}" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" /></a>
-            </div>
-            <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
-            <p class="p-author author hide" itemprop="author">Scott Gilbertson</p>
-            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p class="post--location">
-                <span class="p-location h-adr adr" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
-                    {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
-                </span> 
-            </p>
-        </article> {% endfor %}</div>
+    <section>
+        <p class="homepage-next"><a href="/jrnl/">Browse the Archives</a></p>
     </section>
-        <p class="homepage--next"><a href="/jrnl/">Browse the Archives</a></p>
-    </div>
 {% endblock %}
 
 {% block js %}{% comment %} <script async src="/media/js/hyphenate.min.js" type="text/javascript"></script>{% endcomment%}{% endblock%}
diff --git a/design/templates/archives/homepage.html b/design/templates/archives/homepage.html
index 2741232..8640dad 100644
--- a/design/templates/archives/homepage.html
+++ b/design/templates/archives/homepage.html
@@ -6,16 +6,13 @@
 <head itemscope itemtype="http://schema.org/WebSite">
     <title itemprop='name'>Luxagraf</title>
     <link rel="canonical" href="https://luxagraf.net/" itemprop="url">{%endblock%}
-{%block bodyid%}id="home" class="has-hero"{%endblock%}
+{%block bodyid%}id="home"{%endblock%}
 
 {% block primary %}<section class="banner">{% with object=homepage.featured %}
         <article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}">
-                    {%for image in homepage.images.all%}
-                    <img class="u-photo post-image homepage--hero"  itemprop="image" sizes="(max-width: 960px) 100vw"
-srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-                                                                                     {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%}src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endfor%}
+            <div class="post--image">Hello world
+                <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% with image=object.featured_image %}
+                    <img class="u-photo post-image homepage--hero"  itemprop="image" sizes="(max-width: 960px) 100vw" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size %} {{size}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%} {% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size %}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}">{%endwith%}
                 </a>
             </div>
             <div class="hero--wrapper">
diff --git a/design/templates/archives/jrnl.html b/design/templates/archives/jrnl.html
index 0c0c535..c95215e 100644
--- a/design/templates/archives/jrnl.html
+++ b/design/templates/archives/jrnl.html
@@ -5,7 +5,7 @@
 
 {% block pagetitle %}Luxagraf | {% if region %}Travel Writing from {{region.name|title|smartypants|safe}}{%else%}Travel Writing from Around the World {%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
 {% block metadescription %}{% if region %}Travel writing, essays and dispatches from {{region.name|title|smartypants|safe}}{%else%}Travel writing, essays and dispatches from around the world{%endif%} Page {{page}}{% endblock %}
-{%block bodyid%}id="writing"{%endblock%}
+{%block bodyid%}id="writing" class="archive"{%endblock%}
 
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -14,23 +14,23 @@
         <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Journal</span></a> &rarr;</li> 
         <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>Journal</li>{%endif%}
     </ul>
-    <main role="main" id="writing-archive" class="archive">
+    <main class="archive-grid">
         <h1 class="hide">{% if region %}Journal entries from {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%}Journal {%endif%}</h1>{% autopaginate object_list 24 %} {% for object in object_list %}
-        <article class="h-entry hentry {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
-            <div class="post--image">
+        <article class="h-entry hentry archive-card {% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}" itemscope itemType="http://schema.org/Article">
+            <div class="post-image">
                 <a href="{{object.get_absolute_url}}" title="{{object.title}}">{% if object.featured_image %}
-                    <img src="{% for size in object.featured_image.sizes.all%}{% if size.name == 'featured_jrnl'%}{% get_image_by_size object.featured_image size.name %}{%endif%}{%endfor%}" alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" />
-{%else%}
+                    {% include "lib/img_archive.html" with image=object.featured_image %}
+                    {%else%}
                     <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}</a>
             </div>
-            <h2 class="p-name entry-title post--title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
+            <h2 class="p-name entry-title post-title" itemprop="headline"><a href="{{object.get_absolute_url}}" class="u-url" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.title}}{%endif%}">{{object.title|safe|smartypants|widont}}</a></h2>
             <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
-            <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p>
-                <span class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+            <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <p class="post-summary">
+                <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name}}</a>{%endif%}
                 </span> &ndash;
-                <span class="p-summary entry-summary hyphenate" itemprop="description">
+                <span class="p-summary" itemprop="description">
                     {{object.dek|safe}}
                 </span>
             </p>
diff --git a/design/templates/archives/map_data.html b/design/templates/archives/map_data.html
index 8e9c6d0..ef3a4c4 100644
--- a/design/templates/archives/map_data.html
+++ b/design/templates/archives/map_data.html
@@ -524,6 +524,6 @@ L.tileLayer.provider('Esri.WorldTopoMap', {maxZoom: 18,attribution: 'Map data &c
 
 //loop through and set up markers/info windows
 {% for entry in object_list %}
-L.marker([{{entry.latitude}}, {{entry.longitude}}]).bindPopup('<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>').addTo(map);
+L.marker([{{entry.latitude}}, {{entry.longitude}}]).bindPopup('<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_featured_image_thumb}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>').addTo(map);
 {% endfor %}
 
diff --git a/design/templates/archives/projects.html b/design/templates/archives/projects.html
index 5918feb..2ad2e37 100644
--- a/design/templates/archives/projects.html
+++ b/design/templates/archives/projects.html
@@ -3,25 +3,27 @@
 {% block pagetitle %}Luxagraf | Projects {% endblock %}
 {% block metadescription %}Travel Themes and Experiments {% endblock %}
 
-{%block bodyid%}id="projects-page"{%endblock%}								
+{%block bodyid%}class="archive"{%endblock%}								
 				
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
         <li>Projects</li>
     </ul>
-    <main role="main" class="projects">
-    <div class="projects--intro">
+    <main class="projects">
+    <div class="intro">
         <p>Luxagraf has become a bit like an iceberg over the years. I keep adding things to it, but never actually make them public. So I decided to try making some of it more public. </p>
         <p>This will lead you to some of the previously submerged stuff that doesn't always neatly fit in with the travel narrative portion of luxagraf. </p>
     </div>
-    <ul id="projects-archive" class="projects--list">{%for object in object_list %}
+    <ul id="projects-archive" class="wide-list">{%for object in object_list %}
         <li>
-            <h1><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|safe}} {{object.subtitle|safe}}</a></h1>
-            <div class="img">
-                <a href="{{object.get_absolute_url}}" title="{{object.title}}"><img sizes="(max-width: 640px) 100vw, (min-width: 641px) 640px" srcset="{{object.get_project_image|slice:"0:-4"}}_lg.jpg 1280w" src="{{object.get_project_image}}" alt="{{ object.title }}" class="post-image" /></a>
+            <a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                <img sizes="(max-width: 850px) 100vw, (min-width: 851px) 720px" srcset="{{object.get_project_image|slice:"0:-4"}}_lg.jpg 1280w" src="{{object.get_project_image}}" alt="{{ object.title }}" class="post-image" />
+            </a>
+            <div class="wide-wrapper">
+                <h2 class="post-title"><a href="{{object.get_absolute_url}}" title="{{object.title}}">{{object.title|safe}} {{object.subtitle|safe}}</a></h2>
+                <div class="post-summary">{{object.lede|safe|smartypants}}</div>
+                <a class="permalink" href="{{object.get_absolute_url}}">Explore&nbsp;&#8674;</a>
             </div>
-            <div class="hyphenate">{{object.lede|safe|smartypants}}</div>
-            <p class="projects--button"><a href="{{object.get_absolute_url}}">Explore&nbsp;&#8674;</a></p>
         </li> {% endfor %}
     </ul>
     </main>
diff --git a/design/templates/archives/sightings.html b/design/templates/archives/sightings.html
index 713ab09..3eb8ef6 100644
--- a/design/templates/archives/sightings.html
+++ b/design/templates/archives/sightings.html
@@ -4,7 +4,7 @@
 
 {% block pagetitle %}Luxagraf | Plants and Animals seen {% if region %}in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%}{% if page != "1" %} -- Page {{page}}{%endif%}{% endblock %}
 {% block metadescription %}Plants and Animals  seen {% if region %} in {{region.name|title|smartypants|safe}}{%else%}by {{user}}{%endif%} Page {{page}}{% endblock %}
-{%block bodyid%}id="birds"{%endblock%}
+{%block bodyid%}id="birds" class="archive"{%endblock%}
 
 
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -13,29 +13,21 @@
         <li itemprop="title">the United States</li>{%else%}<li><a href="/jrnl/" title="See all Journal Entries" itemprop="url"><span>Plants and Animals</span></a> &rarr;</li> 
         <li>{{region.name|title|smartypants|safe}}</li>{%endif%}{%else%}<li>dialogues</li>{%endif%}
     </ul>
-    <main role="main" class="archive">{% autopaginate object_list 24%}
+    <main class="archive-grid dialogue-grid">{% autopaginate object_list 24%}
     <h1 class="hide">Plants and Animals seen {% if region %}in {%if region.name == 'United States'%}the United States{%else%}{{region.name|title|smartypants|safe}}{%endif%}{%else%} by {{user}}{%endif%}</h1> {% for object in object_list %}
-        <article class="{% cycle 'odd' 'even' %} {% cycle 'first' 'second' 'third' %}">
+    <article class="archive-card">{% if object.ap.image%} 
             <div class="post--image">
-{% load get_image_by_size %}
-{% load get_image_width %}{% if object.ap.image%}
-<figure>
-<a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
-    <img src="{% get_image_by_size object.ap.image 'pic5' %}" /> 
-</a>
-</figure>{%endif%}
-            </div>
-            <h3 class="post--title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h3>
-            <time class="post--date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-            <p>
-                <span class="sighting location place post--location" itemscope itemtype="http://schema.org/Place">Loc:
+                <a href="{{object.ap.get_absolute_url}}" title="{{object.ap}}">
+                    {% include "lib/img_archive.html" with image=object.ap.image  %}
+                </a>
+            </div>{% endif %}
+            <h2 class="post-title"><a href="{{object.ap.get_absolute_url}}" title="{%if object.title_keywords%}{{object.title_keywords}}{%else%}{{object.ap}}{%endif%}">{{object.ap|safe|smartypants|widont}}</a> (<span class="sci">{{object.ap.scientific_name}}</span>)</h2>
+            <time class="post-date" datetime="{{object.pub_date|date:'c'}}">Last Seen: {{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+            <div class="post-summary">
+                <span class="post-location" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, {{object.state.name}}, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, {{object.country.name}}</a>{%endif%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
                 </span>
-            </p>
+            </div>
         </article> {% endfor %}
     </main>
     <nav class="pagination">
diff --git a/design/templates/base.html b/design/templates/base.html
index 142f11a..14101f0 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -17,7 +17,7 @@
           title="Luxagraf RSS feed"
           href="https://luxagraf.net/rss/">
     {%block stylesheet%}<link rel="stylesheet" 
-          href="/media/screenv8.css" 
+          href="/media/screenv9.css" 
           media="screen">{%endblock%}
     <!--[if IE]>
     <link rel="stylesheet" 
@@ -25,6 +25,7 @@
           media="screen">
     <![endif]-->
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="manifest" href="/manifest.webmanifest" /> 
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
diff --git a/design/templates/details/bird.html b/design/templates/details/bird.html
deleted file mode 100644
index 43877fe..0000000
--- a/design/templates/details/bird.html
+++ /dev/null
@@ -1,47 +0,0 @@
-{% extends 'base.html' %}
-{% load get_image_by_size %}
-{% block extrahead %}
-<style>
-#detail-map-canvas { height: 100%;}
-</style>
-{% endblock %}
-{% block bodyid %}class="birds"{%endblock%}
-{% block primary %}
-<main>
-<article>
-<h1>{{object.common_name}}</h1>
-<h2 class="sci">{{object.scientific_name}}</h2>
-<h3 class="sci">Family {{object.bird_class.scientific_name}} ({{object.bird_class}})</h3>
-{% load get_image_by_size %}
-{% load get_image_width %}
-<div class="post--image">
-<figure>
-<img class="picfull" sizes="(max-width: 680px) 100vw, (min-width: 681) 680px" srcset="{% for size in sighting.image.sizes.all%}{% get_image_by_size sighting.image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}
-   {% for size in sighting.image.sizes.all%}{%if forloop.first %} src="{% get_image_by_size sighting.image size.name %}"{%endif%}{%endfor%} alt="{{sighting.image.alt}} photographed by {% if sighting.image.photo_credit_source %}{{sighting.image.photo_credit_source}}{%else%}luxagraf{%endif%}" >
-{% if sighting.image.photo_credit_source %}<figcaption>photo by <a href="{{sighting.image.photo_credit_url}}">{{sighting.image.photo_credit_source}}</a></figcaption>{%endif%}
-</figure>
-</div>
-{%if recording %}
-<div class="audio-figure">
-<audio autoplay="autoplay" controls="controls">  
-    <source src="/media/{{recording.audio}}" />  
-</audio> 
-<small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
-</div>
-{%endif%}
-<p id="endnode">Seen at {{sighting.location}}, {{sighting.location.comma_name}}  in {{sighting.date|date:"M Y"}} by {% for person in sighting.seen_by.all %}<a href="/birds/{{person}}/">{% if person.username == "luxagraf"%}Scott{%else%}{{person.username|capfirst}}{%endif%}</a>{%if forloop.last %}{%else%}{% if forloop.revcounter == 2 %}, and {%else%}, {%endif%}{%endif%}{%endfor%}</p>
-{% if recording.audio %}
-{%endif%}
-</article>
-</main>
-{% endblock %}
-
-{% block js %}
-<script src="/media/js/leaflet-master/leaflet-mod.js"></script>
-<script src="/media/js/detail.min.js"></script>
-<script type="text/javascript">
-window.onload = function() {
-    createBirdMap({{sighting.latitude}},{{sighting.longitude}}, 12, { type:'point', lat:'{{sighting.latitude}}', lon:'{{sighting.longitude}}'}); return false;
-}
-</script>
-{% endblock %}
diff --git a/design/templates/details/book.html b/design/templates/details/book.html
index c9e9089..dd57d0a 100644
--- a/design/templates/details/book.html
+++ b/design/templates/details/book.html
@@ -1,50 +1,51 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
-{%block bodyid%}id="book-page"{%endblock%}								
+{%block bodyid%}class="detail"{%endblock%}								
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
         <li><a href="/books/" title="books" itemprop="url"><span itemprop="title">books</span></a> &rarr; </li>
     </ul>
-    <main role="main" itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
-    <h1 class="book-title" itemprop="name">{{object.title|smartypants|widont|safe}}</h1>
-    <div class="book-cover-wrapper"><img src="{{object.get_image_url}}" alt="{{object.title}} cover"  /></div>
-    <div class="meta-cover">
-        <dl class="book-metadata">
-            <dt>Author</dt>
-            <dd>{{object.author_name}}</dd>
-            {% if object.publish_date %}<dt>Published</dt>
-            <dd>{%if object.publish_place%}{{object.publish_place}}, {%endif%}{{object.publish_date}}</dd>{%endif%}
-            {% if object.pages %}<dt>Pages</dt>
-            <dd>{{object.pages}}</dd>{%endif%}
-            {% if object.isbn %}<dt>ISBN</dt>
-            <dd>{{object.isbn}}</dd>{%endif%}
-            {% if object.isbn %}<dt>Borrow</dt>
-            <dd><a href="http://worldcat.org/isbn/{{object.isbn}}" title="find {{object.title}} in your local library">WorldCat</a></dd>{%endif%}
-            {% if object.rating %}<dt>Rating</dt><dd class="book-stars" itemprop="reviewRating"> {% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</dd>{%endif%}
-            {% if object.read_in %}<dt>Read</dt>
-            <dd>{{object.read_in}}</dd>{%endif%}
-        </dl>
-    </div>{%if object.body_html%}
-    <div class="thoughts" itemprop="review" itemscope itemtype="http://schema.org/Review">
-        <h5>Notes</h5>
-        <span class="hide" itemprop="reviewRating">{{object.rating}}</span>
-        <meta itemprop="author" value="Scott Gilbertson" />
-        <meta itemprop="datePublished" content="{{object.read_date|date:"c"}}">
-        <div itemprop="reviewBody">{{object.body_html|safe|smartypants|widont}}</div>
-            
-    </div>{%endif%}
-    {% if object.bookhighlight_set.all %}
-    <div class="highlights">
-    <h4>Highlights:</h4>
-    {% for object in object.bookhighlight_set.all reversed %}
-    <article class="h-entry hentry post--article book" itemscope itemType="http://schema.org/Article">
-        <a class="highlink" name="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">&para;</a>
-        {{object.body_html|safe|amp|smartypants}}
-        <p class="foot">page: {{object.page}} {% if object.location %}<small>kindle location: {{object.location|cut:"["|cut:"]"}}</small>{%endif%}</p>
-    </article>
-    {% endfor %}
-    </div>
-    {%endif%}
-</main>
+    <main itemprop="mainEntity" itemscope itemtype="http://schema.org/Book">
+        <h1 class="post-title book-title" itemprop="name">{{object.title|smartypants|widont|safe}}</h1>
+        <div class="book-cover-wrapper">
+            <img src="{{object.get_image_url}}" alt="{{object.title}} cover"  />
+        </div>
+        <div class="meta-cover">
+            <dl class="book-metadata">
+                <dt>Author</dt>
+                <dd>{{object.author_name}}</dd>
+                {% if object.publish_date %}<dt>Published</dt>
+                <dd>{%if object.publish_place%}{{object.publish_place}}, {%endif%}{{object.publish_date}}</dd>{%endif%}
+                {% if object.pages %}<dt>Pages</dt>
+                <dd>{{object.pages}}</dd>{%endif%}
+                {% if object.isbn %}<dt>ISBN</dt>
+                <dd>{{object.isbn}}</dd>{%endif%}
+                {% if object.isbn %}<dt>Borrow</dt>
+                <dd><a href="http://worldcat.org/isbn/{{object.isbn}}" title="find {{object.title}} in your local library">WorldCat</a></dd>{%endif%}
+                {% if object.rating %}<dt>Rating</dt><dd class="book-stars" itemprop="reviewRating"> {% for i in object.ratings_range %}{% if i <= object.get_rating%}&#9733;{%else%}&#9734;{%endif%}{%endfor%}</dd>{%endif%}
+                {% if object.read_in %}<dt>Read</dt>
+                <dd>{{object.read_in}}</dd>{%endif%}
+            </dl>
+        </div>{%if object.body_html%}
+        <div class="thoughts" itemprop="review" itemscope itemtype="http://schema.org/Review">
+            <h5>Notes</h5>
+            <span class="hide" itemprop="reviewRating">{{object.rating}}</span>
+            <meta itemprop="author" value="Scott Gilbertson" />
+            <meta itemprop="datePublished" content="{{object.read_date|date:"c"}}">
+            <div itemprop="reviewBody">{{object.body_html|safe|smartypants|widont}}</div>
+        </div>{%endif%}
+        {% if object.bookhighlight_set.all %}
+        <div class="highlights">
+            <h4>Highlights:</h4>
+            {% for object in object.bookhighlight_set.all reversed %}
+            <article class="h-entry hentry post--article book" itemscope itemType="http://schema.org/Article">
+                <a class="highlink" name="h{{forloop.counter}}-page-{{object.page}}" href="#h{{forloop.counter}}-page-{{object.page}}">&para;</a>
+                {{object.body_html|safe|amp|smartypants}}
+                <p class="foot">page: {{object.page}} {% if object.location %}<small>kindle location: {{object.location|cut:"["|cut:"]"}}</small>{%endif%}</p>
+            </article>
+            {% endfor %}
+        </div>
+        {%endif%}
+    </main>
 {% endblock %}
 
diff --git a/design/templates/details/entry.html b/design/templates/details/entry.html
index aef590d..cea73ef 100644
--- a/design/templates/details/entry.html
+++ b/design/templates/details/entry.html
@@ -31,22 +31,18 @@
 
 {%endblock%}
 {%block htmlclass%}{% with object.template_name as t %}
-class="{%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t == 2 or t == 3 %} dark{%endif%}{%if t == 4 or t == 5 %} black{%endif%}"{%endwith%}{%endblock%}
+class="detail {%if t == 1 or t == 3 or t == 5 %}double{%else%}single{%endif%}{%if t == 2 or t == 3 %} dark{%endif%}{%if t == 4 or t == 5 %} black{%endif%}"{%endwith%}{%endblock%}
 								
 				
 {% block primary %}		
-    <main role="main" id="main">
-    <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article">
-            <header id="header" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
-                <h1 class="p-name entry-title post--title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
-                <time class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+    <main>
+    <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article">
+            <header id="header" class="post-header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
+                <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
+                <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
             <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
-                <aside class="p-location h-adr adr post--location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+                <aside class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                     {% if object.country.name == "United States" %}<span class="p-locality locality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name|safe}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name|safe}}</a>{%endif%}
-                    <span style="display: none;" itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
-                        <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}">{{object.latitude}}</data>
-                        <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}">{{object.longitude}}</data>
-                    </span>
                     {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %} &ndash;&nbsp;<a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a>{%endif%}{%endwith%}
                 </aside>
             </header>
diff --git a/design/templates/details/figments.html b/design/templates/details/figments.html
index 6cd6a7c..ae8dd33 100644
--- a/design/templates/details/figments.html
+++ b/design/templates/details/figments.html
@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% load typogrify_tags %}
-{%block bodyid%}class="figments"{%endblock%}
+{%block bodyid%}class="detail"{%endblock%}
 
 
 {%block extrahead%}
@@ -24,18 +24,18 @@
     <li><a href="/figments/" title="Figments" itemprop="url"><span itemprop="title">Figments</span></a> &rarr; </li>
     <li>{{object.title}}</li>
     </ul>
-    <main role="main">
-    <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article">
+    <main>
+    <article class="h-entry hentry post-article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/Article">
             <header id="header" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
-                <h1 class="p-name entry-title post--title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
+                <h1 class="p-name entry-title post-title" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
                 <time class="hide dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
-                <ul>
+                <ul class="downloads">
                     <li class="kindle"><a href="javascript:(%0A%28function%28%29%7Bwindow.baseUrl%3D%27//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/send-to-kindle.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Send to Kindle</a></li>
                 <li class="epub"><a href="{{object.get_absolute_url}}.epub">Download for iBooks (epub)</a></li>
                 </ul>
             <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
             </header>
-        <div id="article" class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody">
+        <div id="article" class="e-content entry-content post-body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}" itemprop="articleBody">
             {{object.body_html|safe|smartypants|widont}}
         </div>
         </article>
diff --git a/design/templates/details/page.html b/design/templates/details/page.html
index e0e1d47..cf3a287 100644
--- a/design/templates/details/page.html
+++ b/design/templates/details/page.html
@@ -2,7 +2,7 @@
 {% load typogrify_tags %}
 {% block pagetitle %}Luxagraf | {{object.title}}{% endblock %}
 {% block metadescription %}{{object.meta_description}}{% endblock %}
-{%block htmlclass%}class="single"{%endblock%}
+{%block htmlclass%}class="detail"{%endblock%}
 {%block bodyid%}id="{{object.title|lower}}"{%endblock%}								
 				
 {% block primary %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
@@ -10,12 +10,14 @@
         {% if object.path%}<li><a href="/{{object.path|slugify}}/">{{object.path}}</a> &rarr; </li>{%endif%}
         <li>{{object.title}}</li>
     </ul>
-    <article role="main">
-        <h1 class="page--title">{{object.title}}</h1>
-        <div class="post--article">
+    <main>
+    <article>
+        <h1 class="post-title">{{object.title}}</h1>
+        <div class="post-article">
         {{object.body_html|safe|smartypants|widont}}
         </div>  
     </article>
+    </main>
 {% endblock %}
 {% block js %}
 <script src="/media/js/lightbox.js" type="text/javascript"></script>
diff --git a/design/templates/details/sighting.html b/design/templates/details/sighting.html
index 5a46e14..1af2433 100644
--- a/design/templates/details/sighting.html
+++ b/design/templates/details/sighting.html
@@ -5,7 +5,7 @@
 #detail-map-canvas { height: 100%;}
 </style>
 {% endblock %}
-{% block bodyid %}class="birds"{%endblock%}
+{% block bodyid %}class="detail"{%endblock%}
 {% block primary %}
 <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
         <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
@@ -26,7 +26,7 @@
 <small>Audio recorded by {{recording.recorder}} on {{recording.pub_date|date:"F j, Y"}} in {{recording.location}}. <a href="{{recording.link}}">&copy; {{recording.copyright}}</a></small>
 </div>
 {%endif%}
-<div id="endnode">
+<div class="entry-footer" id="endnode">
     <aside id="locations">
         <h5>Seen at</h5>
         <ul>{%for sight in sighting %}
diff --git a/design/templates/lib/img_archive.html b/design/templates/lib/img_archive.html
new file mode 100644
index 0000000..2d00e78
--- /dev/null
+++ b/design/templates/lib/img_archive.html
@@ -0,0 +1,2 @@
+{% load get_image_by_size %}
+<img sizes="(max-width: 728px) 100vw, (min-width: 729px) 520px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}>
diff --git a/design/templates/lib/img_cluster.html b/design/templates/lib/img_cluster.html
index 158bbac..e425727 100644
--- a/design/templates/lib/img_cluster.html
+++ b/design/templates/lib/img_cluster.html
@@ -1,8 +1,8 @@
 {% load get_image_by_size %}
 {% if caption or exif %}
-<figure class="{{cluster_class}}">{%endif%}
+<figure {%if cluster_class != "picwide"%}class="{{cluster_class}}"{%endif%}>{%endif%}
     <a href="{%get_image_by_size image "original"%}" title="view larger image {% if image.photo_credit_source%}(photo by {{image.photo_credit_source}}){%endif%}">
-        <img class="{% if caption or exif %}{%else%}{{cluster_class}}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1280px) 100vw, (min-width: 1281px) 1280px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
+        <img class="{% if caption or exif %}{%else%}{%if cluster_class != "picwide"%}{{cluster_class}}{%endif%}{%endif%} {%if extra%}{{extra}}{%endif%}" {%if cluster_class == "picwide"%} sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%}{%else%} src="{% get_image_by_size image cluster_class %}"{%endif%} alt="{%if image.alt %}{{image.alt}}{%else%}{{image.title}}{%endif%} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
 {% if caption or exif %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if caption or exif %}</figcaption>
 </figure>
 {% endif %}
diff --git a/design/templates/lib/img_picwide.html b/design/templates/lib/img_picwide.html
index 52e0936..21b325b 100644
--- a/design/templates/lib/img_picwide.html
+++ b/design/templates/lib/img_picwide.html
@@ -1,7 +1,9 @@
 {% load get_image_by_size %}
 {% if caption or exif or image.photo_credit_source %}
-<figure class="picwide">{%endif%}
-<a href="{%get_image_by_size image "original"%} " title="view larger image"><img class="picwide" sizes="(max-width: 1280px) 100vw, (min-width: 1281px) 1280px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}></a>
+<figure{%if not is_cluster %} class="picwide"{%endif%}>{%else%}{%if not is_cluster %}<div class="picwide">{%endif%}{%endif%}
+        <a href="{%get_image_by_size image "original"%} " title="view larger image">
+            <img sizes="(max-width: 1439px) 100vw, (min-width: 1440px) 1440px" srcset="{% for size in image.sizes.all%}{% get_image_by_size image size.name %} {{size.width}}w{% if forloop.last%}"{%else%}, {%endif%}{%endfor%}{% for size in image.sizes.all%}{%if not forloop.first and not forloop.last%} src="{% get_image_by_size image size.name%}"{%endif%}{%endfor%} alt="{{image.alt}} photographed by {% if image.photo_credit_source %}{{image.photo_credit_source}}{%else%}luxagraf{%endif%}" data-jslghtbx="{%get_image_by_size image "original"%}" data-jslghtbx-group="group" {% if caption%}data-jslghtbx-caption="{{image.caption}}"{%endif%}>
+        </a>
 {% if caption or exif or image.photo_credit_source %}<figcaption>{% endif %}{% if caption %}{{image.caption|safe}}{% endif %}{% if exif %} | <small>Camera: {{image.exif_make}} {{image.exif_model}} with {{image.exif_lens}}</small>{% endif %}{% if image.photo_credit_source %}{%if caption or exif %} | {%endif%}image by {% if image.photo_credit_url %}<a href="{{image.photo_credit_url}}">{%endif%}{{image.photo_credit_source}}{% if image.photo_credit_url %}</a>{%endif%}{%endif%}{% if caption or exif or image.photo_credit_source %}</figcaption>
-</figure>
+</figure>{%else%}{%if not is_cluster %}</div>{%endif%}
 {% endif %}