/* ==========================================================================
   关于页（about.html）专用样式 —— 全部限定在 body[data-page="about"] 下
   规格：docs/WEBSITE-REDESIGN.md §7（2026-10-16 按「AI 生活平台」方向改版，同日第二轮：短片讲大方向、故事线 ① 用原宣言）。
   节奏：象牙 hero → 影片骑缝 → 深色「两条故事线」（今天的 Unimatcha / 我们要去的地方）→ 暖石「由学生打造」→ 纸白时间线（Beta 至今）
   →（淡洗统计，过门槛才出现）→ 象牙联系。
   只动 transform / opacity；滚动联动由 page-about.js 1:1 写入，不钉住。
   ========================================================================== */

/* ── 通用 ─────────────────────────────────────────────────────────────── */
/* 中文破折号 / 省略号用中文字体的字形：Plus Jakarta 的 em dash 两个拼不成一条「——」 */
@font-face{font-family:"ab-cjk-punct";font-weight:100 500;unicode-range:U+2014,U+2026;
  src:local("PingFangSC-Regular"),local("PingFang SC"),local("Microsoft YaHei"),local("MicrosoftYaHei"),local("Noto Sans CJK SC"),local("NotoSansCJKsc-Regular"),local("Source Han Sans SC")}
@font-face{font-family:"ab-cjk-punct";font-weight:600 900;unicode-range:U+2014,U+2026;
  src:local("PingFangSC-Semibold"),local("Microsoft YaHei Bold"),local("MicrosoftYaHei-Bold"),local("Noto Sans CJK SC Bold"),local("NotoSansCJKsc-Bold"),local("Source Han Sans SC Bold")}
html[lang^="zh"] body[data-page="about"] main{font-family:"ab-cjk-punct",var(--sans)}
html[lang^="zh"] body[data-page="about"] main .t-mega,html[lang^="zh"] body[data-page="about"] main .t-h1,
html[lang^="zh"] body[data-page="about"] main .t-h2,html[lang^="zh"] body[data-page="about"] main .t-h3{font-family:"ab-cjk-punct",var(--sans)}

body[data-page="about"] .ab-head{display:flex;flex-direction:column;gap:var(--eb-gap);max-width:880px}
/* 眉题 → 标题 20（--eb-gap）、标题 → 导语 22（全站同值） */
body[data-page="about"] .ab-head>.t-lede,body[data-page="about"] .ab-contact-card>.t-lede{margin-top:2px}
/* 时间线标题区：眉题 + 标题 + 导语一栏叠放（桌面在左 5/12 栏吸顶，平板 / 手机在时间线上方）。
   原来是 7/5 两栏、导语孤零零挂在最右边，下面的时间线只占左边三分之二 */
body[data-page="about"] .ab-head-row{max-width:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--eb-gap)}
body[data-page="about"] .ab-head-row>div{display:flex;flex-direction:column;gap:var(--eb-gap)}
body[data-page="about"] .ab-head-row .t-lede{max-width:26em}
body[data-page="about"] .ab-mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
/* 揭晓瞬间（core 在 [data-countdown] 上加 .is-revealing） */
body[data-page="about"] .ab-rv{display:none}
body[data-page="about"] .is-revealing .ab-rv{display:inline}
body[data-page="about"] .is-revealing .ab-rv-block{display:block}
body[data-page="about"] .is-revealing .ab-now-cd,body[data-page="about"] .is-revealing .ab-now-local{display:none}

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* 子页 hero 顶距四页同值（关于 / 帮助 / 安全 / 赞助）：眉题在各页落在同一高度（1440 宽 y ≈ 173） */
body[data-page="about"] .ab-hero{padding-top:var(--hero-pad,calc(var(--hdr-h) + clamp(48px,7vw,112px)));padding-bottom:clamp(64px,7vw,112px);overflow:hidden}
/* 眉题在普通块流里是 inline-flex，会带一行行高的支柱、比别的子页低 5px：改成块级，顶边贴着 hero 顶距 */
body[data-page="about"] .ab-hero .eyebrow{display:flex;width:max-content;max-width:100%}
body[data-page="about"] .ab-hero .dotgrid{mask-image:radial-gradient(ellipse 60% 70% at 82% 18%,#000 12%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 82% 18%,#000 12%,transparent 70%)}
/* 眉题 → 超大标题 28px（--eb-gap + 8，同首页影片 / 下载 / 学生会） */
body[data-page="about"] .ab-title{margin-top:calc(var(--eb-gap) + 8px);font-size:clamp(50px,10.2vw,158px);max-width:10.5em}
html[lang^="zh"] body[data-page="about"] .ab-title{font-size:clamp(50px,9.4vw,146px)}
/* 行高 .92 时拆字遮罩会切掉 g / y 的下伸部：遮罩往下多留一点 */
body[data-page="about"] .ab-title .split-u{padding-bottom:.2em;margin-bottom:-.2em}
/* 导语 | 三项事实 = 6/6（--split-66）：事实栏从全站 6/6 线起（1440 宽 x = 756） */
body[data-page="about"] .ab-hero-foot{display:grid;grid-template-columns:var(--split-66);column-gap:var(--split-gap);row-gap:32px;margin-top:clamp(44px,5.4vw,88px);align-items:end}
body[data-page="about"] .ab-lede{grid-column:1;max-width:26em}
body[data-page="about"] .ab-facts{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
body[data-page="about"] .ab-facts>div{border-top:1px solid var(--line-2);padding:16px 18px 0 0}
body[data-page="about"] .ab-facts dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
body[data-page="about"] .ab-facts dd{margin:10px 0 0;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
body[data-page="about"] .ab-facts dd>span{display:block}
/* 每项下面一行小字（iPhone 内测 / 访客本地的揭晓时间 / 注册地）；访客就在英国时间里，本地时间那行由 JS 保持 hidden */
body[data-page="about"] .ab-facts dd>.ab-fact-sub{margin-top:4px;font-size:13px;font-weight:500;line-height:1.4;color:var(--t3)}
body[data-page="about"] .ab-facts dd>.ab-fact-sub[hidden]{display:none}
html[lang^="zh"] body[data-page="about"] .ab-facts dt{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:none}
html[lang^="zh"] body[data-page="about"] .ab-facts dd{font-size:16px}

/* ── 影片（骑在象牙与深色之间） ──────────────────────────────────────── */
body[data-page="about"] .ab-filmband{position:relative;background:linear-gradient(to bottom,var(--bg) 0 50%,var(--dark) 50% 100%)}
/* seams（assets/js/seams.js）：深色从影片条的中线开始，告诉 seams 这里就是深色卡片（#why）的上边——
   卡片的圆角 / 进场内缩从这条中线起算，和下面的 #why 平接成一张卡片 */
body[data-page="about"] .ab-filmband{--seam-sheet-top:50%}
/* 影片卡两侧只露出一条窄肩（手机上约 20–28px），进场的大圆角 + 内缩放在那里会变成影片卡旁两只「耳朵」
   （手机上圆角比肩还宽，裁成一团弧形）。所以这条上边不做进场，保持静止小圆角（≤24px，比窄肩窄） */
body[data-page="about"] .ab-filmband{--seam-hold:top}
body[data-page="about"] .ab-film{max-width:1180px;margin-inline:auto;border-radius:var(--r-xl);background:var(--dark-2);
  box-shadow:0 0 0 1px rgba(246,246,240,.06),0 50px 110px -46px rgba(0,0,0,.6);transform-origin:50% 60%;will-change:transform}
.js body[data-page="about"] .ab-film.is-scaled{transform:scale(.9)}

/* 短片：纯色深底（不发光、没有雾和颗粒）。共用线稿层 .ab-reel-art 居中在上，台词在下，像片子的画面 + 字幕 */
body[data-page="about"] .ab-reel{--reel-bg:#0E0F0D;--reel-ink:#F4F4EE;container-type:size;overflow:hidden;color:var(--d1);background:var(--reel-bg)}
body[data-page="about"] .ab-film.is-off .ab-reel *,body[data-page="about"] .ab-film.is-off .ab-reel{animation-play-state:paused!important}
body[data-page="about"] .ab-reel[data-state="paused"] .ab-reel-stage *,body[data-page="about"] .ab-reel[data-state="paused"] .ab-reel-art *{animation-play-state:paused!important}

/* Mochii 记号（片尾那只：荧光身体 + 深色胶囊眼，眼睛单独眨） */
body[data-page="about"] .ab-mochii{overflow:visible;display:block}
body[data-page="about"] .ab-mochii-body{fill:var(--neon)}
body[data-page="about"] .ab-mochii-eye{fill:var(--reel-bg,#0C0D0B);transform-box:fill-box;transform-origin:50% 50%;animation:ab-blink 4.8s infinite}
@keyframes ab-blink{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.12)}96%{transform:scaleY(1)}}

/* 海报：眉题左上；地平线上露出半轮白色的圆（就是线稿层的第 0 幕）；标题和说明在字幕的位置；播放键右下 */
body[data-page="about"] .ab-reel-poster{position:absolute;inset:0;z-index:2;transition:opacity var(--dur-l) var(--ease-out),visibility 0s linear 0s}
body[data-page="about"] .ab-reel:not([data-state="idle"]) .ab-reel-poster{opacity:0;visibility:hidden;transition:opacity var(--dur-m) var(--ease-out),visibility 0s linear var(--dur-m)}
body[data-page="about"] .ab-reel-kicker{position:absolute;left:clamp(18px,3.4cqi,44px);top:clamp(18px,3.4cqi,44px);display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--d3)}
html[lang^="zh"] body[data-page="about"] .ab-reel-kicker{font-family:var(--sans);font-size:13px;letter-spacing:.08em}
body[data-page="about"] .ab-poster-copy{position:absolute;left:6cqi;right:6cqi;top:36cqi;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2cqi,16px);text-align:center}
body[data-page="about"] .ab-poster-title{font-size:clamp(22px,3.9cqi,60px);font-weight:600;line-height:1.08;letter-spacing:-.035em;color:var(--d1);text-wrap:balance}
html[lang^="zh"] body[data-page="about"] .ab-poster-title{font-size:clamp(20px,3.5cqi,54px);line-height:1.3;letter-spacing:.01em}
body[data-page="about"] .ab-poster-note{font-size:clamp(12.5px,1.35cqi,16px);line-height:1.55;color:var(--d3);max-width:34em;text-wrap:balance}
body[data-page="about"] .ab-reel-big{position:absolute;right:clamp(18px,3.4cqi,44px);bottom:clamp(18px,3.4cqi,44px);display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 8px;
  border-radius:var(--r-pill);background:var(--neon);color:var(--ink);font-weight:700;font-size:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  transition:transform var(--dur-m) var(--ease-back)}
/* 悬停效果只给真有悬停的指针（触屏点一下会一直「悬停」着不落回去，看着像按下 / 选中）；本文件的 :hover 都这样包 */
@media (hover:hover){body[data-page="about"] .ab-reel-big:hover{transform:scale(1.04)}}
body[data-page="about"] .ab-reel-big:active{transform:scale(.97)}
body[data-page="about"] .ab-reel-big:focus-visible{outline:2px solid var(--neon);outline-offset:4px}
body[data-page="about"] .ab-reel-big-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--neon)}
body[data-page="about"] .ab-reel-big-i .i{width:16px;height:16px;margin-left:2px}
html:not(.js) body[data-page="about"] .ab-reel-big{display:none}

/* 台词层：每幕一层，只有眉题 + 两行主句，居中在线稿下面。分镜层不接点击（海报的「播放」在它下面也点得到） */
body[data-page="about"] .ab-reel-stage{position:absolute;inset:0;z-index:1;pointer-events:none}
body[data-page="about"] .ab-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:clamp(10px,1.5cqi,20px);text-align:center;
  padding:35.5cqi 5cqi 0;opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility 0s linear .6s}
