@charset "UTF-8";
/*------------------------------------*\
    Main CSS
\*------------------------------------*/
/*------------------------------------*\
    $VENDORS
	Other people’s code
\*------------------------------------*/
/*------------------------------------*\
    $HELPERS
	SASS Tools
\*------------------------------------*/
/*------------------------------------*\
    Variables
\*------------------------------------*/
/*	Debug controls
	========================================================================== */
/*	URLs
	========================================================================== */
/*	Breakpoint Management
	========================================================================== */
/*	Grid Management
	========================================================================== */
/*	Legacy support
	========================================================================== */
/*	Typography
	========================================================================== */
/*	Colors
	========================================================================== */
/*	Images
	========================================================================== */
/*	Defaults
	========================================================================== */
/*------------------------------------*\
    Functions
\*------------------------------------*/
/*------------------------------------*\
    Mixins
\*------------------------------------*/
/*------------------------------------*\
    Placeholders
\*------------------------------------*/
@media (min-width: 43.125em) {
  .navigation__item, .subnav {
    *zoom: 1; }
    .navigation__item::before, .subnav::before, .navigation__item::after, .subnav::after {
      content: " ";
      display: table; }
    .navigation__item::after, .subnav::after {
      clear: both; } }
/*------------------------------------*\
    $BASE
	Global element styles
\*------------------------------------*/
/*------------------------------------*\
    Body-level settings
\*------------------------------------*/
/*------------------------------------*\
    Heading Levels
\*------------------------------------*/
/*------------------------------------*\
    Block-level Semantics
\*------------------------------------*/
/*------------------------------------*\
    Lists
\*------------------------------------*/
@media (min-width: 60em) {
  ol,
  ul {
    margin-left: 0; } }
/*------------------------------------*\
    Links
\*------------------------------------*/
/*------------------------------------*\
    Text-level semantics
\*------------------------------------*/
/*------------------------------------*\
    Code styles
\*------------------------------------*/
/*------------------------------------*\
    Media Elements
\*------------------------------------*/
@media (min-width: 43.125em) {
  .media-container--right {
    float: right;
    max-width: 250px;
    margin-left: 22px;
    margin-left: 1.375rem;
    margin-right: 0; } }
/*------------------------------------*\
    Tables
\*------------------------------------*/
@media only screen and (max-width: 770px) {
  .layout-container__primary table {
    border: 0;
    padding-bottom: 0;
    display: block;
    width: 100%; }
    .layout-container__primary table caption {
      display: block; }
    .layout-container__primary table thead {
      display: none; }
    .layout-container__primary table tbody,
    .layout-container__primary table tr,
    .layout-container__primary table th,
    .layout-container__primary table td {
      border: 0;
      display: block;
      padding: 0;
      text-align: left; }
    .layout-container__primary table tr {
      margin: 0 0 22px;
      margin: 0 0 1.375rem; }
    .layout-container__primary table th[data-title]:before,
    .layout-container__primary table td[data-title]:before {
      content: attr(data-title) ": ";
      font-weight: bold; }
    .layout-container__primary table th:not([data-title]) {
      font-weight: bold; }
    .layout-container__primary table td:empty {
      display: none; } }
