/*@import
        "base",
        "layout"
;*/
* {
  box-sizing: border-box; }

html {
  overflow-y: scroll;
  overflow-x: hidden; }

body, .full-story__home, .full-story__category, .image, .story__footer {
  font-size: 16px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern", "liga";
  -moz-font-feature-settings: "kern", "liga";
  -o-font-feature-settings: "kern", "liga";
  font-feature-settings: "kern", "liga"; }

img {
  max-width: 100%; }

small {
  font-size: 16px;
  font-weight: 200; }

.image-gallery img {
  padding: 0px;
  line-height: 0px !important;
  font-size: 0px !important; }

.wrapper {
  margin: 0 auto;
  padding: 0.5rem;
  max-width: 1280px; }

.header__title {
  margin-top: 0;
  font-size: 20px;
  text-transform: uppercase;
  float: left; }
  @media screen and (min-width: 600px) {
    .header__title {
      font-size: 36px;
      line-height: 43px; } }

.header__nav {
  display: none;
  font-size: 14px; }

.header__nav {
  float: right;
  text-align: right;
  line-height: 43px; }

.header__nav__item {
  color: #666;
  text-decoration: none;
  padding: 1rem; }

.header__nav__item:hover {
  text-decoration: underline; }

.bottom__nav {
  font-size: 18px;
  line-height: 1.5em; }
  .bottom__nav__item {
    color: #666;
    text-decoration: none; }

.footer {
  border-top: 1px solid #666;
  color: #666;
  margin-top: 5rem;
  padding-top: 0.5em;
  font-size: 14px; }

.footer__copyright {
  float: left; }

.footer__nav {
  line-height: 1em;
  clear: left; }

.footer__nav__item {
  display: inline-block;
  margin-top: 1.5em; }

.header__foreword {
  max-width: 750px;
  margin-bottom: 3rem;
  font-size: 18px;
  line-height: 22px;
  color: #000;
  font-family: Georgia, serif;
  clear: both; }
  @media screen and (min-width: 600px) {
    .header__foreword {
      font-size: 32px;
      line-height: 40px; } }

