/* Official profile supplied by the character creator. */
.official-profile {
  margin-top: 30px;
  padding: 28px 32px 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(120deg, #fffefd, #fff5ef);
}
.profile-heading h3 {
  font: 500 clamp(18px, 2vw, 25px)/1.7 var(--serif);
  letter-spacing: .025em;
}
.profile-facts {
  display: grid;
  grid-template-columns: 1.25fr .75fr .8fr 1.2fr;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.profile-facts > div { min-width: 0; padding: 0 24px; }
.profile-facts > div:first-child { padding-left: 0; }
.profile-facts > div:last-child { padding-right: 0; }
.profile-facts > div + div { border-left: 1px solid var(--line); }
.profile-facts dt { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.profile-facts dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--brown); }
.maruno-detail { background: #fffaf5; }
.maruno-detail > .maruno-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 760px) {
  .official-profile { padding: 24px 22px; margin-top: 24px; }
  .profile-facts { grid-template-columns: 1fr 1fr; margin-top: 18px; padding-top: 0; }
  .profile-facts > div { padding: 18px 0; }
  .profile-facts > div + div { border-left: 0; }
  .profile-facts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .profile-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); padding-bottom: 0; }
  .profile-facts dt { font-size: 10px; }
  .profile-facts dd { font-size: 14px; }
}
@media (max-width: 359px) {
  .official-profile { padding-inline: 18px; }
  .profile-facts > div:nth-child(even) { padding-left: 12px; }
  .profile-facts dd { font-size: 13px; }
}