body[data-page="about"] .ab-scene.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease-out) .1s,visibility 0s}
body[data-page="about"] .ab-sk{display:flex;align-items:center;gap:.8em;font-family:var(--mono);font-size:clamp(10.5px,1.05cqi,13px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--d3)}
html[lang^="zh"] body[data-page="about"] .ab-sk{font-family:var(--sans);letter-spacing:.12em;font-size:clamp(11.5px,1.15cqi,14px)}
body[data-page="about"] .ab-sk b{font-family:var(--mono);font-weight:500;letter-spacing:.08em;padding:.22em .55em .18em;border-radius:5px;background:var(--neon);color:var(--ink)}
/* 主句：逐行从遮罩里升起（.ab-l 裁切 > span 平移） */
body[data-page="about"] .ab-ln{font-size:clamp(21px,3.9cqi,60px);font-weight:600;line-height:1.1;letter-spacing:-.035em;color:var(--d1);max-width:88cqi}
html[lang^="zh"] body[data-page="about"] .ab-ln{font-size:clamp(19px,3.5cqi,54px);line-height:1.3;letter-spacing:.01em}
body[data-page="about"] .ab-l{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
body[data-page="about"] .ab-l>span{display:inline-block;transform:translate3d(0,110%,0);transition:transform 1.05s var(--ease-out)}
body[data-page="about"] .ab-scene.on .ab-l>span{transform:none;transition-delay:.25s}
body[data-page="about"] .ab-scene.on .ab-l+.ab-l>span{transition-delay:.55s}
body[data-page="about"] .ab-sk{opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s var(--ease-out),transform .9s var(--ease-out)}
body[data-page="about"] .ab-scene.on .ab-sk{opacity:1;transform:none;transition-delay:.1s}

/* ── 共用线稿层：4:3（viewBox 400×300），居中在上 ──────────────────────
   幕号写在 .ab-reel[data-beat]（0 = 海报，1–7 = 七幕，8 = 片尾），幕内的步写在 [data-step]（0 / 1 / 2，按每幕 data-steps 的毫秒数推进，
   跟着片子的时间走，暂停时不往下推）。元素的几何都以原点为中心，位置 / 大小只写 transform；画线用 pathLength=1 + dashoffset。
   位移 / 缩放用 transition（幕与幕之间接得上），眨眼用 animation（暂停时停得住）。 */
body[data-page="about"] .ab-reel-art{position:absolute;left:50%;top:3.5cqi;width:40cqi;transform:translateX(-50%);pointer-events:none;transition:opacity .8s var(--ease-out)}
body[data-page="about"] .ab-reel[data-beat="8"] .ab-reel-art{opacity:0}
body[data-page="about"] .ab-art{position:relative;aspect-ratio:4/3;container-type:inline-size}
body[data-page="about"] .ab-art-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body[data-page="about"] .ab-art-svg *{transition-timing-function:var(--ease-inout)}
body[data-page="about"] .ab-art-svg line,body[data-page="about"] .ab-art-svg .ab-a-bound,body[data-page="about"] .ab-art-svg .ab-a-jr-arrow{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* 线：默认收起（dashoffset 1 + 透明），亮起时 dashoffset 0 */
body[data-page="about"] .ab-a-hz,body[data-page="about"] .ab-a-jr,body[data-page="about"] .ab-a-ch,body[data-page="about"] .ab-a-pick,body[data-page="about"] .ab-a-lk,body[data-page="about"] .ab-a-trail,body[data-page="about"] .ab-a-bound{
  stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.2s var(--ease-out),opacity .5s var(--ease-out),stroke .5s var(--ease-out)}
body[data-page="about"] .ab-a-hz{stroke:rgba(244,244,238,.42);stroke-width:1.1}
body[data-page="about"] .ab-a-jr{stroke:rgba(244,244,238,.5);stroke-width:1.1}
body[data-page="about"] .ab-a-jr-arrow{stroke:rgba(244,244,238,.6);stroke-width:1.1;opacity:0;transition:opacity .5s var(--ease-out)}
body[data-page="about"] .ab-a-camp,body[data-page="about"] .ab-a-camp2{fill:none;stroke:rgba(244,244,238,.72);stroke-width:1.3;opacity:0;transition:opacity .5s var(--ease-out)}
body[data-page="about"] .ab-a-bound{stroke:rgba(244,244,238,.5);stroke-width:1.2;transform:translate(200px,150px);transition:stroke-dashoffset 1.6s var(--ease-out),opacity .5s var(--ease-out),transform 1.3s var(--ease-inout)}
body[data-page="about"] .ab-a-ch{stroke:rgba(244,244,238,.5);stroke-width:1.1}
body[data-page="about"] .ab-a-pick{stroke:var(--reel-ink);stroke-width:1.7}
body[data-page="about"] .ab-a-end{fill:var(--reel-bg);stroke:rgba(244,244,238,.6);stroke-width:1.1;opacity:0;transition:opacity .5s var(--ease-out),fill .4s var(--ease-out),stroke .4s var(--ease-out)}
body[data-page="about"] .ab-a-lk{stroke:rgba(244,244,238,.42);stroke-width:1}
body[data-page="about"] .ab-a-lk-y{stroke:var(--neon);stroke-width:1.4}
body[data-page="about"] .ab-a-trail{stroke:var(--neon);stroke-width:1.6;transition:stroke-dashoffset 2.8s var(--ease-inout) .3s,opacity .4s var(--ease-out) .3s}
body[data-page="about"] .ab-a-p{fill:var(--reel-bg);stroke:rgba(244,244,238,.78);stroke-width:1.3;transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(.3);
  transition:opacity .45s var(--ease-out),transform .6s var(--ease-back),fill .5s var(--ease-out)}
body[data-page="about"] .ab-a-mk{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(.2);transition:opacity .35s var(--ease-out),transform .5s var(--ease-back)}
body[data-page="about"] .ab-a-you{fill:var(--reel-ink);transform:translate(200px,216px) scale(5);transition:transform 1.3s var(--ease-inout),opacity .6s var(--ease-out)}
body[data-page="about"] .ab-a-ground{fill:var(--reel-bg);opacity:0}
body[data-page="about"] .ab-a-mo{opacity:0;transform:translate(246px,112px) scale(.3);transition:transform 1.3s var(--ease-inout),opacity .5s var(--ease-out)}
body[data-page="about"] .ab-a-mo-b{fill:var(--neon)}
body[data-page="about"] .ab-a-eyes{fill:var(--reel-bg);transition:transform .7s var(--ease-out)}
body[data-page="about"] .ab-a-lid{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(.16);transition:transform .5s var(--ease-back)}
body[data-page="about"] .ab-a-blink{transform-box:fill-box;transform-origin:50% 50%}
@keyframes ab-mo-wink{0%,90%,100%{transform:none}94%{transform:scaleY(.12)}}
/* 标签（HTML，按 4:3 画面的百分比摆） */
body[data-page="about"] .ab-art-lbl{position:absolute;font-family:var(--mono);font-size:max(9.5px,2.5cqi);font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:rgba(244,244,238,.62);
  opacity:0;transition:opacity .5s var(--ease-out)}
html[lang^="zh"] body[data-page="about"] .ab-art-lbl{font-family:var(--sans);font-size:max(10.5px,2.8cqi);letter-spacing:.14em;text-transform:none}
body[data-page="about"] .ab-lbl-campus{left:17.5%;top:68%;transform:translateX(-50%)}
body[data-page="about"] .ab-lbl-world{right:7%;top:45%}
body[data-page="about"] .ab-lbl-mo{left:66%;top:72%;transform:translateX(-50%);color:var(--neon)}
body[data-page="about"] .ab-lbl-uni{left:13%;top:3.5%}

/* 0 海报 + 1 这一代：地平线；白色的圆从地平线后升起；肩上冒出一个睡着的小 Mochii */
body[data-page="about"] .ab-reel[data-beat="0"] .ab-a-hz,body[data-page="about"] .ab-reel[data-beat="1"] .ab-a-hz{opacity:1;stroke-dashoffset:0}
body[data-page="about"] .ab-reel[data-beat="0"] .ab-a-ground,body[data-page="about"] .ab-reel[data-beat="1"] .ab-a-ground{opacity:1}
body[data-page="about"] .ab-reel[data-beat="1"] .ab-a-you{transform:translate(200px,160px) scale(5);transition:transform 3.2s var(--ease-out) .15s}
body[data-page="about"] .ab-reel[data-beat="1"]:not([data-step="0"]) .ab-a-mo{opacity:1;transform:translate(246px,112px) scale(.9);transition:transform .8s var(--ease-back),opacity .4s var(--ease-out)}

/* 2 大学：圆缩成一个点，从「校园」出发，沿着通向「社会」的线往前走；Mochii 还睡着，跟在肩上 */
body[data-page="about"] .ab-reel[data-beat="2"] .ab-a-jr{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out) .35s,opacity .3s var(--ease-out) .35s}
body[data-page="about"] .ab-reel[data-beat="2"] .ab-a-jr-arrow{opacity:1;transition-delay:1.3s}
body[data-page="about"] .ab-reel[data-beat="2"] .ab-a-camp{opacity:1;transition-delay:.4s}
body[data-page="about"] .ab-reel[data-beat="2"] .ab-lbl-campus,body[data-page="about"] .ab-reel[data-beat="2"] .ab-lbl-world{opacity:1;transition-delay:1s}
body[data-page="about"] .ab-reel[data-beat="2"] .ab-a-you{transform:translate(70px,170px) scale(.9)}
body[data-page="about"] .ab-reel[data-beat="2"] .ab-a-mo{opacity:1;transform:translate(84px,156px) scale(.52)}
body[data-page="about"] .ab-reel[data-beat="2"]:not([data-step="0"]) .ab-a-you{transform:translate(206px,170px) scale(.9);transition-duration:2s}
body[data-page="about"] .ab-reel[data-beat="2"]:not([data-step="0"]) .ab-a-mo{transform:translate(220px,156px) scale(.52);transition-duration:2s}

/* 3 你的 AI：小 Mochii 长大、醒来，看着你 */
body[data-page="about"] .ab-reel[data-beat="3"] .ab-a-you{transform:translate(118px,200px) scale(1.3)}
body[data-page="about"] .ab-reel[data-beat="3"] .ab-a-mo{opacity:1;transform:translate(266px,146px) scale(4.6);transition-duration:1.5s}
body[data-page="about"] .ab-reel[data-beat="3"]:not([data-step="0"]) .ab-lbl-mo{opacity:1}
body[data-page="about"] .ab-reel[data-beat="3"][data-step="2"] .ab-a-eyes{transform:translate(-1.7px,1px)}

/* 4 你来决定：Mochii 退到一旁，三条路摆开——一样的灰，没有哪条被标出来，Mochii 只看着你（不看路）。
   第 1 步你挨个往三条路那边探一探（掂量）；第 2 步你选一条走过去，白线跟着你画到哪（白 = 你，不用 Mochii 的荧光），走到头那颗点才变白 */
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-mo{opacity:1;transform:translate(58px,98px) scale(2.2)}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-eyes{transform:translate(1.1px,1.4px)}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-you{transform:translate(112px,172px) scale(1.2)}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-ch{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease-out) .5s,opacity .3s var(--ease-out) .5s}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-ch2{transition-delay:.68s}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-ch3{transition-delay:.86s}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-end{opacity:1;transition-delay:1.25s,0s,0s}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-end2{transition-delay:1.4s,0s,0s}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-end3{transition-delay:1.55s,0s,0s}
/* 掂量：动的是单独的 translate 属性（叠在 transform 外面），transform 本身不进动画——第 2 步换落点时它照常过渡，不会一下跳过去 */
body[data-page="about"] .ab-reel[data-beat="4"][data-step="1"] .ab-a-you{animation:ab-weigh 1.5s var(--ease-inout)}
@keyframes ab-weigh{
  0%,30%,60%,92%,100%{translate:0 0}
  15%{translate:8.5px -2.9px}
  45%{translate:9px .2px}
  76%{translate:8.4px 3.2px}}