.article__title {
  padding-top: 0.75em;
  padding-bottom: 0.875rem;
  padding-right: 1.5em;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border-top: 2px solid;
  position: relative;
  color: #666; }
  @media screen and (max-width: 600px) {
    .article__title {
      line-height: 1.5em;
      padding-top: 0.25em; } }
  .article__title--no-plus {
    text-decoration: none; }
    @media screen and (min-width: 600px) {
      .article__title--no-plus {
        display: none; } }
    .article__title--no-plus:after {
      content: "" !important; }

.article__title:hover {
  cursor: pointer;
  text-decoration: underline; }

.article__title::after {
  display: block;
  position: absolute;
  right: 0;
  top: 35%;
  content: "+";
  font-size: 1.5rem;
  z-index: 10;
  vertical-align: top; }
  @media screen and (max-width: 600px) {
    .article__title::after {
      top: 4px; } }

.article__title--active::after {
  content: "\2013"; }

.article__body {
  display: none; }

.article__title--active + .article__body {
  display: block;
  margin-bottom: 2rem; }

.story {
  border-top: 1px solid;
  border-top-color: inherit;
  margin-top: 2em;
  padding-top: 0.5em;
  overflow: auto; }

.story:first-child {
  margin-top: 0; }

.story__title {
  font-style: italic;
  text-decoration: none;
  padding-right: 2rem; }

.story__title:hover, .story__read-more:hover {
  text-decoration: underline; }

.story__title br {
  display: none; }

.story__author {
  font-size: 1.05rem;
  padding-right: 1.5em; }

.story__author, .story__summary {
  color: #666; }

.story__read-more {
  color: inherit;
  text-decoration: none; }

.full-story {
  font-family: Georgia, serif;
  max-width: 768px;
  margin: 0 auto;
  color: #111; }

.wrapper--full-story {
  border-top: 3px solid;
  border-top-color: inherit;
  position: relative;
  margin-top: 1rem; }

.full-story__category, .full-story__title {
  border-top: none; }

.full-story__home, .full-story__category {
  font-size: 18px;
  font-weight: 600;
  text-decoration: none; }

.full-story__home {
  margin-bottom: 1rem;
  display: block; }

.full-story__category__subtitle {
  font-weight: 300;
  display: block;
  line-height: 1.25rem; }

.full-story__title, .full-story__author, .full-story__lead {
  font-size: 2rem;
  margin: 0;
  font-size: 18px;
  line-height: 22px; }
  @media screen and (min-width: 600px) {
    .full-story__title, .full-story__author, .full-story__lead {
      font-size: 1.8rem;
      line-height: 2.25rem; } }

.full-story__title {
  margin-top: 3em;
  max-width: 660px; }

.full-story__author {
  font-weight: 300;
  margin-bottom: 3em; }

.full-story__content {
  max-width: 768px;
  color: #444;
  font-size: 16px;
  line-height: 20px;
  padding-bottom: 75px; }
  @media screen and (min-width: 600px) {
    .full-story__content {
      font-size: 1.3rem;
      line-height: 2rem; } }
  .full-story__content .full-story__category {
    display: none;
    padding-top: 0.25rem;
    padding-right: 0.1rem; }
    .full-story__content .full-story__category--hack {
      display: block;
      position: relative;
      margin-left: 0;
      font-weight: 300;
      line-height: 1.70rem; }

.full-story__lead {
  color: #000;
  border-top: 2px solid red;
  border-top-color: inherit;
  padding-top: 0.25em;
  margin-bottom: 1.5em;
  font-size: 18px;
  line-height: 22px; }
  @media screen and (min-width: 600px) {
    .full-story__lead {
      font-size: 1.8rem;
      line-height: 2.25rem; } }

.full-story img {
  margin: 1em 0; }

.image {
  font-size: 1rem;
  line-height: 1.4;
  position: relative;
  width: 100%; }
  .image img {
    margin: 0 auto;
    text-align: center;
    display: block; }

.image__meta {
  max-width: 315px;
  margin-top: 2rem; }

.image__alt, .image__ref {
  font-size: 14px; }

.image__alt {
  border-top: 1px solid;
  padding-top: 0.4rem;
  color: #444;
  font-style: italic; }

.image__ref {
  color: #767676; }

.story__footer {
  margin: 4rem 0;
  padding-top: 1em;
  border-top: 1px solid #000;
  font-size: 14px;
  line-height: 1.5em; }

blockquote {
  font-style: italic;
  margin-left: 0;
  margin-right: 0; }
  blockquote small {
    font-style: normal;
    font-size: 16px; }

@media (min-width: 700px) {
  .header__nav {
    display: block; } }
@media (min-width: 768px) {
  .story__meta {
    width: 25%;
    float: left; }

  .story__title br {
    display: block; }

  .story__summary {
    width: 75%;
    float: left;
    margin-top: 0;
    padding-left: 2rem; }

  .footer__nav {
    clear: none;
    float: right; }
    .footer__nav__item {
      margin-top: 0; } }
@media (min-width: 1280px) {
  .story__meta {
    width: 35%; }

  .story__title, .story__author {
    width: 50%;
    float: left; }

  .story__summary {
    width: 65%;
    padding-left: 0;
    padding-right: 8rem; }

  .xxx {
    /*full story body wrapper, cbf thinking of name*/
    width: 80%;
    float: right; }

  .full-story {
    width: 100%;
    max-width: 100%; }

  .full-story__home {
    float: left;
    width: 20%;
    margin-left: -0.5rem;
    text-transform: uppercase;
    font-size: 18px; }

  .full-story__category {
    display: none; }

  .full-story__content {
    padding-right: 4rem;
    position: relative; }
    .full-story__content .full-story__category {
      display: block;
      position: absolute;
      width: calc(33.3333333%);
      margin-left: calc((33.3333333% * -1) - 0.5rem);
      border-top-style: solid;
      border-top-width: 2px; }

  .full-story__title {
    margin-top: 0em; }

  .full-story__author {
    margin-bottom: 6em; }

  .image img {
    max-width: 100%; }

  .image__meta {
    width: 45%;
    right: -45%;
    position: absolute;
    font-size: 0.9rem;
    padding-left: 1.3em;
    padding-right: 0.1em;
    margin-top: inherit;
    transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%); } }
@media print {
  .full-story__content {
    font-size: 14px !important;
    line-height: 20px !important; }

  .full-story__lead {
    font-size: 16px !important;
    line-height: 22px !important; } }
.exit-story {
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 0; }
  @media screen and (min-width: 600px) {
    .exit-story {
      top: 1rem; } }