.section-profile {
  padding-block: clamp(40px, 6vw, 96px);    /* 由版块自己提供上下留白 */
  display: flow-root;                       /* 建立 BFC，彻底避免 margin 折叠 */
}
#profile { scroll-margin-top: 80px; }       
/* 布局：移动端单列，桌面端左右两列 */
.profile-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  /* 防止祖先 overflow 破坏粘滞 */
  overflow: visible;
}

@media (min-width: 860px) {
  .profile-split {
    grid-template-columns: minmax(280px, 420px) 1fr; /* 左列宽度区间 */
    column-gap: clamp(24px, 4vw, 48px);
  }
}

/* 左列作为“粘滞元素” */
.profile-left {
  overflow: visible;           /* 显式允许可见溢出，避免粘滞失效 */
}

@media (min-width: 860px) {
  .profile-left {
    position: sticky;          /* 关键：让左列本身粘滞 */
    top: clamp(16px, 4vh, 80px); /* 到达这个距离后“钉住” */
    align-self: start;         /* Safari/Grid 兼容：禁止拉伸，按内容高度 */
    height: fit-content;       /* 防止被 Grid 拉伸导致粘滞计算异常 */
  }
}

/* 左侧：粘滞容器 */
.photo-wrap {
  position: relative;           /* 供内部视差 transform 使用 */
}


.profile-left img {
  width: 100%;
  max-width: 400px; /* 限制头像最大宽度 */
  object-fit: cover;
}

.photo {
  display: block;
  width: 100%;
  max-width: 400px;  
  height: auto;
  will-change: transform;
  transform: translateY(0);     /* 初始位移（JS 会轻微修改） */
  transition: transform 200ms ease-out; /* 轻微缓动，避免生硬抖动 */
}

/* 右侧文本排版上限，避免行宽过长 */
.profile-right {
  line-height: 1.65;
  max-width: 68ch;              /* 典型舒适行宽 */
}

/* 名字与副标题 */
.profile-right h2 {
  margin: 0 0 var(--space-2);
  line-height: 1.15;
}

.profile-right .tagline {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: rgba(var(--accentrgb), 0.88);
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-4);
}

/* 兼容 prefers-reduced-motion：禁用视差动画 */
@media (prefers-reduced-motion: reduce) {
  .photo { transition: none !important; transform: none !important; }
}