@media (min-width: 43.125em) {
  table.striped {
    background: #e1ede9; }
    table.striped thead {
      background: #DDD;
      border-bottom: 0; }
    table.striped tbody tr {
      background: #fff;
      transition: background-color 0.25s ease; }
      table.striped tbody tr:nth-child(even) {
        background: #413e3b; }
      table.striped tbody tr:hover {
        background: #fff; }
    table.striped th,
    table.striped td {
      border: 1px solid #8FC7C7;
      padding: 15px;
      padding: 0.9375rem; } }
/*------------------------------------*\
    Form Styles
\*------------------------------------*/
@media (min-width: 43.125em) {
  input,
  textarea {
    width: 80%; }

  .fields__note {
    width: 80%; } }
/*------------------------------------*\
    Animations
\*------------------------------------*/
/*------------------------------------*\
    $LAYOUT
	Page layout
\*------------------------------------*/
/*------------------------------------*\
    Grid
\*------------------------------------*/
@media (min-width: 28.75em) {
  .layout-container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; }
    .layout-container:after {
      content: " ";
      display: block;
      clear: both; } }
@media (min-width: 43.125em) {
  .layout-container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; }
    .layout-container:after {
      content: " ";
      display: block;
      clear: both; } }
@media (min-width: 60em) {
  .layout-container {
    width: 48em;
    margin-left: auto;
    margin-right: auto; }
    .layout-container:after {
      content: " ";
      display: block;
      clear: both; } }
@media (min-width: 43.125em) {
  .layout-container__primary, .layout-container__secondary {
    width: 74.35897%;
    float: left;
    margin-right: 2.5641%; } }
@media (min-width: 60em) {
  .layout-container__primary, .layout-container__secondary {
    width: 74.57627%;
    float: left;
    margin-right: 1.69492%; } }
@media (min-width: 43.125em) {
  .layout-container--split .layout-container__primary {
    width: 48.71795%;
    float: left;
    margin-right: 2.5641%;
    padding-right: 6px;
    padding-right: 0.375rem; } }
@media (min-width: 60em) {
  .layout-container--split .layout-container__primary {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%; } }
@media (min-width: 43.125em) {
  .layout-container--split .layout-container__secondary {
    width: 48.71795%;
    float: right;
    margin-right: 0;
    padding-left: 6px;
    padding-left: 0.375rem;
    margin-right: 0; } }
@media (min-width: 60em) {
  .layout-container--split .layout-container__secondary {
    width: 49.15254%;
    float: right;
    margin-right: 0;
    margin-right: 0; } }

/*------------------------------------*\
    Post
\*------------------------------------*/
@media (min-width: 43.125em) {
  @supports (display: flex) {
    .page {
      display: flex;
      flex-flow: column; }
      .page > header {
        order: 1; }
      .page > nav {
        order: 2; }
      .page > main {
        order: 3; }
      .page > footer {
        order: 4; } } }
/*------------------------------------*\
    Header
\*------------------------------------*/
@media (min-width: 43.125em) {
  .banner {
    padding: 0;
    margin-bottom: 0; }
    .banner .layout-container {
      display: table;
      width: 100%; }
    .banner__title, .banner__byline {
      display: table-cell;
      padding: 14.66667px 22px;
      padding: 0.91667rem 1.375rem;
      vertical-align: bottom;
      width: 50%; }
    .banner__byline {
      text-align: right; } }
@media (min-width: 60em) {
  .banner .layout-container {
    width: 48em; } }
/*------------------------------------*\
    Main
\*------------------------------------*/
@media (min-width: 43.125em) {
  main {
    box-sizing: border-box;
    padding: 0 22px;
    padding: 0 1.375rem; } }
@media (min-width: 60em) {
  main > * {
    max-width: 36em; } }
/*------------------------------------*\
    Navigation
\*------------------------------------*/
@media (min-width: 43.125em) {
  nav {
    margin-top: 0; }

  .navigation {
    border-top: 0;
    font-size: 14px;
    font-size: 0.875rem; }
    .navigation__item {
      border-bottom: 1px solid #8FC7C7;
      padding: 0 11px;
      padding: 0 0.6875rem; }
      .navigation__item:last-child {
        border-bottom: 0; }
    .navigation__link {
      font-weight: bold;
      float: left;
      padding: 0 22px;
      padding: 0 1.375rem; }
      .navigation__link::after {
        content: ":"; }

  .subnav {
    border: 0;
    padding: 0;
    float: left; }
    .subnav__item {
      border: 0;
      float: left; }
    .subnav__link:link {
      padding-left: 11px;
      padding-left: 0.6875rem; } }
/*------------------------------------*\
    Footer
\*------------------------------------*/
@media (min-width: 43.125em) {
  .contentinfo {
    border-top: 1px solid #8FC7C7;
    margin-top: 22px;
    margin-top: 1.375rem; } }
/*------------------------------------*\
    Print Layout stuff
\*------------------------------------*/
/*------------------------------------*\
    $COMPONENTS
	Interface patterns
\*------------------------------------*/
/*------------------------------------*\
    Media Query Watcher (for JS)
\*------------------------------------*/
@media (min-width: 20em) {
  #getActiveMQ-watcher {
    font-family: "tiny"; } }
