/* page-like modal: <dialog class="overlay modal"> wrapping a .modal-panel (see overlay.css for the shell) */

.modal-panel {
  padding-top: clamp(3rem, 10vh, 6rem);
  /* no site map in here, so no need for .content's extra right padding */
  padding-right: var(--gap);
  transform: translateY(1.5rem);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.modal[open] .modal-panel {
  transform: none;
}

@starting-style {
  .modal[open] .modal-panel {
    transform: translateY(1.5rem);
  }
}

.modal-panel .bio {
  margin-bottom: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  .modal-panel {
    transition: none;
  }
}