.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    radial-gradient(50% 80% at 100% 0%, var(--color-primary-50) 0%, transparent 70%),
    var(--color-surface-alt);
  border-bottom: 1px solid var(--color-line);
}

/* decorative tally strokes */
.page-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 260px;
  height: 200px;
  background-image: repeating-linear-gradient(90deg, var(--color-primary-100) 0 10px, transparent 10px 34px);
  border-radius: 8px;
  opacity: .6;
  transform: rotate(-8deg);
  pointer-events: none;
}

.page-hero--with-image::after { display: none; }

.page-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.page-hero--with-image .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }

.page-hero__title { max-width: 20ch; }

.page-hero__lead {
  max-width: 640px;
  margin-bottom: 0;
}

.page-hero__media {
  padding: 10px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
  transform: rotate(1.5deg);
}

.page-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 6px);
  transform: rotate(-1.5deg);
}

@media (max-width: 899.98px) {
  .page-hero--with-image .page-hero__grid { grid-template-columns: 1fr; }
}