Initial commit

20 files changed, 377 insertions, 690 deletions

diff --git a/src/css/imports/_border-colors.css b/src/css/imports/_border-colors.css
index 4eaf69e..0babaab 100755
--- a/src/css/imports/_border-colors.css
+++ b/src/css/imports/_border-colors.css
@@ -1,84 +1,35 @@
-/*
+.b--primary {
+  border-color: var(--primary);
+}
 
-   BORDER COLORS
-   Docs: http://tachyons.io/docs/themes/borders/
+.b--highlight {
+  border-color: --var(--highlight);
+}
 
-   Border colors can be used to extend the base
-   border classes ba,bt,bb,br,bl found in the _borders.css file.
+.b--white {
+  border-color: var(--white);
+}
 
-   The base border class by default will set the color of the border
-   to that of the current text color. These classes are for the cases
-   where you desire for the text and border colors to be different.
+.b--off-white {
+  border-color: var(--off-white);
+}
 
-   Base:
-     b = border
+.b--grey-1 {
+  border-color: var(--grey-1);
+}
 
-   Modifiers:
-   --color-name = each color variable name is also a border color name
+.b--grey-2 {
+  border-color: var(--grey-2);
+}
 
-*/
+.b--grey-3 {
+  border-color: var(--grey-3);
+}
 
-.b--black {        border-color: var(--black); }
-.b--near-black {   border-color: var(--near-black); }
-.b--dark-gray {    border-color: var(--dark-gray); }
-.b--mid-gray {     border-color: var(--mid-gray); }
-.b--gray {         border-color: var(--gray); }
-.b--silver {       border-color: var(--silver); }
-.b--light-silver { border-color: var(--light-silver); }
-.b--light-gray {   border-color: var(--light-gray); }
-.b--near-white {   border-color: var(--near-white); }
-.b--white {        border-color: var(--white); }
+.b--grey-4 {
+  border-color: var(--grey-4);
+}
 
-.b--white-90 {   border-color: var(--white-90); }
-.b--white-80 {   border-color: var(--white-80); }
-.b--white-70 {   border-color: var(--white-70); }
-.b--white-60 {   border-color: var(--white-60); }
-.b--white-50 {   border-color: var(--white-50); }
-.b--white-40 {   border-color: var(--white-40); }
-.b--white-30 {   border-color: var(--white-30); }
-.b--white-20 {   border-color: var(--white-20); }
-.b--white-10 {   border-color: var(--white-10); }
-.b--white-05 {   border-color: var(--white-05); }
-.b--white-025 {   border-color: var(--white-025); }
-.b--white-0125 {   border-color: var(--white-0125); }
-
-.b--black-90 {   border-color: var(--black-90); }
-.b--black-80 {   border-color: var(--black-80); }
-.b--black-70 {   border-color: var(--black-70); }
-.b--black-60 {   border-color: var(--black-60); }
-.b--black-50 {   border-color: var(--black-50); }
-.b--black-40 {   border-color: var(--black-40); }
-.b--black-30 {   border-color: var(--black-30); }
-.b--black-20 {   border-color: var(--black-20); }
-.b--black-10 {   border-color: var(--black-10); }
-.b--black-05 {   border-color: var(--black-05); }
-.b--black-025 {   border-color: var(--black-025); }
-.b--black-0125 {   border-color: var(--black-0125); }
-
-.b--dark-red { border-color: var(--dark-red); }
-.b--red { border-color: var(--red); }
-.b--light-red { border-color: var(--light-red); }
-.b--orange { border-color: var(--orange); }
-.b--gold { border-color: var(--gold); }
-.b--yellow { border-color: var(--yellow); }
-.b--light-yellow { border-color: var(--light-yellow); }
-.b--purple { border-color: var(--purple); }
-.b--light-purple { border-color: var(--light-purple); }
-.b--dark-pink { border-color: var(--dark-pink); }
-.b--hot-pink { border-color: var(--hot-pink); }
-.b--pink { border-color: var(--pink); }
-.b--light-pink { border-color: var(--light-pink); }
-.b--dark-green { border-color: var(--dark-green); }
-.b--green { border-color: var(--green); }
-.b--light-green { border-color: var(--light-green); }
-.b--navy { border-color: var(--navy); }
-.b--dark-blue { border-color: var(--dark-blue); }
-.b--blue { border-color: var(--blue); }
-.b--light-blue { border-color: var(--light-blue); }
-.b--lightest-blue { border-color: var(--lightest-blue); }
-.b--washed-blue { border-color: var(--washed-blue); }
-.b--washed-green { border-color: var(--washed-green); }
-.b--washed-yellow { border-color: var(--washed-yellow); }
-.b--washed-red { border-color: var(--washed-red); }
-
-.b--transparent { border-color: var(--transparent); }
+.b--black {
+  border-color: var(--black);
+}
diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css
index 19b873c..2422bd2 100755
--- a/src/css/imports/_border-radius.css
+++ b/src/css/imports/_border-radius.css
@@ -24,11 +24,12 @@
 
 */
 