body[data-page="about"] .ab-reel[data-beat="4"][data-step="2"] .ab-a-you{transform:translate(322px,252px) scale(1.2);transition-duration:1.5s}
body[data-page="about"] .ab-reel[data-beat="4"][data-step="2"] .ab-a-pick{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-inout),opacity .2s var(--ease-out)}
body[data-page="about"] .ab-reel[data-beat="4"][data-step="2"] .ab-a-end3{fill:var(--reel-ink);stroke:var(--reel-ink);transition-delay:0s,1.35s,1.35s}
body[data-page="about"] .ab-reel[data-beat="4"][data-step="2"] .ab-a-eyes{transform:translate(1.6px,1px)}

/* 5 带向人：你回到中间，身边出现几个人，你和其中三位连上（荧光）；Mochii 退到角落，不和任何人连线 */
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-you,body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-you{transform:translate(200px,150px) scale(1.2)}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-mo{opacity:1;transform:translate(44px,250px) scale(1.5)}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-eyes{transform:translate(1.4px,-1.2px)}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-p:not(.ab-a-px),body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-p{opacity:1;transform:none}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-p1{transition-delay:.45s}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-p2{transition-delay:.58s}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-p3{transition-delay:.71s}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-p4{transition-delay:.84s}
body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-p5{transition-delay:.97s}
body[data-page="about"] .ab-reel[data-beat="5"]:not([data-step="0"]) .ab-a-lk-y{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out),opacity .2s,stroke .6s}
body[data-page="about"] .ab-reel[data-beat="5"]:not([data-step="0"]) .ab-a-lk2{transition-delay:.15s}
body[data-page="about"] .ab-reel[data-beat="5"]:not([data-step="0"]) .ab-a-lk3{transition-delay:.3s}
body[data-page="about"] .ab-reel[data-beat="5"][data-step="2"] .ab-a-pc{fill:var(--reel-ink)}

