37 files changed, 1614 insertions, 133 deletions
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