/* The chart is a field in the page, without a frame or a separate paper color. */
.hero-region { position: relative; isolation: isolate; overflow: hidden; }
.hero-region .hero { display: block; position: relative; z-index: 1; padding-block: 85px 112px; min-height: 625px; pointer-events: none; }
.hero-region .hero-copy { width: 56%; max-width: 640px; pointer-events: auto; }
.hero-region .hero-intro { max-width: 420px; }
.contour-field { position: absolute; z-index: 0; inset: 0 -5% 0 23%; pointer-events: none; }
.contour-field::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 63% 48%, rgba(99, 148, 153, .075), transparent 58%); }
.contour-field::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--paper) 0%, rgba(242,236,223,.96) 14%, rgba(242,236,223,.68) 28%, transparent 47%), linear-gradient(0deg, var(--paper) 0%, transparent 24%, transparent 78%, var(--paper) 100%); }
.contour-field canvas, .contour-field img { position: absolute; inset: 0; width: 100%; height: 100%; }
.contour-field img { object-fit: cover; }
.contour-field canvas { visibility: hidden; }
.contour-field.is-ready canvas { visibility: visible; }
.contour-field.is-ready img { visibility: hidden; }
.contour-caption { position: absolute; z-index: 2; bottom: 35px; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 20px; color: var(--muted); font: .68rem var(--mono); letter-spacing: .025em; }
.contour-caption span + span::before { content: '/'; margin-right: 20px; color: #99a39a; }
.contour-toggle { border: 0; border-left: 1px solid var(--line); padding: 7px 0 7px 17px; border-radius: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.contour-toggle:hover { color: var(--ink); }
.contour-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 5px; }
@media (max-width: 1000px) {
  .hero-region .hero { padding-block: 65px 104px; min-height: 580px; }
  .hero-region .hero-copy { width: 62%; }
  .contour-field { left: 20%; right: -17%; }
}
@media (max-width: 700px) {
  .hero-region .hero { padding-block: 30px 252px; min-height: 0; }
  .hero-region .hero-copy { width: 100%; max-width: none; }
  .contour-field { inset: auto -18% 0 -18%; height: 350px; }
  .contour-field::after { background: linear-gradient(180deg, var(--paper) 0%, rgba(242,236,223,.82) 13%, transparent 45%, transparent 72%, var(--paper) 100%), linear-gradient(90deg, var(--paper), transparent 20%, transparent 85%, var(--paper)); }
  .contour-caption { bottom: 23px; justify-content: space-between; gap: 12px; font-size: .63rem; }
  .contour-caption .chart-disclaimer { display: none; }
  .contour-toggle { padding-block: 12px; }
}
@media print {
  .contour-field, .contour-caption { display: none; }
  .hero-region .hero { min-height: 0; padding-block: 25px; }
  .hero-region .hero-copy { width: 100%; }
}