@font-face {
  font-family: 'Xiaowu WenKai Slogan';
  src: url('../../../assets/fonts/xiaowu-wenkai-slogan.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.about {
  display: grid;
  grid-template-columns: minmax(155px, .9fr) minmax(0, 1.75fr) minmax(135px, .8fr) minmax(160px, 1fr);
  align-items: end;
  gap: var(--bp-space-5);
  color: var(--bp-content-primary);
}

.about__photo {
  /* 高度跟随整行（与中栏文字块等高），不单独定尺寸 */
  align-self: stretch;
  min-height: 240px;
  overflow: hidden;
  border-radius: var(--bp-radius-md);
  background: var(--bp-content-primary);
}

.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 人像构图偏上，裁切时往上取景才不至于切到脸 */
  object-position: center 30%;
}

.about__media {
  /* 三块“中文标语 / 橙线 / 英文”在此栏内的排布：整组水平居中、贴栏底。
     用 Grid 单列实现。“列宽 = 最宽那块（中文标语）”，故这一列的中心即整组的中心轴；
     橙线与英文靠 justify-self: center 落在这条轴上，中文用默认的 justify-items: start 贴列左缘。 */
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  justify-items: start;
  /* 贴栏底：末行“SOLUTION”与左侧“扫码加微信”齐平。⚠ 勿把三块拆到栏顶与栏底两端——“标语 + 落款”
     是一整组，拆开后中间会空出一大截。 */
  align-content: end;
  align-self: stretch;
  min-height: 240px;
  min-width: 0;
  /* 左右对称：左侧 24px 给竖线让位，右侧同样留一份，否则居中会整体偏右 12px。
     上下不留 —— 底部不留才能让“SOLUTION”贴到栏底。 */
  padding: 0 var(--bp-space-5);
  border-left: var(--bp-stroke-hairline) solid var(--bp-border-default);
}

.about__media-script {
  display: grid;
  gap: var(--bp-space-2);
  /* 竖向位置由容器决定（整组贴栏底），故不自加边距 */
  margin: 0;
  /* 左对齐：第一行起笔点即本块左缘。橙线与英文在组内居中，不与它共线。 */
  text-align: left;
  color: var(--bp-content-primary);
  font-family: 'Xiaowu WenKai Slogan', var(--bp-font-family-sans);
  font-size: clamp(19px, 1.65vw, 26px);
  /* 手写体子集只有 Regular 一档，此处粗体由浏览器描边模拟（比真粗体略糊，观感不够可换写法） */
  font-weight: var(--bp-font-weight-bold);
  line-height: 1.35;
  letter-spacing: .08em;
  /* 倾斜 14°；想更斜或更平就改这个角度 */
  transform: rotate(-14deg);
  /* 绕「左边中点」转：起笔点钉在列左缘不动，字只往右上翘。
     ⚠ 勿改回 center —— 绕中心转会让左缘探出列外，左对齐就不成立了。 */
  transform-origin: left center;
}

.about__media-rule {
  /* 与英文一起居中：它在英文正上方，单独留在左边会与英文脱节。
     只想让英文居中、橙线留左时，删掉下面这行即可。 */
  justify-self: center;
  /* 与中文标语拉开 48px。
     ⚠ 勿用 auto —— 那会把“橙线 + 英文”推离标语、把这一组拆散。 */
  margin-top: var(--bp-space-7);
  width: var(--bp-space-5);
  height: 2px;
  margin-bottom: var(--bp-space-3);
  border-radius: var(--bp-radius-round);
  background: var(--bp-accent);
}

.about__media-english {
  display: grid;
  /* 在组内居中。列宽 = 中文那块的宽度，而这一列本身已在栏内居中，
     故它也随之落在栏的中轴上。 */
  justify-self: center;
  gap: 2px;
  margin: 0;
  /* 三行各自居中 → 成塔形 */
  text-align: center;
  color: var(--bp-content-subtle);
  font-family: var(--bp-font-family-sans);
  font-size: var(--bp-font-size-xs);
  font-weight: var(--bp-font-weight-medium);
  line-height: 1.2;
  letter-spacing: .1em;
  /* 无自加位移：位置由上方橙线的固定间距决定 */
}

