/* PinkyDolly V2 · pd-v2-about (T8, SPEC §4)
 * Ported from handover/v2/pages/about/styles.css. Global resets (*, html, body,
 * img, p, a, button, h1-h4, :focus-visible), .cap/.t2 (pd-v2-base.css) and
 * .rev (pd-v2-footer.css, loads on every page) are already sitewide — not
 * repeated here. .nav/.mnav/.foot are the shared pd-v2-header/pd-v2-footer's
 * own CSS, not this page's. Everything below is scoped under #pd-v2-about,
 * same pattern as #pd-v2-pdp — .sec/.sec__h/.wrap/.fine/.lede aren't global
 * (confirmed: pd-v2-header.css's bare .sec is a different, unrelated rule),
 * so each page section scopes its own rather than colliding with it.
 */

#pd-v2-about .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ══ 顶部 banner ══ */
#pd-v2-about .hero{position:relative;margin-top:var(--navh);overflow:hidden;
  aspect-ratio:3/1;min-height:0;display:grid;place-items:center;background:#0E0810}
@media (max-width:760px){#pd-v2-about .hero{aspect-ratio:auto;min-height:clamp(220px,32svh,300px)}}
#pd-v2-about .hero__bn{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* banner 自带字标,不叠加 logo,也不压暗 —— 压了反而糊 */

/* ══ 首屏声明 ══ */
#pd-v2-about .open{padding:clamp(48px,11vh,120px) 0 clamp(56px,12vh,150px)}
#pd-v2-about .open .cap{color:var(--main2);display:block;margin-bottom:16px}
#pd-v2-about .open h1{font-size:clamp(42px,7.2vw,104px);font-weight:650;letter-spacing:-.022em;
  line-height:1.02;font-variation-settings:var(--fr-display)}
@media (min-width:720px){#pd-v2-about .open h1{white-space:nowrap}}
#pd-v2-about .open p{margin-top:clamp(20px,3.4vh,40px);font-family:var(--disp);
  font-variation-settings:var(--fr-display);font-weight:650;
  font-size:clamp(24px,2.9vw,42px);line-height:1.22;letter-spacing:0;color:var(--tx)}
#pd-v2-about .open p span{display:block}
#pd-v2-about .open p em{font-style:normal}
#pd-v2-about .open p .o1{color:var(--act)}
#pd-v2-about .open p .o2{color:var(--act2)}
@media (max-width:620px){#pd-v2-about .open p span{display:inline}}

/* ══ 板块(分割线样式,区别于 header.css 那个不带线的全局 .sec)══ */
#pd-v2-about .sec{padding:clamp(34px,6vh,82px) 0;border-top:1px solid var(--line)}
#pd-v2-about .sec--nb{border-top:0}
#pd-v2-about .sec__h{margin-bottom:clamp(20px,3.4vh,38px)}
#pd-v2-about .sec__h .cap{color:var(--main2);display:block;margin-bottom:10px;font-weight:500;
  font-size:13.5px;letter-spacing:.14em}
#pd-v2-about .lede{margin-top:16px;max-width:62ch;color:var(--tx-dim);font-size:16px}
/* --tx-faint at normal text sizes has failed 4.5:1 almost everywhere else in
   this project (footer/PDP/collection all needed the same --tx-dim swap) —
   applying that same established fix here pre-emptively. */
#pd-v2-about .fine{margin-top:clamp(16px,2.4vh,24px);font-size:14px;line-height:1.6;
  color:var(--tx-dim);max-width:72ch}

/* ══ 双子「选边」板块 ══
   三态:idle / hover 预览 / 点击锁定。对角中缝,角度随指针变化。
   ⚠️ 文字必须留在安全区 —— 斜切会吃掉靠近中缝的内容。 */
#pd-v2-about .pick{position:relative;height:clamp(460px,72vh,720px);border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  --split:50%; --skew:6%; --e-pick:cubic-bezier(.22,.9,.28,1)}
#pd-v2-about .pk{position:absolute;inset:0;cursor:pointer;overflow:hidden;
  transition:clip-path .7s var(--e-pick),filter .6s var(--e-pick)}
