/* ==========================================================================
   首页第4P「品牌介绍」— 按参考站 UEMO「详情页002-深色」id/179 一比一还原
   （2026-09-11 用户给链接 + 「一比一还原」，落点 = 首页品牌屏 #brand）

   规格来源（不是看截图猜的）：curl 拿模板真实 HTML（builder 结构）+ 浏览器读计算样式，
   1440×900 与 390×844 两档实测。图被防盗链 403，尺寸按 HTML 里的 --img-w/--img-h/--ratio 反推。

   实测基准（1440）：容器 min(1200px, 100% - 12vw) 居中；画布 #1a1a1c；正文 Plus Jakarta Sans
   ① 宣言列   容器右半 600px ｜ 英 20px/32 #fff 800 ｜ 中 16px/28 #999 lh1.75 ｜ 段间 50px + 一处空行 22px ｜ 视差 speed -30
   ② 巨型字标 通栏左对齐 x=0 ｜ 14.1vw ｜ line-height 1.6 ｜ #fff（移动端 21vw）
   ③ 引文+图  两栏各 575px、column-gap 50px ｜ 引文 60px/72 800 #fff ｜ 署名 14px/22.4 #999
              右图 960×922（比例 96.04% → 575×552）｜ 视差 speed -20
   ④ 理念带   居中 640px ｜ 标题 34px/47.6 700 #fff 居中 ｜ 正文两行 16px/28 #999 居中 ｜ 前置空行 22px
   ⑤ 数据四栏 4×300px 无 gap ｜ 数字 72px/86.4 800 #fff（单位 14px 贴底）｜ 中文标签 14px/22.4 ｜ 英文 14px #999
   ⑥ Awarded  左栏 351px（Awarded 72px/86.4 #fff + 我们的奖项 22px/35.2 #4d4d4d）
              右栏 819px = 3×266.3px、column-gap 10px、卡 240×154（比例 64.17% → 266×171）
   行盒之间距：80 / 0 / 50 / 129 / 176 px

   与参考站的差异（交付说明里也写了）：
   - 大标题字体：参考站用 MontDemo-Heavy（商用，取不到）→ 全站 Plus Jakarta Sans 800
   - ③ 右图：参考站是 CDN 艺术图（403 取不到）→ 先用站内 tpl3 浮空图占位，拿到照片直接换 src
   - ⑥ 9 个奖项格：站内没有奖项图（不编内容）→ 留虚线占位，等证书照片
   ========================================================================== */

.scene-ab179 {
  font-family: 'Plus Jakarta Sans', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  color: #fff;
}
/* 背景：用户 2026-09-11「改成和 banner 一样的背景和鼠标效果」→ 不再用参考站的实色 #1a1a1c，
   改成透底（prototype.css 的 .scene-brand 本来就是 transparent!important，这里显式写一遍防被覆盖）：
   这样 body 级固定星空 #bgStars、整页鼠标流体 #splashCanvas 能像 banner 一样透出来 */
main > .proto-scene.scene-brand.scene-ab179 {
  background: transparent !important;
  color: #fff !important;
  min-height: 100svh;
}
.ab179 {
  width: 100%;
  padding: 48px 0 120px;      /* 参考站首块距页顶 80px；2026-09-11 用户「间距太大」→ 收到 48px */
}
.ab179-wrap {
  width: min(1200px, calc(100% - 12vw));
  margin: 0 auto;
}

/* ---------- ① 宣言列（2026-09-11 用户令：整块从顶部挪到 ③ 引文下面；署名行删除） ---------- */
/* 用户 2026-09-11：「英文只要一行」+ 每句中文各占一行 → 栏宽按实测单行宽定：
   英文句 711.8px（20px PJS 800 实测）、中文最长句「从样板浏览…说清楚。」688px → 取 740px。
   现在它在 ③ 引文列内（列宽 = 引文 max-content 870px），左对齐于引文左边缘。 */
