/* A hero ink field behind the existing reading layout. */
body { isolation: isolate; }
body::before { z-index: 3; }
.masthead, main, footer { position: relative; z-index: 1; }
.document-flow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.document-flow canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 86vw);
  height: 0;
  visibility: hidden;
}
.document-flow.is-ready canvas { visibility: visible; }
@media screen {
  .hero-metrics { width: 100%; max-width: 430px; justify-self: start; }
  .hero-metrics > .eyebrow { font-size: 12px; margin-bottom: 17px; }
  .metric-main {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 21px;
  }
  .metric-main > strong { font-size: clamp(50px, 4.2vw, 60px); color: var(--ink); }
  .metric-main > p { font-size: 18px; margin-top: 11px; }
  .metric-context { font-size: 12px; margin-top: 14px; }
  .metric-pair { margin-top: 20px; padding: 0; gap: 20px; }
  .metric-pair strong { font-size: 35px; }
  .metric-pair p { font-size: 13px; line-height: 1.6; margin-top: 8px; }
  .metric-pair > div + div { padding-left: 20px; }
  .hero-metrics strong > span { font-size: .55em; padding-top: 3px; }
}
@media screen and (max-width: 760px) {
  .metric-main > strong { font-size: 48px; }
  .metric-main > p { font-size: 17px; }
  .metric-pair strong { font-size: 32px; }
}
@media screen and (max-width: 380px) {
  .metric-main > strong { font-size: 46px; }
  .metric-pair strong { font-size: 29px; }
}
.flow-toggle {
  font: inherit;
  color: var(--muted);
  border: 0;
  background: none;
  padding: 0;
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.flow-toggle:hover { color: var(--blue); }
.flow-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.flow-toggle[hidden] { display: none; }
@media print { .document-flow, .flow-toggle { display: none; } }

/* Approved right-margin placement on mobile and laptop. */
.document-flow canvas { left: auto; right: 0; transform: none; }