/* #E00365/#B724E2, not the prototype's raw #FE0373/#C527F3 — measured: neither pure
   dark (--bk) nor pure light (--bw) text clears 4.5:1 against the actual raw hex
   (bk: 4.16/3.76, bw: 3.62/4.00 — brief rule 15's "contrast fails WCAG AA" is
   literally true either way). Yimei asked for the readable-text treatment to lose
   its visible "holder" box (see .pk__in, below) and look like the prototype's plain
   raw-colour panel again — a flat 7-12% darkening toward black keeps these reading
   as the same vivid pink/purple at a glance (far less of a shift than the ~17%
   lightening dark text would have needed) while clearing 4.5:1 for white text
   (6.09→ now not needed; current: 4.55/4.53). */
#pd-v2-about .pk--p{background:#E00365;
  clip-path:polygon(0 0, calc(var(--split) + var(--skew)) 0,
                    calc(var(--split) - var(--skew)) 100%, 0 100%)}
#pd-v2-about .pk--d{background:#B724E2;
  clip-path:polygon(calc(var(--split) + var(--skew)) 0, 100% 0,
                    100% 100%, calc(var(--split) - var(--skew)) 100%)}

/* 立绘 */
#pd-v2-about .pk__fig{position:absolute;bottom:0;height:64%;width:auto;pointer-events:none;z-index:2;
  filter:drop-shadow(0 20px 34px rgba(20,8,18,.4));
  transition:transform .8s var(--e-pick),filter .6s var(--e-pick);
  animation:pd-v2-about-br 5.6s ease-in-out infinite}
#pd-v2-about .pk--p .pk__fig{left:5%}
#pd-v2-about .pk--d .pk__fig{right:4%}
#pd-v2-about .pk--d .pk__fig{animation-duration:6.4s;animation-delay:-1.8s}
@keyframes pd-v2-about-br{0%,100%{transform:translate3d(0,0,0) scale(1)}
              50%{transform:translate3d(0,-0.9%,0) scale(1.008)}}

/* 文案安全区 —— 远离中缝 */
/* ⚠️ 文案在上、立绘在下,垂直分开 —— 两者都锚左下角会被立绘压住看不清 */
#pd-v2-about .pk__in{position:absolute;top:clamp(26px,4.4vh,48px);
  width:min(46%,420px);display:grid;gap:2px;z-index:3}
#pd-v2-about .pk--p .pk__in{left:clamp(20px,3.4vw,44px)}
#pd-v2-about .pk--d .pk__in{right:clamp(20px,3.4vw,44px);text-align:right;justify-items:end}
#pd-v2-about .pk__n{font-size:clamp(34px,4.8vw,62px);font-weight:650;color:var(--bw);letter-spacing:-.028em;line-height:.95}
#pd-v2-about .pk__k{margin-top:6px;font-size:13px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bw)}
#pd-v2-about .pk__lead{margin-top:16px;font-size:clamp(17px,2vw,25px);color:var(--bw);font-weight:600;
  font-family:var(--disp);font-optical-sizing:auto;font-variation-settings:var(--fx);letter-spacing:-.018em}
/* 引导句本身是 Text 样式(字号本来就 <24px),但粗体部分按角色单独升到
   Display + 字距(SPEC-typography.md 的 roles 表——这条文字虽小,但定稿时
   选的是大字形)。 */
#pd-v2-about .pk__lead b{font-variation-settings:var(--fr-display);font-weight:650;letter-spacing:.02em}
#pd-v2-about .pk__more{display:grid;gap:14px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--e-pick),opacity .45s var(--e-pick),margin-top .6s var(--e-pick)}
#pd-v2-about .pk__more p{font-size:15px;color:var(--bw);line-height:1.62}
#pd-v2-about .pk__more p+p{margin-top:-4px;font-weight:700;color:var(--bw)}
#pd-v2-about .pk__tags{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
#pd-v2-about .pk--d .pk__tags{justify-content:flex-end}
/* 12px 不是原型的 11px —— 规则 17/31 没有例外(含微标签在内,不小于 12px)。
   同一条规则这个项目已经在别处踩过(pd-v2-pdp.css 的待核实占位 chip)。 */
