/* Home portrait: the approved profile photo, displayed without cropping. */
.hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero .home-portrait {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 3.5rem clamp(2rem, 5vw, 5rem);
  background: radial-gradient(ellipse at 50% 35%, #28435b, #102b46 74%);
}
.home-portrait-frame {
  display: block;
  width: min(100%, 25rem);
  padding: .65rem;
  background: #f5eee2;
  border: 1px solid #e2d7c6;
  box-shadow: 0 20px 48px rgb(0 0 0 / 22%);
}
.home-portrait-frame img { display: block; width: 100%; height: auto; }
.home-portrait figcaption {
  display: grid;
  gap: .35rem;
  width: min(100%, 25rem);
  color: #d9e2e8;
  font-size: .9rem;
}
.home-portrait figcaption span { font-size: .78rem; letter-spacing: .04em; }
.home-portrait figcaption a { color: #fff; text-underline-offset: .25em; }
.home-portrait figcaption a:hover { color: #ffc58c; }
@media (max-width: 1000px) {
  .hero .hero-grid { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .hero .home-portrait { padding: 2.5rem 1.5rem; }
  .home-portrait-frame, .home-portrait figcaption { width: min(100%, 22rem); }
}
@media (max-width: 600px) {
  .hero .hero-grid > div:first-child { padding: 3rem 1.25rem; }
  .hero .home-portrait { padding: 2rem 1.25rem; }
  .home-portrait-frame, .home-portrait figcaption { width: min(100%, 18rem); }
}

@media (min-width: 1001px) {
  .hero h1 { font-size: clamp(4rem, 7vw, 7rem); }
}