/* Mobile: breadcrumb, English title, and H1 each occupy their own row.
   Normal flow also accommodates breadcrumbs and headings wrapping to two lines. */
@media (max-width: 768px) {
  /* Scale the PC rings into the mobile title band; the 520px desktop
     circle otherwise puts its entire visible edge outside narrow screens. */
  html body.subpage .page-head::after,
  html body.subpage .fi-hero::after {
    width: 300px;
    height: 300px;
    top: -116px;
    right: -118px;
    box-shadow: 0 0 0 32px rgba(30, 143, 201, .035),
                0 0 0 68px rgba(22, 88, 160, .025);
  }
  html body.subpage .page-head .page-wm,
  html body.subpage .fi-hero .page-wm {
    position: relative !important;
    display: block !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 8px 0 12px !important;
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 1.1 !important;
    text-align: right !important;
    transform: none !important;
  }
  html body.subpage .page-head:has(.page-wm) .crumb,
  html body.subpage .fi-hero:has(.page-wm) .crumb {
    margin-bottom: 0 !important;
  }
}