#pd-v2-about .pk__tags li{padding:4px 11px;border:1px solid rgba(255,247,241,.4);border-radius:var(--pill);
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--bw)}
@media (max-width:820px){#pd-v2-about .pk--d .pk__tags{justify-content:flex-start}}
#pd-v2-about .pk__go{justify-self:start;display:inline-flex;align-items:center;min-height:46px;
  padding:0 22px;border-radius:var(--r);background:var(--bk);color:var(--bw);
  font-size:14.5px;font-weight:700;transition:transform .2s var(--e),background .2s var(--e)}
#pd-v2-about .pk--d .pk__go{justify-self:end}
@media (hover:hover) and (pointer:fine){
  #pd-v2-about .pk__go:hover{transform:translateY(-2px);background:#3a323a}
}
#pd-v2-about .pk__hint{margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bw);transition:opacity .4s}

/* 预览态 */
#pd-v2-about .pick[data-state="p"]{--split:66%}
#pd-v2-about .pick[data-state="d"]{--split:34%}
#pd-v2-about .pick[data-state="p"] .pk--d,
#pd-v2-about .pick[data-state="d"] .pk--p{filter:saturate(.55) brightness(.76)}
#pd-v2-about .pick[data-state="p"] .pk--d .pk__fig,
#pd-v2-about .pick[data-state="d"] .pk--p .pk__fig{animation-play-state:paused}

/* 锁定态 —— 展开额外文案,对方收成窄条 */
#pd-v2-about .pick[data-lock="p"]{--split:82%;--skew:4%}
#pd-v2-about .pick[data-lock="d"]{--split:18%;--skew:4%}
#pd-v2-about .pick[data-lock] .pk__hint{opacity:0}
#pd-v2-about .pick[data-lock="p"] .pk--p .pk__more,
#pd-v2-about .pick[data-lock="d"] .pk--d .pk__more{max-height:520px;opacity:1;margin-top:14px}
/* 锁定态:立绘长到近满高并落在面板中央偏内侧 —— 贴边会被斜切中缝吃掉一角,
   居中才不会出现大片留白。 */
#pd-v2-about .pick[data-lock="p"] .pk--p .pk__fig{height:94%;left:auto;right:26%}
#pd-v2-about .pick[data-lock="d"] .pk--d .pk__fig{height:94%;right:auto;left:24%}
#pd-v2-about .pick[data-lock="p"] .pk--d,
#pd-v2-about .pick[data-lock="d"] .pk--p{filter:saturate(.4) brightness(.62)}
/* 收起侧:只留竖排名字,绝对居中。
   ⚠️ 必须同时清掉 left/right 两个锚点,否则会被原来的定位拉出可视区。 */
#pd-v2-about .pick[data-lock="p"] .pk--d .pk__in,
#pd-v2-about .pick[data-lock="d"] .pk--p .pk__in{width:auto;inset:50% auto auto 50%;
  translate:-50% -50%;text-align:center;justify-items:center}
/* 收起侧隐藏立绘和大字,只留竖排名字 */
#pd-v2-about .pick[data-lock="p"] .pk--d .pk__fig,
#pd-v2-about .pick[data-lock="d"] .pk--p .pk__fig{opacity:0;transition:opacity .5s var(--e-pick)}
#pd-v2-about .pick[data-lock="p"] .pk--d .pk__k,
#pd-v2-about .pick[data-lock="p"] .pk--d .pk__lead,
#pd-v2-about .pick[data-lock="d"] .pk--p .pk__k,
#pd-v2-about .pick[data-lock="d"] .pk--p .pk__lead{display:none}
/* 收起侧名字落在窄条中央(窄条约占 18%),之前居中在整块上被斜切裁掉了 */
#pd-v2-about .pick[data-lock="d"] .pk--p .pk__in{left:8.5%}
#pd-v2-about .pick[data-lock="p"] .pk--d .pk__in{left:91.5%}
#pd-v2-about .pick[data-lock] .pk__n{transition:opacity .4s}
#pd-v2-about .pick[data-lock="p"] .pk--d .pk__n,
#pd-v2-about .pick[data-lock="d"] .pk--p .pk__n{writing-mode:vertical-rl;font-size:clamp(20px,2.4vw,30px)}

