/* Shared long-form article treatment.
   Generated decision pages should read like an article, not raw stacked HTML. */
.article,
section.prose {
  padding: 52px 0 72px;
}

.article > .wrap,
section.prose > .wrap,
main > section.wrap[style*="padding:2.7rem"] {
  max-width: 880px;
}

.article .eyebrow,
section.prose > .wrap > .eyebrow,
main > section.wrap[style*="padding:2.7rem"] > .eyebrow {
  margin-bottom: 10px;
}

.article h1,
section.prose > .wrap > h1,
main > section.wrap[style*="padding:2.7rem"] > h1 {
  max-width: 24ch;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.article .lede,
section.prose > .wrap > .lede,
main > section.wrap[style*="padding:2.7rem"] > .lede {
  margin-top: 18px;
  max-width: 68ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}

.article h2,
section.prose > .wrap > h2,
main > section.wrap[style*="padding:2.7rem"] > h2 {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 22px;
  line-height: 1.2;
}

.article h3,
section.prose > .wrap > h3,
main > section.wrap[style*="padding:2.7rem"] > h3 {
  margin-top: 28px;
  font-size: 17px;
}

.article h2 + p,
.article h2 + ul,
.article h2 + ol,
.article h3 + p,
.article h3 + ul,
.article h3 + ol,
section.prose > .wrap > h2 + p,
section.prose > .wrap > h2 + ul,
section.prose > .wrap > h2 + ol,
section.prose > .wrap > h3 + p,
section.prose > .wrap > h3 + ul,
section.prose > .wrap > h3 + ol,
main > section.wrap[style*="padding:2.7rem"] > h2 + p,
main > section.wrap[style*="padding:2.7rem"] > h2 + ul,
main > section.wrap[style*="padding:2.7rem"] > h2 + ol,
main > section.wrap[style*="padding:2.7rem"] > h3 + p,
main > section.wrap[style*="padding:2.7rem"] > h3 + ul,
main > section.wrap[style*="padding:2.7rem"] > h3 + ol {
  margin-top: 12px;
}

.article p,
.article li,
section.prose > .wrap > p,
section.prose > .wrap > li,
section.prose > .wrap ul li,
section.prose > .wrap ol li,
main > section.wrap[style*="padding:2.7rem"] > p,
main > section.wrap[style*="padding:2.7rem"] li {
  color: var(--ink-2);
}

.article p + p,
section.prose > .wrap > p + p,
main > section.wrap[style*="padding:2.7rem"] > p + p {
  margin-top: 16px;
}

.article ul,
.article ol,
section.prose > .wrap > ul,
section.prose > .wrap > ol,
main > section.wrap[style*="padding:2.7rem"] > ul,
main > section.wrap[style*="padding:2.7rem"] > ol {
  margin: 14px 0 20px;
  padding-left: 22px;
}

.article li + li,
section.prose > .wrap li + li,
main > section.wrap[style*="padding:2.7rem"] li + li {
  margin-top: 8px;
}

.article strong,
section.prose > .wrap strong,
main > section.wrap[style*="padding:2.7rem"] strong {
  color: var(--ink);
  font-weight: 650;
}

.article a,
section.prose > .wrap a,
main > section.wrap[style*="padding:2.7rem"] a {
  overflow-wrap: anywhere;
  text-underline-offset: 2px;
  text-decoration-color: var(--rule-strong);
}

.article a:hover,
section.prose > .wrap a:hover,
main > section.wrap[style*="padding:2.7rem"] a:hover {
  text-decoration-color: var(--accent);
}

.article h2:last-of-type + ul,
section.prose > .wrap > h2:last-of-type + ul,
main > section.wrap[style*="padding:2.7rem"] > h2:last-of-type + ul {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .article,
  section.prose { padding: 36px 0 52px; }
  .article h1,
  section.prose > .wrap > h1,
  main > section.wrap[style*="padding:2.7rem"] > h1 { font-size: clamp(30px, 9vw, 42px); }
  .article .lede,
  section.prose > .wrap > .lede,
  main > section.wrap[style*="padding:2.7rem"] > .lede { font-size: 16.5px; }
  .article h2,
  section.prose > .wrap > h2,
  main > section.wrap[style*="padding:2.7rem"] > h2 { margin-top: 30px; padding-top: 18px; font-size: 20px; }
}