/* BOARD OF DIRECTORS + POPUP */
.members { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem 1.5rem; margin-top: 2.75rem; }
.member { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.member__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--panel-soft); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease, filter .3s; }
.member:hover .member__photo img, .member:focus-visible .member__photo img { transform: scale(1.04); }
.member__name { display: block; margin-top: .9rem; font: 600 1.15rem/1.25 var(--font-head); color: var(--night); }
.member__role { display: block; color: var(--sun-deep); font: 500 .95rem/1.4 var(--font-head); margin-top: .1rem; }
.member:hover .member__name { color: var(--panel); }

.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8, 26, 51, .72); opacity: 0; transition: opacity .25s; }
.modal__dialog {
  position: relative; width: min(860px, 100%); max-height: calc(100vh - 2.5rem); overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  background: var(--white); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s, transform .25s;
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__dialog:focus { outline: none; }
.modal__photo { background: var(--panel-soft); min-height: 320px; }
.modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.modal__content { padding: 2.25rem 2.25rem 1.75rem; display: flex; flex-direction: column; }
.modal__name { font-size: 1.85rem; margin-bottom: .2rem; }
.modal__role { color: var(--sun-deep); font: 500 1.05rem/1.4 var(--font-head); margin-bottom: 1.25rem; }
.modal__bio { color: #2b3b4c; }
.modal__email[hidden] { display: none; }
.modal__nav { margin-top: auto; padding-top: 1.25rem; display: flex; gap: .6rem; border-top: 1px solid var(--line); }
.modal__step { font: 500 .95rem/1 var(--font-head); padding: .7rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); color: var(--night); cursor: pointer; }
.modal__step:hover { background: var(--panel-soft); }
.modal__close {
  position: absolute; right: .7rem; top: .6rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .92); color: var(--night); font-size: 1.8rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.modal__close:hover { background: var(--sun); }

@media (max-width: 720px) {
  .modal__dialog { grid-template-columns: 1fr; }
  .modal__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .modal__content { padding: 1.5rem; }
}