#pd-v2-about .pk__reset{position:absolute;z-index:6;left:50%;bottom:16px;translate:-50% 0;
  min-height:42px;padding:0 20px;border-radius:var(--pill);
  background:rgba(38,32,38,.9);color:var(--bw);font-size:13.5px;font-weight:700;
  letter-spacing:.06em;border:1px solid rgba(255,247,241,.24);backdrop-filter:blur(8px);
  transition:transform .2s var(--e),background .2s var(--e)}
#pd-v2-about .pk__reset:hover{transform:translate(-50%,-2px);background:var(--act)}

/* 跟随鼠标的光圈 + 交互指引 —— 只在精确指针设备上启用,
   触屏保留静态提示和「Take both」按钮兜底 */
#pd-v2-about .pk__cur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;
  transition:opacity .3s var(--e-out);will-change:transform}
#pd-v2-about .pk__cur::before{content:"";position:absolute;width:300px;height:300px;left:-150px;top:-150px;
  border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,247,241,.42) 0%,rgba(255,247,241,.16) 32%,
    rgba(255,247,241,0) 68%)}
#pd-v2-about .pk__cur i{position:absolute;width:10px;height:10px;left:-5px;top:-5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28);transition:transform .25s var(--e)}
#pd-v2-about .pk__cur span{position:absolute;top:22px;left:0;translate:-50% 0;white-space:nowrap;
  padding:6px 13px;border-radius:var(--pill);background:rgba(38,32,38,.82);color:var(--bw);
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(6px);transition:opacity .2s}
#pd-v2-about .pk__cur.swap span{opacity:0}
#pd-v2-about .pick.is-cur .pk__cur{opacity:1}
#pd-v2-about .pick.is-cur.on-btn .pk__cur{opacity:0}
#pd-v2-about .pick.is-cur:active .pk__cur i{transform:scale(.6)}
@media (hover:hover) and (pointer:fine){
  #pd-v2-about .pick.is-cur .pk{cursor:none}
  #pd-v2-about .pick.is-cur .pk__go{cursor:pointer}
  #pd-v2-about .pick.is-cur .pk__hint{display:none}
  /* 键盘用户仍能看到并聚焦「Take both」 */
  #pd-v2-about .pick.is-cur .pk__reset:not(:focus-visible){opacity:0;pointer-events:none}
}

@media (max-width:820px){
  #pd-v2-about .pk__cur{display:none}
  #pd-v2-about .pick{height:auto;display:grid;gap:12px;overflow:visible}
  #pd-v2-about .pk{position:relative;inset:auto;clip-path:none!important;border-radius:var(--r);
    min-height:clamp(380px,56vh,460px)}
  #pd-v2-about .pk__in{width:min(78%,360px);top:clamp(22px,3vh,34px)}
  #pd-v2-about .pk--d .pk__in{text-align:left;justify-items:start;right:auto;
    left:clamp(20px,3.4vw,44px)}
  #pd-v2-about .pk--d .pk__go{justify-self:start}
  #pd-v2-about .pk__more{max-height:520px;opacity:1;margin-top:14px}
  #pd-v2-about .pk__hint{display:none}
  #pd-v2-about .pk__reset{display:none}
}

/* 两栏叙事 —— 左文右「重物」:引言或图片槽,避免右侧大片空白 */
#pd-v2-about .duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,80px);align-items:center}
#pd-v2-about .duo--r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
#pd-v2-about .duo--r .duo__side{order:-1}
@media (max-width:900px){#pd-v2-about .duo,#pd-v2-about .duo--r{grid-template-columns:1fr}#pd-v2-about .duo--r .duo__side{order:0}}
/* 带中线的两栏:竖线是右栏的左边框,贯穿左栏全高 */
#pd-v2-about .duo--line{grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
#pd-v2-about .duo--line .why{padding-right:clamp(24px,4vw,64px);gap:14px}
#pd-v2-about .why--q h2{font-variation-settings:var(--fr-display);font-weight:650;
  font-size:clamp(24px,2.5vw,34px);letter-spacing:-.012em;color:var(--tx-dim);margin-bottom:2px}
#pd-v2-about .why--q p{font-size:clamp(15.5px,1.45vw,18px);line-height:1.62}
#pd-v2-about .duo--line .pull{margin:0;padding:10px 0 10px clamp(28px,6.5vw,104px);
  border-left:2px solid var(--main2);display:flex;align-items:center}
