/* A shared, decorative number field. The reading column stays clear. */
.colorful-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #dce9e9;
  border-radius: 32px;
  background:
    radial-gradient(ellipse at 98% 4%, #dcd5ff 0, transparent 45%),
    radial-gradient(ellipse at 79% 96%, #ffd9bc 0, transparent 44%),
    linear-gradient(110deg, #f4fbf8 15%, #e1f4ed 58%, #e6f0ff);
}
.colorful-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #f6fcf9 16%, #f6fcf9dd 43%, transparent 67%);
  pointer-events: none;
}
.article .colorful-header {
  padding: 42px;
  margin: 24px 0 34px;
  gap: 30px;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr);
}
.article-intro, .hub-intro { position: relative; z-index: 2; }
.colorful-header .article-art {
  z-index: 1;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
.colorful-header .article-art::after { display: none; }
.colorful-header .art-orbit { border-color: #70aab04a; }
.colorful-header .art-bubble { box-shadow: 0 5px 15px #826a2010; }
.header-numbers {
  position: absolute;
  inset: 0 0 0 56%;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.header-numbers span {
  position: absolute;
  display: block;
  font-size: 74px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.075em;
  font-variant-numeric: lining-nums;
}
.header-numbers span:nth-child(1) { top: -15px; left: 6%; color: #66a8bf; transform: rotate(-14deg); }
.header-numbers span:nth-child(2) { top: 30px; right: 4%; font-size: 100px; color: #9c83d4; transform: rotate(13deg); }
.header-numbers span:nth-child(3) { top: 32%; left: -4%; font-size: 48px; color: #62ae8f; transform: rotate(-12deg); }
.header-numbers span:nth-child(4) { top: 45%; right: -14px; font-size: 87px; color: #6eabcb; transform: rotate(-10deg); }
.header-numbers span:nth-child(5) { bottom: 14px; left: 7%; font-size: 89px; color: #7daf92; transform: rotate(11deg); }
.header-numbers span:nth-child(6) { bottom: -14px; right: 3%; font-size: 99px; color: #dca06d; transform: rotate(-13deg); }
.header-numbers span:nth-child(7) { top: 10%; left: 46%; font-size: 40px; color: #d29382; transform: rotate(17deg); }
.header-numbers span:nth-child(8) { bottom: 16%; right: 23%; font-size: 38px; color: #a08bc2; transform: rotate(12deg); }
.hub-header { max-width: none; margin: 34px 0; padding: 57px 48px; }
.hub-intro { max-width: 610px; }
.hub-header h1 { font-size: clamp(38px, 4.8vw, 60px); }
.hub-header .lead { max-width: 530px; font-size: 20px; }
.hub-header .header-numbers { left: 64%; }
.hub-header .header-numbers span:nth-child(1) { top: -23px; left: 1%; font-size: 103px; }
.hub-header .header-numbers span:nth-child(2) { top: 29px; right: 4%; font-size: 138px; }
.hub-header .header-numbers span:nth-child(3) { top: 31%; left: 3%; font-size: 121px; }
.hub-header .header-numbers span:nth-child(4) { top: 46%; right: -11px; font-size: 104px; }
.hub-header .header-numbers span:nth-child(7),
.hub-header .header-numbers span:nth-child(8) { display: none; }
@media (max-width: 900px) {
  .hub-header { padding: 40px 32px; }
  .hub-intro { max-width: 66%; }
  .hub-header h1 { font-size: 43px; }
  .hub-header .lead { font-size: 18px; }
  .article .colorful-header { padding: 32px; gap: 22px; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr); }
  .colorful-header .article-art { transform: scale(.88); }
  .header-numbers span { opacity: .8; }
}
@media (max-width: 600px) {
  .colorful-header { border-radius: 24px; }
  .colorful-header::before { background: linear-gradient(0deg, #f4fbf8 0%, #f4fbf8fa 51%, transparent 85%); }
  .article .colorful-header { padding: 0 23px 27px; margin: 20px 0 27px; gap: 15px; }
  .colorful-header .article-art { height: 185px; flex-shrink: 0; transform: none; }
  .article-hero.colorful-header h1 { font-size: 35px; }
  .colorful-header .header-numbers { inset: 0 0 auto; height: 204px; }
  .header-numbers span:nth-child(1) { top: -7px; left: 1%; font-size: 58px; }
  .header-numbers span:nth-child(2) { top: 11px; right: 3%; font-size: 66px; }
  .header-numbers span:nth-child(3) { top: 37%; left: -10px; font-size: 37px; }
  .header-numbers span:nth-child(4) { top: 47%; right: -3px; font-size: 49px; }
  .header-numbers span:nth-child(5) { bottom: 3px; left: 7%; font-size: 53px; }
  .header-numbers span:nth-child(6) { bottom: 0; right: 2%; font-size: 61px; }
  .header-numbers span:nth-child(7), .header-numbers span:nth-child(8) { display: none; }
  .hub-header { padding: 193px 25px 31px; margin: 23px 0; }
  .hub-intro { max-width: none; }
  .hub-header h1 { font-size: 39px; }
  .hub-header .lead { font-size: 17px; }
  .hub-header .header-numbers { height: 175px; }
  .hub-header .header-numbers span:nth-child(1) { left: 5%; top: -16px; font-size: 83px; }
  .hub-header .header-numbers span:nth-child(2) { right: 24%; top: 16px; font-size: 110px; }
  .hub-header .header-numbers span:nth-child(3) { left: 10%; top: 47%; font-size: 88px; }
  .hub-header .header-numbers span:nth-child(4) { right: 3%; top: 30%; font-size: 91px; }
  .hub-header .header-numbers span:nth-child(5) { display: none; }
  .hub-header .header-numbers span:nth-child(6) { right: 23%; bottom: -10px; font-size: 66px; }
}