@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Outfit:wght@600;700;800;900&display=swap");

:root {
  --article-night: #0A1020;
  --article-night-2: #10182B;
  --article-muted: #5C6470;
  --article-blue: #0A56DB;
  --article-red: #E30613;
}

body {
  color: var(--article-night-2);
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
.listen-title,
.box-title,
.btn,
.button,
.header-cta,
.desktop-nav a,
.footer-links a {
  font-family: "Outfit", "IBM Plex Sans", Arial, sans-serif !important;
}

.hero h1,
.article-hero h1 {
  max-width: 980px !important;
  color: var(--article-night) !important;
  font-size: clamp(2.25rem, 6vw, 4.7rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.hero .container > p:not(.eyebrow),
.article-summary,
.lead {
  max-width: 900px !important;
  color: var(--article-muted) !important;
  font-size: clamp(1.06rem, 2.2vw, 1.28rem) !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
}

.eyebrow {
  color: var(--article-red) !important;
  font-size: 0.83rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.container.content,
.content.container,
#article-content,
.article-content {
  color: var(--article-night-2) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

.container.content,
.content.container,
#article-content,
.article-content {
  display: block !important;
}

.container.content section,
.content.container section,
#article-content section,
.article-content section {
  margin: 0 0 clamp(2.2rem, 5vw, 3.4rem) !important;
}

.container.content p,
.content.container p,
#article-content p,
.article-content p,
.container.content li,
.content.container li,
#article-content li,
.article-content li {
  color: var(--article-night-2) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
}

.container.content p,
.content.container p,
#article-content p,
.article-content p {
  margin: 0 0 1.05rem !important;
}

.container.content p + p,
.content.container p + p,
#article-content p + p,
.article-content p + p {
  margin-top: 0.25rem !important;
}

.container.content ul,
.content.container ul,
#article-content ul,
.article-content ul,
.container.content ol,
.content.container ol,
#article-content ol,
.article-content ol {
  margin: 0.85rem 0 1.45rem !important;
  padding-left: 1.35rem !important;
}

.container.content li + li,
.content.container li + li,
#article-content li + li,
.article-content li + li {
  margin-top: 0.45rem !important;
}

.container.content strong,
.content.container strong,
#article-content strong,
.article-content strong,
.note.strong {
  font-weight: 700 !important;
}

.content p,
.content li,
.faq p,
.faq li,
.editorial-media-pack p,
.media-pack-copy p,
.card p,
.note p,
.source-box p,
.takeaway-box p,
.caution-box p,
.intro-box p,
td {
  font-weight: 400 !important;
}

.container.content h2,
.content.container h2,
#article-content h2,
.article-content h2,
.faq h2 {
  color: var(--article-night) !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  margin: clamp(2.7rem, 5vw, 4rem) 0 1rem !important;
}

.container.content h3,
.content.container h3,
#article-content h3,
.article-content h3,
.card h3,
.editorial-media-pack h2 {
  color: var(--article-night) !important;
  font-size: 1.25rem !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  margin: 1.7rem 0 0.75rem !important;
}

.container.content > :first-child,
.content.container > :first-child,
#article-content > :first-child,
.article-content > :first-child,
.container.content section > :first-child,
.content.container section > :first-child,
#article-content section > :first-child,
.article-content section > :first-child {
  margin-top: 0 !important;
}

.container.content > :last-child,
.content.container > :last-child,
#article-content > :last-child,
.article-content > :last-child,
.container.content section > :last-child,
.content.container section > :last-child,
#article-content section > :last-child,
.article-content section > :last-child {
  margin-bottom: 0 !important;
}

.note,
.note.strong,
.takeaway-box,
.caution-box,
.intro-box,
.listen-box,
.source-box,
.quote-box,
.media-box {
  border-radius: 8px !important;
}

.editorial-media-pack p,
.media-pack-poster figcaption,
.article-hero-poster figcaption,
.article-hero-video figcaption,
.article-hero-image figcaption {
  color: var(--article-muted) !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
}

@media (max-width: 640px) {
  .hero h1,
  .article-hero h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .container.content,
  .content.container,
  #article-content,
  .article-content,
  .container.content p,
  .content.container p,
  #article-content p,
  .article-content p,
  .container.content li,
  .content.container li,
  #article-content li,
  .article-content li {
    font-size: 1rem !important;
  }
}