.about__content {
  min-width: 0;
}

.about__title {
  margin: 0;
  color: var(--bp-content-primary);
  font-size: var(--bp-font-size-xl);
  font-weight: var(--bp-font-weight-bold);
  line-height: var(--bp-leading-tight);
}

/* 身份（姓名下方一行）：比姓名淡一档，不当第二标题抢戏 */
.about__role {
  margin: var(--bp-space-1) 0 0;
  color: var(--bp-content-action);
  font-size: var(--bp-font-size-sm);
  letter-spacing: .06em;
}

.about__intro {
  /* 行宽上限 48ch：中栏虽宽，文字铺满一整行反而难读 */
  max-width: 48ch;
  margin: var(--bp-space-4) 0 0;
  color: var(--bp-content-secondary);
  font-size: var(--bp-font-size-sm);
  line-height: 1.9;
}

.about__contacts {
  display: grid;
  gap: var(--bp-space-2);
  margin-top: var(--bp-space-5);
}

.about__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-2);
  min-width: 0;
  color: var(--bp-content-primary);
  font-size: var(--bp-font-size-xs);
  text-decoration: none;
}

.about__contact:hover .about__contact-value {
  color: var(--bp-content-action);
  text-decoration: underline;
}

.about__contact-label {
  flex: 0 0 3em;
  color: var(--bp-content-subtle);
}

.about__contact-value {
  font-weight: var(--bp-font-weight-semibold);
  overflow-wrap: anywhere;
}

.about__qr {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.about__qr img {
  display: block;
  width: min(100%, 150px);
  margin: 0 auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.about__qr figcaption {
  margin-top: var(--bp-space-2);
  color: var(--bp-content-subtle);
  font-size: var(--bp-font-size-xs);
}

.about__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bp-space-2);
  margin: var(--bp-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.about__highlights li {
  padding: var(--bp-space-1) var(--bp-space-3);
  border: var(--bp-stroke-hairline) solid var(--bp-border-default);
  border-radius: var(--bp-radius-round);
  background: var(--bp-surface-selected);
  color: var(--bp-content-secondary);
  font-size: var(--bp-font-size-xs);
  letter-spacing: .04em;
}

/* 平板：与电脑同为一行（肖像 + 身份信息 + 二维码），隐藏设计主张。
   一行放不下四栏，故只留三栏并收窄两侧；肖像仍靠 stretch 与文字栏等高。 */
#stage[data-breakpoint="tablet"] .about {
  grid-template-columns: minmax(105px, .65fr) minmax(0, 1.9fr) minmax(95px, .6fr);
  gap: var(--bp-space-5);
}

#stage[data-breakpoint="tablet"] .about__media {
  display: none;
}

/* 二维码在平板收窄一档，避免占宽，也给中栏文字留住行宽 */
#stage[data-breakpoint="tablet"] .about__qr img {
  width: min(100%, 110px);
}

/* 手机：恢复肖像 / 身份信息 / 二维码的单列顺序，隐藏设计主张。 */
#stage[data-breakpoint="mobile"] .about {
  grid-template-columns: 1fr;
  gap: var(--bp-space-5);
}

#stage[data-breakpoint="mobile"] .about__photo {
  min-height: 0;
  aspect-ratio: 6 / 5;
}

#stage[data-breakpoint="mobile"] .about__media {
  display: none;
}

#stage[data-breakpoint="mobile"] .about__highlights {
  gap: var(--bp-space-3);
  margin-top: var(--bp-space-6);
}

#stage[data-breakpoint="mobile"] .about__qr img {
  width: min(100%, 136px);
}