/* hero_media, layout "indent" (Links, ingesprongen). Linked only when a section
   picks this layout. Text is left-aligned on an inner frame: the air left of
   the text, between text and device, and right of the device is equal. The
   first paragraph of the body is the intro (.hero-lead, set by the hero_lead
   filter). Phones and tablets keep the stacked layout from shared.css. */
.hm-layout-indent .hero-lead { margin-bottom: 14px; font-size: 16px; line-height: 1.5; }
@media (min-width: 901px) {
  /* 104px = the fixed site nav (28 + 48 + 28). Side padding and column gap are
     the same clamp, so space-evenly leaves three equal bands. */
  .hm-layout-indent .hero-media-grid { display: flex; align-items: center; justify-content: space-evenly; gap: 0 clamp(24px, 4vw, 48px); padding: calc(104px + clamp(20px, 4.9vh, 44px)) clamp(24px, 4vw, 48px) clamp(20px, 4.9vh, 44px); }
  .hm-layout-indent .hero-media-grid .hero-content { flex: 0 1 auto; min-width: 0; max-width: none; }
  .hm-layout-indent .hero-media-col { flex: 0 0 auto; }
  /* a contour, route or stack reaches past the device: count it as the edge */
  .hm-layout-indent .hero-media-col:has(.hdl-deco) { padding: 0 calc(min(600px, 60vh) * 0.0647); }
  .hm-layout-indent .hero-label { font-size: 12px; }
  /* same size as .hero-brand-title, folding a little earlier on low screens */
  .hm-layout-indent .hero-headline { font-size: min(var(--hero-brand-title-size), 8svh); max-width: 11em; margin-bottom: clamp(16px, 3.1vh, 28px); }
  .hm-layout-indent .hero-sub { max-width: 600px; font-size: clamp(15px, 2.4vh, 16px); line-height: 1.65; margin-bottom: clamp(24px, 4vh, 36px); }
  .hm-layout-indent .hero-sub > * { max-width: 36em; }
  .hm-layout-indent .hero-sub > :not(.hero-lead) { opacity: 0.86; }
  .hm-layout-indent .hero-sub > .hero-lead { max-width: 30em; margin-bottom: 16px; font-size: clamp(16px, min(1.4vw, 2.5vh), 20px); }
}