/* font-family was missing here — <q> isn't one of the h1-h4 tags pd-v2-base.css's
   global heading rule covers, so without its own font-family this fell back to
   inherited Nunito Sans instead of Fraunces. The prototype's own base .pull q rule
   (which I'd only ported the .duo--line override of, not the base rule itself) sets
   it explicitly; same fix here. */
#pd-v2-about .duo--line .pull q{font-family:var(--disp);
  font-variation-settings:var(--fr-display);font-weight:650;
  font-size:clamp(24px,2.6vw,38px);line-height:1.2;letter-spacing:-.01em;quotes:none}
@media (min-width:901px){#pd-v2-about .duo--line .pull q span{display:block;white-space:nowrap}}
@media (max-width:900px){
  #pd-v2-about .duo--line{grid-template-columns:1fr;gap:28px}
  #pd-v2-about .duo--line .why{padding-right:0}
  #pd-v2-about .duo--line .pull{padding:6px 0 6px 22px}
}
/* 段落流 —— 叙事段落,不是卡片 */
#pd-v2-about .why{display:grid;gap:18px;max-width:64ch}
#pd-v2-about .why p{font-size:clamp(15.5px,1.6vw,19px);line-height:1.7;color:var(--tx-dim)}
#pd-v2-about .why b{color:var(--tx);font-weight:700}

/* 图片槽 —— 插画到实物,真实素材(非占位) */
#pd-v2-about .slot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,16px)}
#pd-v2-about .slot__img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  border-radius:var(--r);border:1px solid var(--line);object-fit:cover}
/* --tx-faint → --tx-dim, same established fix as .fine above. */
#pd-v2-about .slot__ar{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-dim)}
#pd-v2-about .slot__ar::before,#pd-v2-about .slot__ar::after{content:"";height:1px;flex:1;background:var(--line)}

/* 四栏 */
#pd-v2-about .quad{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:760px){#pd-v2-about .quad{grid-template-columns:1fr}}
#pd-v2-about .quad div{padding:clamp(22px,2.6vw,30px);border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
/* ⚠️ 小标题不用 Fraunces —— 19px 的 Didone 笔画对比太强,可读性差。
   这一级改用正文字体,靠字重和字距建立层级。 */
#pd-v2-about .quad h3{font-family:var(--ui);font-size:17px;font-weight:800;letter-spacing:-.005em}
/* 2026-10-13(SPEC-about-icons.md,approved):72x72 的卡片,改成内联 SVG
   (pd-v2-about-icon 共用 snippet)之后 currentColor 才能跟着 color 走——
   浅色模式 --act,深色模式 --main2,跟 xb2--p 边框色那条已有先例同一套写法。 */
#pd-v2-about .quad__ic{width:72px;height:72px;display:grid;place-items:center;border-radius:var(--r);
  background:var(--raise);margin-bottom:14px;color:var(--act)}
html[data-mode="dark"] #pd-v2-about .quad__ic{color:var(--main2)}
#pd-v2-about .quad__ic svg{width:34px;height:34px;max-width:none}
#pd-v2-about .quad p{margin-top:10px;font-size:14.5px;color:var(--tx-dim)}

/* ══ Journal ══ */
#pd-v2-about .jr{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:980px){#pd-v2-about .jr{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){#pd-v2-about .jr{grid-template-columns:1fr}}
#pd-v2-about .jr a{display:block}
#pd-v2-about .jr__m{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);position:relative;
  transition:border-color .3s var(--e),box-shadow .3s var(--e)}
#pd-v2-about .jr__m img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){
  #pd-v2-about .jr a:hover .jr__m{border-color:var(--tx-faint);box-shadow:0 12px 30px -16px rgba(20,8,16,.6)}
  #pd-v2-about .jr a:hover .jr__n{color:var(--act)}
}
/* 12px 不是原型的 11.5px —— 规则 17/31 没有例外,这个项目已经在好几处踩过
   同一条线(pd-v2-pdp.css 的待核实占位 chip、本文件的 .pk__k/.pk__tags)。 */
#pd-v2-about .jr__t{margin-top:11px;font-size:13px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--act2)}
#pd-v2-about .jr__n{margin-top:6px;font-family:var(--disp);font-optical-sizing:auto;
  font-variation-settings:var(--fr-text);font-weight:600;font-size:16.5px;line-height:1.3;
  letter-spacing:.02em;transition:color .2s}