/* 6 你的学校：一所学校的轮廓围住所有人，人和人连成网；你的那只 Mochii 先回到你肩上，然后每个人身边都有一个自己的 */
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-bound{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-out) .1s,opacity .3s var(--ease-out) .1s}
body[data-page="about"] .ab-reel[data-beat="6"] .ab-lbl-uni{opacity:1;transition-delay:1s}
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-p6{transition-delay:.35s}
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-p7{transition-delay:.5s}
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-p8{transition-delay:.65s}
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-lk-y{opacity:1;stroke-dashoffset:0;stroke:rgba(244,244,238,.42);stroke-width:1}
body[data-page="about"] .ab-reel[data-beat="6"]:not([data-step="0"]) .ab-a-lk-n{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease-out),opacity .2s}
body[data-page="about"] .ab-reel[data-beat="6"]:not([data-step="0"]) .ab-a-lk-n:nth-of-type(odd){transition-delay:.18s}
body[data-page="about"] .ab-reel[data-beat="6"]:not([data-step="0"]) .ab-a-p{fill:var(--reel-ink);transition-delay:.4s}
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-mo{opacity:1;transform:translate(214px,136px) scale(.46)}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] .ab-a-mk{opacity:1;transform:none}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(2) .ab-a-mk{transition-delay:.06s}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(3) .ab-a-mk{transition-delay:.12s}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(4) .ab-a-mk{transition-delay:.18s}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(5) .ab-a-mk{transition-delay:.24s}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(6) .ab-a-mk{transition-delay:.3s}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(7) .ab-a-mk{transition-delay:.36s}
body[data-page="about"] .ab-reel[data-beat="6"][data-step="2"] g:nth-child(8) .ab-a-mk{transition-delay:.42s}

/* 7 愿景：学校缩成地平线左端的小方块，你沿地平线走向右边，长成一轮更大的圆（比 01 那轮大），Mochii 跟着 */
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-hz{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .5s,opacity .3s var(--ease-out) .5s}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-bound{opacity:0;stroke-dashoffset:0;transform:translate(59px,198px) scale(.1);transition:transform 1.3s var(--ease-inout),opacity 1.1s var(--ease-in)}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-camp2{opacity:1;transition-delay:1s}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-p{opacity:0;transform:scale(.4);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-you{transform:translate(296px,152px) scale(5.8);transition:transform 2.8s var(--ease-inout) .3s}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-mo{opacity:1;transform:translate(350px,98px) scale(1.15);transition:transform 2.8s var(--ease-inout) .3s}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-eyes{transform:translate(-1.5px,1.1px)}
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-trail{opacity:1;stroke-dashoffset:0}

/* 醒着的幕（03 第 1 步起到 07）：眼睛睁开，偶尔眨一下 */
body[data-page="about"] .ab-reel[data-beat="3"]:not([data-step="0"]) .ab-a-lid,body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-lid,body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-lid,
body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-lid,body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-lid,body[data-page="about"] .ab-reel[data-beat="8"] .ab-a-lid{transform:none}
body[data-page="about"] .ab-reel[data-beat="4"] .ab-a-blink,body[data-page="about"] .ab-reel[data-beat="5"] .ab-a-blink,body[data-page="about"] .ab-reel[data-beat="6"] .ab-a-blink,
body[data-page="about"] .ab-reel[data-beat="7"] .ab-a-blink{animation:ab-mo-wink 4.6s 1.2s infinite}
/* 重播前先无过渡地回到海报那一幕 */
body[data-page="about"] .ab-reel-art.is-reset,body[data-page="about"] .ab-reel-art.is-reset *{transition:none!important}

/* 片尾（线稿淡出） */
body[data-page="about"] .ab-s-end{justify-content:center;gap:clamp(8px,1.4cqi,18px);padding:0 5cqi clamp(40px,6cqi,80px)}
body[data-page="about"] .ab-end-mochii{width:clamp(48px,10cqi,124px);height:clamp(48px,10cqi,124px);margin-bottom:clamp(4px,1cqi,12px);
  opacity:0;transform:scale(.7) rotate(-7deg);transition:opacity .5s var(--ease-out),transform .9s var(--ease-back)}
body[data-page="about"] .ab-scene.on .ab-end-mochii{opacity:1;transform:rotate(-7deg);transition-delay:.35s}
body[data-page="about"] .ab-end-word{font-weight:800;font-size:clamp(28px,6.6cqi,84px);letter-spacing:-.045em;line-height:1;color:var(--d1)}
body[data-page="about"] .ab-end-word sup{display:inline-block;margin-left:.35em;padding:.2em .45em .16em;border-radius:4px;background:var(--neon);color:var(--ink);font-family:var(--mono);font-size:max(9px,.16em);font-weight:500;letter-spacing:.08em;line-height:1;vertical-align:top;transform:translateY(.25em)}
body[data-page="about"] .ab-end-line{font-size:clamp(15px,2.1cqi,26px);font-weight:500;color:var(--d1)}
body[data-page="about"] .ab-end-url{font-family:var(--mono);font-size:clamp(11px,1.2cqi,14px);letter-spacing:.1em;color:var(--d3)}
body[data-page="about"] .ab-end-word,body[data-page="about"] .ab-end-line,body[data-page="about"] .ab-end-url{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s var(--ease-out),transform .9s var(--ease-out)}
body[data-page="about"] .ab-scene.on .ab-end-word{opacity:1;transform:none;transition-delay:.55s}
body[data-page="about"] .ab-scene.on .ab-end-line{opacity:1;transform:none;transition-delay:.8s}
body[data-page="about"] .ab-scene.on .ab-end-url{opacity:1;transform:none;transition-delay:1s}

/* 播放条 */
body[data-page="about"] .ab-reel-ui{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:14px;
  padding:clamp(12px,2.2cqi,24px) clamp(16px,3.2cqi,36px);background:linear-gradient(to top,rgba(10,11,9,.72),rgba(10,11,9,0));
  opacity:0;visibility:hidden;transition:opacity var(--dur-m),visibility 0s linear var(--dur-m)}
body[data-page="about"] .ab-reel:not([data-state="idle"]) .ab-reel-ui{opacity:1;visibility:visible;transition:opacity var(--dur-m) .15s,visibility 0s}
body[data-page="about"] .ab-reel-ctl{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(246,246,240,.12);color:var(--d1);
  transition:background var(--dur-s),transform var(--dur-s) var(--ease-out)}
@media (hover:hover){body[data-page="about"] .ab-reel-ctl:hover{background:rgba(246,246,240,.22)}}
body[data-page="about"] .ab-reel-ctl:active{transform:scale(.94)}
body[data-page="about"] .ab-reel-ctl:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
body[data-page="about"] .ab-reel-ctl .i{grid-area:1 / 1;width:16px;height:16px}
body[data-page="about"] .ab-reel-ctl .ab-i-play,body[data-page="about"] .ab-reel-ctl .ab-i-replay{display:none}
body[data-page="about"] .ab-reel-ctl[data-state="paused"] .ab-i-pause,body[data-page="about"] .ab-reel-ctl[data-state="ended"] .ab-i-pause{display:none}
body[data-page="about"] .ab-reel-ctl[data-state="paused"] .ab-i-play,body[data-page="about"] .ab-reel-ctl[data-state="ended"] .ab-i-replay{display:block}
body[data-page="about"] .ab-reel-bars{flex:1;display:flex;gap:6px;min-width:0}
body[data-page="about"] .ab-reel-bars i{flex:1 1 0;height:3px;border-radius:3px;background:rgba(246,246,240,.18);overflow:hidden}
body[data-page="about"] .ab-reel-bars b{display:block;height:100%;background:var(--d1);transform-origin:left center;transform:scaleX(0)}
body[data-page="about"] .ab-reel-time{flex:none;font-family:var(--mono);font-size:12px;color:var(--d3);font-variant-numeric:tabular-nums}

/* 竖屏（手机 2:3）：线稿放大到整宽、往下挪，台词跟在下面；海报的播放键居中在底部 */
@container (orientation: portrait){
  body[data-page="about"] .ab-reel-art{top:23cqi;width:86cqi}
  body[data-page="about"] .ab-scene{padding-top:95cqi}
  body[data-page="about"] .ab-scene.ab-s-end{padding-top:0;padding-bottom:16cqi}
  body[data-page="about"] .ab-ln{font-size:clamp(18px,5.3cqi,40px);max-width:none}
  html[lang^="zh"] body[data-page="about"] .ab-ln{font-size:clamp(18px,6.3cqi,40px)}
  body[data-page="about"] .ab-sk{font-size:clamp(10px,2.9cqi,13px)}
  html[lang^="zh"] body[data-page="about"] .ab-sk{font-size:clamp(11px,3.2cqi,14px)}
  body[data-page="about"] .ab-poster-copy{top:95cqi}
  body[data-page="about"] .ab-poster-title{font-size:clamp(20px,6cqi,44px)}
  html[lang^="zh"] body[data-page="about"] .ab-poster-title{font-size:clamp(19px,6cqi,40px)}
  body[data-page="about"] .ab-poster-note{font-size:clamp(12.5px,3.5cqi,16px)}
  body[data-page="about"] .ab-reel-big{left:0;right:0;margin-inline:auto;width:max-content}
  body[data-page="about"] .ab-end-mochii{width:22cqi;height:22cqi}
  body[data-page="about"] .ab-end-word{font-size:11.5cqi}
  body[data-page="about"] .ab-end-line{font-size:clamp(14px,4.6cqi,22px)}
}

/* 真影片（SITE_CONFIG.media['film-about'] 有值时由 JS 生成：海报 + 播放键，点了才带声播放） */
body[data-page="about"] .ab-film-cover{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;width:100%;
  padding:clamp(18px,3.4vw,44px);color:var(--d1);text-align:left;background:linear-gradient(to top,rgba(10,11,9,.66),rgba(10,11,9,0) 55%)}
body[data-page="about"] .ab-film-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
body[data-page="about"] .ab-film-cover-t{font-size:clamp(20px,2.4vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
body[data-page="about"] .ab-film-cover-s{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--d3);letter-spacing:0}
body[data-page="about"] .ab-film-cover .ab-reel-big-i{width:64px;height:64px;background:var(--neon);color:var(--ink);transition:transform var(--dur-m) var(--ease-back)}
body[data-page="about"] .ab-film-cover .ab-reel-big-i .i{width:22px;height:22px}
@media (hover:hover){body[data-page="about"] .ab-film-cover:hover .ab-reel-big-i{transform:scale(1.08)}}
body[data-page="about"] .ab-film-cover:focus-visible{outline:2px solid var(--neon);outline-offset:-6px;border-radius:inherit}
body[data-page="about"] .ab-film>video.ab-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:4}

/* ── 两条故事线（深色） ───────────────────────────────────────────────── */
/* 接在影片条下半截的深色上（seams 合成一张卡）。黑底上两大块实色：① 象牙底 = 今天（原宣言原文，逐词点亮），
   ② 荧光底 = 要去的地方（使命 + 三个方向 + 不变的四条）。不发光。两栏等高：① 的署名紧跟宣言（空处留在卡片底部，不夹在正文和署名中间），② 的四条贴底。≤1023 叠成一栏（① 在前）。 */
body[data-page="about"] .ab-story{padding-top:clamp(88px,10vw,168px)}
body[data-page="about"] .ab-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap);margin-top:var(--head-gap);align-items:stretch}
body[data-page="about"] .ab-line{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:clamp(28px,3.6vw,60px);border-radius:var(--r-xl);color:var(--ink)}
body[data-page="about"] .ab-line>*{max-width:100%}
body[data-page="about"] .ab-line-now{background:var(--bg)}
body[data-page="about"] .ab-line-next{background:var(--neon)}
body[data-page="about"] .ab-line-head{align-self:stretch;display:flex;align-items:flex-start;gap:18px;padding-bottom:clamp(20px,2vw,28px);border-bottom:1px solid rgba(11,11,10,.14)}
body[data-page="about"] .ab-line-no{flex:none;font-family:var(--num);font-size:clamp(40px,3.2vw,54px);line-height:.86;letter-spacing:.01em;color:var(--ink)}
/* ② 的编号是描边字：方向还没做完 */
body[data-page="about"] .ab-line-next .ab-line-no{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
body[data-page="about"] .ab-line-tt{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:2px}
body[data-page="about"] .ab-line-t{font-size:clamp(22px,.9vw + 14px,28px);font-weight:650;letter-spacing:-.022em;line-height:1.15;color:var(--ink)}
html[lang^="zh"] body[data-page="about"] .ab-line-t{letter-spacing:0;line-height:1.3}
body[data-page="about"] .ab-line-k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,10,.56)}
html[lang^="zh"] body[data-page="about"] .ab-line-k{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:none}
body[data-page="about"] .ab-line-next .ab-line-k{color:rgba(11,11,10,.66)}

