.modal {
  /* This way it could be display flex or grid or whatever also. */
  display: block;
  /* Probably need media queries here */
  width: max(600px, 60dvw);
  max-width: 100%;
  height: 400px;
  max-height: 100%;
  
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  
  /* Use this for centering if unknown width/height */
  transform: translate(-50%, -50%);
  
  /* If known, negative margins are probably better (less chance of blurry text). */
  /* margin: -200px 0 0 -200px; */
  padding-block-end: 3em;
  border-radius: 10px;
  background: white;
  box-shadow: 0 0 30px 10px rgba(0,0,0, 0.6);
  overflow-y: hidden;
}

/* .closed {display: none;} */
.modal:not(.active) {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.modal-guts {
/*
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
*/
  height: 100%;
  overflow: auto;
  padding: 20px 5rem 20px 20px;
  background-color: white;
  border: 1px solid rgb(240,240,240);
  overflow-y: auto;
}

.modal-guts :where(h1, h2, h3, h4, h5) {margin-block-end: .75rem;}

.modal-guts h1 {font-size: 1.25rem;}
.modal-guts h2 {font-size: 1.15rem;}

.modal-guts li {
  list-style-type: initial;
  margin-inline-start: 1rem;
}
.modal .close-button {
  position: absolute;
  /* don't need to go crazy with z-index here, just sits over .modal-guts */
  z-index: 1;
  top: 10px;
  /* needs to look OK with or without scrollbar */
  right: 20px;
  border: 0;
  background: black;
  color: white;
  padding: 5px 10px;
  font-size: 1.3rem;
}

.open-button {
  color: var(--link);
  background: transparent;
  font-size: 1rem;
  padding: 10px 20px;
  margin-block-end: 1rem!important;
  border: 1px solid var(--orange-clair);
  border-radius: 10px;
  cursor: pointer;
}
.open-button::before {
  content: "\f360";
  font-family: "Font Awesome 5 Free";
  font-weight: 700 !important;
  margin-inline-end: .75em;
  vertical-align: bottom;
}