/* Article pages: previous/next links, title, byline, header image, footer.
   Rewritten from the Gatsby site's post template (post.tsx); values unchanged.
   The article text itself is styled by content.css. */

.article-nav { margin-top: 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; }
.article-nav__link {
  display: flex; align-items: center; justify-content: center;
  height: 30px; padding: 12px 0;
  font-family: "Druk Wide Web", sans-serif; font-size: 0.8rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: #ababab;
  border-bottom: 1px solid var(--highlight);
}
.article-nav__link:hover { color: var(--highlight); }
.label-short { display: none; }

.article-title {
  font-family: var(--font-header); font-size: 7rem; font-weight: normal;
  text-align: left; text-transform: uppercase;
  margin: 2.5rem 0 0 0;
}
.article-rule { margin-bottom: 2.5rem; height: 2px; background-color: white; border: none; }
.article-rule--end { margin: 10px 0 64px 0; }
.article-image { padding-bottom: 32px; width: 100%; max-height: 600px; object-fit: cover; }
.article-byline {
  font-family: "Druk Wide Web", sans-serif; font-size: 0.8rem; font-style: normal;
  text-transform: uppercase; letter-spacing: 1px;
  margin: -1.8rem 0 2rem 0;
}

.article-footer { width: 100%; margin-bottom: 64px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.share-links { display: flex; flex-flow: row wrap; }
.share-link { display: block; margin-left: 10px; line-height: 0; }
.share-link:hover svg { opacity: 0.8; }

@media (min-width: 768px) and (max-width: 1023px) {
  .article-title { font-size: 5rem; line-height: 5rem; }
}
@media (max-width: 767px) {
  .article-nav__link { margin: 0 1rem; }
  .label-long { display: none; }
  .label-short { display: inline; }
  .article-title { font-size: 4rem; margin: 2.5rem 0 0 7.5%; }
  .article-byline { margin-left: 7.5%; }
  .article-footer .round-button { margin-left: 1rem; }
}