+  :root {
+    --border-radius: .25rem;
+  }
+
   .br0 {        border-radius: 0; }
-  .br1 {        border-radius: .125rem; }
-  .br2 {        border-radius: .25rem; }
-  .br3 {        border-radius: .5rem; }
-  .br4 {        border-radius: 1rem; }
+  .br1 {        border-radius: var(--border-radius); }
   .br-100 {     border-radius: 100%; }
   .br-pill {    border-radius: 9999px; }
   .br--bottom {
@@ -50,10 +51,7 @@
 
 @media (--breakpoint-not-small) {
   .br0-ns {     border-radius: 0; }
-  .br1-ns {     border-radius: .125rem; }
-  .br2-ns {     border-radius: .25rem; }
-  .br3-ns {     border-radius: .5rem; }
-  .br4-ns {     border-radius: 1rem; }
+  .br1-ns {     border-radius: var(--border-radius); }
   .br-100-ns {  border-radius: 100%; }
   .br-pill-ns { border-radius: 9999px; }
   .br--bottom-ns {
@@ -76,10 +74,7 @@
 
 @media (--breakpoint-medium) {
   .br0-m {     border-radius: 0; }
-  .br1-m {     border-radius: .125rem; }
-  .br2-m {     border-radius: .25rem; }
-  .br3-m {     border-radius: .5rem; }
-  .br4-m {     border-radius: 1rem; }
+  .br1-m {     border-radius: var(--border-radius); }
   .br-100-m {  border-radius: 100%; }
   .br-pill-m { border-radius: 9999px; }
   .br--bottom-m {
@@ -102,10 +97,7 @@
 
 @media (--breakpoint-large) {
   .br0-l {     border-radius: 0; }
-  .br1-l {     border-radius: .125rem; }
-  .br2-l {     border-radius: .25rem; }
-  .br3-l {     border-radius: .5rem; }
-  .br4-l {     border-radius: 1rem; }
+  .br1-l {     border-radius: var(--border-radius); }
   .br-100-l {  border-radius: 100%; }
   .br-pill-l { border-radius: 9999px; }
   .br--bottom-l {
diff --git a/src/css/imports/_buttons.css b/src/css/imports/_buttons.css
new file mode 100644
index 0000000..57cb4ff
--- /dev/null
+++ b/src/css/imports/_buttons.css
@@ -0,0 +1,13 @@
+.btn {
+  display: inline-block;
+  padding: 12px 16px 10px;
+  font-size: 1rem;
+  line-height: 1.25;
+  background-color: var(--white);
+  border-radius: var(--border-radius);
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--primary);
+  text-align: center;
+  box-shadow: inset 0 0 0 2px var(--primary);
+}
diff --git a/src/css/imports/_cms.css b/src/css/imports/_cms.css
new file mode 100644
index 0000000..e82565e
--- /dev/null
+++ b/src/css/imports/_cms.css
@@ -0,0 +1,13 @@
+.cms {
+  & h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+  }
+  & a {
+    color: var(--primary);
+    transition: var(--hover-transition);
+    &:hover {
+      background-color: var(--highlight);
+      color: var(--black);
+    }
+  }
+}
diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css
index 7280aec..9d09e73 100755
--- a/src/css/imports/_colors.css
+++ b/src/css/imports/_colors.css
@@ -1,80 +1,94 @@
-/*
+/* Color variables */
 
-   Tachyons
-   COLOR VARIABLES
+:root {
+  --primary: rgba(255, 68, 0, 1);
+  --highlight: rgba(254, 213, 198, 1);
+  --white: rgba(255, 255, 255, 1);
+  --off-white: rgba(255, 253, 252, 1);
+  --grey-1: rgba(245, 243, 242, 1);
+  --grey-2: rgba(235, 231, 230, 1);
+  --grey-3: rgba(89, 87, 86, 1);
+  --grey-4: rgba(66, 64, 64, 1);
+  --black: rgba(43, 37, 35, 1);
+}
 
-   Grayscale
-   - Solids
-   - Transparencies
-   Colors
+/* Text colors */
 
-*/
+.primary {
+  color: var(--primary);
+}
 
-:root {
-  --black: #000;
-  --near-black: #111;
-  --dark-gray:#333;
-  --mid-gray:#555;
-  --gray: #777;
-  --silver: #999;
-  --light-silver: #aaa;
-  --moon-gray: #ccc;
-  --light-gray: #eee;
-  --near-white: #f4f4f4;
-  --white: #fff;
+.highlight {
+  color: --var(--highlight);
+}
 
-  --transparent:transparent;
+.white {
+  color: var(--white);
+}
 
- --black-90: rgba(0,0,0,.9);
- --black-80: rgba(0,0,0,.8);
- --black-70: rgba(0,0,0,.7);
- --black-60: rgba(0,0,0,.6);
- --black-50: rgba(0,0,0,.5);
- --black-40: rgba(0,0,0,.4);
- --black-30: rgba(0,0,0,.3);
- --black-20: rgba(0,0,0,.2);
- --black-10: rgba(0,0,0,.1);
- --black-05: rgba(0,0,0,.05);
- --black-025: rgba(0,0,0,.025);
- --black-0125: rgba(0,0,0,.0125);
+.off-white {
+  color: var(--off-white);
+}
 
- --white-90: rgba(255,255,255,.9);
- --white-80: rgba(255,255,255,.8);
- --white-70: rgba(255,255,255,.7);
- --white-60: rgba(255,255,255,.6);
- --white-50: rgba(255,255,255,.5);
- --white-40: rgba(255,255,255,.4);
- --white-30: rgba(255,255,255,.3);
- --white-20: rgba(255,255,255,.2);
- --white-10: rgba(255,255,255,.1);
- --white-05: rgba(255,255,255,.05);
- --white-025: rgba(255,255,255,.025);
- --white-0125: rgba(255,255,255,.0125);
+.grey-1 {
+  color: var(--grey-1);
+}
 
-  --dark-red:  #e7040f;
-  --red:  #ff4136;
-  --light-red:  #ff725c;
-  --orange:  #ff6300;
-  --gold:  #ffb700;
-  --yellow:  #ffd700;
-  --light-yellow:  #fbf1a9;
-  --purple:  #5e2ca5;
-  --light-purple:  #a463f2;
-  --dark-pink:  #d5008f;
-  --hot-pink: #ff41b4;
-  --pink:  #ff80cc;
-  --light-pink:  #ffa3d7;
-  --dark-green:  #137752;
-  --green:  #19a974;
-  --light-green:  #9eebcf;
-  --navy:  #001b44;
-  --dark-blue:  #00449e;
-  --blue:  #357edd;
-  --light-blue:  #96ccff;
-  --lightest-blue:  #cdecff;
-  --washed-blue:  #f6fffe;
-  --washed-green:  #e8fdf5;
-  --washed-yellow:  #fffceb;
-  --washed-red:  #ffdfdf;
+.grey-2 {
+  color: var(--grey-2);
+}
+
+.grey-3 {
+  color: var(--grey-3);
+}
+
+.grey-4 {
+  color: var(--grey-4);
+}
+
+.black {
+  color: var(--black);
+}
+
+.bg-primary {
+  background-color: var(--primary);
+}
+
+.bg-highlight {
+  background-color: --var(--highlight);
+}
+
+.bg-white {
+  background-color: var(--white);
+}
+
+.bg-off-white {
+  background-color: var(--off-white);
+}
+
+.bg-grey-1 {
+  background-color: var(--grey-1);
+}
+
+.bg-grey-2 {
+  background-color: var(--grey-2);
+}
+
+.bg-grey-3 {
+  background-color: var(--grey-4);
+}
+
+.bg-grey-4 {
+  background-color: var(--grey-4);
+}
+
+.bg-black {
+  background-color: var(--black);
+}
 
+.bg-fix-primary {
+  padding: 0 .5rem;
+  & :first-child {
+    box-shadow: .5rem 0 0 var(--primary), -.5rem 0 0 var(--primary);
+  }
 }
diff --git a/src/css/imports/_font-family.css b/src/css/imports/_font-family.css
index eed780a..f71d65d 100755
--- a/src/css/imports/_font-family.css
+++ b/src/css/imports/_font-family.css
@@ -7,7 +7,7 @@
 
 
 .sans-serif {
-  font-family: -apple-system, BlinkMacSystemFont,
+  font-family: Nunito Sans, -apple-system, BlinkMacSystemFont,
                'avenir next', avenir,
                helvetica, 'helvetica neue',
                ubuntu,
@@ -97,4 +97,3 @@ code, .code {
   font-family: baskerville,
                serif;
 }
-
diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css
index fe0b8ab..12ee7c6 100755
--- a/src/css/imports/_forms.css
+++ b/src/css/imports/_forms.css
@@ -1,9 +1,14 @@
 /*
 
    FORMS
-   
+
 */
 
+fieldset
+{
+  position: relative;
+}
+
 .input-reset {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -14,3 +19,62 @@
   border: 0;
   padding: 0;
 }
+
+input, textarea {
+  background-color: var(--grey-2);
+  border-radius: var(--border-radius);
+  padding: 12px 16px 10px;
+  font-size: 1rem;
+  line-height: 1.25;
+  position: relative;
+  z-index: 2;
+  &:focus {
+    background-color: var(--white);
+  }
+  &:focus + label {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(-120%);
+  }
+}
+
+::-webkit-input-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+:-moz-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+::-moz-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+:-ms-input-placeholder {
+   color: var(--black);
+   font-size: 1rem;
+   line-height: normal;
+}
+
+label
+{
+  font-size: .875rem;
+  font-weight: 800;
+  color: var(--primary);
+  background-color: var(--grey-2);
+  border-radius: .25rem;
+  padding: .25rem .5rem;
+  position: absolute;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  line-height: 1;
+  transition: var(--hover-transition);
+  z-index: 2;
+}
diff --git a/src/css/imports/_hovers.css b/src/css/imports/_hovers.css
index 7e9a64e..a10c718 100755
--- a/src/css/imports/_hovers.css
+++ b/src/css/imports/_hovers.css
@@ -1,33 +1,16 @@
-/*
-
-  HOVER EFFECTS
-  Docs: http://tachyons.io/docs/themes/hovers/
-
-    - Dim
-    - Hide Child
-    - Underline text
-    - Grow
-    - Pointer
-    - Shadow
-
-*/
-
-/*
-
-  Dim element on hover by adding the dim class.
-
-*/
-.dim {
-  opacity: 1;
-  transition: opacity .15s ease-in;
-}
-.dim:hover,
-.dim:focus {
-  opacity: .5;
-  transition: opacity .15s ease-in;
-}
-.dim:active {
-  opacity: .8; transition: opacity .15s ease-out;
+@media (--breakpoint-large) {
+  .raise {
+    transform: none;
+    transition: var(--hover-transition);
+  }
+  .raise:hover,
+  .raise:focus {
+    transform: translateY(-.1rem);
+    transition: var(--hover-transition);
+  }
+  .raise:active {
+    opacity: .5; transition: var(--hover-transition);
+  }
 }
 
 /*
@@ -101,31 +84,3 @@
 .pointer:hover {
   cursor: pointer;
 }
-
-/* 
-   Add shadow on hover.
-
-   Performant box-shadow animation pattern from 
-   http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 
-*/
-
-.shadow-hover::after {
-  box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, .2 );
-  opacity: 0;
-  transition: opacity .25s ease-in-out;
-}
-
-.shadow-hover:hover::after,
-.shadow-hover:focus::after {
-  opacity: 1;
-}
-
-/* Combine with classes in skins and skins-pseudo for 
- * thousands of different transition possibilities. */
-
-.bg-animate,
-.bg-animate:hover,
-.bg-animate:focus {
-  transition: background-color .15s ease-in-out; 
-}
-
diff --git a/src/css/imports/_links.css b/src/css/imports/_links.css
index 6c9a2c8..243b5f0 100755
--- a/src/css/imports/_links.css
+++ b/src/css/imports/_links.css
@@ -8,6 +8,7 @@
 .link {
   text-decoration: none;
   transition: color .15s ease-in;
+  color: inherit;
 }
 
 .link:link,
@@ -16,6 +17,7 @@
 }
 .link:hover   {
   transition: color .15s ease-in;
+  text-decoration: underline;
 }
 .link:active  {
   transition: color .15s ease-in;
@@ -24,4 +26,3 @@
   transition: color .15s ease-in;
   outline: 1px dotted currentColor;
 }
-
diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css
index d8a4c93..d3be559 100755
--- a/src/css/imports/_media-queries.css
+++ b/src/css/imports/_media-queries.css
@@ -1,36 +1,5 @@
-/*
+@custom-media --breakpoint-not-small screen and (min-width: 40em);
 
-  CUSTOM MEDIA QUERIES
+@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em);
 
-  Media query values can be changed to fit your own content.
-  There are no magic bullets when it comes to media query width values.
-  They should be declared in em units - and they should be set to meet
-  the needs of your content. You can also add additional media queries,
-  or remove some of the existing ones.
-
-  These media queries can be referenced like so:
-
-  @media (--breakpoint-not-small) {
-    .medium-and-larger-specific-style {
-      background-color: red;
-    }
-  }
-
-  @media (--breakpoint-medium) {
-    .medium-screen-specific-style {
-      background-color: red;
-    }
-  }
-
-  @media (--breakpoint-large) {
-    .large-and-larger-screen-specific-style {
-      background-color: red;
-    }
-  }
-
-*/
-
-/* Media Queries */
-@custom-media --breakpoint-not-small screen and (min-width: 30em);
-@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
 @custom-media --breakpoint-large screen and (min-width: 60em);
diff --git a/src/css/imports/_normalize.css b/src/css/imports/_normalize.css
deleted file mode 100755
index f1f7770..0000000
--- a/src/css/imports/_normalize.css
+++ /dev/null
@@ -1,422 +0,0 @@
-/* normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
-
-/**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Correct the line height in all browsers.
- * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  line-height: 1.15; /* 2 */
-  -ms-text-size-adjust: 100%; /* 3 */
-  -webkit-text-size-adjust: 100%; /* 3 */
-}
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-article,
-aside,
-details, /* 1 */
-figcaption,
-figure,
-footer,
-header,
-main, /* 2 */
-menu,
-nav,
-section,
-summary { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
- */
-
-template, /* 1 */
-[hidden] {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the bottom border in Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ffd700;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font: inherit; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Change the border, margin, and padding in all browsers (opinionated).
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
diff --git a/src/css/imports/_reset.css b/src/css/imports/_reset.css
new file mode 100755
index 0000000..d0a1f31
--- /dev/null
+++ b/src/css/imports/_reset.css
@@ -0,0 +1,67 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+input, textarea {
+	font-size: 1rem;
+	border: none;
+	font-family: inherit;
+	border: 0;
+	margin: 0;
+}
+
+button {
+	font-family: inherit;
+	border: 0;
+	margin: 0;
+	cursor: pointer;
+}
+
+a {
+	color: inherit;
+}
diff --git a/src/css/imports/_spacing.css b/src/css/imports/_spacing.css
index 8057126..41d4118 100755
--- a/src/css/imports/_spacing.css
+++ b/src/css/imports/_spacing.css
@@ -46,7 +46,6 @@
 
 */
 
-
 .pa0 { padding: var(--spacing-none); }
 .pa1 { padding: var(--spacing-extra-small); }
 .pa2 { padding: var(--spacing-small); }
@@ -277,6 +276,10 @@
   margin-right: var(--spacing-extra-extra-extra-large);
 }
 
+.mhn1 { margin-left: -.25rem; margin-right: -.25rem; }
+.mhn2 { margin-left: -.5rem; margin-right: -.5rem; }
+.mhn3 { margin-left: -1rem; margin-right: -1rem; }
+
 @media (--breakpoint-not-small) {
   .pa0-ns  {  padding: var(--spacing-none); }
   .pa1-ns {  padding: var(--spacing-extra-small); }
@@ -499,6 +502,10 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
+  .mhn1-ns { margin-left: -.25rem; margin-right: -.25rem; }
+  .mhn2-ns { margin-left: -.5rem; margin-right: -.5rem; }
+  .mhn3-ns { margin-left: -1rem; margin-right: -1rem; }
+
 }
 
 @media (--breakpoint-medium) {
@@ -724,6 +731,10 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
+  .mhn1-m { margin-left: -.25rem; margin-right: -.25rem; }
+  .mhn2-m { margin-left: -.5rem; margin-right: -.5rem; }
+  .mhn3-m { margin-left: -1rem; margin-right: -1rem; }
+
 }
 
 @media (--breakpoint-large) {
@@ -948,5 +959,8 @@
     margin-left: var(--spacing-extra-extra-extra-large);
     margin-right: var(--spacing-extra-extra-extra-large);
   }
-}
 
+  .mhn1-l { margin-left: -.25rem; margin-right: -.25rem; }
+  .mhn2-l { margin-left: -.5rem; margin-right: -.5rem; }
+  .mhn3-l { margin-left: -1rem; margin-right: -1rem; }
+}
diff --git a/src/css/imports/_styles.css b/src/css/imports/_styles.css
index 56beaae..1b6eca0 100755
--- a/src/css/imports/_styles.css
+++ b/src/css/imports/_styles.css
@@ -6,3 +6,6 @@
 
 */
 
+::selection {
+  background-color: var(--highlight);
+}
diff --git a/src/css/imports/_svg.css b/src/css/imports/_svg.css
new file mode 100644
index 0000000..165b5e9
--- /dev/null
+++ b/src/css/imports/_svg.css
@@ -0,0 +1,7 @@
+svg {
+  fill: currentColor;
+  fill-rule:evenodd;
+  clip-rule:evenodd;
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css
index 31f1018..dab4aa6 100755
--- a/src/css/imports/_type-scale.css
+++ b/src/css/imports/_type-scale.css
@@ -27,6 +27,25 @@
  * so be careful using them on smaller screens.
  * */
 
+html {
+  font-size: 18px;
+  @media (--breakpoint-medium) {
+    font-size: 20px;
+  }
+  @media (--breakpoint-large) {
+    font-size: 22px;
+  }
+}
+
+
+body {
+  font-size: 1rem;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--white);
+ }
+
 .f-6,
 .f-headline {
   font-size: 6rem;
diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css
index 4a41038..4d6fecc 100755
--- a/src/css/imports/_typography.css
+++ b/src/css/imports/_typography.css
@@ -10,7 +10,10 @@
 
 */
 
-
+p {
+  margin-bottom: 1rem;
+  max-width: 32rem;
+}
 
 /* Measure is limited to ~66 characters */
 .measure {
@@ -24,7 +27,7 @@
 
 /* Measure is limited to ~45 characters */
 .measure-narrow {
-  max-width: 20em;
+  max-width: 25em;
 }
 
 /* Book paragraph style - paragraphs are indented with no vertical spacing. */
diff --git a/src/css/imports/_utilities.css b/src/css/imports/_utilities.css
index 73c6b5d..01da910 100755
--- a/src/css/imports/_utilities.css
+++ b/src/css/imports/_utilities.css
@@ -58,3 +58,24 @@
   margin-right: auto;
   margin-left: auto;
 }
+
+.fade-bottom-light {
+  position: relative;
+}
+
+.fade-bottom-light:after {
+
+    content: "";
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, color(#F0F2F5 alpha(-100%)), var(--white) 90%);
+    width: 100%;
+    height: 3rem;
+  }
+
+.divider {
+  box-shadow: inset 0 -4px 0 var(--grey-1);
+}
diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css
new file mode 100644
index 0000000..f75395f
--- /dev/null
+++ b/src/css/imports/_variables.css
@@ -0,0 +1,3 @@
+:root {
+  --hover-transition: all 150ms ease;
+}
diff --git a/src/css/main.css b/src/css/main.css
index 98cfc95..c9a363a 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -12,7 +12,7 @@
  *    TABLE OF CONTENTS
  *
  *    1. External Library Includes
- *       - Normalize.css | http://normalize.css.github.io
+ *       - Reset.css | http://meyerweb.com/eric/tools/css/reset/
  *    2. Tachyons Modules
  *    3. Variables
  *       - Media Queries
@@ -25,7 +25,7 @@
 
 
 /* External Library Includes */
-@import './imports/_normalize';
+@import './imports/_reset';
 
 /* Modules */
 @import './imports/_box-sizing';
@@ -34,10 +34,10 @@
 @import './imports/_background-position';
 @import './imports/_outlines';
 @import './imports/_borders';
-@import './imports/_border-colors';
 @import './imports/_border-radius';
 @import './imports/_border-style';
 @import './imports/_border-widths';
+@import './imports/_border-colors';
 @import './imports/_box-shadow';
 @import './imports/_code';
 @import './imports/_coordinates';
@@ -59,10 +59,7 @@
 @import './imports/_overflow';
 @import './imports/_position';
 @import './imports/_opacity';
-@import './imports/_skins';
-@import './imports/_skins-pseudo';
 @import './imports/_spacing';
-@import './imports/_tables';
 @import './imports/_text-decoration';
 @import './imports/_text-align';
 @import './imports/_text-transform';
@@ -75,15 +72,19 @@
 @import './imports/_hovers';
 @import './imports/_z-index';
 @import './imports/_styles';
+@import './imports/_buttons';
+@import './imports/_svg';
+@import './imports/_cms';
 
 /* Variables */
 /* Importing here will allow you to override any variables in the modules */
 @import './imports/_colors';
 @import './imports/_media-queries';
+@import './imports/_variables';
 
 /* Debugging */
 @import './imports/_debug-children';
 @import './imports/_debug-grid';
 
 /* Uncomment out the line below to help debug layout issues */
-/* @import './imports/_debug'; */
+/*@import './imports/_debug';*/