.hero-a { background: radial-gradient(ellipse at 83% 28%, #d4f0ff 0%, #eaf8ff 30%, #ffffff00 62%), linear-gradient(180deg, #fff 0%, #f4fbff 85%, #fff 100%); }
.hero-a .hero-stage { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 70px; padding-top: 17px; padding-bottom: 66px; min-height: 475px; }
.hero-a .hero-copy { padding-left: 25px; }
.a-portrait { position: relative; margin: 0 65px 0 0; align-self: stretch; height: 390px; }
.a-portrait img, .a-portrait .portrait-fallback { height: 100%; width: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 190px 190px 14px 14px; }
.a-portrait figcaption { position: absolute; bottom: 19px; left: -35px; display: grid; background: #ffffffee; border-radius: 9px; padding: 13px 20px; box-shadow: 0 10px 24px #1a3e590f; max-width: calc(100% + 20px); }
.handwritten { color: var(--blue); font: italic 27px/1.2 Georgia, serif; }
.a-portrait figcaption > span:last-child { color: var(--muted); font-size: 10px; margin-top: 5px; }
.side-note { position: absolute; right: 28px; top: 110px; writing-mode: vertical-rl; font-size: 9px; letter-spacing: 3px; color: var(--muted); }
@media (max-width: 1100px) and (min-width: 701px) {
  .hero-a .hero-stage { gap: 40px; }
  .a-portrait { margin-right: 35px; }
}
@media (max-width: 700px) {
  .hero-a .hero-stage { grid-template-columns: 1.15fr .85fr; gap: 10px; min-height: 276px; padding-top: 9px; padding-bottom: 35px; }
  .hero-a .hero-copy { padding-left: 0; }
  .a-portrait { margin: 0; height: 235px; align-self: center; }
  .a-portrait img, .a-portrait .portrait-fallback { border-radius: 100px 100px 8px 8px; object-position: 53% 20%; }
  .a-portrait figcaption { left: -7px; bottom: 12px; padding: 7px 9px; border-radius: 5px; }
  .handwritten { font-size: 13px; }
  .a-portrait figcaption > span:last-child { font-size: 7px; margin-top: 3px; }
  .side-note { display: none; }
  .hero-tags span:nth-child(3) { display: none; }
}