.draft-preview-message {
  background: red;
  padding: 1em;
  margin: 1em 0;
  text-align: center;
  font-weight: bold;
}

#article {
  main {
    padding: 0;
    margin: 0 auto;
  }

  .icon-image {
    height: 1.3rem;
    opacity: .5;
    margin-right: .25rem;
  }

  .h-entry {
    pre code {
      font-size: inherit;
      color: inherit;
      word-break: normal;
    }

    pre, code {
      font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 1em;
    }


    header {
      color: red;
      color: $color-white;

      .u-photo {
        background: $color-true-black;
        width: 100%;
      }

      .meta {
        margin: 4rem auto 0 auto;

        @media screen and (min-width: $large-tablet) {
          margin-top: 8rem;
        }

        max-width: $large-tablet;

        padding: 0 $border-size-medium;

        @media screen and (min-width: 957px) {
          padding: 0;
        }
      }

      .meta,
      a {
        color: $color-black;
        text-decoration: none;
      }

      time {
        margin: 0;
        padding: 1em 0 0;
        text-rendering: optimizeLegibility;
      }

      .categories {
        padding: 4rem 0 1.5rem 0;
      }

      .localizations,
      .categories {
        display: block;
        line-height: 2.5rem;

        a {
          text-transform: capitalize;
          text-decoration: underline;
          font-style: italic;
          font-weight: normal;
          color: $color-gray;
        }
      }

      .localizations,
      .categories {
        li {
          border-right: 1px solid #ccc;
          padding-right: .5em;
          margin-right: .25em;
        }

        li:last-child, li:first-child {
          border-right: none;
        }
      }

      h1 {
        font: {
          size: 3rem;
          weight: 900;
        }
        letter-spacing: -.01em;
        line-height: 1.05em;
        margin-bottom: .1em;

        @media screen and (min-width: 480px) {
          font-size: 4rem;
        }

        @media screen and (min-width: $large-phone) {
          font-size: 6rem;
          letter-spacing: -0.01em;
          line-height: 1em;
        }

        @media screen and (min-width: $small-tablet) {
          font-size: 4em;
          letter-spacing: -0.01em;
          line-height: 1em;
        }
      }

      h2 {
        font-size: 2rem;
        line-height: 1.25em;

        @media screen and (min-width: 350px) {
          font-size: 2.5rem;
        }

        @media screen and (min-width: $large-phone) {
          font-size: 3rem;
          letter-spacing: -0.01em;
        }

        @media screen and (min-width: $small-tablet) {
          font-size: 3rem;
          letter-spacing: -0.01em;
        }
      }
    } /* header */

    footer {
      text-align: center;

      @media screen and (min-width: $small-tablet) {
        margin: 50pt 0;
        padding: 50pt;
      }

      p {
        display: inline-block;
        margin: $border-size-medium 0;
        padding: $border-size-medium;
        border-top: $border-size-xsmall solid #ccc;
        font-weight: lighter;
        font-weight: 300;
        font-style: italic;
      }

      .social {
        margin-bottom: 5rem;
        h2 {
          font-weight: 700;
          font-size: 3rem;
        }
      }

      .tags {
        margin-top: 1.25rem;
      }
    } /* footer */
  } /* .h-entry */

  .e-content {
    color: $color-black;
    padding: 0 $border-size-medium;
    margin-top: 4rem;

    font: {
      size: 1.75rem;
      weight: lighter;
      weight: 300;
    }
    letter-spacing: .02em;

    @media screen and (min-width: $small-tablet) {
      font-size: 1.5em;
      padding: 0 10pt;
    }

    > * {
      margin-right: auto;
      margin-left: auto;
    }

    > :not(.video-container) {
      max-width: $large-tablet - 100px;
    }

    > :first-child {
      max-width: $large-tablet;
      line-height: 1.5em;
      margin-bottom: 1em;
      font-size: 1.1em;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: bold;
      line-height: 1em;
      margin: 1em auto .5em auto;
    }

    h1 {
      font-size: 2em;
      font-weight: 700;
    }
    h2 {
      font-size: 1.5em;
      font-weight: 700;
    }
    h3 {
      font-size: 1.33em;
      font-weight: 600;
    }
    h4 {
      font-size: 1.25em;
      font-weight: 600;
    }
    h5 {
      font-size: 1.2em;
      font-weight: 500;
    }
    h6 {
      font-size: 1.1em;
      font-weight: 500;
    }

    h1 + h2 {
      font-weight: 400;
      margin-top: -.5em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      display: flex;
      align-items: baseline;
    }

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
      order: 0;
      margin-left: -0.6em;
      margin-right: 0.1em;
      text-decoration: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    h1:hover a,
    h2:hover a,
    h3:hover a,
    h4:hover a,
    h5:hover a,
    h6:hover a {
      opacity: 0.25;
    }

    h1 a::after,
    h2 a::after,
    h3 a::after,
    h4 a::after,
    h5 a::after,
    h6 a::after {
      content: "#";
      font-size: 0.7em;
    }

    p {
      line-height: 1.6em;
      margin-bottom: 1em;
    }

    i, cite, em, var, address, dfn, blockquote {
      font-style: italic;
    }

    dt, b, strong {
      font: {
        weight: bold;
        weight: 700;
      }
    }

    dl {
      margin-bottom: 1em;
    }

    dd {
      margin: {
        left: $border-size-large;
      }
    }

    ul, ol {
      list-style-type: disc;
      padding-left: 2.5rem;
      margin-bottom:  1.5rem;
    }

    ol {
      list-style-type: decimal;
    }

    ul {
      list-style-type: square;
    }

    dd,
    dt,
    li {
      line-height: 1.5em;
    }

    li {
      margin: 0;
    }

    li li {
      margin: 0 0 0 1.5em;
    }

    hr {
      border: none;
      border-bottom: $border-size-xsmall solid #ccc;
      margin: 3em auto;
      width: 50%;
      display: block;
    }

    caption {
      // TODO
      font-weight: bold;
      font-weight: 700;
      padding: .5em;
    }

    th {
      // TODO
      font: {
        weight: bold;
        weight: 700;
      }
      text-align: left;
      background: #eee;
      border-bottom: $border-size-xsmall solid white;
    }

    th, td {
      // TODO
      padding: .5em;
    }

    /* for single images */
    img {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: auto;
      text-align: center;

      &.auto-size {
        width: auto;
        max-width: 100%;
      }
    }

    .poetry { padding: 0 5%; }

    .center,
    .centered { text-align: center; }

    .portrait {                                       width: 66%; max-width: 66%;
      @media screen and (min-width: $large-phone)   { width: 50%; max-width: 50%; }
      @media screen and (min-width: $medium-laptop) { width: 40%; max-width: 40%; }
      @media screen and (min-width: $large-laptop)  { width: 33%; max-width: 33%; }
    }

    .shadow img {
      box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2)
    }

    .shadow-portrait,
    .portrait-shadow {
      @extend .shadow;
      @extend .portrait;
    }

    figure {
      img {
        display: block;
        max-width: 100%;
        margin: auto;
        text-align: center;
      }
    }

    blockquote {
      border-left: solid $color-gray-light 0.6rem;
      margin: 1.5em auto;
      padding: 0.2em 0 0.3em 0.75em;

      p:last-child {
        margin-bottom: 0;
      }

      strong,
      b {
        font-style: normal;
      }

      @media screen and (min-width: $small-tablet) {
        position: relative;
        left: -0.75em;
      }
    }

    /* for groups of images */
    // TODO
    .images,
    .images-group {
      text-align: center;
      margin: 0 auto 2em auto;

      img {
        display: inline-block;
        margin: 0;
      }

      /* narrower desktop browser window in between phone and tablet */
      @media screen and (min-width: $small-tablet) {
        figure + figure,
        img + img {
          // TODO
          margin-left: 1em;
        }
      }

      figure {
        // TODO
        display: inline-block;
        margin: 0;
        max-width: 50%;
      }
    }

    .images-group {
      figure {
        max-width: 100%;
      }
    }

    table {
      // TODO
      text-align: center;
      margin: 1em auto;
    }

    th {
      // TODO
      text-align: left;
      padding-right: .25em;
      font-weight: normal;
      font-weight: 500;
    }

    td {
      // TODO
      text-align: left;
      font-weight: lighter;
      font-weight: 300;
    }
  } /* .e-content */

  .footnotes {
    border-top: solid 1px $color-gray-light;
    margin-top: 3rem;
    padding: 3rem 1rem 0;

    ol {
      list-style-position: inside;
    }

    .reversefootnote {
      &:link, &:visited, &:hover, &:active {
        display: inline-block;
        text-decoration: none;
        font: {
          size: 0.625em;
          weight: 500;
        }
        position: relative;
        top: -0.625em;
        left: -0.125em;
      }
    }
  }

  @media print {
      .related-articles { display: none; }
      footer#site-footer { display: none; }
      .social { display: none; }
      .site-header { display: none; }
      #development-mode-banner { display: none; }
      .categories { display: none !important; }
      .localizations { display: none !important; }

      // only safari supports currently
      div:has(> ul.pagination) { display: none; }
      ul.pagination { display: none; }

      // hide videos as they render as a large blank space in print
      .video-container { display: none; }

      // make title and subtitle a lil bit bigger in print
      .p-name .p-x-title { font-size: 5rem; }
      .p-name .p-x-subtitle { font-size: 3rem; }

      // Prevent images and blockquotes from spanning a page break
      blockquote, figure, img {
          break-inside: avoid;
          max-height: 90vh;
      }
  }

} /* #article */
