/* =========================================================
   Personal profile section — hand-drawn paper card
   ========================================================= */
.profile {
  background-color: #fdf8ed;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(169, 216, 232, .18), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(242, 184, 198, .16), transparent 28%);
}
.profile-grid {
  display: grid;
  grid-template-columns: minmax(230px, .36fr) minmax(0, .64fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  margin-top: clamp(30px, 5vh, 58px);
}
.profile-card {
  position: relative;
  width: min(310px, 100%);
  margin: 0;
  padding: 9px 9px 0;
  border: 2.5px solid var(--pencil);
  border-radius: 16px 22px 13px 19px / 21px 14px 22px 16px;
  background: var(--paper-2);
  box-shadow: 7px 7px 0 rgba(242, 184, 198, .46);
  transform: rotate(-1.6deg);
}
.profile-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 34%;
  width: 78px;
  height: 22px;
  background: rgba(244, 217, 141, .78);
  border-left: 1px dashed rgba(91, 64, 56, .24);
  border-right: 1px dashed rgba(91, 64, 56, .24);
  transform: rotate(-3deg);
}
.profile-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--pencil);
  border-radius: 10px 15px 9px 13px;
  filter: saturate(.84) sepia(.06) contrast(1.02);
}
.profile-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 4px 10px;
  color: #8d7164;
  font-family: var(--hand);
  font-size: 10px;
  letter-spacing: .04em;
}
.profile-card figcaption span:first-child {
  color: var(--orange);
  font-size: 13px;
}
.profile-copy { min-width: 0; }
.profile-intro {
  max-width: 610px;
  margin: 0;
  color: var(--ink);
  font-family: var(--hand);
  font-size: calc(clamp(20px, 2vw, 27px) + 2px);
  line-height: 1.65;
  letter-spacing: .01em;
}
.profile-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 2px dashed var(--pencil);
}
.profile-facts div { padding: 10px 0 11px; border-bottom: 1px dashed rgba(91, 64, 56, .28); }
.profile-facts dt { color: #8d7164; font-family: var(--hand); font-size: 10px; letter-spacing: .06em; }
.profile-facts dd { margin: 5px 0 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.profile-chips span {
  padding: 5px 9px;
  border: 2px solid var(--pencil);
  border-radius: 8px 12px 7px 11px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 11px;
  box-shadow: 2px 2px 0 rgba(91, 64, 56, .1);
}
.profile-chips span:nth-child(2n) { background: var(--pink); }
.profile-chips span:nth-child(3n) { background: var(--blue); }

@media (max-width: 820px) {
  .profile-grid { grid-template-columns: 1fr; gap: 28px; }
  .profile-card { width: min(230px, 72vw); margin-inline: auto; }
  .profile-intro { font-size: 21px; }
  .profile-facts { gap: 0 20px; margin-top: 20px; }
  .profile-facts dd { font-size: 13px; }
  .profile-chips { margin-top: 17px; }
}

.profile-card figcaption { font-size: 12px; }
.profile-card figcaption span:first-child { font-size: 14px; }
.profile-intro { font-size: calc(clamp(22px, 2.1vw, 29px) + 2px); }
.profile-facts dt { font-size: 12px; }
.profile-facts dd { font-size: 15px; }
.profile-chips span { font-size: 12px; }


/* +2px for span / dt / dd */
.profile-card figcaption { font-size: 14px; }
.profile-card figcaption span:first-child { font-size: 16px; }
.profile-facts dt { font-size: 14px; }
.profile-facts dd { font-size: 17px; }
.profile-chips span { font-size: 14px; }