/* One type scale for legacy h3 and .h3 article cards. */
:is(.articles__list, .articles__slider) .articles__item-title { font-size: 20px; line-height: 1.4; }
.articles__item-title > :is(h3, .h3) {
  font: inherit !important;
  line-height: 1.4 !important;
  margin: 0 0 18px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.articles__item-content { position: relative; isolation: isolate; overflow: hidden; }
.articles__item-content > * { position: relative; z-index: 1; }
.articles__item[data-article-decor] .articles__item-content::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 210px;
  height: 225px;
  right: -70px;
  bottom: -60px;
  background: url('/i/decor-2.svg') center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
}
.articles__item[data-article-decor="1"] .articles__item-content::before { right: auto; left: -95px; bottom: -90px; }
.articles__item[data-article-decor="2"] .articles__item-content::before { right: -100px; bottom: auto; top: -95px; }

/* Keep long article H1s readable; use the existing standalone outline mark. */
.heading--article[data-article-decor] { position: relative; isolation: isolate; overflow: hidden; }
.heading--article[data-article-decor] .heading__decor { display: none; }
.heading--article[data-article-decor] .heading__in { position: relative; z-index: 1; }
.heading--article[data-article-decor] .heading__title { max-width: 100%; }
.heading--article[data-article-decor] .heading__title h1 {
  font-size: clamp(32px, 3.15vw, 48px);
  line-height: 1.22;
  overflow-wrap: normal;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.heading--article[data-article-decor]::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: clamp(300px, 42vw, 650px);
  aspect-ratio: 246 / 263;
  right: -120px;
  top: -130px;
  background: url('/i/decor-2.svg') center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
}
.heading--article[data-article-decor="1"]::before { right: auto; left: -170px; top: auto; bottom: -180px; }
.heading--article[data-article-decor="2"]::before { right: -200px; top: auto; bottom: -220px; width: clamp(360px, 47vw, 720px); }
@media (max-width: 767px) {
  :is(.articles__list, .articles__slider) .articles__item-title { font-size: 18px; }
  .articles__item[data-article-decor] .articles__item-content::before { width: 180px; height: 193px; opacity: .08; }
  .heading--article[data-article-decor] .heading__title h1 { font-size: clamp(25px, 6.6vw, 30px); line-height: 1.25; }
  .heading--article[data-article-decor]::before { width: 300px; right: -155px; top: -100px; opacity: .12; }
  .heading--article[data-article-decor="1"]::before { right: auto; left: -180px; top: auto; bottom: -150px; }
  .heading--article[data-article-decor="2"]::before { width: 340px; right: -190px; top: auto; bottom: -175px; }
}

/* In-text accents sit at the viewport edges and never cover controls. */
.article--branded { position: relative; isolation: isolate; overflow: clip; }
.article--branded > .inner { position: relative; z-index: 1; }
.article--branded::before, .article--two-marks::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 480px; aspect-ratio: 246 / 263;
  background: url('/i/decor-2.svg') center / contain no-repeat;
  opacity: .09;
}
.article--branded::before { top: 26%; right: -285px; }
.article--two-marks::after { top: 72%; left: -285px; }
.article--branded[data-article-body-decor="1"]::before { top: 22%; right: auto; left: -300px; }
.article--branded[data-article-body-decor="1"]::after { top: 76%; left: auto; right: -300px; }
@media (max-width: 767px) {
  .article--branded::before, .article--two-marks::after { width: 320px; opacity: .07; }
  .article--branded::before, .article--branded[data-article-body-decor="1"]::after { right: -225px; }
  .article--two-marks::after, .article--branded[data-article-body-decor="1"]::before { left: -225px; }
  .footer { position: relative; isolation: isolate; overflow: clip; }
  .footer > .inner { position: relative; z-index: 1; }
  .footer::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    width: 360px; aspect-ratio: 246 / 263;
    right: -150px; top: 48%;
    background: url('/i/decor-2.svg') center / contain no-repeat;
    filter: brightness(0) invert(1); opacity: .18;
  }
}

/* Expert biographies wrap beside the portrait, then use the full card width. */
.article-authors .article-author { display: flow-root; }
.article-authors .article-author__photo { float: left; margin: 0 18px 10px 0; }
.article-authors .article-author__content { display: block; overflow: visible; width: auto; }
.article-authors .article-author__content > :is(h3, p) { clear: none; }
@media (max-width: 767px) {
  .article-authors .article-author__photo { margin-right: 14px; }
}
.article-authors .article-authors__grid { align-items: start; }
@media (max-width: 1023px) {
  .article-authors .article-authors__grid { grid-template-columns: minmax(0, 1fr); }
}