/* ① 宣言：大字，滚动时逐词从淡到实（page-about.js；减少动态效果时直接是实色）；重点两句是荧光记号笔 */
body[data-page="about"] .ab-mani{margin-top:clamp(28px,3vw,44px)}
body[data-page="about"] .ab-mani-text,body[data-page="about"] .ab-mission{font-size:clamp(22px,1.25vw + 12px,34px);font-weight:600;line-height:1.34;letter-spacing:-.026em;color:var(--ink);text-wrap:pretty}
html[lang^="zh"] body[data-page="about"] .ab-mani-text,html[lang^="zh"] body[data-page="about"] .ab-mission{font-size:clamp(19px,1vw + 12px,28px);line-height:1.85;letter-spacing:.02em}
/* 记号笔跟着字一起点亮：这一句点亮过半时 JS 加 .is-lit，荧光条从左往右画出来；没有 JS / 减少动态效果时（没有 .is-words）是整条 */
body[data-page="about"] .ab-mani-text em{font-style:normal;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(to bottom,transparent 56%,var(--neon) 56%,var(--neon) 94%,transparent 94%) no-repeat 0 0 / 100% 100%}
body[data-page="about"] .ab-mani-text.is-words em{background-size:0% 100%;transition:background-size .7s var(--ease-out)}
body[data-page="about"] .ab-mani-text.is-words em.is-lit{background-size:100% 100%}
body[data-page="about"] .ab-w{transition:opacity .3s linear}
body[data-page="about"] .ab-sign{margin-top:clamp(28px,3vw,44px);font-size:15px;font-weight:600;color:rgba(11,11,10,.56)}

