/* =======================================================
   关于我（第二屏）—— 参考排版
   结构：section-label + 两栏网格（左：标题/lead/正文/技能卡  右：资料卡）
   ======================================================= */

.about-yk {
  padding: 72px 24px 40px;   /* 压缩上下留白 */
  background: #fff;
  scroll-margin-top: 72px;
}

.about-yk .section-label {
  margin: 0 0 18px;
  color: rgba(0, 0, 0, .52);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  max-width: 1180px;
  margin-inline: auto;
}

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
  align-items: start;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
}

.about-yk-title {
  margin: 0 0 22px;
  font-size: clamp(24px, 3vw, 40px);        /* 需求：标题字号调小 */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #000;
}

.about-yk .lead {
  max-width: 100%;          /* 铺满左栏，避免「者。」被挤到单独一行 */
  margin: 0 0 18px;
  color: rgba(0, 0, 0, .68);
  font-size: 19px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;        /* 支持时自动避免尾行孤字 */
}

.about-yk p {
  color: rgba(0, 0, 0, .68);
  font-size: 16px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ---------- 技能卡（2 列） ---------- */
.about-skills { margin-top: 72px; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.skills-grid--about { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.skill-card {
  padding: 22px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  background: #fff;
}
.skill-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.skill-card strong { font-size: 14px; font-weight: 600; }
.skill-card span {
  padding: 4px 9px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 999px;
  color: rgba(0, 0, 0, .58);
  font-size: 11px;
  white-space: nowrap;
}
.skill-card p {
  margin: 0;
  color: rgba(0, 0, 0, .62);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- 右侧资料卡 ---------- */
.profile-card {
  width: 100%;
  max-width: 400px;
  justify-self: end;
  padding: 14px 18px 16px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  background: #fafafa;
}
.profile-placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  margin-bottom: 14px;
  border: 1px dashed rgba(0, 0, 0, .2);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.profile-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 头像铺满卡片并居中裁切 */
  object-position: center 22%; /* 略微上移，人物面部更居中 */
  background: #f4f4f4;
  display: block;
}
.profile-placeholder.is-filled {
  border: 1px solid rgba(0, 0, 0, .08);
  border-style: solid;
  background: #f4f4f4;
}

.profile-card dl { display: grid; gap: 8px; margin: 0; }
.profile-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.profile-card dl div:last-child { border-bottom: none; }
.profile-card dt,
.profile-card dd { margin: 0; font-size: 13px; }
.profile-card dt { color: rgba(0, 0, 0, .5); }
.profile-card dd { color: rgba(0, 0, 0, .82); text-align: right; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .profile-card { justify-self: center; }
  .about-yk { padding: 72px 20px; }
  .about-yk .lead { font-size: 17px; }
  .about-skills { margin-top: 48px; }
}
@media (max-width: 560px) {
  .skills-grid--about { grid-template-columns: 1fr; }
}