/* HERO — the dotted portrait sits behind the copy and bleeds left so the
   headline layers over its sparse edge. */
.jj-hero { padding: 1.5rem 0 1rem; }
.jj-hero__inner { position: relative; min-height: 440px; display: flex; align-items: center; }
.jj-hero__portrait { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; z-index: 1; pointer-events: none; }
.jj-hero__portrait .jj-halftone { width: 100%; height: 100%; }
.jj-hero__copy { position: relative; z-index: 2; max-width: 540px; padding: 1rem 0; }
.jj-hero__title { font-size: clamp(2.4rem, 6.2vw, 3.7rem); letter-spacing: -.02em; margin: .2rem 0 0; }
.jj-hero__sub { color: var(--jj-muted); font-size: 1.05rem; max-width: 30ch; margin-top: 1.3rem; }

@media (max-width: 820px) {
	.jj-hero__inner { display: block; min-height: 0; }
	.jj-hero__portrait { position: relative; width: 100%; height: 280px; margin-bottom: .5rem; }
	.jj-hero__copy { max-width: none; }
	.jj-hero__sub { max-width: 42ch; }
}