@layer components{.page-hero{padding-block:var(--space-xl)var(--space-m);& .page-hero__heading{max-inline-size:18ch;margin-block-start:var(--space-s)}& .page-hero__lead{max-inline-size:var(--measure);margin-block-start:var(--space-s);color:var(--color-text-muted);font-size:var(--size-step-1)}&[data-tone=band]{padding-block:var(--space-2xl)var(--space-xl)}&[data-tone=soft]{padding-block:var(--space-xl);background:var(--color-accent-surface)}}}