@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,400i,600|Source+Sans+Pro:400,400i,600|Source+Code+Pro");
:root {
  --base-size: 16px;
  --xs-size: 0.8125rem;
  --sm-size: 0.9375rem;
  --md-size: 1rem;
  --lg-size: 1.3125rem;
  --xl-size: 1.8125rem;
  --xxl-size: 2.375rem;
  --xxxl-size: 2.875rem;
  font-size: var(--base-size); }

@media only screen and (min-width: 480px) {
  :root {
    --base-size: 19px;
    --xs-size: 0.74rem;
    --sm-size: 0.84rem;
    --md-size: 1rem;
    --lg-size: 1.32rem;
    --xl-size: 2.16rem;
    --xxl-size: 3.53rem;
    --xxxl-size: 4.68rem; } }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Source Serif Pro", serif;
  line-height: 1.5;
  color: #333333;
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

p {
  margin-top: 0;
  margin-bottom: var(--md-size);
  font-size: var(--md-size); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Source Sans Pro", sans-serif;
  line-height: 0.85;
  letter-spacing: -0.5px; }
  h1 a:link,
  h1 a:visited,
  h1 a:hover,
  h1 a:focus,
  h1 a:active,
  h2 a:link,
  h2 a:visited,
  h2 a:hover,
  h2 a:focus,
  h2 a:active,
  h3 a:link,
  h3 a:visited,
  h3 a:hover,
  h3 a:focus,
  h3 a:active,
  h4 a:link,
  h4 a:visited,
  h4 a:hover,
  h4 a:focus,
  h4 a:active,
  h5 a:link,
  h5 a:visited,
  h5 a:hover,
  h5 a:focus,
  h5 a:active,
  h6 a:link,
  h6 a:visited,
  h6 a:hover,
  h6 a:focus,
  h6 a:active {
    border-bottom: none; }

h1 {
  font-size: var(--xxl-size);
  margin-top: var(--xl-size);
  margin-bottom: var(--xxxl-size);
  color: #333333; }
  h1::after {
    display: block;
    content: '';
    border-bottom: solid 6px #8792a3;
    margin-top: var(--xl-size);
    width: 40%; }

h2 {
  font-size: var(--xl-size);
  margin-top: 1.8rem;
  margin-bottom: var(--md-size); }

h3 {
  font-size: var(--lg-size);
  margin-top: var(--lg-size);
  margin-bottom: var(--sm-size); }

h4 {
  font-size: var(--md-size);
  margin-top: var(--lg-size);
  margin-bottom: var(--xs-size); }

h5 {
  font-size: var(--md-size);
  font-style: italic;
  margin-bottom: var(--xs-size); }

h6 {
  font-size: var(--xs-size);
  margin-bottom: var(--xs-size); }

a:link,
a:visited,
a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: none;
  border-bottom: dotted 1px #333333; }

ul,
ol {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: var(--md-size); }

blockquote {
  background-color: #f1f7ea;
  padding: var(--sm-size) var(--lg-size);
  border-radius: 3px;
  color: rgba(51, 51, 51, 0.8);
  font-size: var(--md-size);
  margin-top: var(--md-size);
  margin-bottom: var(--lg-size);
  font-family: "Source Sans Pro", sans-serif; }
  blockquote p {
    font-size: var(--md-size);
    hanging-punctuation: first; }
    blockquote p:last-of-type {
      margin-bottom: 0; }
  blockquote cite {
    text-align: right;
    display: block;
    font-size: var(--xs-size); }
    blockquote cite::before {
      content: '—';
      margin-right: 0.25rem; }

figure {
  margin-top: var(--md-size);
  margin-bottom: var(--lg-size); }
  figure img {
    display: block;
    width: 100%; }
  figure table {
    margin: 0; }
  figure figcaption {
    font-size: var(--xs-size);
    color: rgba(51, 51, 51, 0.8);
    margin-top: 0.25rem;
    font-family: "Source Sans Pro", sans-serif; }
    figure figcaption code {
      font-size: var(--xs-size); }
  figure .table-wrapper {
    padding: var(--sm-size) var(--lg-size);
    background-color: #f1f7ea;
    border-radius: 3px; }
  figure.full figcaption {
    text-align: center; }

table {
  caption-side: bottom;
  width: 100%;
  font-size: var(--sm-size);
  font-family: "Source Sans Pro", sans-serif;
  border-collapse: collapse;
  margin-top: var(--md-size);
  margin-bottom: var(--lg-size); }
  table caption {
    text-align: left;
    font-size: var(--xs-size);
    color: rgba(51, 51, 51, 0.8);
    font-family: "Source Sans Pro", sans-serif; }
  table td, table th {
    line-height: 1.4; }
    table td.center, table th.center {
      text-align: center; }
    table td.right, table th.right {
      text-align: right; }
  table thead tr th {
    border-bottom: solid 1px rgba(51, 51, 51, 0.5);
    text-align: left; }

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

pre code {
  line-height: 1.2;
  font-family: "Source Code Pro", monospace;
  font-size: var(--xs-size);
  letter-spacing: normal; }
  pre code.hljs {
    padding: 0;
    background: transparent; }

label {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: bold;
  font-size: var(--xs-size);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(51, 51, 51, 0.8); }

input[type="text"], input[type="search"], textarea {
  font-family: "Source Sans Pro", sans-serif;
  font-size: var(--xs-size);
  line-height: 1.2;
  padding: 0.35rem 0.5rem;
  width: 100%;
  border: solid 1px #ccc; }

button, [type="button"], [type="submit"] {
  cursor: pointer;
  font-family: "Source Sans Pro", sans-serif;
  font-size: var(--xs-size);
  padding: 0.5rem 0.75rem;
  background-color: #333333;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none; }

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0; }

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0; }

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none; }

.icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  background-repeat: no-repeat; }
  .icon.calendar {
    background-image: url("assets/calendar.svg"); }
  .icon.tag {
    background-image: url("assets/tag.svg"); }
  .icon.comment {
    background-image: url("assets/comment.svg"); }
  .icon.search {
    background-image: url("assets/search.svg"); }

.header, .footer {
  display: flex;
  align-items: center;
  height: var(--xl-size);
  padding: 0 var(--md-size);
  font-size: var(--xs-size);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(51, 51, 51, 0.5);
  font-family: "Source Sans Pro", sans-serif; }

.header {
  margin-top: 0.25rem; }
  .header a {
    border-bottom: none;
    font-family: "Source Sans Pro", sans-serif; }
  .header .logo {
    display: flex;
    align-items: center; }
    .header .logo span {
      transition: all 0.5s;
      margin-left: 0.25rem; }
    .header .logo:hover span {
      letter-spacing: 3px;
      color: #333333; }
    .header .logo:hover img {
      width: 3rem; }
  .header nav {
    margin-left: auto; }
    .header nav a {
      line-height: 1;
      transition: color 0.5s;
      font-size: 0.75rem; }
      .header nav a:hover {
        color: #333333; }
    @media only screen and (min-width: 480px) {
      .header nav a {
        font-size: var(--xs-size); } }
    .header nav ul {
      display: flex;
      margin: 0;
      padding: 0;
      list-style: none;
      align-items: center; }
      .header nav ul li {
        margin-left: 0;
        margin-right: 0.6875rem; }
        .header nav ul li:last-child {
          margin-right: 0; }
        .header nav ul li .search-form {
          display: flex;
          align-items: center; }
          .header nav ul li .search-form input {
            border: none;
            border-bottom: solid 1px rgba(51, 51, 51, 0.5);
            padding: 0;
            line-height: 1;
            color: rgba(51, 51, 51, 0.5);
            padding-bottom: 0.25rem;
            display: none; }
            .header nav ul li .search-form input:focus, .header nav ul li .search-form input:active {
              outline: none; }
          @media only screen and (min-width: 560px) {
            .header nav ul li .search-form input {
              display: block; } }
      @media only screen and (min-width: 480px) {
        .header nav ul li {
          margin-right: var(--md-size); } }
    .header nav.search-active {
      flex-grow: 1;
      margin-left: 1rem; }
      .header nav.search-active .search-form input {
        display: block; }
      .header nav.search-active ul li:not(:first-child) {
        display: none; }
      .header nav.search-active ul li:first-child {
        width: 100%; }

.main {
  margin-top: 3.84rem; }
  .main article {
    margin-bottom: var(--xl-size); }
    .main article article {
      margin-left: auto;
      margin-right: auto; }
    .main article > * {
      margin-left: var(--lg-size);
      margin-right: var(--lg-size); }
    @media only screen and (min-width: 836px) {
      .main article > * {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto; } }
    .main article .full {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto; }
    .main article .right, .main article .left {
      width: calc((100% + 42rem) / 2);
      max-width: 100%; }
    .main article .left {
      margin-left: 0; }
    .main article .right {
      margin-right: 0; }
    .main article header {
      position: relative; }
      .main article header .title-and-meta .post-meta {
        font-size: var(--xs-size);
        color: rgba(51, 51, 51, 0.5);
        font-family: "Source Sans Pro", sans-serif; }
        .main article header .title-and-meta .post-meta > div {
          margin-bottom: 5px;
          margin-right: 0;
          display: flex;
          align-items: center; }
          .main article header .title-and-meta .post-meta > div .icon {
            margin-right: 0.25rem; }
        .main article header .title-and-meta .post-meta .author {
          display: flex;
          flex-direction: row;
          align-items: flex-end; }
          .main article header .title-and-meta .post-meta .author img {
            border-radius: 50%;
            opacity: 0.8;
            width: 30px; }
          .main article header .title-and-meta .post-meta .author span {
            font-size: var(--xs-size);
            color: rgba(51, 51, 51, 0.5);
            font-family: "Source Sans Pro", sans-serif;
            margin-left: 0.25rem; }
            .main article header .title-and-meta .post-meta .author span.role {
              margin-top: 0;
              text-transform: uppercase;
              letter-spacing: 1px;
              background-color: #f7f7f7;
              padding: 1px 5px;
              font-size: 0.58rem;
              border-radius: 3px; }
        @media only screen and (min-width: 1100px) {
          .main article header .title-and-meta .post-meta .author {
            position: absolute;
            top: var(--md-size);
            left: -7.5rem;
            flex-direction: column; }
            .main article header .title-and-meta .post-meta .author img {
              width: 80px; }
            .main article header .title-and-meta .post-meta .author span {
              margin-top: 0.25rem;
              margin-left: 0; } }
        .main article header .title-and-meta .post-meta ul, .main article header .title-and-meta .post-meta li {
          margin: 0;
          padding: 0;
          list-style: none;
          display: inline; }
        .main article header .title-and-meta .post-meta a {
          border-bottom: none;
          transition: color 0.5s; }
          .main article header .title-and-meta .post-meta a:hover {
            color: #333333; }
        .main article header .title-and-meta .post-meta .tagged-in {
          font-style: italic; }
          .main article header .title-and-meta .post-meta .tagged-in li {
            margin-right: 0.125rem; }
        .main article header .title-and-meta .post-meta .posted-date span {
          font-variant: small-caps; }
      @media only screen and (min-width: 768px) {
        .main article header .title-and-meta .post-meta {
          display: flex; }
          .main article header .title-and-meta .post-meta > div {
            margin-bottom: 0; }
          .main article header .title-and-meta .post-meta > div:not(:last-child) {
            margin-right: var(--md-size); }
          .main article header .title-and-meta .post-meta .author {
            align-items: center; }
          .main article header .title-and-meta .post-meta .posted-date .date {
            min-width: 6.58rem; }
          .main article header .title-and-meta .post-meta .total-comments a {
            min-width: 5.25rem; } }
    .main article > p:first-of-type {
      font-size: 1.2rem; }
    .main article .continue-reading {
      text-align: right;
      font-size: var(--xs-size);
      color: rgba(51, 51, 51, 0.5);
      font-family: "Source Sans Pro", sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: color 0.5s; }
      .main article .continue-reading:hover {
        color: #333333; }
    .main article .poster-image {
      margin-top: 0.25rem; }
      .main article .poster-image img {
        border-radius: 3px; }

.footer {
  justify-content: flex-end; }

main.post-detail article .title-and-meta h1 {
  margin-bottom: var(--xl-size); }

main.post-detail article .title-and-meta .post-meta {
  position: relative; }
  @media only screen and (min-width: 1100px) {
    main.post-detail article .title-and-meta .post-meta .author {
      top: -6rem; } }

@media only screen and (min-width: 480px) {
  main.post-detail article .title-and-meta {
    top: -1.8rem; } }

main.post-detail hr {
  overflow: visible;
  /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333333;
  color: #333333;
  text-align: center;
  margin-top: var(--xl-size);
  margin-bottom: var(--xl-size); }

main.post-detail hr:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white; }

main.post-detail .related-posts {
  margin-bottom: var(--xl-size); }
  main.post-detail .related-posts h3 {
    margin-left: 0.5rem; }
  main.post-detail .related-posts ul {
    list-style: none;
    margin-top: 1.5rem; }
    main.post-detail .related-posts ul li {
      margin-left: 0.5rem;
      margin-bottom: 0.5rem;
      padding: 0; }

main.post-detail .comments {
  margin-bottom: var(--xl-size); }
  main.post-detail .comments .user {
    margin-right: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    main.post-detail .comments .user img {
      border-radius: 50%; }
    main.post-detail .comments .user span {
      font-family: "Source Sans Pro", sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
      background-color: #f7f7f7;
      padding: 1px 5px;
      font-size: 0.58rem;
      border-radius: 3px;
      margin-top: 0.25rem;
      text-align: center; }
  main.post-detail .comments form {
    margin-top: 1.5rem; }
    main.post-detail .comments form .new-comment {
      display: flex; }
      main.post-detail .comments form .new-comment .form-control {
        flex: 1; }
        main.post-detail .comments form .new-comment .form-control textarea {
          min-height: 75px; }
  main.post-detail .comments .comments-list {
    margin: 1.5rem 0 0 0;
    list-style: none;
    padding: 0; }
    main.post-detail .comments .comments-list li {
      padding-bottom: 1rem; }
      main.post-detail .comments .comments-list li .comment {
        display: flex; }
        main.post-detail .comments .comments-list li .comment .comment-info .commented-date {
          text-align: right;
          font-family: "Source Sans Pro", sans-serif;
          text-transform: uppercase;
          letter-spacing: 1px;
          font-size: 0.58rem;
          color: rgba(51, 51, 51, 0.5); }
        main.post-detail .comments .comments-list li .comment button {
          padding: 0.25rem 0.75rem;
          font-size: 0.58rem;
          background-color: transparent;
          color: #333333; }

.about article p {
  font-size: 1.2rem;
  position: relative; }

.about .social {
  display: flex;
  font-family: "Source Sans Pro", sans-serif;
  font-size: var(--xs-size);
  color: rgba(51, 51, 51, 0.5);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-top: solid 1px #f7f7f7;
  border-bottom: solid 1px #f7f7f7;
  padding-top: var(--md-size);
  padding-bottom: var(--md-size); }
  .about .social a {
    border-bottom: none; }
  .about .social .separator {
    margin-left: 0.5rem;
    margin-right: 0.5rem; }

#contact-form {
  padding: 1rem; }
  #contact-form input[type="submit"] {
    margin-left: auto;
    display: block; }