/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Palettes
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Breakpoints
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Sizes
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Etc.
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Article Layout
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Masthead
--------------------------------------------------------------*/
/*
* Masthead State 1:
* tagline, centered logo, hamburger icon
* - used on homepage and top of article page
*/
/*
* Masthead State 2:
* left-aligned logo, no tagline, diacritic icon
* - used on pages (static, search, author) and article reading state
*/
/*--------------------------------------------------------------
# Etc
--------------------------------------------------------------*/
.article--classic {
  --mast: var(--bright); }
  .article--classic .masthead {
    visibility: hidden; }
  .article--classic main {
    padding-top: 0; }
  .article--classic .post-header {
    display: flex;
    flex-direction: column-reverse; }
    .article--classic .post-header__text {
      margin-top: 20px;
      padding-bottom: 30px;
      border-bottom: 3px solid var(--bright); }
      .article--classic .post-header__text__section {
        margin: 0; }
        .article--classic .post-header__text__section a {
          font-size: 1.8rem; }
      .article--classic .post-header__text__title {
        margin: 20px 0 0; }
      .article--classic .post-header__text__dek {
        margin: 10px 0 0; }
    .article--classic .post-header__image {
      display: none; }
      .article--classic .post-header__image.image figcaption {
        display: block;
        text-align: right;
        max-width: calc(100vw - 40px);
        margin-top: 5px; }
  .article--classic .post-subheader__meta {
    border-bottom: 0; }
  .article--classic .post-image-credit {
    display: none; }
  .article--classic .post-content > p:first-child {
    font-family: "GT Sectra", serif; }
  .article--classic .post .qa-image img {
    border-radius: 50%;
    border: 1px solid var(--bright);
    max-width: 120px;
    margin-bottom: 20px; }
  @media (min-width: 768px) {
    .article--classic main {
      padding-top: 20px; }
    .article--classic .post-header {
      flex-direction: row;
      max-width: none;
      width: calc(100vw - 40px);
      margin: 0 20px;
      padding-bottom: 5px;
      border-bottom: 3px solid var(--bright); }
      .article--classic .post-header__text {
        flex-basis: calc(50% - 100px);
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: calc(50vw - 20px);
        max-height: calc(100vh - var(--header-height-1) - 25px);
        margin: 0 20px 0 0;
        padding: 0;
        border: 0; }
        .article--classic .post-header__text__section a {
          font-size: 2.4rem; }
      .article--classic .post-header__image {
        flex-basis: 50%;
        flex-shrink: 1;
        max-width: calc(100vh - var(--header-height-1) - 20px); }
        .article--classic .post-header__image figcaption {
          font-size: 1rem; }
    .article--classic .post-content {
      margin-top: 0; } }
  @media (min-width: 768px) and (max-width: 992px) {
    .article--classic .post-header__text__section a {
      font-size: 1.8rem; }
    .article--classic .post-header__text__title {
      font-size: 3.6rem; }
    .article--classic .post-header__text__dek {
      font-size: 2.4rem; } }
  @media (min-width: 992px) {
    .article--classic .post-header__text {
      margin: 0 40px 0 60px; } }