/* =========================================
   Article Header
========================================= */
.article-header-inner{
  max-width: 820px;
}

.article-category{
  display: inline-flex;
  align-items: center;
  color: var(--brand-accent-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.article-category:hover,
.article-category:focus{
  color: var(--bs-link-hover-color);
}

.article-deck{
  max-width: 760px;
  margin-bottom: 1rem;
  color: var(--bs-body-color);
  font-size: 1.15rem;
  line-height: 1.65;
}

.article-byline{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  color: var(--bs-secondary-color);
  font-size: var(--fs-small);
}

/* =========================================
   Article Body
========================================= */
.article-content{
  max-width: 780px;
}

.article-content > * + *{
  margin-top: 1.35rem;
}

.article-hero-figure{
  margin: 0 0 2rem;
}

.article-hero-figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius-lg);
  background: var(--bs-secondary-bg);
}

.article-hero-figure figcaption{
  margin-top: .65rem;
  color: var(--bs-secondary-color);
  font-size: .875rem;
  line-height: 1.5;
}

.article-lede{
  color: var(--bs-body-color);
  font-size: 1.15rem;
  line-height: 1.75;
}

.article-content h2{
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  color: var(--brand-accent-dark);
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.25;
}

.article-content h3{
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.25;
}

.article-content p{
  font-size: 1.03rem;
  line-height: 1.78;
}

.article-content li{
  font-size: 1.03rem;
  line-height: 1.78;
  margin-bottom: 0.5rem;
}

.article-content blockquote{
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border-left: .25rem solid var(--brand-accent);
  background: var(--brand-accent-soft);
  color: var(--bs-body-color);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* =========================================
   Article Sidebar
========================================= */
.article-sidebar{
  display: grid;
  gap: 1rem;
}

.article-toc{
  display: grid;
  gap: .65rem;
}

.article-toc a,
.article-related-list a{
  text-decoration: none;
}

.article-toc a{
  color: var(--bs-body-color);
  font-size: .95rem;
  line-height: 1.35;
}

.article-toc a:hover,
.article-toc a:focus,
.article-related-list a:hover,
.article-related-list a:focus{
  color: var(--brand-accent-dark);
  text-decoration: underline;
}

.article-related-list li + li{
  margin-top: .65rem;
}

@media (min-width: 992px){
  .article-sidebar{
    position: sticky;
    top: 88px;
  }
}