/* Final article refinements approved in the HTML preview. */

/* Keep printed articles away from the physical page edges. */
@page {
  margin: 0.7in;
}

/* Keep the article category label at the top-right of the hero. */
main .article-hero .article-shell {
  position: relative !important;
}

main .article-hero .pill {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

/* Slightly reduce the blog-post title without changing its layout or styling. */
main .article-hero h1 {
  font-size: clamp(2.6rem, 4.45vw, 4.25rem) !important;
}

/* Align the article body and action row with the left edge of the article title. */
@media (min-width: 1050px) {
  main .article-content-section .article-body,
  main .article-content-section .article-actions {
    width: min(calc(100% - (var(--page-gutter) * 2)), 1120px) !important;
    max-width: 1120px !important;
    padding-right: 260px !important;
  }
}

/* Blog body headings use the eyebrow visual language, without the leading rule. */
main .article-body h2:not(#references-heading),
main .article-body h3,
main .article-body h4 {
  color: var(--color-blue) !important;
  font-family: var(--font-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.42 !important;
  text-transform: none !important;
}

main .article-body h2:not(#references-heading) {
  margin: 2.5rem 0 0.95rem !important;
  font-size: 17px !important;
}

main .article-body h3 {
  margin: 2.25rem 0 0.9rem !important;
  font-size: 16px !important;
}

main .article-body h4 {
  margin: 2rem 0 0.8rem !important;
  font-size: 15px !important;
}

/* Keep quote rules centered on the quote text; spacing belongs outside the quote. */
main .article-body blockquote,
main .live-article-body blockquote {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem) !important;
  line-height: 1.58 !important;
}

main .article-body blockquote > p,
main .live-article-body blockquote > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep the three article actions separated even when the live CMS stylesheet is present. */
main .article-actions {
  column-gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  row-gap: 1.35rem !important;
}

main .article-actions .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.85rem 1rem !important;
}

main .article-actions .article-action {
  min-width: 118px;
}

@media (max-width: 700px) {
  main .article-hero .back-link {
    max-width: calc(100% - 105px) !important;
  }

  main .article-hero h1 {
    font-size: clamp(2.3rem, 10vw, 3.15rem) !important;
  }

  main .article-body h2:not(#references-heading) {
    font-size: 16.5px !important;
  }

  main .article-body h3 {
    font-size: 15.5px !important;
  }

  main .article-body h4 {
    font-size: 14.5px !important;
  }

  main .article-actions .action-buttons {
    gap: 0.7rem !important;
  }

  main .article-actions .article-action {
    min-width: 0;
  }
}