/* Hero L: the claim set over the living field. "Play" is the drawn outline of the old hero, "with" in Jost, "form." the
   serif exception; one stacked block on the page gutter, the field keeps its pieces clear of it (field-w.js heading box). */
.hero-l .lf-copy { max-width: min(640px, 46vw); }
.hl-claim { margin: 0; display: grid; grid-template-columns: max-content 1fr; justify-items: start; align-items: end; column-gap: .18em; line-height: .82;
  font: 400 clamp(64px, 9.4vw, 156px)/.82 var(--f-display); letter-spacing: -.035em; color: var(--vs-ink); }
.hl-play { grid-column: 1 / -1; color: #fff; -webkit-text-stroke: max(1.6px, .011em) var(--vs-ink); paint-order: stroke fill; }
.hl-with { font-size: .42em; letter-spacing: -.02em; align-self: center; padding-bottom: .18em; }
.hl-form { font: italic 400 1.02em/.8 var(--serif, "Instrument Serif", serif); letter-spacing: -.02em; padding-right: .06em; }
.hl-lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 26em; font: 400 var(--t-lead)/1.45 var(--f-ui); color: var(--vs-ink-2); }
@media (max-width: 760px) {
  .hero-l .lf-copy { max-width: none; }
  .hl-claim { font-size: clamp(56px, 17vw, 88px); }
}