@media (min-width: 28.75em) {
  #getActiveMQ-watcher {
    font-family: "small"; } }
@media (min-width: 43.125em) {
  #getActiveMQ-watcher {
    font-family: "medium"; } }
@media (min-width: 60em) {
  #getActiveMQ-watcher {
    font-family: "full"; } }
/*------------------------------------*\
    Modules
\*------------------------------------*/
/*------------------------------------*\
    Buttons
\*------------------------------------*/
/*------------------------------------*\
    Info Panel
\*------------------------------------*/
/*------------------------------------*\
    Book
\*------------------------------------*/
/*------------------------------------*\
    Media Elements
\*------------------------------------*/
@media (min-width: 43.125em) {
  .figure--cover img {
    max-width: 40%;
    float: right;
    margin: 0 0 22px 22px;
    margin: 0 0 1.375rem 1.375rem; } }
/*------------------------------------*\
    Webmentions
\*------------------------------------*/
/*------------------------------------*\
    Rules
\*------------------------------------*/
@media (min-width: 43.125em) {
  .rule--optional {
    display: none; } }
/*------------------------------------*\
    Reviews
\*------------------------------------*/
@media (min-width: 43.125em) {
  @supports (display: flex) {
    .reviews,
    .tweets {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: space-between; }

    .h-review blockquote > :first-child::before {
      color: #8FC7C7;
      content: "\275D";
      font-size: 34px;
      font-size: 2.125rem;
      font-style: normal;
      position: absolute;
      margin-left: -.75em;
      margin-top: -.3em; }

    .reviews > .h-review {
      flex: 0 1 calc( 50% - 1.5rem ); }
      .reviews > .h-review:nth-child(odd) {
        margin-right: 44px;
        margin-right: 2.75rem; }

    .tweets > .h-review {
      flex: 0 1 calc( 33% - 3.0625rem );
      margin-right: 44px;
      margin-right: 2.75rem; }
      .tweets > .h-review:nth-child(3n) {
        margin-right: 0; } } }
/*------------------------------------*\
    Subsections
\*------------------------------------*/
@media (min-width: 43.125em) {
  .section__title {
    text-transform: uppercase;
    text-align: center; }
    .section__title::before, .section__title::after {
      color: #3f7e7e;
      font-size: 0.75em;
      position: relative;
      bottom: 0.125em; }
    .section__title::before {
      content: '\27E2\27E1\27E1\00A0\00A0'; }
    .section__title::after {
      content: '\00A0\00A0\27E1\27E1\27E3'; } }
/*------------------------------------*\
    Errata
\*------------------------------------*/
/*------------------------------------*\
    $PAGES
	Page-specific styles
	(use sparingly)
\*------------------------------------*/
/*------------------------------------*\
    Homepage
\*------------------------------------*/
@media (min-width: 43.125em) {
  body.home .book__cover {
    float: none;
    margin: 0 auto;
    max-width: 60%; }
  body.home .banner {
    margin-bottom: 22px;
    margin-bottom: 1.375rem; } }
@media (min-width: 60em) {
  body.home #main {
    padding-top: 22px;
    padding-top: 1.375rem;
    max-width: 990px;
    margin: 0 auto; }
  body.home .book__cover {
    box-shadow: 1px 1px 5px rgba(44, 40, 37, 0.8);
    width: 275px;
    height: 425px;
    margin-bottom: -140px;
    float: right;
    position: relative;
    z-index: 1; }
  body.home .layout-container__primary {
    position: relative;
    z-index: 2; }
    body.home .layout-container__primary .book__cover {
      transform: rotate(-5deg);
      right: -20px; }
  body.home .layout-container__secondary .book__cover {
    transform: rotate(5deg);
    float: left;
    left: -20px; }
  body.home .info-panel {
    max-width: 275px; }
  body.home .layout-container__secondary .info-panel {
    text-align: right;
    max-width: 100%; }

  @supports (width: 100vw) {
    body.home #main {
      max-width: 100%; }
    body.home .book__cover {
      width: 28vw;
      max-width: 250px;
      height: auto; }
    body.home .info-panel {
      max-width: 275px;
      max-width: 17.1875rem; } } }