/* ② 使命（与宣言同一字号）+ 三个方向 + 不变的四条 */
body[data-page="about"] .ab-mission{margin-top:clamp(28px,3vw,44px)}
body[data-page="about"] .ab-dirs{align-self:stretch;margin-top:clamp(24px,2.6vw,36px);border-top:1px solid rgba(11,11,10,.16)}
body[data-page="about"] .ab-dirs li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-bottom:1px solid rgba(11,11,10,.16)}
body[data-page="about"] .ab-dir-i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--neon)}
body[data-page="about"] .ab-dir-i .i{width:18px;height:18px}
body[data-page="about"] .ab-dir-x{background:transparent;border:1.5px dashed var(--ink);color:var(--ink)}
body[data-page="about"] .ab-dirs b{display:block;font-size:16.5px;font-weight:650;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
html[lang^="zh"] body[data-page="about"] .ab-dirs b{letter-spacing:0}
body[data-page="about"] .ab-dirs p>span{display:block;margin-top:3px;font-size:14.5px;line-height:1.55;color:rgba(11,11,10,.72)}
html[lang^="zh"] body[data-page="about"] .ab-dirs p>span{line-height:1.75}
body[data-page="about"] .ab-holds{align-self:stretch;margin-top:auto;padding-top:clamp(24px,2.6vw,36px)}
body[data-page="about"] .ab-holds-k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,10,.66)}
html[lang^="zh"] body[data-page="about"] .ab-holds-k{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:none}
/* 四条排成 2×2 的深色小块（同一行等高）；窄卡片里一条一行 */
body[data-page="about"] .ab-holds ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
body[data-page="about"] .ab-holds li{display:flex;align-items:center;min-height:56px;padding:12px 16px;border-radius:14px;background:var(--ink);color:#F6F6F0;font-size:14.5px;font-weight:600;line-height:1.35;text-wrap:balance}
html[lang^="zh"] body[data-page="about"] .ab-holds li{line-height:1.5}

/* ── 由学生打造（暖石） ──────────────────────────────────────────────── */
body[data-page="about"] .ab-built-grid{display:grid;grid-template-columns:var(--split-57);gap:clamp(40px,7vw,120px) var(--split-gap);align-items:center}
body[data-page="about"] .ab-team-col{display:flex;justify-content:center}
body[data-page="about"] .ab-team{width:100%;max-width:540px;border-radius:var(--r-xl);box-shadow:var(--sh-2);background:var(--lemon)}
body[data-page="about"] .ab-built-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
/* 眉题 → 标题 20、标题 → 正文 22（栏内间隔 24 不动，只校这两处） */
body[data-page="about"] .ab-built-copy>.t-h2{margin-top:calc(var(--eb-gap) - 24px)}
body[data-page="about"] .ab-built-copy>.ab-built-text{margin-top:-2px}
body[data-page="about"] .ab-built-text{display:flex;flex-direction:column;gap:16px;max-width:34em;color:var(--t2);font-size:18px;line-height:1.65}
html[lang^="zh"] body[data-page="about"] .ab-built-text{font-size:16.5px;line-height:1.9}
body[data-page="about"] .ab-built-links{margin-top:4px}
/* Mochii 群像（photo-team 的占位）：九张应用图标式的方块，白脸从底边探出头；眼睛跟着光标，点一下换个表情 */
body[data-page="about"] .ab-stk{overflow:hidden;background:radial-gradient(90% 70% at 18% 8%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),
  radial-gradient(80% 60% at 90% 100%,rgba(184,230,0,.5),rgba(184,230,0,0) 70%),linear-gradient(165deg,#F2FFBE 0%,#E8FA9E 50%,#DCF07F 100%)}
body[data-page="about"] .ab-stk::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(23,53,28,.16) 1px,transparent 1.3px);background-size:22px 22px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 85%)}
body[data-page="about"] .ab-stk-grid{position:absolute;inset:6% 6% 16%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
body[data-page="about"] .ab-stk-c{position:relative;display:grid;place-items:center;min-width:0;min-height:0;cursor:pointer;
  transform:translate3d(var(--px,0px),var(--py,0px),0)}
body[data-page="about"] .ab-stk-c .ab-mo{--s:1;display:block;width:min(74cqw,74cqh);aspect-ratio:1/1;height:auto;
  transform:translate(var(--jx),var(--jy)) rotate(var(--r)) scale(var(--s));transition:transform var(--dur-l) var(--ease-back),opacity var(--dur-m) var(--ease-out)}
body[data-page="about"] .ab-stk-hero .ab-mo{width:min(94cqw,94cqh)}
body[data-page="about"] .ab-stk-c{container-type:size}
body[data-page="about"] .ab-stk-c:focus-visible .ab-mo{--s:1.08}
@media (hover:hover){body[data-page="about"] .ab-stk-c:hover .ab-mo{--s:1.08}}
body[data-page="about"] .ab-stk-c{-webkit-tap-highlight-color:transparent;border-radius:18px}
body[data-page="about"] .ab-stk-c:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
body[data-page="about"] .ab-stk-c .ab-mo.is-pop{animation:ab-pop .62s var(--ease-out)}
@keyframes ab-pop{0%{transform:translate(var(--jx),var(--jy)) rotate(var(--r)) scale(1)}35%{transform:translate(var(--jx),var(--jy)) rotate(0deg) scale(1.16)}
  100%{transform:translate(var(--jx),var(--jy)) rotate(var(--r)) scale(1)}}
body[data-page="about"] .ab-stk-c .ab-mo.is-out{opacity:0;--s:.55}
/* 方块外观（群像与联系卡共用）：应用图标的圆角方块 + 一圈白边，像贴在板上的小贴片 */
body[data-page="about"] .ab-mo .mochii-av{width:100%;height:100%;border-radius:28%;
  box-shadow:0 0 0 3px #fff,0 12px 22px -8px rgba(11,11,10,.26),0 2px 5px rgba(11,11,10,.1)}
body[data-page="about"] .ab-mo .mo-blink{transform-box:fill-box;transform-origin:50% 50%}
body[data-page="about"] .ab-mo .mo-look{transition:transform .5s var(--ease-out)}
body[data-page="about"] .ab-mo.is-blinky .mo-blink{animation:ab-mo-blink var(--bl,5.2s) var(--bd,0s) infinite}
@keyframes ab-mo-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.12)}}
html:not(.js) body[data-page="about"] .ab-stk-c .ab-mo{border-radius:28%;background:rgba(255,255,255,.55);box-shadow:0 0 0 3px #fff}
body[data-page="about"] .ab-stk-foot{position:absolute;left:5%;right:5%;bottom:5%;display:flex;align-items:center;justify-content:space-between;gap:12px}
/* 说明胶囊放不下一行时折成两行（平板吸顶卡只有 ~300px 宽，原来截成「这是 Mochii，点一…」） */
body[data-page="about"] .ab-stk-cap{display:inline-flex;align-items:center;gap:8px;min-width:0;min-height:40px;padding:5px 16px 5px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13.5px;font-weight:600;line-height:1.25;color:var(--ink);box-shadow:0 6px 20px -10px rgba(11,11,10,.32)}
body[data-page="about"] .ab-stk-cap .i{flex:none;width:18px;height:18px;color:var(--ink)}
body[data-page="about"] .ab-stk-cap-t{min-width:0;text-wrap:balance}
body[data-page="about"] .ab-stk-shuffle{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--neon);
  box-shadow:0 10px 24px -10px rgba(11,11,10,.5);transition:transform var(--dur-l) var(--ease-back)}
@media (hover:hover){body[data-page="about"] .ab-stk-shuffle:hover{transform:rotate(180deg)}}
body[data-page="about"] .ab-stk-shuffle:active{transform:rotate(180deg) scale(.92)}
body[data-page="about"] .ab-stk-shuffle .i{width:20px;height:20px}
html:not(.js) body[data-page="about"] .ab-stk-shuffle{display:none}

/* ── 时间线 ───────────────────────────────────────────────────────────── */
body[data-page="about"] .ab-tl{position:relative;margin-top:var(--head-gap);--rx:236px}
body[data-page="about"] .ab-tl-rail{position:absolute;left:calc(var(--rx) - 1px);top:12px;bottom:0;width:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
body[data-page="about"] .ab-tl-rail i{position:absolute;inset:0;background:var(--ink);transform-origin:50% 0;transform:scaleY(0)}
html:not(.js) body[data-page="about"] .ab-tl-rail i{transform:none}
body[data-page="about"] .ab-tl-item{position:relative;display:grid;grid-template-columns:var(--rx) minmax(0,1fr);padding-bottom:clamp(44px,4.6vw,72px)}
body[data-page="about"] .ab-tl-item:last-child{padding-bottom:0}
body[data-page="about"] .ab-tl-dot{position:absolute;left:calc(var(--rx) - 8px);top:7px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);z-index:1;
  transition:background var(--dur-m),border-color var(--dur-m),transform var(--dur-l) var(--ease-back)}
body[data-page="about"] .ab-tl-item.lit .ab-tl-dot,html:not(.js) body[data-page="about"] .ab-tl-dot{background:var(--neon);border-color:var(--ink);transform:scale(1.12)}
body[data-page="about"] .ab-tl-date{padding:4px 44px 0 0;text-align:right;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
html[lang^="zh"] body[data-page="about"] .ab-tl-date{letter-spacing:.06em}
body[data-page="about"] .ab-tl-item.lit .ab-tl-date{color:var(--ink)}
body[data-page="about"] .ab-tl-body{padding-left:52px;max-width:680px}
body[data-page="about"] .ab-tl-round{font-family:var(--num);font-size:clamp(40px,3.4vw,56px);line-height:1;letter-spacing:.01em;color:var(--ink);margin-bottom:10px}
body[data-page="about"] .ab-tl-title{font-size:clamp(22px,1.1vw + 16px,32px);font-weight:600;line-height:1.2;letter-spacing:-.022em;color:var(--ink)}
html[lang^="zh"] body[data-page="about"] .ab-tl-title{letter-spacing:0;line-height:1.35}
body[data-page="about"] .ab-tl-text{margin-top:10px;font-size:17px;line-height:1.6;color:var(--t2);max-width:36em}
html[lang^="zh"] body[data-page="about"] .ab-tl-text{font-size:16px;line-height:1.85}
/* NOW */
body[data-page="about"] .ab-tl-now .ab-tl-dot{background:var(--neon);border-color:var(--ink)}
body[data-page="about"] .ab-now-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--ink);color:var(--neon);letter-spacing:.14em}
html[lang^="zh"] body[data-page="about"] .ab-now-tag{font-family:var(--sans);font-size:13px;letter-spacing:.08em}
body[data-page="about"] .ab-tl-now .ab-tl-date{padding-top:0}
/* 深色「现在」卡：左缘落在其他条目文字的起点（圆点右 52px），宽度 = 那一栏文字的宽度（.ab-tl-body 680 − 52）。
   原来左移 16px、右边多出 86px，字又比其他条目往右缩进 27px，三处都差一点 */