/* --tx-faint → --tx-dim, same established fix as .fine above. */
#pd-v2-about .jr__r{margin-top:5px;font-size:13.5px;color:var(--tx-dim)}

/* ══ 结尾 CTA ══ */
#pd-v2-about .end{padding:clamp(40px,7vh,96px) 0;text-align:center;border-top:1px solid var(--line)}
#pd-v2-about .end h2{font-size:clamp(26px,4.4vw,46px);font-weight:650;letter-spacing:-.022em}
#pd-v2-about .end p{margin-top:14px;color:var(--tx-dim);max-width:52ch;margin-inline:auto}

/* ══ 收藏卡(T8 update · SPEC-about-cards.md §2)══════════════════════
   真的集换式卡牌:箔金描边(Pinky 粉箔 / Dolly 紫箔)、立绘窗带漫画集中线、
   人物出框压在名牌上、铆钉;背面头像+字标+签名句+标签+按钮。
   · 桌面:鼠标移入翻到背面,并随鼠标轻微 3D 倾斜 + 镭射光泽
   · 触屏:右上角翻面按钮;点卡面直接进系列
   · 键盘:Tab 到背面的 CTA 时自动翻面(:focus-within)
   两种颜色模式下卡片本体都是固定深色(实物质感,不跟随明暗模式)。
   以下规则是原型 styles.css 两段卡片 CSS(旧版 + "v2 参考稿")按最终生效值
   合并移植的结果,已去掉旧版里这次真实卡面不再使用的选择器(卡号行、稀有度、
   纯文字名字、风味文字框)——不是漏移植,是那些元素已经不存在了。 */
#pd-v2-about .flip{margin-top:clamp(26px,4vh,44px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,24px);max-width:760px;margin-inline:auto}
@media (max-width:620px){#pd-v2-about .flip{grid-template-columns:1fr;max-width:330px}}

/* 2026-10-13:跟 pd-v2-card.css 的 .fc 同步——用户反馈 About 这张卡在真机
   上也有正反面叠加问题,说明之前"只有 PDP 滚动容器里的卡才会坏"的猜测是
   错的,两边用同一份规则,要一起修。真正原因见 pd-v2-card.css 的注释:
   perspective/transform-style 一直没有 -webkit- 前缀,跟已经有前缀的
   backface-visibility 不对齐,iOS Safari 的 3D 语境建立不完整。 */
#pd-v2-about .fc{position:relative;-webkit-perspective:1200px;perspective:1200px;--rx:0deg;--ry:0deg;--flip:0deg;--mx:50%;--my:50%;
  will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
#pd-v2-about .fc--p{--f1:#FF9DCA;--f2:#FE0373;--f3:#FFE6F2;--f4:#B0004F;--tint:254,3,115;--lite:#FF9DCA;--b1:#CB025C;--b2:#8E0042}
#pd-v2-about .fc--d{--f1:#E7C2FF;--f2:#C527F3;--f3:#F6EAFF;--f4:#6E1A9A;--tint:197,39,243;--lite:#DDB4FF;--b1:#A922D1;--b2:#5E1585}
#pd-v2-about .fc__in{position:relative;aspect-ratio:63/88;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;
  transform:rotateY(calc(var(--flip) + var(--ry))) rotateX(var(--rx));transition:transform .7s var(--e)}
#pd-v2-about .fc.is-live .fc__in{transition:transform .14s linear}
#pd-v2-about .fc.is-flipped,#pd-v2-about .fc:focus-within{--flip:180deg}
#pd-v2-about .fc__f,#pd-v2-about .fc__b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:18px;padding:3px;
  background:linear-gradient(135deg,var(--f1),var(--f2) 28%,var(--f3) 48%,var(--f2) 66%,var(--f4));
  box-shadow:0 22px 44px -20px rgba(var(--tint),.6),0 2px 8px rgba(0,0,0,.35)}
