/* =====================================================
   PERSON AREA
===================================================== */

.personGrid{
  display:grid;
  gap:80px;
}

.personCard{
  background:none;
  overflow:hidden;
}

/* =====================================================
   STARRING
===================================================== */

.personSplit{
  display:grid;
  gap:32px;
}

.personSplit__photo{
  max-width:520px;
  margin:0 auto;
}

.personSplit__photo img{
  width:100%;
  display:block;
}

.personSplit__content{
  text-align:center;
}

/* =====================================================
   HEADER
===================================================== */

.personCard__head{
  padding:0;
  text-align:center;
}

.personCard__role{
  margin:0 0 12px;
  color:var(--cyan);
  font-family:var(--display);
  font-size:18px;
  letter-spacing:.18em;
}

.personCard__jp{
  margin:12px 0;
  font-size:clamp(32px,6vw,48px);
  font-weight:700;
  color:#fff;
}

.personCard__name{
  margin:0;
  font-family:var(--display);
  font-size:20px;
  line-height:.9;
  letter-spacing:.03em;
}

/* =====================================================
   STAFF
===================================================== */

.personCard--staff{
  max-width:520px;width: 100%;
  margin:0 auto;
  padding-top:60px;
  border-top:1px solid var(--line);
  text-align:center;
}

/* =====================================================
   BUTTON
===================================================== */

.personCard__actions{  width:100%;
  padding-top:24px;
}

.personBtn{
  appearance:none;
  display:block !important;
  
  width:520px !important;max-width: 100%!important;
  margin:0 auto !important;


  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);

  padding:16px 20px;

  color:#fff;
  font-family:var(--display);
  font-size:18px;
  letter-spacing:.18em;

  cursor:pointer;
  transition:.3s;
}

.personBtn:hover{
  color:var(--cyan);
  border-color:var(--cyan);
  box-shadow:0 0 24px rgba(140,238,255,.18);
}


.personMore{
  margin:32px 0 0;

  text-align:center;

  color:var(--cyan);

  font-family:var(--display);
  font-size:16px;

  letter-spacing:.25em;
}



/* COMMENT */

.personComment{
  width:100%;
}

.personComment summary{
  cursor:pointer;
  list-style:none;
  padding:16px 20px;
  border:1px solid var(--line);
  font-family:var(--display);
  letter-spacing:.18em;
  transition:.3s;
}

.personComment summary:hover{
  border-color:var(--cyan);
}

.personComment summary::-webkit-details-marker{
  display:none;
}

.personComment summary::after{
  content:"+";
  float:right;
}

.personComment[open] summary::after{
  content:"−";
}

.personComment__body{
  padding:24px;
  border:1px solid var(--line);
  border-top:none;
  background:rgba(255,255,255,.03);
  animation:commentOpen .35s ease;
}

@keyframes commentOpen{
  from{
    opacity:0;
    transform:translateY(-8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* PROFILE MODAL */

.profileModal{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:.35s;
}

.profileModal.is-open{
  opacity:1;
  visibility:visible;
}

.profileModal__overlay{
  position:absolute;
  inset:0;
  background:rgba(2,7,18,.9);
  backdrop-filter:blur(12px);
}

.profileModal__panel{
  position:relative;
  top:50%;
  left:50%;
  width:min(92vw,900px);
  max-height:80vh;
  padding:56px;
  background:#06133e;
  border:1px solid var(--line);
  box-shadow:0 0 80px rgba(140,238,255,.15);
  opacity:0;
  transform:translate(-50%,-48%);
  transition:.35s;
      display:flex;
  flex-direction:column;

  overflow:hidden;
}

#profileModalContent{
  overflow:auto;
}
#profileModalContent h3{
  margin:5px 0 24px;
  font-family:var(--display);
  font-size:30px;
  line-height:.95;
}


.profileModal.is-open .profileModal__panel{
  opacity:1;
  transform:translate(-50%,-50%);
}

.profileModal__close{
  position:fixed;
  top:24px;
  right:24px;
  margin-left:auto;

  width:42px;
  height:42px;
  border:none;
  background:#06133e;
  color:#fff;
  font-size:28px;
  cursor:pointer;
  z-index:10;
}

/* MOBILE */

@media (max-width:840px){
.personBtn{
 
  width:80% !important;

}
  .personCard__name{
    font-size:20px;
  }

  .personCard__jp{
    font-size:30px;
  }

  .profileModal__panel{
    padding:32px 24px;
  }

}


.personCommentText{
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--line);
}

.personCommentText p{
  margin:0;
}