@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% - 2.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; }
  body.home .layout-container__primary { position: relative; z-index: 1; }
  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; position: relative; z-index: 1; }
  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; } } }