/* ARTICLE TYPOGRAPHY */
/* ==== */

article h2 {
  font-size: 1.25rem; /* 20 / 16 */
}

article blockquote,
article p,
article pre,
article ol,
article ul {
  margin-bottom: 1.75rem;
}

/* Quotes */
article blockquote {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

article blockquote > p:last-of-type {
  margin-bottom: 0;
}

article blockquote footer {
  text-align: right;
  font-style: italic;
}

/* Lists */
article li {
  margin: 0 2.5rem 0.875rem;
}

/* Code */
article pre {
  overflow: scroll;
}

article pre,
article code {
  font-size: 1.1rem;
  color: #242;
}

/* On large monitors, pad the code a bit */
@media (min-width: 30rem) {
  article pre {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }
}

/* Hed */
.article__pubdate {
  font-weight: bold;
  color: #555;
}

/* Asides */
aside {
  margin-bottom: 1.75rem;
  padding: 1.75rem;
  font-size: 0.75rem;
  line-height: 1.166666666666667rem; /* 2/3 * 1.75 */
  background: #e4e4e4;
  box-sizing: border-box;
}

aside h1 {
  margin-bottom: 0.583333333333333rem; /* Half the line height */
  font-size: 0.9375rem;
  font-weight: bold;
  line-height: inherit;
}

aside p {
  margin-bottom: 1.166666666666667rem; /* 2/3 * 1.75 */
}

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

@media (min-width: 55rem) {
  aside {
    position: absolute;
    left: -17.5rem;
    width: 15rem;
    text-align: right;
  }

  aside::before {
    display: block;
    position: absolute;
    top: 0;
    right: -1.666666666666667rem;
    width: 0;
    height: 0;
    content: '';
    border-left: 1.666666666666667rem solid #e4e4e4;
    border-bottom: 1.666666666666667rem solid transparent;
  }
}

/* IMAGES AND FIGURES */
/* ==== */

article figure {
  margin-bottom: 1.75rem;
}

article figcaption {
  margin-bottom: 1.75rem;
  text-align: right;
  font-weight: bold;
}

@media (min-width: 55rem) {
  article figure {
    position: relative;
  }

  article figcaption {
    position: absolute;
    top: 0;
    left: -17.5rem;
    width: 15rem;
  }
}

/* TAG SECTION */
.article__tags {
  text-align: right;
  font-size: 0.875rem;
  font-weight: bold;
}

.article__tag a {
  text-decoration: none;
}