/* ===================== Team ===================== */
.team { padding: 80px 0 28px; text-align: center; color: var(--ink-2); }
.team h1 { margin-top: 8px; padding-bottom: 10px; font-size: 64px; font-weight: 700; line-height: 83.2px; }

.team-grid { display: grid; column-gap: 34px; row-gap: 27px; }
.team-grid.two { grid-template-columns: 1fr 1fr; margin-top: 112px; }
.team-grid.three { grid-template-columns: repeat(3, 1fr); column-gap: 3%; margin-top: 58px; }

.member-photo { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.member-photo img { margin: 0 auto; border-radius: 5px 5px 0 0; }
.team-grid.three .member-photo img { width: 100%; }
.team-box {
  position: relative;
  min-height: 135px;
  margin-top: -10px;
  padding: 35px 0;
  background: #fffbf7;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 20px 20px rgba(247, 139, 0, 0.2);
}
.team-grid.three .team-box { margin-top: -9px; }
.team-box h3 { padding-bottom: 10px; font-size: 20px; font-weight: 600; line-height: 6px; color: var(--ink-2); }
.team-box p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--orange); }

.board-title { margin-top: 77px; padding-bottom: 10px; font-size: 47px; font-weight: 700; line-height: 56.4px; }

/* ---------- bio pop-up ---------- */
.member-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  padding: 126px 0 60px;
  background: rgba(36, 39, 42, 0.86);
  text-align: center;
}
.member-close {
  position: absolute;
  top: 35px;
  right: calc(50% - 218px);
  width: 28px;
  height: 90px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0;
  color: var(--white);
}
/* a thin × drawn with two lines (the live one is a 60px ultra-light glyph) */
.member-close::before,
.member-close::after {
  content: "";
  position: absolute;
  top: 44px;
  left: -4px;
  width: 36px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.member-close::after { transform: rotate(-45deg); }
.member-close:focus { outline: none; }
.member-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.member-modal-content { width: 403px; max-width: calc(100% - 40px); margin: 0 auto; background: var(--white); border-radius: 5px; }
.member-modal-content img { width: 100%; border-radius: 5px 5px 0 0; }
.member-modal-text { padding: 20px; }
.member-modal-text h2 { margin-bottom: 10px; padding-bottom: 10px; font-size: 20px; font-weight: 600; line-height: 24px; color: var(--ink-2); }
.member-modal-text h3 { margin-bottom: 8px; padding-bottom: 10px; font-size: 14px; font-weight: 500; line-height: 16.8px; color: var(--orange); }
.member-modal-text p { margin-top: 12px; padding-top: 20px; border-top: 1px solid #cccccc; font-size: 14px; line-height: 21px; color: #000000; }
body.modal-open { overflow: hidden; }

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .team { padding: 40px 0 30px; }
  .team h1 { font-size: 45px; line-height: 58.5px; }
  .team-grid.two,
  .team-grid.three { grid-template-columns: 1fr; row-gap: 30px; }
  .team-grid.two { margin-top: 128px; }
  .team-box,
  .team-grid.three .team-box { max-width: 550px; margin: 0 auto; }
  .team-grid.three .member-photo img { width: auto; }
  .board-title { margin-top: 80px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .team { padding-bottom: 29px; }
  .team h1 { font-size: 26px; line-height: 33.8px; }
  .team-grid.two { margin-top: 77px; }
  .member-photo img,
  .team-grid.three .member-photo img { width: 100%; }
  .board-title { font-size: 26px; line-height: 31.2px; }
  .team-grid.three { margin-top: 8px; }
  .member-close { right: 10px; }
}