/* ===============================

   STAFF STORMPK – RPG DARK STYLE

================================ */



.staff-section {

  width: 100%;

  padding: px 20px;

  background: linear-gradient(180deg, #050303, #120809);

  font-family: "Cinzel", serif;

  color: #e6d6b8;

}



.staff-section h1 {

  text-align: center;

  font-size: 40px;

  color: #d4af37;

  margin-bottom: 70px;

  text-shadow: 0 0 15px rgba(212,175,55,0.5);

}



.staff-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 50px;

  max-width: 1200px;

  margin: auto;

}



.staff-card {

  background: radial-gradient(circle at top, #1c0f10, #070303);

  border: 2px solid #6b4b1e;

  border-radius: 18px;

  padding: 35px 25px 45px;

  text-align: center;

  box-shadow: 0 0 35px rgba(0,0,0,0.9);

  transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.staff-card:hover {

  transform: translateY(-12px);

  box-shadow: 0 0 45px rgba(212,175,55,0.4);

}



.staff-frame {

  width: 170px;

  height: 170px;

  margin: auto;

  border: 3px solid #d4af37;

  border-radius: 12px;

  padding: 8px;

  background: linear-gradient(145deg, #3a1f14, #140806);

}



.staff-frame img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 8px;

}



.staff-card h2 {

  margin-top: 25px;

  color: #f0d58c;

  font-size: 22px;

}



.staff-contact {

  margin-top: 20px;

  font-size: 15px;

  color: #cbbfa8;

}



.staff-contact span {

  color: #9fd3ff;

}



.staff-role {

  margin-top: 18px;

  font-size: 15px;

}



.staff-role strong {

  color: #d4af37;

  font-size: 16px;

}