.ab179-intro { width: min(740px, 100%); }
/* 引文 → 宣言列 的间距：2026-09-11 用户「图一文字之间的间距太大」→ 100 收到 56px
   （实测图上这一处空白 109px = 4 倍行距，明显跳跃；56 后约为 2 倍行距，与英文→中文一个量级） */
.ab179-quote .ab179-intro { margin-top: 56px; }
.ab179-lead {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 800;
}
.ab179-copy { margin-top: 32px; }   /* 2026-09-11 用户「图一文字之间的间距太大」：50 → 32（英文句→中文段） */
.ab179-copy p {
  margin: 0;
  color: #999;
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}
/* 组间距：段内行距 28px，组间必须大于它（参考站空行 22px 比行距还小，所以不照抄）；
   2026-09-11 用户「图一文字之间的间距太大」→ 40 收到 32px（略大于行距 28，段落层次还在） */
.ab179-copy p.ab179-copy-gap { margin-top: 32px; }
/* 2026-09-11 用户「图六红色框的地方增加个按钮跳转到品牌介绍」→ 宣言列下方主按钮的间距 */
.ab179-actions { margin-top: 40px; }

/* ---------- ② 巨型字标 ---------- */
/* 巨字选择器用两个类（(0,2,0)）压过 prototype.css 的 `.scene-brand h2`（(0,1,1)，
   它会写死 font-size:clamp(48px,4.4vw,64px)、weight 600、line-height 1.12 —— 实测不压就渲成 63px） */
.scene-ab179 .ab179-giant {
  /* 2026-09-11 用户：「NTKRIB 改成 Ntkrib（DOM 已改）」「要和『设计师画得出的，我们织得出来』左对齐」
     → 原来通栏 x=0，现在左边缘 = ③ 引文左边缘 9.2vw。再减 0.28vw：拉丁字母 "N" 自带约 2% 字号的左侧边距
     （实测 2503 下巨字墨迹左 230 vs 引文墨迹左 223，差 7px），减掉后两处墨迹都落在 223。
     只挪字（margin-left），底图 .ab179-art 保持 left:0 不动，淡字位置不受影响。 */
  margin: 0 0 0 calc(9.2vw - 0.28vw);
  padding: 0;
  color: #fff;
  font-size: 14.1vw;
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: nowrap;
  white-space: nowrap;
  position: relative;
  z-index: 1;             /* 压在淡字底图之上 */
}

/* ---------- ② 行的底图效果层（参考站的 image-bg + data-effect="parallax"） ----------
   实测（1440/1249 两档 + 逐档 transform 采样）：底图元素高 = 0.756W，随滚动下移
   0.326px/滚动px，从 -0.2506W 滑到 +0.0374W（行程 0.2884W）→ 淡字"About us"从大字行里慢慢穿过。
   裁剪盒 = 0.503W（比大字行高 1.73 倍，向下压过第③行上半）——③ 行 z-index 更高，所以淡字从领子图后面过。
   底图用模板自带素材 images/ref179/about-art.png（白描边 alpha 仅 2~9%，所以极淡）。 */
.ab179-giant-row {
  position: relative;
  margin: 64px 0 0;       /* 不再 overflow:hidden —— 裁剪交给下面的 .ab179-art（要把淡字放到第③行后面去）
                            2026-09-11 用户「间距太大」→ 行距 100 → 64px */
}
/* 巨字退场动画层（2026-09-11 用户：「巨字/淡字加更强的视差与擦除（滚动时被下一屏顶走）」）
   transform 由 js/about179.js 的 giantFrame() 写：上移 + 轻微缩小 + clip-path 从底边擦除。
   will-change 只提示这一层，避免整页提升图层。 */
