.articles-page {
  --article-dark: #0c0e0d;
  --article-light: #a6c3ff;
  --article-heading: 'Barlow Condensed', Manrope, sans-serif;
}

.articles-page .masthead nav .team-nav-link[aria-current] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.articles-intro, .article-hero {
  background: var(--article-dark);
  color: #f5f8ff;
}

.articles-intro-inner, .articles-list { max-width: 1020px; }

.articles-intro-inner {
  padding-block: clamp(35px, 5vw, 60px) clamp(32px, 4vw, 50px);
}

.articles-page .articles-intro h1, .articles-page .article-hero h1 {
  max-width: none;
  line-height: .96;
}

.articles-page .articles-intro h1 { font-size: clamp(3.6rem, 8vw, 6.8rem); }
.articles-intro p { margin-top: 12px; color: #ccd7ed; }
.articles-list { padding-block: 8px clamp(48px, 7vw, 92px); }

.article-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, .85fr) minmax(0, 2fr);
  gap: clamp(16px, 4vw, 52px);
  align-items: center;
  padding-block: clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}

.article-preview { overflow: hidden; aspect-ratio: 16 / 9; background: var(--article-dark); }
.article-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.preview-ad img { object-position: center 57%; }

.article-topic {
  color: var(--accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.article-entry h2 {
  margin-top: 6px;
  font: 700 clamp(1.72rem, 3.4vw, 3rem)/1 var(--article-heading);
  letter-spacing: -.013em;
}

.article-entry h2 a { text-decoration: none; }
.article-entry h2 a::after { content: ''; position: absolute; inset: 0; }
.article-entry h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .12em; }
.article-deck { margin-top: 9px; color: var(--muted); font-size: .96rem; }

.article-detail { padding-bottom: clamp(55px, 7vw, 92px); }
.article-hero-inner, .article-prose, .article-related { max-width: 812px; }

.article-hero-inner {
  padding-block: clamp(25px, 4vw, 42px) clamp(27px, 4vw, 36px);
}

.article-context {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin-bottom: clamp(16px, 2.3vw, 25px);
  font-size: .82rem;
}

.article-back { color: var(--article-light); text-underline-offset: 4px; font-weight: 700; }
.article-back:focus-visible { outline-color: var(--article-light); }

.article-context .article-topic {
  color: #d5ddeb;
  border-inline-start: 1px solid #465269;
  padding-inline-start: 15px;
}

.articles-page .article-hero h1 { font-size: clamp(2.32rem, 5.55vw, 4.65rem); }

.article-lede {
  margin-top: clamp(15px, 2vw, 23px);
  color: #ccd7ed;
  font-size: clamp(.98rem, 1.7vw, 1.17rem);
  line-height: 1.65;
}

.article-prose {
  padding-top: clamp(23px, 4vw, 42px);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.72;
  overflow-wrap: break-word;
}

.article-screenshot { margin-block: 26px 32px; }
.article-screenshot:first-child { margin-top: 0; }

.article-screenshot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.article-screenshot figcaption {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 12px;
  padding-inline-start: 13px;
  border-inline-start: 2px solid var(--accent);
  color: var(--muted);
  font: 550 .87rem/1.55 var(--font);
}

.article-screenshot figcaption a { font-weight: 750; }

.article-screenshot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-block: 26px 32px;
}

.article-screenshot-pair .article-screenshot { margin: 0; }
.article-screenshot-pair img { aspect-ratio: 4 / 5; object-fit: contain; background: #111419; }

.article-contents {
  margin-bottom: 23px;
  padding-block: 9px;
  border-block: 1px solid var(--line);
  font: 600 .85rem/1.5 var(--font);
}

.article-contents summary { width: fit-content; cursor: pointer; }
.article-contents ul, .article-related ul { list-style: none; padding: 0; }
.article-contents ul { margin-block: 9px 4px; }
.article-contents li + li, .article-related li + li { margin-top: 6px; }
.article-contents a, .article-related a, .article-prose a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.article-prose > :is(p, ul) + :is(p, ul) { margin-top: 1em; }

.article-prose h2, .article-related h2 {
  margin-top: 1.35em;
  font: 700 clamp(1.8rem, 3.5vw, 2.75rem)/1.04 var(--article-heading);
  letter-spacing: -.012em;
  text-transform: uppercase;
}

.article-prose h2 + p, .article-prose ul { margin-top: .65em; }
.article-prose > ul { padding-inline-start: 1.15em; }
.article-prose > ul li + li { margin-top: .55em; }

.article-figure {
  margin-block: 28px;
  padding-block: 15px;
  border-block: 1px solid var(--line);
  font: 600 .84rem/1.45 var(--font);
  font-variant-numeric: tabular-nums;
}

.article-figure figcaption, .article-table caption {
  color: var(--ink);
  font: 750 .96rem/1.4 var(--font);
  text-align: start;
}

.article-figure dl { margin-block: 13px; }
.article-figure dd { margin: 0; }
.article-figure .figure-source { color: var(--muted); font-weight: 500; font-size: .78rem; }

.citation-bars { display: grid; gap: 8px; }

.citation-bars > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.citation-bars dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5em;
  align-items: center;
  gap: 10px;
  text-align: end;
}

.citation-bar { background: var(--accent); width: var(--share); height: 6px; }

.response-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 390px;
}

.response-comparison > div + div {
  padding-inline-start: 17px;
  border-inline-start: 1px solid var(--line);
}

.response-comparison dd {
  color: var(--accent);
  font: 700 clamp(2rem, 6vw, 3.3rem)/1.18 var(--article-heading);
  letter-spacing: -.035em;
}

.article-table-scroll { margin-block: 1.45em; }
.article-table { width: 100%; border-collapse: collapse; font: 550 .86rem/1.5 var(--font); }
.article-table caption { padding-bottom: 8px; }
.article-table th, .article-table td { padding: 11px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-table :is(th, td):first-child { padding-inline-start: 0; }
.article-table :is(th, td):last-child { padding-inline-end: 0; }
.article-table thead { border-block: 1px solid var(--ink); }
.article-table tbody th { font-weight: 750; }

.article-faq { margin-top: 39px; }
.article-faq h2 { margin: 0 0 14px; }
.article-faq details { padding-block: 10px; border-top: 1px solid var(--line); }
.article-faq details:last-child { border-bottom: 1px solid var(--line); }
.article-faq summary { cursor: pointer; font: 700 .94rem/1.5 var(--font); }
.article-faq details p { margin: 8px 0 0 17px; }

.article-cta { margin-top: 26px; }
.article-related { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 19px; }
.article-related h2 { margin: 0 0 9px; font-size: 1.65rem; }

@media (max-width: 590px) {
  .article-entry { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
  .article-preview { aspect-ratio: 5 / 4; }
  .article-entry h2 { font-size: clamp(1.35rem, 5vw, 1.85rem); }
  .article-entry .article-deck { font-size: .85rem; line-height: 1.5; }
  .article-screenshot-pair { gap: 16px; }
  .article-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .article-table, .article-table caption, .article-table tbody, .article-table tr, .article-table th, .article-table td { display: block; }
  .article-table tbody tr { padding-block: 9px; border-top: 1px solid var(--line); }
  .article-table tbody tr:first-child { border-top-color: var(--ink); }
  .article-table tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .article-table th, .article-table td { padding: 3px 0; border: 0; }
  .article-table tbody th { margin-bottom: 3px; }
  .article-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; }
  .article-table td::before { content: attr(data-label); color: var(--muted); }
}

@media (max-width: 420px) {
  .article-screenshot-pair { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .citation-bars > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}