/* 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 { position: relative; z-index: 1; padding-block: 76px 124px; min-height: 620px; pointer-events: none; }
.hero-region .hero-rail, .hero-region .hero-copy { pointer-events: auto; }
.hero-region .hero-copy { max-width: 40rem; }
.contour-field { position: absolute; z-index: 0; inset: 0 -5% 0 40%; 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%, color-mix(in srgb, var(--paper) 94%, transparent) 12%, color-mix(in srgb, var(--paper) 60%, transparent) 26%, transparent 44%), 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: #9aa59f; }
.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: 60px 104px; min-height: 560px; }
  .contour-field { left: 30%; right: -17%; }
}
@media (max-width: 700px) {
  .hero-region .hero { padding-block: 30px 252px; min-height: 0; }
  .hero-region .hero-copy { max-width: none; }
  .contour-field { inset: auto -18% 0 -18%; height: 350px; }
  .contour-field::after { background: linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 82%, transparent) 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; }
}