body[data-page="about"] .ab-now{position:relative;margin-left:52px;padding:clamp(28px,3vw,44px);max-width:628px;border-radius:var(--r-l);background:var(--dark);color:var(--d2);overflow:hidden;isolation:isolate}
body[data-page="about"] .ab-now .ab-tl-title{color:var(--d1);font-size:clamp(26px,1.6vw + 16px,40px)}
body[data-page="about"] .ab-now .ab-tl-text{color:var(--d2)}
body[data-page="about"] .ab-now :focus-visible{outline-color:var(--neon)}
body[data-page="about"] .ab-now-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
body[data-page="about"] .ab-now-list li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--paper);font-size:14px;font-weight:600;color:var(--ink)}
body[data-page="about"] .ab-now-list .i{width:17px;height:17px;color:var(--ink)}
/* 黑卡里的实色荧光块：轮次 + 倒计时（墨字，不发光）。各档都是轮次叠在倒计时上面：卡片左缘对齐条目文字后窄了一截，
   平板上「轮次 | 倒计时」左右排时英文倒计时会折成两行 */
body[data-page="about"] .ab-now-live{display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:6px 28px;margin-top:24px;padding:clamp(20px,2.2vw,28px);
  border-radius:var(--r-m);background:var(--neon);color:var(--ink)}
/* 眉题「下一次揭晓」（不写轮次号：轮次是按固定锚点推算的，Beta 期间不拿它当成绩） */
body[data-page="about"] .ab-now-k{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,10,.7)}
html[lang^="zh"] body[data-page="about"] .ab-now-k{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:none}
body[data-page="about"] .ab-now-cd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--ink)}
body[data-page="about"] .ab-now-u{display:inline-flex;align-items:baseline;gap:3px}
body[data-page="about"] .ab-now-u b{display:flex;font-family:var(--num);font-weight:400;font-size:30px;line-height:1}
body[data-page="about"] .ab-now-u i{font-style:normal;font-size:12px;font-weight:600;color:var(--t2)}
body[data-page="about"] .ab-now-u .cd-digit{width:.56em;height:1.05em}
body[data-page="about"] .ab-now-local{font-size:13.5px;color:var(--t2)}
body[data-page="about"] .ab-now-live .ab-rv{font-size:18px;font-weight:600;color:var(--ink)}
html:not(.js) body[data-page="about"] .ab-now-live{display:none}
body[data-page="about"] .ab-now-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
body[data-page="about"] .ab-now-link{color:var(--d1)}
/* 之后：正式发布（虚线圆点 + 虚线胶囊，不点亮成荧光；不带日期） */
body[data-page="about"] .ab-tl-next .ab-tl-dot,body[data-page="about"] .ab-tl-item.lit.ab-tl-next .ab-tl-dot{background:var(--paper);border-style:dashed;border-color:var(--t3)}
body[data-page="about"] .ab-tl-item.lit.ab-tl-next .ab-tl-dot{border-color:var(--ink)}
body[data-page="about"] .ab-next-tag{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);border:1.5px dashed var(--t4);color:var(--t2);letter-spacing:.14em}
html[lang^="zh"] body[data-page="about"] .ab-next-tag{font-family:var(--sans);font-size:13px;letter-spacing:.08em}
body[data-page="about"] .ab-tl-next .ab-tl-date{padding-top:0}

/* ── 统计（淡洗；默认 hidden，过门槛才出现） ─────────────────────────── */
body[data-page="about"] .ab-stats{padding-block:clamp(72px,8vw,120px)}
body[data-page="about"] .ab-stats-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 40px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line-2)}
body[data-page="about"] .ab-stats-head .t-small{max-width:32em}
body[data-page="about"] .ab-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
body[data-page="about"] .ab-stat{display:flex;flex-direction:column-reverse;gap:10px;padding:32px 24px 0 0}
body[data-page="about"] .ab-stat+.ab-stat{padding-left:28px;border-left:1px solid var(--line-2)}
body[data-page="about"] .ab-stat dd{margin:0;font-size:clamp(56px,7vw,120px);line-height:.95;color:var(--ink)}
body[data-page="about"] .ab-stat dt{font-size:15px;font-weight:600;color:var(--t2)}

/* ── 联系 ─────────────────────────────────────────────────────────────── */
body[data-page="about"] .ab-contact-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:20px;
  padding:clamp(28px,5.4vw,88px);border-radius:var(--r-xl);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1)}
body[data-page="about"] .ab-contact-h{max-width:12em}
body[data-page="about"] .ab-contact-card .t-lede{max-width:30em}
body[data-page="about"] .ab-contact-mo{position:absolute;right:clamp(28px,6.4vw,104px);top:clamp(30px,5vw,72px);width:clamp(84px,9.4vw,144px);z-index:1;
  transform:rotate(8deg);transition:transform var(--dur-l) var(--ease-back)}
body[data-page="about"] .ab-contact-mo .ab-mo{display:block;width:100%;aspect-ratio:1/1}
body[data-page="about"] .ab-contact-mo .mochii-av{box-shadow:0 0 0 1.5px rgba(11,11,10,.12),0 22px 40px -16px rgba(11,11,10,.34),0 4px 10px rgba(11,11,10,.1)}
@media (hover:hover){body[data-page="about"] .ab-contact-card:hover .ab-contact-mo{transform:rotate(-2deg) translate3d(0,-6px,0) scale(1.04)}}
body[data-page="about"] .ab-contact-mo.is-happy{transform:rotate(-4deg) translate3d(0,-10px,0) scale(1.08)}
body[data-page="about"] .ab-mail{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:clamp(16px,2.4vw,36px);width:100%}
body[data-page="about"] .ab-mail-link{position:relative;font-size:clamp(25px,5.2vw + 4px,84px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink);overflow-wrap:anywhere;z-index:0}
body[data-page="about"] .ab-mail-link::after{content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;bottom:.02em;height:.22em;background:var(--neon);
  transform:scaleX(.18);transform-origin:left center;transition:transform var(--dur-l) var(--ease-out)}
