/* ============================================================
   05 创始人介绍 · ABOUT
   选择器全部以 #founder 开头 · 仅使用 tokens.css 变量
   本区为全站收尾区，背景用 --void 做视觉分隔
   ============================================================ */

#founder {
  background: var(--void);
  /* 顶部细分隔线，强化"收尾区"的段落起点 */
  border-top: 1px solid var(--line);
}

/* ============================================================
   人物名片：宽屏左头像 + 右文
   ============================================================ */
#founder .founder-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* ============================================================
   头像占位（圆形 · 电光青描边 · 辉光）
   .founder-avatar-media 内 svg 可整体替换为 <img>
   ============================================================ */
#founder .founder-avatar {
  position: relative;
  width: clamp(150px, 20vw, 210px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  justify-self: center;
}

/* 圆形裁剪容器 —— 电光青描边 + 辉光 */
#founder .founder-avatar-media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, var(--ink-3), var(--ink));
  border: 2px solid var(--cyan);
  box-shadow:
    0 0 0 6px var(--void),          /* 与背景断开的呼吸留白 */
    0 0 0 7px var(--line),          /* 外圈细描边 */
    0 0 48px -8px var(--cyan-glow); /* 电光青辉光 */
}

/* 占位 SVG / 替换后的 <img> 均铺满圆形容器 */
#founder .founder-avatar-media svg,
#founder .founder-avatar-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 占位首字母 */
#founder .founder-avatar-glyph {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 84px;
  fill: var(--cyan);
  opacity: 0.9;
}

/* 四角对齐刻度（装饰，超出头像一圈） */
#founder .founder-avatar-ticks {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  pointer-events: none;
  opacity: 0.65;
}

/* ============================================================
   右侧文字区
   ============================================================ */
#founder .founder-body {
  min-width: 0; /* 防止 grid 子项在窄屏溢出 */
}

/* —— 身份标签（Tag 形式） —— */
#founder .founder-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
#founder .founder-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 0.5em 0.95em;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease),
              background 0.4s var(--ease);
}
#founder .founder-tag:hover {
  border-color: var(--cyan);
  color: var(--text);
  background: var(--ink-3);
}

/* —— 履历正文（限宽保证可读性） —— */
#founder .founder-bio {
  max-width: 60ch;
  font-size: var(--fs-lead);
  line-height: 1.85;
  color: var(--text-dim);
}

/* ============================================================
   联系我们（仪表读数式排版）
   ============================================================ */
#founder .founder-contact {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  margin-bottom: clamp(4rem, 9vw, 7rem);
}
#founder .founder-contact-tick {
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* 读数列表 */
#founder .founder-contact-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
#founder .founder-contact-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

/* 标签行（图标 + 等宽小标，--text-mute） */
#founder .founder-contact-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
#founder .founder-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* 读数值（等宽 · --text） */
#founder .founder-contact-value {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  letter-spacing: 0.02em;
  color: var(--text);
  word-break: break-word;
}
#founder .founder-contact-value a {
  transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease);
}
#founder .founder-contact-value a:hover {
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan-glow);
}

/* ============================================================
   金句收尾（居中大字 · 全站情感收尾）
   ============================================================ */
#founder .founder-quote {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--cyan);
  text-shadow: 0 0 40px var(--cyan-glow);
  padding-block: clamp(1rem, 4vw, 3rem);
}

/* ============================================================
   响应式 —— 手机头像居中、内容单列堆叠
   ============================================================ */
@media (max-width: 768px) {
  /* 名片转竖向：头像居中在上，文字在下 */
  #founder .founder-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(1.8rem, 6vw, 2.4rem);
  }
  #founder .founder-tags { justify-content: center; }
  #founder .founder-bio { margin-inline: auto; }

  /* 联系方式转单列堆叠 */
  #founder .founder-contact-list { grid-template-columns: 1fr; }
  #founder .founder-contact-row { gap: 0.4rem; }
}