.ab179-giant-lift { will-change: transform, clip-path; }
.ab179-art {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 50.3vw;             /* 参考站裁剪盒 = 0.503W */
  overflow: hidden;
  pointer-events: none;
}
.ab179-art-img {
  position: absolute;
  left: 0;
  top: -3.4vw;                /* 对齐关系：NTKRIB 的墨迹顶比淡字高 = 字号(14.1vw)的 20%（实测 -3.4vw 正好落到 20%；
                                 参考站同口径实测差值 = 字号的 22.4%）——只调这个数就能上下挪淡字，滚动中差距仍按视差拉大 */
  width: 100%;
  height: 75.6vw;             /* 参考站底图元素 = 0.756W（比裁剪盒高，供滑动） */
  background-image: url("../images/ref179/about-art.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  will-change: transform;
}

/* ③ 引文 + 右视频：用户 2026-09-11「文案在红色框的位置，视频在蓝色框」——红/蓝框给的是**页面坐标**
   （截图 2560px、页面可视宽 2503 CSS px 实测：红框 x216-1136 y415-685 = 8.6%~45.4% 宽；蓝框 x1435-2096 = 57.3%~83.7%）。
   实测当时：文案行左 25.6%（641px）、视频框左 64.8%（1621px）。
   → 这一行**脱离 1200 容器、改以整页为基准**：文案左 9.2vw（红框左+0.6% 内缩）、视频左 57.4vw（蓝框左），
     两列间距 14.1vw（原来 110px＝4.4vw）。列仍用 max-content 保证文案永远一行。 */
.ab179-quote-row {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 14.1vw;
  /* 2026-09-12 用户「左边文字+按钮往上移动一段距离，整体在右边视频的中间」→ 由顶对齐改成垂直居中
     （右视频比左栏高，居中后左栏中心与视频中心对齐；同时把引文的视差速率调成和视频一致，见 index.html
     的 data-ab179-rate，否则滚动时两者会被视差拉开、又偏离中心） */
  align-items: center;
  width: 100vw;                               /* 铺满整页宽；配合下面负 margin 让左边缘 = 页面 0 */
  margin-left: calc(50% - 50vw);
  padding-left: 9.2vw;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
/* 2026-09-12：改为相对右视频垂直居中（用户「整体是在右边视频的中间」）→ 去掉下移的 padding-top。
   ⚠️ 右视频带负 margin-top 上移（30% 视频框高），所以它比网格行高出 lift —— 行内居中只到「行」的中心，
   还要再上移 lift/2 才对准视频中心：居中项加 margin-top:-m 会向上偏 m/2 ⇒ 这里取 m = lift。 */
.ab179-quote { align-self: center; padding-top: 0; margin-top: calc(-1 * min(254px, 12.48vw)); }   /* = 视频框 30% 高的上移量，随框高 848 同步（2026-09-12 视频上下裁 20% 后） */
.ab179-quote-text {
  margin: 0;
  color: #fff;
  /* 60px 时这 16 个字实测算 900px 一整行；参考站字号 60 在 2048 下保留，窄屏按 vw 缩以防折行 */
  font-size: clamp(22px, 2.85vw, 58px);
  line-height: 1.2;
  font-weight: 800;
}
.ab179-sign {
  margin: 22px 0 0;
  color: #999;
  font-size: 14px;
  line-height: 1.6;
}
.ab179-photo {
  margin: 0;
  /* ③ 位：2026-09-12 用户「视频上下裁剪20%，然后四个角做出有弧度」——
     ① 上下裁剪：框高收到原来的 80%（min(1060px,52vw) → min(848px,41.6vw)），框比例 720/1280 → 720/1024；
        视频仍 object-fit:cover，于是自动把画面上下各切掉 10%（合计 20%），可见区 = 视频 y10%~90%
        （这条素材的衣领集中在 y30%~70%，不会切到本体）；框宽不变（596px @2503）。
        要「上下各裁 20%（合计 40%）」就把两个数改成 min(636px, 31.2vw)。
     ② 圆角：四角 border-radius 20px（与展厅卡片 .swd-card 同一档；框本来 overflow:hidden，视频跟着被切圆角）。
     旧值（2026-09-11）：margin-top min(318px,15.6vw) / height min(1060px,52vw) / aspect-ratio 720/1280。 */
  margin-top: calc(-1 * min(254px, 12.48vw));
  height: min(848px, 41.6vw);
  aspect-ratio: 720 / 1024;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;     /* 透明底：不要白底也不要浅灰底，直接透出页面 */
}
/* 视频：无声自动播放 + 无限循环（属性写在 index.html）。
   2026-09-11 用户「视频取消过渡蒙版」→ 去掉原来的四边黑→透明羽化蒙版，视频整框原样显示（四边为硬边）。
   旧蒙版值见 git 历史（commit 1a32a35 及之前的 about179.css）。 */
.ab179-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 框比例 = 视频比例，实际不裁 */
  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.ab179-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 抠图用 contain：整只领子完整可见，四周透明留白在深色底上看不出来 */
  object-position: center;
  /* 用户 2026-09-11 迭代：130%→80%→120% → "更强烈" 150%→60%→140% → 曾按"图片放大一倍"整体 ×2
     → 用户改口「图片框太小，图片都看不到」→ 放大落到图框上（图框 575×552 → 1200×1152），
     图片内容回到 150%→60%→140%（此时居中处只有 0.76，整张图完整可见） */
  transform: scale(1.5);
  transform-origin: center center;
  will-change: transform;
}

/* ---------- ④ 设计理念带（居中 640px） ---------- */
.ab179-band {
  width: 640px;
  margin: 50px auto 0;
  padding: 32px 0 22px;
  text-align: center;
}
.ab179-band-title {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.4;
  font-weight: 700;
}
.ab179-band-text {
  margin: 0;
  color: #999;
  font-size: 16px;
  line-height: 1.75;
}
.ab179-band-text:first-of-type { margin-top: 22px; }

/* ---------- ⑤ 数据四栏 ----------
   2026-09-11 用户「间距增加」（在图里给三个栏间空隙画了红框）：
   原来 = repeat(4, 1fr)（各 300px，数字居中）⇒ 栏间净空只有 ~100px（"100"那栏字窄，两侧空得多）。
   改 = 栏宽按内容（max-content）+ space-between 把 1200px 容器撑开 ⇒ 净空 ~170px，容器宽度/对齐不变。 */
.ab179-stats {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  margin-top: 129px;
  padding: 20px 0 22px;
}
.ab179-stat { min-width: 0; text-align: center; }
.ab179-num {
  margin: 0;
  color: #fff;
  font-size: 14px;       /* 参考站 <p> 自身 14px/22.4，数字是行内放大 → 单位/标签才落在基线位 */
  line-height: 1.6;
  text-align: center;
}
.ab179-num .v { font-size: 94px;   /* 2026-09-11 用户「图二放大一些」：72 → 94px */ line-height: 1.2; font-weight: 800; }
.ab179-num .u,
.ab179-num .l { font-size: 16px; line-height: 1.6; font-weight: 400; }
.ab179-en {
  margin: 0;
  color: #999;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* ---------- ⑥ 我们的设计（2026-09-11 晚：用户「修改我们的设计，九宫格改成参考图一的排版」） ----------
   参考图一 1200px 宽实测（比例全部折算成视口宽）：
     · 标题区全居中：小标 y114-140（≈1.8vw，彩色）→ 大标题两行 y155-300（≈6.3vw 超粗）→
       灰色说明行（≈1.3vw）→ 药丸按钮（高≈4.2vw，右端一个圆形箭头）
     · 卡片区：9 张一排，中间最小 9.3vw，向两侧 10 / 12.3 / 17.9 / ≈20vw 递增；间隙 0.83vw；圆角≈14px；
       最外两张被视口裁掉（只露 1.3–2% 宽）；卡片做透视倾斜（左右向中心收，像贴在一个圆柱面上）
   我们：9 张人台图（3:4，第 2P 同款编号）沿用；标题字体仍用站内 Plus Jakarta Sans 800（只改居中 + 缩到 6.3vw）。
   历史：九宫格 3×3 版 + 巨字叠在网格上的版本都已作废（用户 2026-09-11 晚给参考图一）。 */
.ab179-awards {
  position: relative;
  margin-top: 260px;                          /* 2026-09-12 用户「图三红色框柱的距离加大」：176 → 260px */
  /* ⚠️ 这里不能 overflow:hidden：容器只有 1200px 宽，会把 100vw 的扇形裁到 1200（实测只剩 5 张卡）。
     裁切交给下面的 .ab179-fan 自己（它 = 100vw + overflow:hidden，两端大卡正好被视口边裁掉）。 */
}
/* --- 标题区（全居中） --- */
.ab179-awards-head {
  position: relative;
  z-index: 3;
  padding: 0 6vw;
  text-align: center;
}
/* 大标题：参考图是「居中、6.3vw、超粗」→ 覆盖 .scene-ab179 .ab179-giant 的 14.1vw / 左对齐 / 不吃 margin */
.scene-ab179 .ab179-awards-title {
  margin: 14px auto 0;
  color: #fff;
  font-size: clamp(72px, 6.3vw, 190px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 800;
}
.ab179-awards-lead {
  margin: 18px 0 0;
  color: #999;
  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  font-size: clamp(15px, 1.1vw, 26px);
  line-height: 1.6;
}
/* 2026-09-11 用户「调整文案/按钮/卡片之间的间距」：实测说明底→按钮顶 = 0px（按钮直接挂在 header 下，
   没有 .ab179-actions 的 margin-top）→ 给 28px，和大标题→说明的 18px 形成 18/28 的递进。 */
.ab179-awards-head .action { margin-top: 34px; }
/* --- 9 张卡片：一排扇形（中间最小 → 两侧递增 → 最外两张被视口裁掉） ---
   宽度 = 参考图一实测值折 vw；倾斜用 rotateY（左半负、右半正 = 向中心收），透视 1400px */
.ab179-fan {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 卡片间距：2026-09-11 用户「卡片之间还是不流畅」→ 参考 motionsites「Custom Spaces」（卡片紧贴成一条连续带）：
     缝收到 0（相邻卡的渲染边正好相接），透视造成的楔形小缝由 js/awards-fan.js 里的 GAP 常量微调。
     注意：间距不能用 flex 的 gap —— 透视会把每张卡往它的外缘方向推（bbox 中心 ≠ 布局盒中心），
     正 gap 会让两端大卡被推出视口（实测第 1/9 张完全不露脸）。 */
  gap: 0;
  /* 两端渐变遮罩（2026-09-11 第 7 轮用户思路②）：最外约 14% 用 alpha 渐变淡出到透明，
     把最外侧那 1~2 张「还在被透视斜切放大」的卡片融进星空背景。
     ⚠️ 必须用 mask-image（淡出）而不是盖一块黑：背景是星空不是纯黑，盖黑会在两端留一条黑带。 */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 2.5%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 91%, rgba(0,0,0,.06) 97.5%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 2.5%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 91%, rgba(0,0,0,.06) 97.5%, rgba(0,0,0,0) 100%);
  /* 2026-09-11 用户「图四红色框的间距减少」：卡片是垂直居中的，屏里最高那张的顶边随轮播相位在 872~1195px 之间变，
     所以再上提一段（-4.5vw ≈ -115px）把这截空白吃掉；两端大卡升到按钮那一行是参考图要的效果（按钮 z-index 更高，文字不会被盖）。 */
  margin-top: 5.5vw;   /* 2026-09-12 用户「红色框的地方也要增加间距」（按钮 → 卡片带）：
                          1.0vw(=16px@1600) → 5.5vw(=88px@1600)，实测 按钮底→首卡顶 74px → ~146px。
                          历史：-4.5vw 会把带子提上去和按钮重叠 92px → 1.0vw 留 ~45px 净空 → 本轮到 ~146px。 */
  /* 参考图一是「全出血」的：两端大卡被视口边裁掉 → 这里破出 1200px 容器 = 100vw 并自己 overflow:hidden
     （放在 .ab179-awards 上会被容器宽裁掉，只剩 5 张卡）。 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* 全出血 + 自己裁切（详见下面 .ab179-fan-card 的透视说明：透视放在每张卡自己的 transform 里，
     不能用容器的 perspective——那样离中心远的大卡会被投到视口外，第 1/9 张完全不露脸）。 */
}
/* 逐张 = 参考图一的尺寸阶梯 + **真透视梯形**（2026-09-11 夜第二轮：用户「你注意看参考图，做出来不一样」）。
   参考图实测：9 张卡**共用同一条垂直中心线**（bbox 中心 y 全部 = 518/1200），但每张是**梯形**——
   靠中心的那条边短、靠视口边的那条边长，内/外缘高度比依次 = 1.00 / 0.905 / 0.80 / 0.685 / (0.62 推断)，
   渲染宽度阶梯 = 9.3 / 10 / 12.3 / 17.9 / 20vw。⇒ 卡片是绕 Y 轴转过去的 3D 卡片（不是压扁的平面矩形）。
   下面每张的 width 是**布局宽**（> 渲染宽），margin 把布局宽收回到渲染宽，transform 里的 perspective 决定梯形强度：
     渲染宽 = (W/2)·cosθ·[1/(1−u) + 1/(1+u)]，u = ((W/2)sinθ)/P，内/外缘比 = (1−u)/(1+u)
   θ 取 0/12/22/30/36°，解出的 P ≈ 21–29vw（≈540–750px@2560）——和真实一个相机距离一致。 */
.ab179-fan-card {
  flex: 0 0 auto;
  margin: 0;
  width: 9.3vw;              /* 默认 = 中心卡 */
  aspect-ratio: 3 / 4;
  border-radius: 0;          /* 2026-09-11 用户「取消圆角」（参考 motionsites「Custom Spaces」：卡片紧贴成连续带，直角） */
  overflow: hidden;
  background: #14151a;
  transition: opacity .5s ease;
}
.ab179-fan-card img {
  display: block;
  width: 100%;
  height: 100%;
  /* 2026-09-11 第 6 轮：这里必须 fill 不能 cover —— 卡片盒子是「3D 卡片在自身平面上的盒子」，
     它的宽高比会随倾角变化（0.75 → 1.2+），用 cover 会把照片裁掉 40%；盒子的四角被 transform
     投到目标梯形上，四角对应一致 ⇒ 内部映射与真 3D 卡片完全一致（局部不拉伸）。
     用户第 6 轮「两侧强行拉变形了」的另一个成因就是这个裁剪 + 透视放大叠加。 */
  object-fit: fill;
  object-position: center 22%;
  /* 卡内照片放大 1.4× 并对焦衣领（2026-09-11 第 7 轮用户思路①）：实测人台图里衣领（深色区）
     在 32%~82% 高度、中心 56%，水平居中。放大 1.4× 后可见窗口 = 图片高度的 14%~86%（衣领完整），
     衣领在卡内占比 45% → 约 70%（卡片变小但衣领反而更大）。
     translateY(-8.4%) = 把 1.4× 之后偏离中心的 6%×1.4 拉回来（变换是右到左：先 scale 后 translate）。 */
  /* 2026-09-11 第 8 轮：用户澄清「是卡片放大4倍」（不是照片）→ 卡内照片恢复自然取景（缩放交给卡片尺寸） */
}
/* 2026-09-11 第 5 轮：用户「取消鼠标放到图片会放大的功能」→ 删掉 .ab179-fan-card:hover img 的 scale(1.06) */
/* 尺寸阶梯（渲染宽 / 布局宽 / 负 margin 把布局宽收回渲染宽；间距靠 flex 的 gap=0 + 这些负 margin 一起定） */
.ab179-fan-card { margin: 0; }
.ab179-fan-card:nth-child(1), .ab179-fan-card:nth-child(9) { width: 23.36vw; margin: 0 -1.68vw; }   /* 渲染 20.0vw  内/外 .62 */
.ab179-fan-card:nth-child(2), .ab179-fan-card:nth-child(8) { width: 19.95vw; margin: 0 -1.02vw; }   /* 渲染 17.9vw  内/外 .685 */
.ab179-fan-card:nth-child(3), .ab179-fan-card:nth-child(7) { width: 13.10vw; margin: 0 -0.40vw; }   /* 渲染 12.3vw  内/外 .80 */
.ab179-fan-card:nth-child(4), .ab179-fan-card:nth-child(6) { width: 10.20vw; margin: 0 0.15vw; }    /* 渲染 10.0vw  内/外 .905 */
.ab179-fan-card:nth-child(5) { width: 9.30vw; margin: 0 0.20vw; }                                   /* 渲染  9.3vw  无变形 */
/* 倾斜：左半用正角、右半用负角 —— 让「靠中心的那条边」往后退（变小）＝ 参考图的梯形方向 */
.ab179-fan-card:nth-child(1) { transform: perspective(29.27vw) rotateY(36deg); }
.ab179-fan-card:nth-child(2) { transform: perspective(26.67vw) rotateY(30deg); }
.ab179-fan-card:nth-child(3) { transform: perspective(22.09vw) rotateY(22deg); }
.ab179-fan-card:nth-child(4) { transform: perspective(21.26vw) rotateY(12deg); }
.ab179-fan-card:nth-child(6) { transform: perspective(21.26vw) rotateY(-12deg); }
.ab179-fan-card:nth-child(7) { transform: perspective(22.09vw) rotateY(-22deg); }
.ab179-fan-card:nth-child(8) { transform: perspective(26.67vw) rotateY(-30deg); }
.ab179-fan-card:nth-child(9) { transform: perspective(29.27vw) rotateY(-36deg); }
/* 轮播模式（JS 给 .ab179-fan 加 .is-carousel 后）：卡片绝对定位，位置/大小/倾角由 js/awards-fan.js 每帧写 inline style。
   于是上面那组 nth-child 的 width/margin/transform 只在「无 JS 的静态兜底」时生效（inline 优先于样式表）。
   ⚠️ 这里**不能**给卡片加 transition：几何是每帧重算的，过渡会互相打架（拖拽时会有黏滞感）。 */
.ab179-fan.is-carousel { display: block; cursor: grab; touch-action: pan-y; }
.ab179-fan.is-carousel.is-dragging { cursor: grabbing; }
.ab179-fan.is-carousel .ab179-fan-card {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  cursor: inherit;
  user-select: none;
  -webkit-user-drag: none;
  /* 2026-09-12 滚动卡顿优化：去掉 will-change —— 41 张卡片各占一个合成层（约 10MB 显存 + 每帧层管理），
     而 JS 每帧写的是 translate3d/rotateY（本身就会提升为合成层），will-change 纯属多余。 */
  transition: none;
}
.ab179-fan.is-carousel .ab179-fan-card img { pointer-events: none; }
/* 这层线框字按参考图一没有对应元素（实测会在卡片缝隙里露出来，把版面弄花）→ 先关掉；
   DOM 与规格都留着，要恢复把下面这行删掉即可。 */
.ab179-awards-ghost {
  display: none;
  position: absolute;
  left: 50%;
  top: 64%;
  z-index: 0;
  margin: 0;
  transform: translateX(-50%);
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 20vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, .26);
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .ab179-fan-card img { transition: none; }
}

/* ---------- 入场动效（参考站每块外包 .enter-animate → fadeInUp，一次性） ---------- */
.ab179-row,
.ab179-giant {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.ab179-row.is-in,
.ab179-giant.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ab179-row,
  .ab179-giant { opacity: 1; transform: none; transition: none; }
}

/* ---------- 参考站移动端规格（390×844 实测） ---------- */
@media (max-width: 760px) {
  .ab179 { padding: 80px 0 80px; }
  .ab179-quote .ab179-intro { margin-top: 40px; }
  .ab179-intro { width: auto; }
  .ab179-lead { font-size: 14px; line-height: 1.6; }
  .ab179-copy { margin-top: 30px; }
  .ab179-copy p { font-size: 14px; line-height: 1.75; }

  .scene-ab179 .ab179-giant { font-size: 21vw; margin: 0 0 0 6vw; }   /* 窄屏与容器左边缘（6vw）对齐 */
  .ab179-giant-row { margin-top: 100px; }
  /* 移动端用参考站的竖版底图（750×1280，字在上部）→ 顶对齐，否则 cover 居中会把字裁掉 */
  .ab179-art-img {
    background-image: url("../images/ref179/about-art-md.png");
    background-position: center top;
  }

  .ab179-quote-row { display: block; width: auto; margin-left: 0; padding-left: 0; row-gap: 0; }
  .ab179-quote { padding-top: 14px; margin-top: 0; }
  .ab179-quote-text { font-size: 32px; line-height: 1.2; }
  .ab179-sign { margin-top: 14px; }
  .ab179-photo { margin-top: 30px; height: min(560px, 128vw); }   /* 竖版视频在窄屏给足高度 */

  .ab179-band { width: auto; margin-top: 40px; padding: 22px 0 16px; }
  .ab179-band-title { font-size: 24px; line-height: 1.4; }
  .ab179-band-text { font-size: 14px; line-height: 1.75; }

  .ab179-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: normal;   /* 窄屏回到普通两栏，不要 space-between 把两栏顶到边 */
    column-gap: 10px;
    row-gap: 40px;
    margin-top: 60px;
  }
  .ab179-num .v { font-size: 46px; line-height: 1.2; }

  .ab179-awards { margin-top: 80px; }
  /* 2026-09-11 晚改参考图一排版后：窄屏把扇形改成可横向滑动（尺寸放大到看得清），不再靠视口裁切 */
  .ab179-awards-head { padding: 0 8vw; }
  .scene-ab179 .ab179-awards-title { font-size: 13vw; }
  /* 2026-09-15 用户「大标题没有居中、按钮过长」：
     标题被上面 .scene-ab179 .ab179-giant 的 `margin: 0 0 0 6vw` 推偏（盒子中点 206.7 → 应为 195 → 偏右 11.7px），
     这里把左右边距收回 auto 让 margin:14px auto 0 生效；
     按钮在 ≤640 吃了 prototype.css 的 `.action{width:100%}` 撑满整行（390 下宽 280.8px）→ 改回内容宽度。 */
  .ab179-awards-head .action { width: auto; padding: 0 34px; }
  .ab179-awards-lead { font-size: 14px; }
    .ab179-fan { padding: 0; }
  /* 轮播模式下卡片几何由 JS 按 vw 写 inline style，窄屏自动等比缩小 —— 不要再覆盖 nth-child 的宽度 */
  .ab179-awards-ghost { display: none; }
  .ab179-word { font-size: 36px; line-height: 1.2; }
  .ab179-word-cn { font-size: 18px; line-height: 1.6; }

  /* 2026-09-15 第二轮：Our Design 标题居中。
     ⚠️ 必须放在本块**末尾**：上面 `.scene-ab179 .ab179-giant { margin: 0 0 0 6vw; }` 与本规则同权重 (0,2,0)，
     靠 source order 取胜 —— 放在前面（原位置 289 行）会被它压掉，实测标题因此偏右 28.7px。
     根因：h2 是 block，宽度 = 容器内容宽（682 下 476px），而 15vw 的 nowrap 文字实际 533px → 从盒子右边溢出。
     width: fit-content 让盒子跟着文字走，margin: 14px auto 0 再把它居中。 */
  /* 字号 15vw → 13vw：15vw 时 nowrap 的「Our Design」实测 533px，比容器内容宽（682 下 476px）宽 57px
     → 溢出到右边、看着偏右 28.7px（390 下同样偏 12.1px）。13vw 下 462/264px，装得进并按 margin:auto 居中（实测偏移 0）。 */
  .scene-ab179 .ab179-awards-title { margin: 14px auto 0; width: fit-content; font-size: 13vw; }
}