/* =========================================================
   About 段背景：宇航员（Metallic / NASA 素材）
   ------------------------------------------------------------
   位置与比例参照设计参考图：
   - 位于 About 段右半区，压在右侧介绍文字之下
   - 头顶约在段落高度 30% 处，向下延伸超出段落底部（被裁切）
   - 整体不透明度 20%（与参考图一致：白底处压暗后 ≈ 亮度 50/255）

   素材 site/images/astronaut-bg.webp 由 tools/make_astronaut_bg.py 生成：
   只抠掉与画布边缘连通的纯白底，宇航服上的白色高光保留。

   实现方式：用 .about 的 ::before 伪元素做背景层（不改动 React 结构），
   内容层 .container 抬到 z-index:1，保证文字始终压在背景之上。
   ========================================================= */
.about {
  position: relative;
}

.about::before {
  content: "";
  position: absolute;
  /* 位置按参考图换算（以段落文字行高为标尺）：
     参考图段落行距 ≈31px，本站 ≈23px → 缩放比 0.75
     宇航员头顶在段落首行上方 ≈107px → ×0.73 ≈ 78px
     本站段落首行在段顶下方 ≈77px → 宇航员顶 ≈ 段顶 -1px → 取 top:0
     宇航员左边缘在段落左边缘右侧 ≈63px → ×0.75 ≈ 47px
     宇航员宽 ≈390px → ×0.75 ≈ 293px  → 约 17% 版心宽 */
  left: 78.6%;
  top: 0px;
  width: 17%;
  aspect-ratio: 931 / 1349;
  z-index: 0;
  pointer-events: none;
  background: url("../images/astronaut-bg.webp") no-repeat top left / contain;
  opacity: 0.2;
}

.about > .container {
  position: relative;
  z-index: 1;
}

/* 窄屏：右栏变成单列，宇航员会压到正文，直接隐藏 */
@media (max-width: 1199px) {
  .about::before {
    display: none;
  }
}