@charset "UTF-8";
.banner:after, .tagline div:after {
  content: "";
  display: table;
  clear: both; }

*, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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, img, ins, kbd, q, s, samp, small, strike, 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 {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

a img {
  border: none; }

button, input {
  line-height: normal; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  *overflow: visible; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

@-moz-viewport {
  width: device-width; }
@-ms-viewport {
  width: device-width; }
@-o-viewport {
  width: device-width; }
@-webkit-viewport {
  width: device-width; }
@viewport {
  width: device-width; }
html {
  background: #efefef;
  font-size: 112.5%;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  background-color: transparent;
  color: #212420;
  font-family: "adelle", Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1rem;
  line-height: 1.5rem;
  width: 100%; }

sup, sub {
  line-height: 0;
  font-size: 0.61805rem; }

a {
  color: #c64227;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -hp-pre-wrap;
  word-wrap: break-word; }
  a:hover {
    color: #aa3921;
    text-decoration: none; }
  a:visited {
    color: #8d2f1c; }
  a:focus, a:active {
    color: #aa3921; }

h1, h2, h3, h4, h5, h6 {
  font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; }

p + p {
  text-indent: 1.5rem; }

form {
  margin-bottom: 4rem; }
  form ul {
    list-style: none; }
  form li {
    margin: 0 0 2rem 0; }
  form span {
    display: inline-block; }

label {
  display: block; }

input, textarea {
  border: 1px solid #e0e3e0;
  display: block;
  font-family: "adelle", Georgia, Cambria, "Times New Roman", Times, serif;
  line-height: 1.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.5rem;
  width: 100%; }

textarea {
  height: 13.5rem; }

input[type='tel'] {
  text-align: center; }

.page-container {
  overflow: hidden;
  width: 100%; }

.hidden {
  display: none !important;
  visibility: hidden; }

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.banner {
  border-top: 0.25rem solid #212420; }

.banner-logo {
  margin: 2rem 0 1rem 0; }

.banner--home {
  background: #efefef;
  border: none;
  margin: 0;
  overflow: hidden;
  padding: 2% 0 3% 0; }
  .banner--home .banner-logo {
    display: block;
    margin: 0 0 0 -1.75%;
    width: 103%; }
    @media screen and (min-width: 30em) {
      .banner--home .banner-logo {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        transform: rotate(2deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%; } }

.nav {
  margin: 0 0 3rem 0; }
  .nav ul {
    list-style: none;
    text-align: center; }
  .nav li {
    display: inline-block; }
  .nav a {
    color: #9fa79c;
    display: inline-block;
    font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.809rem;
    font-weight: 700;
    padding: 0.5rem 0.5rem;
    text-decoration: none;
    text-transform: uppercase; }
    @media screen and (min-width: 30em) {
      .nav a {
        font-size: 1rem;
        padding: 0.5rem 1rem; } }
    .nav a:hover, .nav a:focus {
      background: rgba(33, 36, 32, 0.05);
      color: #5f685c; }

.about .nav-about, .blog-home .nav-blog, .blog .nav-blog, .work .nav-work, .contact .nav-contact {
  color: #5f685c; }

.nav--home {
  background: #e2e2e2;
  margin-bottom: 1rem;
  position: relative; }
  @media screen and (min-width: 48em) {
    .nav--home {
      margin-bottom: 0; } }

.tagline {
  border-bottom: 1rem solid #c64227;
  margin: 0 0 0 -1%;
  position: relative;
  width: 102%;
  z-index: 10; }
  @media screen and (min-width: 30em) {
    .tagline {
      font-size: 1.30896rem;
      line-height: 2rem;
      -webkit-transform: rotate(2deg);
      -moz-transform: rotate(2deg);
      -ms-transform: rotate(2deg);
      -o-transform: rotate(2deg);
      transform: rotate(2deg);
      -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
      -o-transform-origin: 0 100%;
      transform-origin: 0 100%; } }
  @media screen and (min-width: 48em) {
    .tagline {
      font-size: 1.618rem;
      line-height: 2.5rem; } }

.tagline div {
  background: #efefef;
  padding: 1.5rem 0 4rem 0; }

.start {
  position: relative;
  z-index: 10; }
  @media screen and (min-width: 30em) {
    .start {
      -webkit-transform: rotate(2deg);
      -moz-transform: rotate(2deg);
      -ms-transform: rotate(2deg);
      -o-transform: rotate(2deg);
      transform: rotate(2deg);
      -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
      -o-transform-origin: 0 100%;
      transform-origin: 0 100%; } }
  .start .button {
    position: absolute;
    right: 0;
    top: -2rem; }

.overview {
  background: #212420 url(/img/topo-5.png) repeat;
  color: #e0d1a2;
  color: rgba(224, 209, 162, 0.5);
  padding: 5rem 0 4rem 0;
  position: relative;
  z-index: 1; }
  .overview p {
    font-style: italic;
    margin: 1rem 0;
    text-indent: 0; }
  .overview p:first-child {
    font-style: normal;
    margin: 1.5rem 0; }
    @media screen and (min-width: 30em) {
      .overview p:first-child {
        font-size: 1.30896rem;
        line-height: 2rem; } }
  .overview:after {
    background: url(/img/tile-row.png) repeat-y 50% 10px;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: 38%; }
    @media screen and (min-width: 30em) and (max-width: 48em) {
      .overview:after {
        background-size: 60% auto;
        width: 31%; } }
    @media screen and (max-width: 30em) {
      .overview:after {
        content: none; } }

.love {
  background: #5c7d4d;
  color: #2e3e26;
  margin-top: 4rem;
  padding: 3.5rem 0 4.55556rem 0;
  text-align: center; }
  .home .love {
    margin: 0; }
  .love h2 {
    font-size: 1.618rem;
    line-height: 3rem;
    padding: 0 0 1rem 0;
    text-transform: uppercase; }
  .love a {
    color: #2e3e26; }

.posts {
  list-style: none; }

.posts-item {
  margin: 1rem 0 4rem 0; }

.posts-meta {
  color: #9fa79c;
  font-size: 0.809rem;
  font-style: italic;
  line-height: 2rem; }
  @media screen and (min-width: 30em) {
    .posts-meta {
      float: right;
      margin-left: 1rem; } }

.posts-title {
  font-size: 1.618rem;
  line-height: 2rem;
  margin-bottom: 1rem; }

.pagination-button {
  background: rgba(33, 36, 32, 0.05);
  color: rgba(33, 36, 32, 0.3) !important;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 2.61792rem;
  left: 0;
  line-height: 2.61792rem;
  margin-top: -2rem;
  padding: 1rem 0 1.25rem 0;
  position: fixed;
  text-align: center;
  text-decoration: none;
  top: 50%;
  vertical-align: middle;
  width: 11.212121212121213%; }
  .pagination-button:hover {
    background: rgba(33, 36, 32, 0.1); }

.pagination-next {
  left: auto;
  right: 0; }

.post h2 {
  font-size: 1.618rem;
  line-height: 2rem;
  margin: 2.5rem 0 0.5rem 0; }
.post h3 {
  margin: 1.5rem 0 0.5rem 0; }
.post h3 + ul, .post h3 + ol {
  margin-top: 0; }
.post ul, .post ol {
  margin: 1.5rem 0; }
.post ul ul, .post ul ol, .post ol ul, .post ol ol {
  margin: 0 0 0 1.5rem; }
.post blockquote {
  background: #e2e2e2;
  color: #5f685c;
  font-style: italic;
  margin: 1.5rem 0;
  padding: 1.5rem 1.5rem; }
.post img {
  border: 0.5rem solid #e2e2e2;
  display: block;
  margin: 1.5rem auto;
  max-width: 100%; }
  @media screen and (min-width: 30em) {
    .post img {
      border: 1rem solid #e2e2e2; } }
.post .note {
  background: #212420;
  color: #efefef;
  font-size: 0.809rem;
  font-style: italic;
  padding: 1rem 1rem;
  margin: 1.5rem 1rem; }
  @media screen and (min-width: 30em) {
    .post .note {
      float: right;
      margin: 0.5rem 0 0.5rem 2.5%;
      width: 48.75%; }
      .post .note + p {
        text-indent: 1.5rem; } }
  @media screen and (min-width: 48em) {
    .post .note {
      margin-left: 2%;
      margin-right: -11.21212%;
      width: 43.21212%; } }
.post .codepen, .post .cp_embed_iframe {
  margin: 1.5rem 0; }
.post .next {
  background: #212420;
  color: #efefef;
  font-size: 0.809rem;
  padding: 1rem 1rem;
  margin: 1.5rem 0 0; }
@media screen and (max-width: 30em) {
  .post {
    font-size: 0.809rem; } }

.post-title {
  color: #c64227;
  font-size: 2.61792rem;
  line-height: 2.5rem;
  margin-top: 5rem;
  text-align: center;
  text-transform: uppercase; }

.post-meta {
  color: #9fa79c;
  font-size: 0.809rem;
  font-style: italic;
  line-height: 1.5rem;
  margin: 0.5rem 0 2rem 0;
  text-align: center; }

.comments {
  background: #e2e2e2;
  color: #5f685c;
  font-style: italic;
  margin: 5rem 0 7rem 0;
  padding: 0.5rem 0;
  text-align: center; }

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*="language-"],
pre[class*="language-"] {
  color: black;
  text-shadow: 0 1px white;
  font-family: "Bitstream Vera Sans Mono", Consolas, Monaco, "Andale Mono", monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none; }

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none; } }
/* Code blocks */
pre[class*="language-"] {
  padding: 1rem 1rem;
  margin: 1.5rem 0;
  overflow: auto; }

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: rgba(33, 36, 32, 0.05); }

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em; }

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray; }

.token.punctuation {
  color: #999; }

.namespace {
  opacity: .7; }

.token.property,
.token.tag,
.token.boolean,
.token.number {
  color: #905; }

.token.selector,
.token.attr-name,
.token.string {
  color: #690; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #a67f59;
  background: rgba(255, 255, 255, 0.5); }

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a; }

.token.regex,
.token.important {
  color: #e90; }

.token.important {
  font-weight: bold; }

.token.entity {
  cursor: help; }

pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em; }

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  /* Same as .prism’s padding-top */
  background: rgba(153, 122, 102, 0.1);
  pointer-events: none;
  line-height: inherit;
  white-space: pre; }

.line-highlight:before,
.line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: rgba(153, 122, 102, 0.4);
  color: #f5f2f0;
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white; }

.line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em; }

.button {
  background: #c64227;
  border: none;
  color: #e0d1a2;
  padding: 1em 2.11111em 1em 1em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap; }
  .button:hover, .button:focus {
    background: #aa3921;
    color: #e0d1a2; }
  .button:visited {
    color: #e0d1a2; }
  .button:after {
    background: url(/img/arrow-redblack.svg) no-repeat 100% 0;
    background-size: auto 200%;
    bottom: 0;
    content: "";
    position: absolute;
    right: -0.72222em;
    top: 0;
    width: 2.77778em; }
  .button:hover:after, .button:focus:after {
    background-position: 100% 100%; }
  @media screen and (max-width: 30em) {
    .button {
      font-size: 0.809rem; } }

.footer {
  clear: both;
  padding-top: 4.55556rem;
  padding-bottom: 3.5rem;
  position: relative;
  text-align: center; }
  .footer p {
    font-family: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin-bottom: 0.5rem; }
  .footer small {
    display: block;
    font-size: 0.809rem; }
  .footer:after {
    background: url(/img/crest.svg) no-repeat 0 0;
    background-size: 100%;
    content: "";
    height: 110px;
    left: 50%;
    margin-left: -45px;
    position: absolute;
    top: -55px;
    width: 90px; }

/*# sourceMappingURL=screen.css.map */