body[data-page="about"] .ab-mail-link:focus-visible::after{transform:scaleX(1)}
@media (hover:hover){body[data-page="about"] .ab-mail-link:hover::after{transform:scaleX(1)}}
body[data-page="about"] .ab-mail-act{display:flex;flex-wrap:wrap;gap:10px}
body[data-page="about"] .ab-copy .ab-copy-i{display:none}
body[data-page="about"] .ab-copy.is-done{background:var(--wash);border-color:var(--ink)}
body[data-page="about"] .ab-copy.is-done .ab-copy-i{display:inline-block}
/* 取消 base.css 里 .btn:hover .i 的右移（勾号不动）：是取消不是悬停效果，不包 (hover:hover) */
body[data-page="about"] .ab-copy:hover .ab-copy-i{transform:none}
body[data-page="about"] .ab-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:var(--card-gap)}
body[data-page="about"] .ab-route{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.4vw,34px);border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--sh-1);transition:transform var(--dur-m) var(--ease-out),box-shadow var(--dur-m),border-color var(--dur-m)}
@media (hover:hover){body[data-page="about"] .ab-route:hover{transform:translate3d(0,-4px,0);box-shadow:var(--sh-2);border-color:var(--line-2)}}
body[data-page="about"] .ab-route-i{width:26px;height:26px;color:var(--ink);margin-bottom:8px}
body[data-page="about"] .ab-route-t{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
body[data-page="about"] .ab-route-d{font-size:15px;line-height:1.6;color:var(--t2);flex:1}
body[data-page="about"] .ab-route-go{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;font-weight:600;color:var(--ink)}
body[data-page="about"] .ab-route-go .i{transition:transform var(--dur-m) var(--ease-out)}
@media (hover:hover){body[data-page="about"] .ab-route:hover .ab-route-go .i{transform:translate3d(4px,0,0)}}
body[data-page="about"] .ab-route>*{position:relative;z-index:2}

/* ── 响应式 ───────────────────────────────────────────────────────────── */
/* 宽度档位同 base.css：手机 ≤600、平板 601–1023、桌面 ≥1024（iPad 横屏 1024 与首页同为桌面版） */
/* 时间线（桌面）：标题区在左 5/12 栏吸顶（只有标题区那么高），时间线在右 7/12 栏。
   日期栏宽取「右栏 × 2/7 − 52px」，使条目文字正好从全站 7/5 分栏线起（1280 / 1440 / 1920 宽 x = 765 / 860 / 1103）；
   1280 宽时日期栏约 134px，日期（「FEB 2026」「2026.02」）和「现在 / 之后」胶囊都是一行 */
@media (min-width:1024px){
  body[data-page="about"] .ab-time .container{display:grid;grid-template-columns:var(--split-57);column-gap:var(--split-gap);align-items:start}
  body[data-page="about"] .ab-time .ab-head-row{position:sticky;top:calc(var(--hdr-h) + 48px);container-type:inline-size}
  body[data-page="about"] .ab-tl{margin-top:0;--rx:max(130px,calc(100% * 2 / 7 - 52px))}
  /* 日期一律一行（日期栏在 1280 宽最窄，约 134px）：右距 22，1280–1365 字号 12 */
  body[data-page="about"] .ab-tl-date{padding-right:22px;white-space:nowrap}
  /* 英文标题在 5/12 栏里：字号和全页其他 h2 一样（不按栏宽缩）。两句各起一行，第二句在栏里放不下时允许折行，各行平衡长度 */
  html:not([lang^="zh"]) body[data-page="about"] #ab-time-h{text-wrap:balance}
  html:not([lang^="zh"]) body[data-page="about"] #ab-time-h .nw{display:block;white-space:normal;text-wrap:balance}
}
@media (min-width:1280px) and (max-width:1365px){
  body[data-page="about"] .ab-tl-date{font-size:12px}
}
/* 1024–1279 的右栏只有 520–650px，再分出日期栏文字就太窄：日期放到标题上面（同手机版的排法） */
@media (min-width:1024px) and (max-width:1279px){
  body[data-page="about"] .ab-tl{--rx:9px}
  body[data-page="about"] .ab-tl-item{grid-template-columns:minmax(0,1fr);gap:8px}
  body[data-page="about"] .ab-tl-date{text-align:left;padding:0 0 0 36px}
  body[data-page="about"] .ab-tl-dot{top:3px}
  body[data-page="about"] .ab-tl-body{padding-left:36px}
  body[data-page="about"] .ab-now{margin-left:36px;max-width:none}
}
@media (max-width:1023px){
  body[data-page="about"] .ab-lede{grid-column:1 / -1}
  body[data-page="about"] .ab-facts{grid-column:1 / -1}
  /* 两条故事线叠成一栏：① 在前，② 在后 */
  body[data-page="about"] .ab-lines{grid-template-columns:minmax(0,1fr)}
  /* 平板两栏：Mochii 卡比右边文案矮一大截——卡片吸顶跟着文案走，不在下面空出一块 */
  body[data-page="about"] .ab-built-grid{align-items:start}
  body[data-page="about"] .ab-team-col{position:sticky;top:calc(var(--hdr-h) + 24px)}
  body[data-page="about"] .ab-tl{--rx:176px}
  body[data-page="about"] .ab-routes{grid-template-columns:1fr}
  body[data-page="about"] .ab-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:18px;row-gap:4px}
  body[data-page="about"] .ab-route-i{grid-row:1 / span 2;margin:0}
  body[data-page="about"] .ab-route-t{grid-column:2}
  body[data-page="about"] .ab-route-d{grid-column:2}
  body[data-page="about"] .ab-route-go{grid-column:3;grid-row:1 / span 2;margin:0}
  body[data-page="about"] .ab-route-go>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:640px){
  body[data-page="about"] .ab-stats-grid{grid-template-columns:1fr}
  body[data-page="about"] .ab-stat+.ab-stat{padding-left:0;border-left:0;border-top:1px solid var(--line-2);margin-top:28px}
}
@media (max-width:700px){
  body[data-page="about"] .ab-built-grid{grid-template-columns:1fr}
  body[data-page="about"] .ab-team-col{order:2;position:static}
  body[data-page="about"] .ab-team{max-width:560px}
  body[data-page="about"] .ab-film{border-radius:var(--r-l)}
  /* 竖屏 2:3（原 4:5）：每幕多了一句副句，演示区要留够高 */
  body[data-page="about"] .ab-film.is-reel{aspect-ratio:2/3}
  body[data-page="about"] .ab-reel-time{display:none}
  body[data-page="about"] .ab-facts{grid-template-columns:1fr}
  body[data-page="about"] .ab-facts>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px;align-items:baseline;padding:14px 0}
  body[data-page="about"] .ab-facts dd{margin:0}
  body[data-page="about"] .ab-facts>div:last-child{border-bottom:1px solid var(--line-2)}
  body[data-page="about"] .ab-tl{--rx:9px}
  body[data-page="about"] .ab-tl-item{grid-template-columns:1fr;gap:8px}
  body[data-page="about"] .ab-tl-date{text-align:left;padding:0 0 0 36px}
  body[data-page="about"] .ab-tl-dot{top:3px}
  body[data-page="about"] .ab-tl-body{padding-left:36px}
  body[data-page="about"] .ab-now{margin-left:36px;padding:24px 22px}
  body[data-page="about"] .ab-contact-mo{width:64px;top:22px;right:20px}
  body[data-page="about"] .ab-contact-h{padding-right:52px}
  body[data-page="about"] .ab-contact-card .eyebrow{max-width:60%}
  body[data-page="about"] .ab-mail-act{width:100%}
  body[data-page="about"] .ab-mail-act .btn{flex:1}
}
/* 横屏手机：影片按屏高封顶、回到 16:9，播放键和控制条一屏内（同首页 02-film） */
@media (orientation:landscape) and (max-height:500px) and (hover:none) and (min-width:631px){
  body[data-page="about"] .ab-film.is-reel{aspect-ratio:16/9}
  body[data-page="about"] .ab-film{max-width:min(1180px,max(580px,calc((100vh - 24px) * 16 / 9)));max-width:min(1180px,max(580px,calc((100svh - 24px) * 16 / 9)))}
}
/* 手机：「现在」卡与条目文字同一左缘（36px）后窄了 12px——倒计时的数字、间距、荧光块内边距各收一点，
   360 宽也能一行放下四组（原来 390 就折成「04天 23时 08分 / 53秒」） */
@media (max-width:600px){
  body[data-page="about"] .ab-now-live{padding:16px}
  body[data-page="about"] .ab-now-cd{column-gap:8px}
  body[data-page="about"] .ab-now-u b{font-size:26px}
}
@media (max-width:560px){
  body[data-page="about"] .ab-holds ul{grid-template-columns:minmax(0,1fr)}
  body[data-page="about"] .ab-holds li{min-height:48px}
  /* 英文标题第二句在窄屏上放不下一行（「and where we’re heading.」顶出右边距）：手机上允许它自己折 */
  html:not([lang^="zh"]) body[data-page="about"] #ab-story-h .nw{white-space:normal}
  body[data-page="about"] .ab-line{border-radius:var(--r-l)}
  body[data-page="about"] .ab-line-head{gap:14px}
}

/* 减少动态效果：关掉位移与缩放，保留透明度。短片：线稿层整块淡出 → 换到下一幕的终态 → 淡入（page-about.js 加 .is-swap），
   线稿里不再有过渡和眨眼；主句 / 眉题 / 片尾只淡入不升起。宣言不逐词点亮（JS 不拆词） */
@media (prefers-reduced-motion:reduce){
  body[data-page="about"] .ab-film.is-scaled{transform:none}
  body[data-page="about"] .ab-reel-art{transition:opacity .3s linear}
  body[data-page="about"] .ab-reel-art.is-swap{opacity:0}
  body[data-page="about"] .ab-reel-art *{transition:none!important;animation:none!important}
  body[data-page="about"] .ab-sk,body[data-page="about"] .ab-l>span,
  body[data-page="about"] .ab-end-word,body[data-page="about"] .ab-end-line,body[data-page="about"] .ab-end-url{transform:none!important}
  body[data-page="about"] .ab-end-mochii{transform:rotate(-7deg)!important}
  body[data-page="about"] .ab-mochii-eye{animation:none}
  /* 路线卡悬停不动；联系卡的 Mochii 停在它的静止角度 */
  body[data-page="about"] .ab-route:hover{transform:none}
  body[data-page="about"] .ab-contact-card:hover .ab-contact-mo,body[data-page="about"] .ab-contact-mo.is-happy{transform:rotate(8deg)}
  body[data-page="about"] .ab-stk-shuffle:hover{transform:none}
}