#pd-v2-about .fc__b{transform:rotateY(180deg)}
#pd-v2-about .card{position:relative;height:100%;border-radius:15px;overflow:hidden;display:flex;flex-direction:column;
  padding:16px 14px 14px;color:#FFF7F1;text-align:left;
  background:radial-gradient(120% 60% at 50% 0%,rgba(var(--tint),.24),transparent 62%),
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.3px) 0 0/6px 6px,#150D14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* 立绘窗:侧色光晕 + 网点 + 漫画集中线(两层不同疏密的放射线叠加,中心留空) */
#pd-v2-about .card--front .card__art{margin-top:18px}
#pd-v2-about .card__art{position:relative;flex:1;min-height:0;border-radius:10px;overflow:hidden;
  background:radial-gradient(80% 60% at 50% 42%,rgba(var(--tint),.6),transparent 72%),
    radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.5px) 0 0/7px 7px,
    linear-gradient(180deg,#2A1428,#110910);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#pd-v2-about .card__lines{position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 46%,transparent 0deg 2.3deg,rgba(255,247,241,.24) 2.3deg 2.75deg,transparent 2.75deg 5deg),
    repeating-conic-gradient(from 1.2deg at 50% 46%,transparent 0deg 6.1deg,rgba(var(--tint),.55) 6.1deg 6.9deg,transparent 6.9deg 11deg);
  -webkit-mask:radial-gradient(ellipse 62% 56% at 50% 46%,transparent 34%,rgba(0,0,0,.55) 62%,#000 100%);
  mask:radial-gradient(ellipse 62% 56% at 50% 46%,transparent 34%,rgba(0,0,0,.55) 62%,#000 100%)}
/* 人物出框:不受立绘窗裁切,压在名牌之上 —— 每张卡自己的位置变量由 section 内联 style 传入 */
#pd-v2-about .card__fig{position:absolute;z-index:2;left:50%;top:var(--fig-top,4%);height:var(--fig-h,90%);width:auto;max-width:none;
  translate:calc(-50% + var(--fig-x,0%)) 0;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.6))}
/* 名牌:名字和副标签在人物之上,文字加深色描边保证压在腿上也看得清——不设 z-index,
   否则名字被锁在名牌层里,压不到人物上面 */
#pd-v2-about .card__plate{position:relative;margin-top:12px;padding:14px 16px;border-radius:9px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#pd-v2-about .card__name,#pd-v2-about .card__type{position:relative;z-index:3;
  text-shadow:0 0 2px #0E0810,0 0 6px rgba(14,8,16,.95),0 0 12px rgba(14,8,16,.8),0 1px 2px rgba(0,0,0,.9)}
#pd-v2-about .card__name{font-family:var(--disp);font-variation-settings:var(--fr-display);
  font-weight:650;font-size:clamp(26px,2.8vw,34px);letter-spacing:-.02em;line-height:1}
/* 12px 是站内文字的硬下限(brief),原型里卡片这两处标签字号是 10px/9px——按标准提到 12px,其余不动 */
#pd-v2-about .card__type{font:800 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--lite);white-space:nowrap}
/* 铆钉:正反面都有,四角,同一张卡的五金件 */
#pd-v2-about .rv{position:absolute;z-index:4;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 14%,#d8d1d6 30%,#8b838a 62%,#3b343a 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.45)}
#pd-v2-about .rv.tl{left:10px;top:10px}#pd-v2-about .rv.tr{right:10px;top:10px}
#pd-v2-about .rv.bl{left:10px;bottom:10px}#pd-v2-about .rv.br{right:10px;bottom:10px}
/* 镭射光泽:跟随鼠标,is-live 时才显现(避免翻面动画途中也跟着跳) */
#pd-v2-about .card__holo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;mix-blend-mode:color-dodge;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.5),transparent 40%),
    linear-gradient(115deg,transparent 18%,rgba(255,157,202,.32) 34%,rgba(201,162,255,.32) 46%,rgba(158,240,226,.28) 58%,transparent 74%);
  background-size:100% 100%,240% 240%;background-position:center,var(--mx) var(--my)}
