/* The post bodies carry their own stylesheet, written against live's 62.5% root
   where 1rem = 10px, and they use rem for nearly every size and space. Against a
   16px root each of those values comes out 1.6x too big — a 3rem gap lands at
   48px instead of 30px. This file is only served on article pages, so setting the
   root here reaches those posts and nothing else; the theme's own rules on this
   template are all in px and are unaffected. */
html {
  font-size: 62.5%;
}
/* Live's body is 17px against that root, and the post body inherits it, along
   with the prose colour, tracking and leading the posts were written against.
   The theme's own base rules would otherwise repaint the post in its typography. */
.main-article__content {
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.6px;
  color: #1a1a1a;
}

/* The posts set their headings from their own --font-display, but the theme's
   element-level heading rules outrank the post stylesheet and win with the theme
   face instead. The variable resolves correctly here; only the winner is wrong,
   hence !important rather than a heavier selector. */
.main-article__content .post-hero h1,
.main-article__content .post-body h2,
.main-article__content .post-body h3 {
  font-family: var(--font-display, "DM Serif Display", Georgia, serif) !important;
}

/* The post's own padding on these two loses to the theme's link and inline-block
   resets, which collapses the sidebar button and the hero eyebrow. */
.main-article__content .toc-cta {
  padding: 0.7rem 1rem !important;
}
.main-article__content .hero-eyebrow {
  padding: 0.3rem 0.85rem !important;
}

/* Live runs the hero on tight leading; inheriting the prose 1.75 here stretches
   the eyebrow, title and byline apart. */
.main-article__content .post-hero {
  line-height: 0.8;
}

/* The theme underlines every link inside post copy and flattens the hero pill's
   padding, so both Walgreens buttons arrive underlined and the hero one collapsed. */
.main-article__content .nav-cta,
.main-article__content .toc-cta {
  text-decoration: none !important;
}
.main-article__content .nav-cta {
  padding: 0.45rem 1.1rem !important;
}

/* Live's share control is brand teal at 14px with a small glyph; the theme's
   default is grey at body size with a 24px icon. */
.main-article__share,
.main-article__share .share-button {
  color: #64c3bb;
  font-size: 14px;
  font-weight: 400;
}
.main-article__share svg {
  width: 13px;
  height: 12px;
  color: #64c3bb;
}

/* Same story for the comparison tables. */
.main-article__content table {
  font-size: 1.4rem;
  line-height: 1.75;
}
.main-article__content td {
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 1.4rem 1.2rem;
}
.main-article__content th {
  padding: 0.78rem;
}

.main-article-container {
  background-color: rgb(var(--color-background));
}
/* Live centres the article column at 726px inside the 1200px page width; the
   section's own spacing setting leaves 700px, which narrows every block inside
   the post body. */
@media (min-width: 990px) {
  .main-article > div[class*="main-article:spacing"] {
    padding-inline: 237px;
  }
}
.main-article__title {
  padding-block-end: 20px;
}
.main-article__cover-image {
  aspect-ratio: var(--aspect-ratio);
  margin-block: 40px;
  overflow: hidden;
  border-radius: var(--border-radius);
}
.main-article__cover-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-article__info {
  display: flex;
  gap: 10px;
  padding-block-end: 20px;
  color: rgb(var(--color-light-text));
  border-block-end: 1px solid rgb(221 221 221 / 100%);
}
.main-article__button-back {
  margin-block-end: 40px;
}
.main-article__button-back svg {
  width: 0.8em;
  height: 0.8em;
  transform: rotate(90deg);
}
.main-article__content {
  margin-block: 40px;
}
/* Live runs a tighter rhythm between the share row and the post body. */
@media (min-width: 990px) {
  .main-article__content {
    margin-block-start: 0;
  }
}
.main-article__comment-title {
  padding-block: 40px;
}
.main-article__comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block-end: 40px;
}
.main-article__comment-item {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.main-article__comment-info {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: end;
}
.main-article__comment-fields {
  display: flex;
  gap: 20px;
}
.main-article .text-area + .field__label {
  inset-block-start: 20px;
}
.main-article__share {
  margin-block: 40px 34px;
}
.main-article__comment-submit {
  display: flex;
  justify-content: center;
  margin-block-start: 40px;
}
.main-article__comment-form {
  padding-block-start: 40px;
}
.main-article__comment-form-title {
  margin-block-end: 40px;
}
.main-article__comment-tip {
  padding-block: 40px;
}
.main-article .field__info {
  padding-block-end: 40px;
}
.main-article__comment-dot {
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
}
@media (max-width: 959px) {
  .main-article__cover-image {
    margin-block: 20px;
  }

  .main-article__content {
    margin-block-end: 20px;
  }

  .main-article__share {
    margin-block: 20px 40px;
  }

  .main-article__comment-title {
    padding-block: 0 20px;
  }

  .main-article__comment-list {
    margin-block-end: 20px;
  }

  .main-article__comment-item {
    gap: 20px;
    padding: 20px;
  }

  .main-article__comment-info {
    gap: 16px;
  }

  .main-article__comment-content {
    padding: 0;
  }

  .main-article__comment-form-title {
    margin-block-end: 20px;
  }

  .main-article__comment-fields {
    display: block;
  }

  .main-article__comment-tip {
    padding-block-start: 20px;
  }
}