#pd-v2-about .card__holo--all{border-radius:15px;mix-blend-mode:overlay}
#pd-v2-about .fc.is-live .card__holo{opacity:.85}
/* 背面:头像 + 字标 + 签名句 + 标签 + 按钮 */
#pd-v2-about .card--back{align-items:center;text-align:center;padding:24px 18px 28px}
#pd-v2-about .card--back .card__mid{padding:2px 0 8px}
#pd-v2-about .card__mid{margin-block:auto;display:flex;flex-direction:column;align-items:center;align-self:stretch}
#pd-v2-about .card__por{display:block;width:47%;height:auto;aspect-ratio:1;padding:4px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--f1),var(--f2),var(--f3),var(--f4));
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 30px -10px rgba(var(--tint),.9)}
#pd-v2-about .card__por span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,rgba(var(--tint),.75),#1B0F1A 78%)}
#pd-v2-about .card__por img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* 字标:两人同宽,放进同一个固定高度的槽里、底部对齐 —— 下面的签名句、标签、
   按钮在两张卡上完全对齐(不要按各自的字标比例单独调宽度)。 */
#pd-v2-about .card__word{margin:-11% 0 0;position:relative;z-index:2;line-height:0;width:44%;aspect-ratio:490/351;
  display:flex;align-items:flex-end;justify-content:center}
#pd-v2-about .card__word img{width:100%;height:auto;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
/* 卡片是独立物件:外层 .end p 的灰色/限宽/外边距不能渗进卡里,两种模式下卡片
   文字颜色都固定(这条规则在浅色模式下对比度不达标,原型里就是这么发现的)。 */
#pd-v2-about .end .card p{max-width:none;margin-inline:0;color:inherit}
#pd-v2-about .end .card .card__sig{margin:12px 0 0;color:var(--lite);font-family:var(--disp);font-optical-sizing:auto;
  font-variation-settings:var(--fr-text);font-weight:600;font-size:clamp(15px,1.45vw,17.5px);line-height:1.35;letter-spacing:.02em}
#pd-v2-about .card__traits{list-style:none;margin:12px 0 0;padding:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
#pd-v2-about .card--back .card__traits{margin-top:12px}
#pd-v2-about .card__traits li{padding:6px 10px;border-radius:var(--pill);border:1px solid rgba(255,247,241,.32);
  font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,247,241,.9)}
#pd-v2-about .card__go{margin-top:auto;align-self:stretch;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;background:linear-gradient(135deg,var(--b1),var(--b2));color:#fff;text-decoration:none;
  font:800 13px/1 var(--ui);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -8px rgba(var(--tint),.8);
  transition:transform .2s var(--e),box-shadow .2s}
@media (hover:hover) and (pointer:fine){
  #pd-v2-about .card__go:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -8px rgba(var(--tint),.9)}
}
#pd-v2-about .card__go:focus-visible{outline:2px solid #FFF7F1;outline-offset:3px}
/* 点卡面直接进系列(鼠标/触屏用;键盘走背面 CTA,避免同一张卡停两次) */
#pd-v2-about .fc__hit{position:absolute;inset:0;z-index:2;border-radius:18px;font-size:0;color:transparent}
/* 翻面按钮:触屏常驻;桌面只在键盘聚焦时出现 */
#pd-v2-about .fc__flip{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#FFF7F1;border:1px solid rgba(255,247,241,.4);
  background:rgba(14,8,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s}
#pd-v2-about .fc__flip svg{width:18px;height:18px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pd-v2-about .fc__flip:active{transform:scale(.92)}
#pd-v2-about .fc__flip:focus-visible{outline:2px solid #FFF7F1;outline-offset:2px}
@media (hover:hover) and (pointer:fine){#pd-v2-about .fc__flip:not(:focus-visible){opacity:0;pointer-events:none}}
@media (prefers-reduced-motion:reduce){#pd-v2-about .fc__in{transition:none}#pd-v2-about .card__holo{display:none}}
/* 很窄的屏幕(卡宽 < 300px,约等于 <360px 的两栏变一栏):背面内容整体收紧,
   确保底部铆钉不被挤到内容上面 */
@media (max-width:360px){
  #pd-v2-about .card--back{padding:20px 14px 26px}
  #pd-v2-about .card__por{width:42%}
  #pd-v2-about .card__word{width:40%}
  #pd-v2-about .end .card .card__sig{margin-top:6px;font-size:14px}
  #pd-v2-about .card--back .card__traits{margin-top:8px;gap:4px}
  #pd-v2-about .card__traits li{padding:5px 7px;font-size:12px;letter-spacing:.1em}
  #pd-v2-about .card--back .card__go{min-height:40px;font-size:12px}
}