/* =========================================================
   PXID 中文官网 · 深色设计系统（双主题：data-theme="light" 可切浅色）
   基准 = MasterGo 设计稿「首页1黑色」逐屏 OCR 还原
   ========================================================= */
:root{
  /* 深色主题（默认 · 设计稿纯黑底） */
  --bg:#000000;
  --bg-2:#0a0a0a;
  --bg-3:#171717;
  --card:#151515;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.06);
  --text:#ffffff;
  --text-2:rgba(255,255,255,.72);
  --text-3:rgba(255,255,255,.45);
  --red:#e60012;
  --red-deep:#b0000e;
  --orange:#ff7a18;
  --nav-w:clamp(180px,13.06vw,502px);
  --hero-bg:#191d20;
  --maxw:1560px;
  --ff:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
[data-theme="light"]{
  --bg:#ffffff;
  --bg-2:#f4f4f4;
  --bg-3:#eeeeee;
  --card:#ffffff;
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.06);
  --text:#111111;
  --text-2:rgba(0,0,0,.72);
  --text-3:rgba(0,0,0,.45);
  --red:#e60012;
  --red-deep:#b0000e;
  --orange:#e26000;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.5;transition:background .3s,color .3s;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
button{font-family:var(--ff)}

/* ============ 左侧导航（黑底 · 红 logo 通栏 · 横排菜单 · 编号） ============ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--nav-w);
  background:#000;
  display:flex;flex-direction:column;align-items:center;
  padding:0 0 24px;z-index:100;
}
.sidebar .logo{
  width:100%;aspect-ratio:1.86/1;border-radius:0;flex:none;cursor:pointer;
  background:var(--red) url(../img/logo-white.png) no-repeat center/68% auto;
  text-indent:-9999px;overflow:hidden;
}
.sidebar .menu{display:flex;flex-direction:column;align-items:center;margin-top:clamp(40px,6vh,84px)}
.sidebar .menu li{display:flex;flex-direction:column;align-items:center}
.sidebar .menu li + li::before{content:"";width:18px;height:2px;background:rgba(255,255,255,.25);margin:12px 0}
.sidebar .menu li a{
  display:block;color:rgba(255,255,255,.42);font-size:clamp(13px,.78vw,30px);
  letter-spacing:3px;padding:2px 0;transition:.2s;white-space:nowrap;
}
.sidebar .menu li.active a,.sidebar .menu li a:hover{color:#fff;font-weight:600}
.sidebar .theme-btn{
  background:none;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.4);
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s;
  margin-top:auto;
}
.sidebar .theme-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* 轮播编号（侧栏内 · 01 大 · 02-05 斜杠小号） */
.sidebar .pager{
  margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:1px;
}
.sidebar .pager button{
  background:none;border:none;cursor:pointer;padding:3px 0;
  color:rgba(255,255,255,.35);font-size:clamp(11px,.72vw,28px);letter-spacing:1px;
  line-height:1.5;transition:.2s;font-family:inherit;
}
.sidebar .pager button::before{content:"/ ";opacity:.65}
.sidebar .pager button.on{
  color:#fff;font-size:clamp(18px,1.5vw,58px);font-weight:700;letter-spacing:2px;cursor:pointer;
}
.sidebar .pager button.on::before{content:""}
.sidebar .pager button:hover{color:#fff}

/* ============ 主区布局 ============ */
.main{margin-left:var(--nav-w)}
.wrap{margin:0;padding:0 clamp(24px,4vw,154px)}

/* 章节编号：红色大编号 + 白英文（01 / DESIGN LANGUAGE 风格） */
.sec-tag{
  display:inline-flex;align-items:baseline;gap:22px;margin-bottom:clamp(24px,4vh,48px);
}
.sec-tag .no{
  color:var(--red);font-size:clamp(44px,5.4vw,208px);font-weight:800;line-height:1;letter-spacing:2px;
}
.sec-tag .en{color:var(--text-2);font-size:clamp(13px,.9vw,35px);letter-spacing:5px;font-weight:600}
/* 小号变体（03/04 区） */
.sec-tag.sm{gap:12px;margin-bottom:clamp(16px,3vh,30px)}
.sec-tag.sm .no{font-size:clamp(15px,1vw,39px);letter-spacing:1px}
.sec-tag.sm .en{font-size:clamp(11px,.72vw,28px);letter-spacing:4px;color:var(--text-3)}

h1.big,h2.big{font-weight:800;line-height:1.12;letter-spacing:1px}
h2.sec-title{font-size:clamp(30px,3.6vw,139px);font-weight:800;letter-spacing:1px;line-height:1.18}

/* ============ HERO（静态首屏 · 68.6vh 炭灰底 · 左文右图） ============ */
/* ============ HERO（设计稿标注 1996.88×900 · 比例锁 2.22:1 · 左文右图） ============ */
.hero{
  position:relative;aspect-ratio:2.22/1;min-height:520px;overflow:hidden;background:var(--hero-bg);
  display:block;
  /* width:100% 必须有：aspect-ratio + min-height 一旦同时生效，Chrome 会用高度反推宽度
     （520×2.22≈1154px），把 761~1330px 视口撑出横向滚动条。给了确定宽度后比例只用来算高度。 */
  width:100%;
}
.hero .sl-txt{
  position:absolute;left:0;top:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  width:min(46%,700px);
  padding:0 clamp(20px,1.5vw,58px) 0 clamp(24px,6.5vw,250px);
}
.hero .sl-img{position:absolute;inset:0;z-index:0}
.hero .sl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .9s ease}
.hero .sl-txt h1{
  font-size:clamp(46px,6.1vw,235px);font-weight:700;line-height:1.14;
  letter-spacing:2px;color:#fff;white-space:nowrap;
}
.hero .sl-txt h1 .thin{font-weight:700}
.hero .sl-txt .hero-en{color:var(--red);font-size:clamp(20px,2vw,64px);font-weight:800;letter-spacing:3px;margin-bottom:clamp(8px,1.4vh,20px);line-height:1.1}
.hero .sl-txt p.desc{
  margin-top:clamp(22px,4.5vh,44px);max-width:36em;
  font-size:clamp(12px,.7vw,24px);line-height:1.95;color:rgba(255,255,255,.5);
}

/* 右下翻页箭头（静态装饰） */
.hero .hero-arrows{
  position:absolute;right:clamp(24px,3.4vw,131px);bottom:clamp(18px,4.5vh,44px);z-index:6;
  display:flex;gap:26px;
}
.hero .hero-arrows span{
  color:rgba(255,255,255,.5);
  font-size:clamp(20px,1.7vw,66px);line-height:1;
}

/* ============ HERO · C 方案：通栏大图 + 左浮层巨标 + 品牌红描边微光 ============ */
/* 多图淡入淡出 + Ken Burns 缓慢推近（切换时由 JS 重播） */
.hero .sl-img img.on{opacity:1;animation:heroKB 11s linear both}
@keyframes heroKB{from{transform:scale(1.02)}to{transform:scale(1.11)}}
/* 左侧暗角：压住文字底、保住右侧画面主体 */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,8,10,.84) 0%,rgba(8,8,10,.66) 24%,rgba(8,8,10,.28) 46%,rgba(8,8,10,.04) 66%,rgba(8,8,10,.26) 100%),
    linear-gradient(0deg,rgba(8,8,10,.38),transparent 42%);
}
/* 品牌红细描边 + 内微光（画框感） */
.hero::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  border:1px solid rgba(230,0,18,.50);
  box-shadow:inset 0 0 150px rgba(230,0,18,.13), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* 指示点（左下，与文左对齐） */
.hero .hero-dots{
  position:absolute;left:clamp(24px,6.5vw,250px);bottom:clamp(18px,4.5vh,44px);z-index:6;
  display:flex;gap:12px;align-items:center;
}
.hero .hero-dots button{
  width:34px;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.26);transition:background .35s,width .35s;
}
.hero .hero-dots button.on{background:var(--red);width:58px}
.hero .hero-dots button:hover{background:rgba(255,255,255,.55)}
/* 箭头可点击 */
.hero .hero-arrows span{cursor:pointer;transition:color .25s}
.hero .hero-arrows span:hover{color:#fff}

/* ============ 通栏大图标语区 ============ */
.band{position:relative;height:min(78vh,860px);overflow:hidden}
.band img,.band .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .ph{background:linear-gradient(135deg,#222,#3a3a3a);display:flex;align-items:center;justify-content:center;color:var(--text-3);letter-spacing:2px}

/* ============ section 通用（间距按设计稿收紧） ============ */
section.sec{padding:clamp(18px,2.4vw,93px) 0;position:relative}
.sec-inner{margin:0;padding:0 clamp(24px,4vw,154px)}

/* ============ 品质 品味 品牌（黑底白字大字带 · 一行三词） ============ */
section.qwb{padding:clamp(40px,4.3vw,166px) 0}
.words3{
  display:flex;align-items:center;justify-content:center;gap:clamp(36px,7vw,269px);
  flex-wrap:wrap;
}
.words3 .w{font-size:clamp(40px,5.5vw,212px);font-weight:700;letter-spacing:4px;color:#fff;white-space:nowrap;line-height:1.1}

/* ============ 01 DESIGN LANGUAGE（大图 + 标题叠加） ============ */
.dl-stage{position:relative}
.dl-stage .dl-img{display:block;margin-left:auto;width:74.7%;aspect-ratio:1.67/1;object-fit:cover}
.dl-stage .dl-title{
  position:absolute;left:0;bottom:12%;z-index:2;
  font-size:clamp(28px,2.6vw,100px);font-weight:700;letter-spacing:2px;
  color:#fff;line-height:1.25;white-space:nowrap;
}

/* ============ 02/CAPABILITIES：通栏图 + 文字叠加 ============ */
.cap-wrap{position:relative}
.cap-band{height:clamp(420px,40vw,1536px);overflow:hidden;position:relative}
.cap-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap-row{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,3vw,116px) clamp(24px,4vw,154px);display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,154px);background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 70%)}
.cap-row .sec-tag{margin-bottom:0}
.cap-row .bigline{font-size:clamp(44px,5.2vw,200px);font-weight:700;letter-spacing:3px;line-height:1.3;color:#fff;text-align:right}

/* ============ 六大核心设计能力（左列表 1fr / 右照片 3fr · 项两行结构） ============ */
.ability-head{display:flex;align-items:center;justify-content:flex-start;gap:clamp(20px,1.6vw,32px);margin-bottom:clamp(20px,3vh,36px);flex-wrap:wrap}
.ability-head .aside{max-width:460px;color:var(--text-2);font-size:clamp(12px,.8vw,31px);line-height:2}
.ability-grid{display:grid;grid-template-columns:1fr 3fr;gap:clamp(16px,1.8vw,70px);align-items:center}
.ability-item{
  display:grid;grid-template-columns:44px 1fr;align-items:center;gap:14px;
  padding:clamp(10px,1.8vh,20px) 4px;border-top:1px solid var(--line-2);
}
.ability-item:last-child{border-bottom:1px solid var(--line-2)}
.ability-item .no{font-size:13px;color:var(--red);font-weight:700}
.ability-item .t{display:flex;flex-direction:column;gap:6px}
.ability-item .cn{font-size:clamp(17px,1.2vw,47px);font-weight:600;letter-spacing:2px;color:#fff}
.ability-item .en{font-size:clamp(12px,.85vw,28px);color:var(--text-3);letter-spacing:3px}
.ability-item:hover .cn{color:var(--red)}
.ability-media{position:relative;overflow:hidden;aspect-ratio:1.56/1;background:#0e0e0e}
.ability-media .ab-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.ability-media .ab-slide.on{opacity:1;pointer-events:auto}
.ability-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 能力区轮播：slide 内多图叠放淡切 + 右下角图片序号 */
.ability-media .ab-slide img{opacity:0;transition:opacity .6s ease}
.ability-media .ab-slide img.on{opacity:1}
.ability-media .ab-ctrl{position:absolute;right:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.45);padding:3px 6px;border-radius:999px}
.ability-media .ab-idx{min-width:44px;text-align:center;font-size:13px;font-weight:600;letter-spacing:2px;color:#fff;font-variant-numeric:tabular-nums}
.ability-media .ab-btn{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:#fff;font-family:inherit;font-size:17px;line-height:1;width:26px;height:26px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s ease}
.ability-media .ab-btn:hover{background:rgba(255,255,255,.22)}
.ability-media .ab-btn:active{background:rgba(255,255,255,.32)}
.ab-cap{display:none}

/* ============ 四大产品系列 ============ */
.series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,47px)}
.series-card{border:1px solid var(--line-2);background:var(--bg-2);transition:.25s;overflow:hidden}
.series-card:hover{transform:translateY(-6px)}
.series-card .m{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:clamp(10px,.75vw,34px)}
.series-card .m img,.series-card .m .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.series-card .m .ph{display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:12px;letter-spacing:2px;background:linear-gradient(135deg,#232323,#313131)}
.series-card .b{padding:14px 16px 18px}
.series-card .b h3{font-size:18px;font-weight:700;letter-spacing:1px}
.series-card .b .en{font-size:11px;letter-spacing:3px;color:var(--red);margin-top:4px}
.series-card .b p{margin-top:10px;font-size:13px;color:var(--text-3);line-height:1.8}

/* ============ 品牌墙（左文 22% + 右砖石 logo 墙 · 深灰块） ============ */
.brand-wrap{display:grid;grid-template-columns:0.85fr 2.8fr;gap:clamp(24px,3.2vw,123px);align-items:start}
.brand-wrap .txt .sec-title{font-size:clamp(30px,3.2vw,123px);line-height:1.4;margin:6px 0 26px}
.brand-wrap .txt p{color:var(--text-2);font-size:clamp(12px,.8vw,31px);line-height:2.1;max-width:24em}
.brand-wall{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;
  border-top:1px solid var(--orange);border-left:1px solid var(--orange);
}
.brand-wall .b{
  background:#161616;min-height:clamp(96px,15vh,170px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:clamp(18px,1.7vw,66px);font-weight:700;letter-spacing:2px;
  border-right:1px solid var(--orange);border-bottom:1px solid var(--orange);
}
.brand-wall .b.wide{grid-column:span 2}
.brand-wall .b.tall{grid-row:span 2}
.brand-wall .b.mi{background:#1d1d1d;font-size:clamp(24px,2.4vw,93px);font-weight:800}
.brand-wall .b .lenovo{background:#fff;color:#111;padding:6px 18px;font-weight:800;letter-spacing:0}
.brand-wall .b.mm{font-family:Georgia,serif;font-weight:800;border:2px solid #fff;border-radius:50%;width:clamp(64px,6vw,231px);height:clamp(64px,6vw,231px);min-height:0;align-self:center;justify-self:center}

/* ============ 04 STATES 橙色数据条 ============ */
.stats{padding:clamp(22px,2.8vh,44px) 0 clamp(28px,4vh,56px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,116px)}
.stats .num{font-size:clamp(48px,4.5vw,173px);font-weight:800;color:var(--orange);line-height:1;letter-spacing:1px}
.stats .cn{margin-top:16px;font-size:clamp(13px,.9vw,35px);letter-spacing:2px;color:rgba(255,255,255,.85)}
.stats .en{margin-top:8px;font-size:11px;letter-spacing:3px;color:var(--text-3)}

/* ============ Footer ============ */
footer.site{border-top:1px solid var(--line-2);padding:clamp(50px,7vw,269px) 0 40px}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
footer.site h4{font-size:14px;margin-bottom:20px;letter-spacing:2px}
footer.site .fl{color:var(--text-3);font-size:14px;line-height:2.2;cursor:pointer}
footer.site .fl div:hover{color:var(--text)}
footer.site .brand-line{display:flex;align-items:center;gap:14px;margin-bottom:18px}
footer.site .brand-line .b{width:44px;height:44px;border-radius:6px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
footer.site .desc{color:var(--text-3);font-size:14px;line-height:2;max-width:340px}
footer.site .copy{margin-top:50px;color:var(--text-3);font-size:12px;letter-spacing:1px;border-top:1px solid var(--line-2);padding-top:26px}

/* ============ 占位图（换素材前的标记） ============ */
.ph{position:relative;overflow:hidden}
.ph::before{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:2px;color:var(--text-3);text-align:center;padding:0 12px;
}

/* ============ 内页公共（作品/新闻/关于） ============ */
.inner-hero{position:relative;height:min(82vh,900px);overflow:hidden;display:flex;align-items:flex-end}
.inner-hero .bg{position:absolute;inset:0}
.inner-hero .bg img,.inner-hero .bg .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inner-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.18),rgba(10,10,10,.72))}
.inner-hero .inner{position:relative;z-index:2;padding-bottom:clamp(40px,7vw,269px)}
.inner-hero h1{font-size:clamp(40px,5.6vw,216px);font-weight:800;letter-spacing:1px;line-height:1.08}
.inner-hero h1 .thin{font-weight:300}

/* 作品系列区块 */
.proj{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(30px,5vw,192px);align-items:center;padding:clamp(60px,8vw,308px) 0;border-top:1px solid var(--line-2)}
.proj .info h3{font-size:clamp(24px,2.6vw,100px);font-weight:800;letter-spacing:1px}
.proj .info .en{display:block;font-size:12px;letter-spacing:4px;color:var(--red);margin-top:8px}
.proj .info p{margin-top:18px;color:var(--text-2);line-height:2;font-size:15px}
.proj .info .more{
  margin-top:28px;display:inline-flex;gap:10px;align-items:center;
  border-bottom:1px solid var(--red);padding-bottom:8px;font-size:14px;letter-spacing:2px;transition:.2s;
}
.proj .info .more:hover{color:var(--red)}
.proj .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.proj .gallery .g1{grid-column:1/-1}
.proj .gallery .cell{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--bg-2)}
.proj .gallery .cell img,.proj .gallery .cell .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj .gallery .cell .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:13px;letter-spacing:1px}

/* 新闻中心 */
.news-filter{display:flex;gap:clamp(22px,3vw,116px);align-items:center;border-bottom:1px solid var(--line-2);padding-bottom:22px;margin-bottom:20px;flex-wrap:wrap}
.news-filter button{background:none;border:none;color:var(--text-3);font-size:16px;letter-spacing:1px;cursor:pointer;padding:4px 0;position:relative;transition:.2s}
.news-filter button.on{color:var(--text);font-weight:700}
.news-filter button.on::after{content:"";position:absolute;left:0;right:0;bottom:-23px;height:2px;background:var(--red)}
.news-row{display:grid;grid-template-columns:1.05fr 1fr;gap:0;border-bottom:1px solid var(--line-2)}
.news-row .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.news-row .thumb img,.news-row .thumb .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-row .info{padding:clamp(26px,4vw,154px);display:flex;flex-direction:column;justify-content:center}
.news-row .info .meta{display:flex;gap:16px;align-items:center;color:var(--text-3);font-size:13px;letter-spacing:1px;margin-bottom:14px}
.news-row .info .meta .cat{color:var(--red)}
.news-row .info h3{font-size:clamp(22px,2.2vw,85px);font-weight:700;line-height:1.4;letter-spacing:1px}
.news-row .info .more{
  margin-top:24px;display:inline-flex;gap:10px;align-items:center;width:max-content;
  border-bottom:1px solid var(--red);padding-bottom:8px;font-size:13px;letter-spacing:2px;transition:.2s;
}
.news-row .info .more:hover{color:var(--red)}

/* 关于 */
.ab-tagline{font-size:clamp(22px,2.4vw,93px);font-weight:600;line-height:1.5;margin-bottom:26px;letter-spacing:1px}
.ab-par p{color:var(--text-2);line-height:2.2;font-size:15px;margin:16px 0}
.timeline{display:grid;grid-template-columns:auto 1fr;gap:0 26px;margin-top:10px}
.timeline .yr{font-weight:800;font-size:clamp(22px,2.4vw,93px);color:var(--red);padding:18px 22px 18px 0;border-right:1px solid var(--line);letter-spacing:1px;white-space:nowrap}
.timeline .ev{padding:18px 0 18px 26px;border-bottom:1px solid var(--line-2);min-height:86px;display:flex;flex-direction:column;justify-content:center}
.timeline .ev h4{font-size:17px;font-weight:700;margin-bottom:6px}
.timeline .ev p{font-size:14px;color:var(--text-3);line-height:1.8;max-width:640px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,5vw,192px);align-items:start}
.contact-grid .row{padding:20px 0;border-bottom:1px solid var(--line-2)}
.contact-grid .row .k{font-size:12px;letter-spacing:3px;color:var(--text-3);margin-bottom:6px}
.contact-grid .row .v{font-size:16px}
.contact-grid .mapbox{position:relative;min-height:420px;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden}

/* ============ 响应式 ============ */
@media(max-width:1200px){
  .series-grid{grid-template-columns:repeat(2,1fr)}
  .ability-grid{grid-template-columns:1fr}
  .brand-wrap{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr}
  .proj{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .news-row{grid-template-columns:1fr}
  .news-row .thumb{aspect-ratio:16/9}
}
@media(max-width:760px){
  :root{--nav-w:64px}
  .sidebar .menu li a{font-size:11px;letter-spacing:1px}
  .sidebar .pager{display:none}
  /* 移动端：左列导航 → 顶部通栏（logo 左 · 菜单均分 · 无主题钮） */
  .sidebar{
    top:0;left:0;right:0;bottom:auto;width:100%;height:52px;
    flex-direction:row;align-items:center;gap:10px;
    padding:env(safe-area-inset-top) 16px 0;
  }
  .sidebar .logo{
    /* 加宽的是红色底板：logo 位图按原始比例 4.28:1 锁 20px 高（≈86px 宽），完整不裁不变形 */
    width:118px;height:36px;aspect-ratio:auto;flex:none;
    padding:0;border-radius:5px;
    background:var(--red) url(../img/logo-white.png) no-repeat center/auto 20px;
  }
  .sidebar .menu{flex:1;flex-direction:row;align-items:center;justify-content:space-evenly;margin-top:0;gap:0}
  .sidebar .menu li + li::before{display:none}
  .sidebar .menu li a{position:relative;font-size:14px;letter-spacing:2px;color:rgba(255,255,255,.55);padding:4px 2px}
  .sidebar .menu li.active a{color:#fff;font-weight:600}
  .sidebar .menu li.active a::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-3px;width:18px;height:2px;background:var(--red)}
  .sidebar .pager{display:none}
  .sidebar .theme-btn{display:none}
  .main{margin-left:0;padding-top:calc(52px + env(safe-area-inset-top))}
  .site-footer{margin-left:0}
  .series-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats .cell:nth-child(2){border-right:none}
  .stats .cell:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .hero{height:auto;min-height:480px;grid-template-columns:1fr}
  .hero .sl-txt{padding:44px 22px 56px}
  /* .sl-img / .hero-dots 的显隐统一由文末 S9 段控制（这里不再 display:none，避免两处打架） */
  .hero::before{display:none}
  .words3 .w{font-size:36px;letter-spacing:3px}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .brand-wall{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:1fr}
  .timeline .yr{border-right:none;padding-bottom:6px}
  .timeline .ev{padding-left:0}
}

/* ============ 作品页（Hero + 四大系列） ============ */
.w-hero{
  position:relative;height:clamp(430px,46.9vw,900px);overflow:hidden;
  display:flex;align-items:flex-start;justify-content:flex-end;
}
.w-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.w-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.30) 45%,rgba(0,0,0,.62) 100%)}
/* 设计稿：标题块 960×320 右置（右距 80/1920，顶部约 hero 高 35%）；两行行高 134/133 */
.w-hero-inner{
  position:relative;z-index:2;
  margin:clamp(96px,16.3vw,313px) clamp(20px,4.17vw,80px) 0 0;
  display:flex;flex-direction:column;align-items:flex-end;
}
.w-hero-inner h1{
  font-size:clamp(32px,4.17vw,80px);font-weight:800;line-height:1.67;letter-spacing:2px;
  color:#fff;text-align:right;margin:0;
  text-shadow:0 2px 28px rgba(0,0,0,.4);
}
/* 奖项徽章条：960×74，8 枚真徽章，与标题块右缘对齐 */
.w-hero-awards{display:flex;align-items:center;justify-content:flex-end;gap:clamp(16px,3.1vw,60px);margin-top:clamp(26px,3.2vw,62px)}
.w-hero-awards img{height:clamp(28px,3.85vw,74px);width:auto;display:block}
/* 分类区块：浅灰底 + 白卡 + 上排3图/下排4图（全宽 4 列网格）
   overflow:hidden：全宽后末列图在 rv-img 进场 scale(1.04) 期间会伸出视口 → 裁掉防横向滚动 */
.w-sec{background:#ededed;padding:clamp(16px,1.7vw,33px) 0;overflow:hidden}
.w-wrap{
  width:100%;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.55vw,11px);
}
.w-card{
  background:#fff;padding:clamp(18px,2.3vw,44px) clamp(16px,1.9vw,36px);
  display:flex;flex-direction:column;
}
.w-card h2{font-size:clamp(22px,2.05vw,39px);font-weight:800;letter-spacing:1px;margin:0;color:#111}
.w-card .en{display:block;font-size:clamp(11px,.95vw,18px);font-weight:600;color:#9a9a9a;letter-spacing:2px;margin-top:10px}
.w-card p{margin:auto 0 14px;padding-top:26px;color:#777;font-size:clamp(12px,.83vw,16px);line-height:1.85}
.w-card .more{color:#333;font-size:clamp(12px,.83vw,16px);letter-spacing:1px;text-decoration:none;transition:.2s}
.w-card .more:hover{color:var(--red)}
.w-wrap figure{margin:0;overflow:hidden;background:#dcdcdc;aspect-ratio:1.9/1;min-width:0}
.w-wrap figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.w-wrap figure:hover img{transform:scale(1.04)}
@media(max-width:900px){
  .w-hero{height:auto;min-height:420px}
  .w-hero-inner{margin:72px 20px 64px 0}
  .w-hero-awards{flex-wrap:wrap;justify-content:flex-end;gap:14px;max-width:420px}
  .w-wrap{grid-template-columns:1fr 1fr;width:92%}
  .w-card{grid-column:1/-1}
  .w-wrap figure{aspect-ratio:16/10}
}

/* ============ 新闻中心 ============ */
/* 标注稿：标题顶距 97、标题块 144×40；tabs 301×20、距分隔线右端 100；两侧留白 85 */
.n-head{
  padding:clamp(36px,5.05vw,97px) clamp(24px,4.43vw,85px) clamp(20px,2.6vw,50px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.n-head h1{font-size:clamp(22px,1.57vw,30px);line-height:clamp(30px,2.08vw,40px);font-weight:700;letter-spacing:6px;margin:0}
.n-tabs{display:flex;gap:clamp(16px,2.86vw,55px);margin-right:clamp(0px,.78vw,15px)}
.n-tabs button{
  background:none;border:none;cursor:pointer;color:var(--text-3);
  font-size:clamp(13px,.73vw,14px);letter-spacing:2px;padding:4px 2px;transition:.2s;
}
.n-tabs button.on,.n-tabs button:hover{color:var(--text)}
.n-tabs button.on{position:relative}
.n-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red)}
/* ============ 新闻中心（2026-09-23 坤哥改版：首屏 = 大横条 + 4 小方框 + 右下「了解更多」，一屏不滚动；
   点「了解更多」原位切全部新闻方块列表，不新开页） ============ */
/* 视图由 body[data-view] 控制（news-overlay.js 写入）；无 JS 时两块都显示，列表兜底可见 */
body[data-view="front"] .n-list{display:none}
body[data-view="front"] .n-backbar{display:none}
body[data-view="all"] .n-front{display:none}

/* ---- 首屏视图 ---- */
.n-front{
  display:flex;flex-direction:column;gap:clamp(12px,1.4vw,22px);
  padding:0 clamp(24px,3vw,48px) clamp(14px,1.6vw,28px);
}
.n-hero{
  position:relative;display:grid;overflow:hidden;text-decoration:none;
  height:clamp(260px,38vh,440px);background:#161616;
  /* 固定行高：否则竖版封面会把这一格撑高，标题被挤出可视区 */
  grid-template-rows:100%;
}
.n-hero img{grid-area:1/1;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.n-hero:hover img{transform:scale(1.03)}
.n-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.2) 35%,rgba(0,0,0,.6) 100%)}
.n-hero .body{
  grid-area:1/1;z-index:2;align-self:center;justify-self:center;
  display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:0 clamp(20px,2.4vw,52px);
}
.n-hero .body::before{content:"";display:block;width:clamp(26px,2.2vw,52px);height:3px;background:var(--red);margin-bottom:clamp(12px,1.1vw,26px)}
.n-hero .meta{display:flex;gap:16px;align-items:center;margin-bottom:clamp(10px,1vw,22px)}
.n-hero .date{font-size:13px;color:rgba(255,255,255,.74);letter-spacing:1px}
.n-hero .cat{font-size:12px;color:#fff;border:1px solid rgba(255,255,255,.58);padding:2px 10px;letter-spacing:2px}
.n-hero h2{font-size:clamp(19px,1.55vw,28px);font-weight:600;letter-spacing:1.5px;line-height:1.45;color:#fff;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.45);white-space:nowrap}
.n-hero .more{margin-top:clamp(14px,1.3vw,28px);font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:5px;transition:.2s}
.n-hero:hover .more{color:#fff;border-color:var(--red)}

.n-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px)}
.n-cell{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;text-decoration:none;background:#161616}
.n-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.n-cell:hover img{transform:scale(1.05)}
.n-cell::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06) 40%,rgba(0,0,0,.68) 100%)}
.n-cell .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(10px,1.2vw,18px);color:#fff}
.n-cell .cap .meta{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.n-cell .cap .date{font-size:12px;color:rgba(255,255,255,.78);letter-spacing:1px}
.n-cell .cap .cat{font-size:11px;color:#fff;border:1px solid rgba(255,255,255,.55);padding:1px 8px;letter-spacing:2px}
.n-cell .cap h3{font-size:clamp(14px,1.05vw,18px);font-weight:600;line-height:1.5;letter-spacing:.5px;margin:0;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.n-morebar{display:flex;justify-content:flex-end}
.n-more,.n-back{
  font:inherit;font-size:13px;letter-spacing:3px;color:var(--text);
  background:none;border:1px solid var(--line);padding:11px 30px;cursor:pointer;transition:.25s;
}
.n-more{font-size:15px;font-weight:700;letter-spacing:4px;padding:13px 36px}
.n-more:hover,.n-back:hover{border-color:var(--red);color:var(--red)}

/* ---- 全部列表视图（小方块） ---- */
.n-backbar{display:flex;justify-content:flex-end;padding:0 clamp(24px,3vw,48px) 10px}
.n-list{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,22px);align-items:start;
  padding:0 clamp(24px,3vw,48px) clamp(16px,2vw,32px);
}
.n-row{position:relative;display:grid;grid-template-columns:1fr;aspect-ratio:1/1;text-decoration:none;background:#161616}
.n-row .thumb{grid-area:1/1;position:relative;overflow:hidden;background:#161616}
.n-row .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.n-row:hover .thumb img{transform:scale(1.05)}
.n-row .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.06) 40%,rgba(0,0,0,.68) 100%)}
.n-row .body{
  grid-area:1/1;z-index:2;align-self:end;justify-self:stretch;width:auto;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0;
  padding:clamp(10px,1.2vw,18px);
}
.n-row .meta{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.n-row .date{font-size:12px;color:rgba(255,255,255,.78);letter-spacing:1px}
.n-row .cat{font-size:11px;color:#fff;border:1px solid rgba(255,255,255,.55);padding:1px 8px;letter-spacing:2px}
.n-row h2{
  font-size:clamp(14px,1.05vw,18px);font-weight:600;letter-spacing:.5px;line-height:1.5;
  color:#fff;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.n-row .more{display:none}

/* ============ 新闻详情 ============ */
.d-hero{height:60vh;min-height:420px;overflow:hidden}
.d-hero{width:90%;margin-inline:auto}
.d-hero img{width:100%;height:100%;object-fit:cover}
/* 黑底头图（历史做法：低分辨率黑底图用 contain 融进纯黑背景避免模糊）。
   坤哥 09-12 反馈「两边黑边、窄窄的」→ 改为 cover 铺满；配图已换成 1600×534 宽幅图，不会再糊 */
.d-hero-dark{background:#0a0a0a;display:flex;align-items:center;justify-content:center}
.d-hero-dark img{object-fit:cover}
.d-body{width:90%;max-width:none;margin:0 auto;padding:clamp(44px,6vw,231px) 0 clamp(70px,9vw,346px)}
.d-body .meta{display:flex;gap:16px;align-items:center;margin-bottom:22px}
.d-body .date{font-size:13px;color:var(--text-3)}
.d-body .cat{font-size:12px;color:var(--red);border:1px solid var(--red);padding:2px 10px;letter-spacing:2px}
.d-body h1{font-size:clamp(26px,2.6vw,100px);font-weight:700;line-height:1.5;letter-spacing:1px;margin-bottom:34px}
.d-body p{color:var(--text-2);font-size:clamp(14px,1vw,39px);line-height:2.15;margin-bottom:26px}
.d-body figure{margin:36px 0}
.d-body figure img{width:100%;display:block}
.d-nav{margin-top:50px}
.d-nav .back{color:var(--text-2);font-size:14px;letter-spacing:2px;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:6px;transition:.2s}
.d-nav .back:hover{color:var(--red);border-color:var(--red)}
@media(max-width:760px){
  .n-hero{height:auto;aspect-ratio:4/3}
  .n-hero h2{white-space:normal;font-size:18px}
  .n-grid,.n-list{grid-template-columns:repeat(2,1fr);gap:12px}
  .n-cell .cap h3,.n-row h2{font-size:14px}
  .n-head h1{font-size:22px;letter-spacing:3px}
  .n-back{padding:10px 22px;font-size:12px}
  .n-more{padding:11px 26px;font-size:14px}
}

/* ============ 关于我们页（浅色主题） ============ */
/* 2026-09-24 坤哥：hero 太矮（旧规则 min(44vw,620px) 在 1440 只给 620、1920 也被 620 卡住）。
   改为按视频原生 16:9 定高（1920×1080 素材零裁切），再用 88vh 兜住超宽屏、340px 兜住小屏。
   width:100% 必须有：aspect-ratio 与 min-height 同时生效时 Chrome 会用高度反推宽度（同 .hero 的坑）。 */
.ab-hero{position:relative;aspect-ratio:16/9;max-height:88vh;min-height:340px;width:100%;overflow:hidden;background:var(--bg-2)}
.ab-hero img,.ab-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.ab-hero video{object-position:center;background:var(--bg-2)}

.ab-section{padding:clamp(30px,4vw,154px) 0;background:var(--bg)}
.ab-section + .ab-section{border-top:1px solid var(--line)}
.ab-section .sec-title{font-size:clamp(32px,3.6vw,139px);margin:6px 0 22px;color:var(--text)}
.ab-info .sec-title{margin-top:0}
.ab-section .sec-tag .no{color:var(--red)}
.ab-section .sec-tag .en{color:var(--text-3)}

/* 设计稿 05：区块头「红横线 + 01 / ABOUT PXID」 */
.ab-section .sec-tag.sm::before{content:"";width:clamp(28px,2.5vw,48px);height:3px;background:var(--red);align-self:center;margin-right:6px}

.ab-lead{max-width:clamp(640px,66vw,1270px)}
.ab-lead > p:first-child{font-size:clamp(15px,1.05vw,20px);font-weight:600;color:var(--text);line-height:1.9;margin-bottom:18px}
.ab-lead p{color:var(--text-2);font-size:clamp(14px,.99vw,19px);line-height:2.1;margin-bottom:14px}

/* 大事记 */
/* 设计稿 05：紧凑年份时间轴——竖线+节点贯穿，激活年展开描述，右图 5/3 */
/* 2026-09-23 坤哥：年份只留年份、框宽=「大事记」标题字宽（3 字 × clamp(28px,3.4vw,128px) + 3×1px 字距），
   左列收窄后右图自动放大（1fr 吃掉余量） */
.ab-timeline{display:grid;grid-template-columns:calc(clamp(28px,3.4vw,128px)*3 + 3px) 1fr;gap:clamp(24px,3vw,116px);align-items:stretch}
/* 时间轴：未激活灰色 ›+小字年份；激活项=红底白字小块（2026-09-24 坤哥三点：去红框 / 块宽紧贴年份文字
   +左右各约一个数字宽边距 / 红底白字），切换全程过渡动画 */
.tl-col{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:0;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.tl-col::-webkit-scrollbar{display:none}
.tl-item{
  position:relative;cursor:pointer;width:fit-content;align-self:flex-start;
  padding:6px 12px 6px 32px;border-radius:12px;
  transition:background .45s ease,border-color .45s ease,padding .45s ease,color .35s ease;
}
.tl-item::before{
  content:"›";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:15px;line-height:1;color:#c4c4c4;transition:color .35s,opacity .35s;
}
/* 激活态「几何」三效果共用（切换时不跳动）：块宽=年份文字宽，左右各留约一个数字宽（实测 12.7px ≈ 一个数字宽 12.5px）；
   1px 边框常驻、效果 1/3 用透明色，所以切换只改「边框色 / 底色 / 文字色」三个变量 */
.tl-item.on{
  padding:8px clamp(12px,.88vw,17px);border:1px solid var(--red);
  background:var(--red);
}
.tl-item.on::before{opacity:0;color:#fff}
.tl-item .yr{
  font-size:14px;color:var(--text-3);letter-spacing:1px;line-height:1.6;display:inline-block;
  transition:font-size .4s cubic-bezier(.4,0,.2,1),color .35s,font-weight .35s;
}
.tl-item.on .yr{font-size:clamp(19px,1.45vw,28px);font-weight:700;color:#fff}
@media (prefers-reduced-motion: reduce){
  .tl-item,.tl-item .yr{transition:none}
}
/* width:100% 必须有：本元素在 .ab-timeline（align-items:stretch）里做网格项，
   高度被拉伸成确定值后，aspect-ratio 会反过来算宽度（如 447×5/3≈745px），
   而第二列轨道只有 ~468px → 整页横向溢出（1024/1280 视口实测 docW 1245/1345）。
   给了确定宽度后，比例只用于「单列时」定高，双列时由 stretch 决定高度。 */
.tl-img{position:relative;overflow:hidden;aspect-ratio:5/3;background:var(--bg-2);width:100%}
/* 右图随年份联动切换：淡入 + 微缩放 */
.tl-img .yr-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.045);
  transition:opacity .55s ease,transform .9s cubic-bezier(.25,.6,.3,1);
}
.tl-img .yr-img.show{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .tl-img .yr-img{transition:opacity .2s;transform:none}
}
.sec-head{display:flex;align-items:center;gap:clamp(18px,2vw,40px);flex-wrap:wrap;margin:6px 0 22px}
.sec-head .sec-title{margin:0}
.tl-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:8px;z-index:3}
.tl-dot{position:relative;width:30px;height:30px;border:0;background:rgba(0,0,0,.28);border-radius:50%;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);transition:background .3s}
.tl-dot:hover{background:rgba(0,0,0,.45)}
.tl-dot svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.tl-dot .ring-bg{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.tl-dot .ring{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:57;stroke-dashoffset:57}
.tl-dot span{font-size:11px;color:#fff;line-height:1;font-family:inherit}
.tl-dot.on span{font-weight:700}
.tl-dot.on .ring.run{animation:tlRing 4s linear forwards}
@keyframes tlRing{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .tl-dot.on .ring.run{animation:none;stroke-dashoffset:0}
}

/* 联系方式 */
.ab-contact{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,3vw,116px);align-items:stretch}
.ab-info{display:flex;flex-direction:column;justify-content:flex-start}
.ab-info h4{font-size:clamp(18px,1.1vw,43px);font-weight:700;margin-bottom:18px;letter-spacing:1px;color:var(--text)}
.ab-info .row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.ab-info .row .k{font-size:12px;letter-spacing:2px;color:var(--text-3);min-width:5em}
.ab-info .row .v{font-size:clamp(14px,.95vw,37px);color:var(--text)}
.ab-map{position:relative;overflow:hidden;background:var(--bg-2);height:100%}
.ab-map #tmap{width:100%;height:100%}
.ab-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============ 全站页脚（黑底极简条） ============ */
.site-footer{margin-left:var(--nav-w);margin-top:auto;background:#0d0d0d;color:rgba(255,255,255,.72)}
/* 联系页内容短：页脚贴视口底，避免页脚下露白 */
.site-footer .sf-inner{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:clamp(18px,1.8vw,34px) clamp(24px,4.43vw,85px);
}
.site-footer .sf-l,.site-footer .sf-r span{font-size:clamp(12px,.73vw,14px);letter-spacing:1px}
.site-footer .sf-r{display:flex;gap:clamp(14px,1.8vw,34px);flex-wrap:wrap}
.site-footer .icp{color:rgba(255,255,255,.4)}

@media(max-width:1000px){
  .ab-timeline,.ab-contact{grid-template-columns:1fr}
  /* .ab-hero 高度交给 16:9 + max-height 统一处理，不再用 42vw 压矮 */
}
@media(max-width:760px){
  .ab-hero{height:56vw;min-height:220px}
  .tl-img{aspect-ratio:16/10}
  /* 大事记移动端：竖排稀疏列表改横排年份 chip（wrap 两行），激活红底白字，图片随下方 */
  .tl-col{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:9px 7px;height:auto;overflow:visible;margin:0 0 20px}
  .tl-item{padding:4px 10px 4px 24px;border:1px solid transparent;border-radius:10px}
  .tl-item::before{left:7px;font-size:14px}
  .tl-item .yr{font-size:13px;line-height:1.4}
  .tl-item.on{padding:5px 14px;border-radius:10px}
  .tl-item.on .yr{font-size:17px}
}

/* =========================================================
   首页2「白加黑」专属（index-light.html · data-theme="light"）
   上段白底黑字 + 品牌墙/数据条强制黑底（.dark-keep）
   ========================================================= */

/* 红线小标签（01 / DESIGN LANGUAGE 风格） */
.tag-line{display:flex;align-items:center;gap:16px;margin-bottom:clamp(18px,3vh,34px)}
.tag-line i{width:44px;height:3px;background:var(--red);flex:none}
.tag-line span{font-size:clamp(11px,.78vw,30px);font-weight:700;letter-spacing:3px;color:var(--text)}

/* 01 头部：左大标题 + 右双栏小字 */
/* 01 区（S3 设计稿）：整幅素材铺底（白区+溢出人物+照片 1.514:1），文字绝对叠加白区 */
.dl2-stage{
  position:relative;aspect-ratio:1620/1070;overflow:hidden;background:#fff;
  margin-left:0;margin-right:0;
}
.dl2-stage .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl2-stage .tag-line{position:absolute;left:0;top:7.5%;margin:0;z-index:2}
.dl2-stage h2{
  position:absolute;left:0;top:14.5%;z-index:2;
  font-size:clamp(30px,3.1vw,120px);font-weight:800;letter-spacing:1px;line-height:1.15;
  color:#111;white-space:nowrap;
}
/* 01 区描述文字已烘焙进 dl01-rider-full.jpg（绕人物轮廓断行），无需 HTML 叠加 */

/* 03 BRAND（白加黑版）：黑卡容器 = 左文 + 5x3 bento logo 墙 + 数据条（黑卡左右缘对齐栅格线） */
[data-theme="light"] .brands{padding-top:clamp(12px,1.13vw,44px);padding-bottom:clamp(20px,2.2vw,86px)}
[data-theme="light"] .brands .sec-inner{
  background:#060606;border-radius:clamp(12px,1vw,38px);
  margin:0 clamp(24px,4vw,154px);
  padding:clamp(28px,3vw,116px) clamp(24px,3.6vw,138px) clamp(28px,3vw,116px) 0;
}
[data-theme="light"] .brands .brand-wrap{display:grid;grid-template-columns:minmax(0,1fr) 64%;gap:clamp(20px,2.6vw,100px);align-items:center}
[data-theme="light"] .brands .txt .tag-line.o{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,.9vw,35px);color:#e60012}
[data-theme="light"] .brands .txt .tag-line.o i{width:clamp(30px,3vw,116px);height:3px;background:#e60012}
[data-theme="light"] .brands .txt .sec-title{color:#fff;margin:clamp(10px,1.3vw,50px) 0 clamp(12px,1.4vw,55px)}
[data-theme="light"] .brands .txt p{color:#9a9a9a;font-size:clamp(11px,.83vw,32px);line-height:2.05;max-width:23em}
[data-theme="light"] .brands .txt .deco{
  margin-top:clamp(26px,3.4vw,132px);width:clamp(80px,9.5vw,365px);height:clamp(44px,5vw,192px);
  background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.4px);background-size:clamp(10px,1.15vw,44px) clamp(10px,1.15vw,44px);
  position:relative;
}
[data-theme="light"] .brands .txt .deco::before{content:"";position:absolute;left:0;top:calc(-1 * clamp(14px,1.6vw,62px));width:clamp(36px,3.8vw,146px);height:3px;background:#e60012}
[data-theme="light"] .brands .bento{
  --bg1:clamp(10px,1.1vw,42px);
  display:grid;gap:var(--bg1);aspect-ratio:5/2.9;
  grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);
  grid-template-areas:
    "yadea yadea sunra sunra mi"
    "lenovo lenovo huawei aima mi"
    "bugatti bugatti costco costco costco";
  position:relative;
}
/* 方案一：背光跟线走——细线为光源，辉光层与线同速滑行，线到哪里哪里晕开 */
[data-theme="light"] .brands .bento .b{
  position:relative;z-index:1;
  background:#0d0d0d;border:1px solid rgba(255,255,255,.07);
  border-radius:clamp(6px,.5vw,20px);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,140,60,.1);
}
[data-theme="light"] .brands .bento .a-mi,
[data-theme="light"] .brands .bento .a-lenovo,
[data-theme="light"] .brands .bento .a-bugatti{
  border-color:rgba(230,0,18,.30);
}
/* 方案二点睛（改）：光团沿缝隙滑行——beam 覆盖缝隙，穿过块被遮住，只在缝里露出 */
[data-theme="light"] .brands .bento .beam{
  position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat;
  animation:beamBreath 9s ease-in-out infinite;
}
[data-theme="light"] .brands .bento .bm-h1{
  left:0;width:100%;top:calc((100% - 2*var(--bg1))/3);height:var(--bg1);
  background-image:linear-gradient(90deg,transparent,rgba(230,0,18,.95) 50%,transparent),linear-gradient(90deg,transparent,rgba(230,0,18,.38) 50%,transparent);
  background-size:34% clamp(2px,.13vw,5px),34% clamp(12px,1.15vw,44px);
  animation:beamX 9s linear infinite,beamBreath 9s ease-in-out infinite;
}
[data-theme="light"] .brands .bento .bm-h2{
  left:0;width:100%;top:calc(2*(100% - 2*var(--bg1))/3 + var(--bg1));height:var(--bg1);
  background-image:linear-gradient(90deg,transparent,rgba(230,0,18,.85) 50%,transparent),linear-gradient(90deg,transparent,rgba(230,0,18,.32) 50%,transparent);
  background-size:30% clamp(2px,.13vw,5px),30% clamp(12px,1.15vw,44px);
  animation:beamXR 12s linear infinite,beamBreath 9s ease-in-out infinite;
}
[data-theme="light"] .brands .bento .bm-v1{
  left:calc(2*(100% - 4*var(--bg1))/5 + var(--bg1));top:0;height:100%;width:var(--bg1);
  background-image:linear-gradient(180deg,transparent,rgba(230,0,18,.85) 50%,transparent),linear-gradient(180deg,transparent,rgba(230,0,18,.32) 50%,transparent);
  background-size:clamp(2px,.13vw,5px) 30%,clamp(12px,1.15vw,44px) 30%;
  animation:beamY 11s linear infinite,beamBreath 9s ease-in-out infinite;
}
[data-theme="light"] .brands .bento .bm-v2{
  left:calc(4*(100% - 4*var(--bg1))/5 + 3*var(--bg1));top:0;
  height:calc(2*(100% - 2*var(--bg1))/3 + var(--bg1));width:var(--bg1);
  background-image:linear-gradient(180deg,transparent,rgba(230,0,18,.9) 50%,transparent),linear-gradient(180deg,transparent,rgba(230,0,18,.35) 50%,transparent);
  background-size:clamp(2px,.13vw,5px) 36%,clamp(12px,1.15vw,44px) 36%;
  animation:beamYR 8s linear infinite,beamBreath 9s ease-in-out infinite;
}
[data-theme="light"] .brands .bento .bm-v3{
  left:calc(3*(100% - 4*var(--bg1))/5 + 2*var(--bg1));
  top:calc((100% - 2*var(--bg1))/3 + var(--bg1));
  height:calc((100% - 2*var(--bg1))/3);width:var(--bg1);
  background-image:linear-gradient(180deg,transparent,rgba(230,0,18,.8) 50%,transparent),linear-gradient(180deg,transparent,rgba(230,0,18,.3) 50%,transparent);
  background-size:clamp(2px,.13vw,5px) 42%,clamp(12px,1.15vw,44px) 42%;
  animation:beamY 14s linear infinite,beamBreath 9s ease-in-out infinite;
}
@keyframes beamX{from{background-position:-36% center,-36% center}to{background-position:136% center,136% center}}
@keyframes beamXR{from{background-position:130% center,130% center}to{background-position:-30% center,-30% center}}
@keyframes beamY{from{background-position:center -36%,center -36%}to{background-position:center 136%,center 136%}}
@keyframes beamYR{from{background-position:center 130%,center 130%}to{background-position:center -30%,center -30%}}
@keyframes beamBreath{0%,100%{opacity:.72}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  [data-theme="light"] .brands .bento .beam{display:none}
}
/* 静态细节：黑卡左上/右下角点阵装饰（还原设计稿） */
[data-theme="light"] .brands .sec-inner{position:relative}
[data-theme="light"] .brands .sec-inner::before,
[data-theme="light"] .brands .sec-inner::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(38px,3.6vw,138px);height:clamp(24px,2.2vw,84px);
  background-image:radial-gradient(rgba(230,0,18,.50) 1px, transparent 1.4px);
  background-size:clamp(8px,.75vw,29px) clamp(8px,.75vw,29px);
}
[data-theme="light"] .brands .sec-inner::before{left:clamp(12px,1.4vw,54px);top:clamp(12px,1.4vw,54px)}
[data-theme="light"] .brands .sec-inner::after{right:clamp(12px,1.4vw,54px);bottom:clamp(12px,1.4vw,54px)}
[data-theme="light"] .brands .bento .b img{max-width:58%;max-height:42%;width:auto;height:auto}
[data-theme="light"] .brands .bento .a-yadea{grid-area:yadea}
[data-theme="light"] .brands .bento .a-sunra{grid-area:sunra}
[data-theme="light"] .brands .bento .a-sunra img{max-width:56%;max-height:38%}
[data-theme="light"] .brands .bento .a-mi{grid-area:mi}
[data-theme="light"] .brands .bento .a-mi img{max-width:46%;max-height:40%}
[data-theme="light"] .brands .bento .a-lenovo{grid-area:lenovo}
[data-theme="light"] .brands .bento .a-lenovo img{max-width:62%;max-height:42%}
[data-theme="light"] .brands .bento .a-huawei{grid-area:huawei}
[data-theme="light"] .brands .bento .a-huawei img{max-width:50%;max-height:56%}
[data-theme="light"] .brands .bento .a-aima{grid-area:aima}
[data-theme="light"] .brands .bento .a-aima img{max-width:52%;max-height:52%}
[data-theme="light"] .brands .bento .a-bugatti{grid-area:bugatti}
[data-theme="light"] .brands .bento .a-bugatti img{max-width:52%;max-height:54%}
[data-theme="light"] .brands .bento .a-costco{grid-area:costco}
[data-theme="light"] .brands .bento .a-costco img{width:31%}
[data-theme="light"] .brands .stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(28px,3.2vw,123px);padding-top:clamp(22px,2.4vw,92px);
  border-top:1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .brands .stats-strip .cell{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.1vw,42px);border-left:1px solid rgba(255,255,255,.12)}
[data-theme="light"] .brands .stats-strip .cell:first-child{border-left:none}
[data-theme="light"] .brands .stats-strip .num{color:#e60012;font-weight:800;font-size:clamp(28px,3vw,116px);line-height:1;letter-spacing:1px}
[data-theme="light"] .brands .stats-strip .num i{font-style:normal;font-size:.55em;vertical-align:.5em;margin-left:.06em}
[data-theme="light"] .brands .stats-strip .t b{display:block;color:#fff;font-size:clamp(12px,.9vw,35px);font-weight:600;letter-spacing:1px}
[data-theme="light"] .brands .stats-strip .t span{display:block;color:#7a7a7a;font-size:clamp(9px,.55vw,21px);letter-spacing:2px;margin-top:clamp(4px,.5vw,19px)}

/* 02 能力时间轴（浅色 · 灰竖线+圆点，01 红色高亮） */
.abil-tl{position:relative;margin-top:clamp(10px,2vh,24px)}
.abil-tl::before{content:"";position:absolute;left:max(4px,calc(.3vw - .5px));top:var(--tl-line-top,18px);bottom:auto;height:var(--tl-line-h,calc(100% - 36px));width:1px;background:rgba(0,0,0,.14)}
.abil-tl .it{position:relative;cursor:pointer;padding:clamp(8.4px,1.33vh,14px) 0 clamp(8.4px,1.33vh,14px) clamp(24px,2.2vw,85px)}
.abil-tl .it::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.35);z-index:2}
.abil-tl .it .hd{display:flex;align-items:baseline;gap:12px}
.abil-tl .it .no{font-size:clamp(14px,1vw,39px);font-weight:800;color:rgba(0,0,0,.35)}
.abil-tl .it .cn{font-size:clamp(16px,1.15vw,45px);font-weight:700;letter-spacing:2px;color:rgba(0,0,0,.42)}
.abil-tl .it .en{display:block;margin-top:6px;font-size:10px;letter-spacing:3px;color:rgba(0,0,0,.35)}
.abil-tl .it .no,.abil-tl .it .cn{transition:color .3s ease}
/* 激活项：圆点变红（标题变黑已有），替代原红点+红线指示器 */
.abil-tl .it.on::before{background:var(--red);border-color:var(--red)}
.abil-tl .it.on .no,.abil-tl .it.on .cn{color:#111}

/* 浅色首页覆盖：品质品味品牌黑字、产品卡无边框+红短线 */
/* 浅色首页覆盖：品质品味品牌白底黑字（标注 812×160）、产品卡无边框+红短线 */
[data-theme="light"] .qwb{padding:clamp(56px,7.84vw,301.28px) 0 clamp(44px,4.8vw,185px)}
[data-theme="light"] #deslang{padding-top:0}
[data-theme="light"] .words3{gap:clamp(20px,2.4vw,93px)}
[data-theme="light"] .words3 .w{color:#111;font-size:clamp(40px,5.3vw,204px);line-height:1.15;letter-spacing:2px}
[data-theme="light"] .stats-grid .cell + .cell{border-left:1px solid rgba(255,255,255,.14);padding-left:clamp(20px,3vw,116px)}
[data-theme="light"] .series-card{border:none;background:transparent}
[data-theme="light"] .series-card:hover{transform:none}
/* S3.5 03/PRODUCTS 标注：卡片图 348x380、gap 20、图底到标题 38、标题 30px、红线 180 */
[data-theme="light"] .series-grid{gap:clamp(8px,.87vw,34px)}
[data-theme="light"] .series-card .m{aspect-ratio:348/380}
[data-theme="light"] .series-card .b{padding:clamp(14px,1.654vw,64px) 0 0}
[data-theme="light"] .series-card .b h3{font-size:clamp(15px,1.306vw,50px);letter-spacing:1px}
[data-theme="light"] .series-card .b h3::after{content:"";display:block;width:clamp(60px,7.84vw,301px);height:3px;background:var(--red);margin-top:clamp(6px,.44vw,17px)}
[data-theme="light"] .series-card .b p{margin-top:clamp(8px,.44vw,17px);font-size:clamp(11px,.7vw,27px);color:#9a9a9a}

/* 强制黑底区块（品牌墙 + 数据条）：区块内变量重置回深色 */
.dark-keep{
  --bg:#000;--bg-2:#0a0a0a;--bg-3:#171717;--card:#151515;
  --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.06);
  --text:#fff;--text-2:rgba(255,255,255,.72);--text-3:rgba(255,255,255,.45);
  --orange:#ff7a18;
  background:#000;color:#fff;
}
.dark-keep .brand-wrap{grid-template-columns:0.95fr 2.6fr}
.dark-keep .brand-wrap .txt .sec-title{font-size:clamp(26px,2.4vw,93px)}
@media(max-width:1000px){
  .dl2-stage{margin-left:0;margin-right:0}
  .dl2-stage h2{white-space:normal;font-size:clamp(26px,4.4vw,169px)}
  .dl2-stage .aside{position:static;columns:2;margin:14px 4.2% 0}
  .ability-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .dl2-stage .aside{columns:1}
}

/* =========================================================
   S4 六大核心设计能力（白加黑版 · 按设计稿标注精修）
   标题720×80 · 简介512×48距右110 · 图1060×678圆角 · 项170×40距45
   ========================================================= */
[data-theme="light"] .ability-head{align-items:flex-end;gap:3vw;margin-bottom:clamp(20px,2.8vw,124px);flex-wrap:nowrap}
[data-theme="light"] .ability-head .sec-title{font-size:clamp(30px,3.48vw,160px);line-height:1.1;letter-spacing:2px}
[data-theme="light"] .ability-head .aside{max-width:22.3vw;font-size:clamp(11px,.7vw,32px);line-height:1.9;margin-right:.7vw;padding-bottom:.3vw}
[data-theme="light"] .ability-grid{grid-template-columns:minmax(0,1fr) 76.8%;gap:0;align-items:stretch;padding-right:0}
/* 左列时间轴：01-06 间距缩30%(82→57.4px@1920, 2.99vw 等比)并相对右图垂直居中 */
@media(min-width:761px){
  [data-theme="light"] .abil-tl{display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,2.99vw,70px);margin-top:0}
}
[data-theme="light"] .ability-media{aspect-ratio:1060/678;border-radius:clamp(10px,.75vw,34px);overflow:hidden}
[data-theme="light"] .ability-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-theme="light"] .abil-tl .it{padding:0 0 0 clamp(26px,2.3vw,102px)}
[data-theme="light"] .abil-tl .it::before{width:clamp(10px,.6vw,26px);height:clamp(10px,.6vw,26px);border:1px solid rgba(0,0,0,.35);top:clamp(11px,.9vw,35px)}
[data-theme=\"light\"] .abil-tl .it.on::before{background:var(--red);border-color:var(--red)}
[data-theme="light"] .abil-tl .it .hd{gap:clamp(10px,.9vw,40px)}
[data-theme="light"] .abil-tl .it .no{font-size:clamp(14px,1.2vw,56px)}
[data-theme="light"] .abil-tl .it .cn{font-size:clamp(15px,1.2vw,56px);letter-spacing:3px}
[data-theme="light"] .abil-tl .it .en{margin-top:clamp(4px,.35vw,16px);font-size:clamp(9px,.5vw,24px);letter-spacing:1.5px;color:rgba(0,0,0,.32)}

/* =========================================================
   S6 手机端适配（≤760px）
   根因：桌面样式大量使用 [data-theme="light"] .xxx 高特异性选择器（0,3,0~0,5,0），
   而既有 @media 断点仅用裸类（.brand-wrap/.ability-grid/.stats，0,1,0），
   特异性不敌被压过 → 手机端仍按桌面布局渲染（品牌/能力左右挤压、统计 4 列）。
   另有类名不匹配：CSS 写 .stats/.brand-wall，HTML 用 .stats-strip/.bento。
   本段以同等特异性选择器在本文件末尾覆盖，确保生效。
   ========================================================= */
@media (max-width:760px){

  /* ---------- 通用留白 ---------- */
  .sec-inner,.wrap{padding-left:20px;padding-right:20px}
  section.sec{padding:clamp(26px,6.5vw,52px) 0}
  /* 页脚左偏移修正：基础规则 .site-footer{margin-left:var(--nav-w)} 在源码更靠后，
     同特异性会覆盖早段媒体查询里的 margin-left:0 → 页脚左侧留出 64px 白条
     （导航左栏时代被黑条盖住，挪顶部后暴露）。此处再置 0 才真正生效。 */
  .site-footer{margin-left:0}

  /* ---------- HERO：解除 aspect-ratio 比例锁 ----------
     .hero{aspect-ratio:2.22/1} 在手机端 min-height:480px 下会被 Chrome 用高度反推宽度
     → 宽 480×2.22≈1066px，撑爆文档（docWidth 1130）并裁切文案。此处解除并改为自适应高度。 */
  .hero{aspect-ratio:auto;width:100%;max-width:100%;min-height:0;height:auto;padding:0;position:relative}
  /* 桌面那圈品牌红细描边（.hero::after，做「画框感」）在手机上会变成一个几百 px 高的红框 → 关掉 */
  .hero::after{display:none}
  /* 文字覆盖在图片上：整图铺满 hero，文字绝对定位沉底，渐变底色提对比（不加描边/阴影特效） */
  .hero .sl-img{
    display:block;position:relative;inset:auto;z-index:0;
    margin:0;width:100%;aspect-ratio:4/5;
    border-radius:0;overflow:hidden;background:#101010;
  }
  .hero .sl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .hero::before{
    display:block;position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(10,11,16,.10) 0%,rgba(10,11,16,.04) 34%,rgba(10,11,16,.88) 100%);
  }
  .hero .sl-txt{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    width:100%;max-width:100%;height:auto;padding:0 20px 42px;justify-content:flex-end;
  }
  .hero .sl-txt h1{white-space:normal;font-size:clamp(24px,6.6vw,30px);line-height:1.25;letter-spacing:.5px}
  .hero .sl-txt .hero-en{font-size:12px;letter-spacing:2px;margin-bottom:8px}
  .hero .sl-txt p.desc{margin-top:10px;max-width:none;font-size:12px;line-height:1.75;color:rgba(255,255,255,.82)}
  .hero .hero-arrows{display:none}
  /* 指示点叠加在图底部（文案区之上） */
  .hero .hero-dots{position:absolute;left:20px;bottom:16px;z-index:3;display:flex;margin:0;left:20px;bottom:16px;gap:8px}
  .hero .hero-dots button{width:22px;height:2px}
  .hero .hero-dots button.on{width:38px}

  /* ---------- 01 DESIGN LANGUAGE：文字脱离叠图 ----------
     桌面为「整幅合成图铺底 + 标题绝对叠加于图上白区」；手机端图高仅 ~215px，
     白区被压缩后标题与图内烘焙文字、人物相互重叠。改为文字与图上下分离，互不遮挡。 */
  .dl2-stage{aspect-ratio:auto;height:auto;overflow:visible;display:flex;flex-direction:column}
  .dl2-stage .bg{position:static;width:100%;height:auto;order:2}
  .dl2-stage .tag-line{position:static;order:1;margin:0 0 10px}
  .dl2-stage h2{position:static;order:1;margin:0 0 18px;font-size:clamp(24px,7vw,32px);white-space:normal;line-height:1.3}

  /* ---------- 02 六大核心设计能力：时间轴 → 两列能力矩阵 ----------
     桌面为「左时间轴清单 + 右大图」等高并排；手机端独占整屏后，
     时间轴的"先后"隐喻、以及为对齐右图高度而撑开的间距都失去依据。
     改为：配图作视觉锚点（描述下方）+ 2×3 能力矩阵（细线网格、去圆点/竖线/重复英文）。 */
  [data-theme="light"] .ability-head{flex-direction:column;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:22px}
  [data-theme="light"] .ability-head .aside{max-width:none;margin-right:0;padding-bottom:0;font-size:12.5px;line-height:1.95}
  [data-theme="light"] .ability-grid{grid-template-columns:1fr;gap:0}
  [data-theme="light"] .ability-media{order:-1;aspect-ratio:16/10;border-radius:12px;margin:0 0 22px}
  /* 能力矩阵：独立小卡（浅渐变+圆角+品牌红左条）+ 空心大编号，贴合站点「细线 + 红点缀」语言 */
  .abil-tl{margin-top:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .abil-tl::before{display:none}
  [data-theme="light"] .abil-tl .it{
    position:relative;overflow:hidden;padding:15px 14px 16px;
    background:linear-gradient(158deg,#fbfbfb,#f2f2f2);
    border:1px solid rgba(0,0,0,.07);border-left:3px solid rgba(0,0,0,.12);border-radius:10px;
  }
  [data-theme="light"] .abil-tl .it::before{display:none}
  [data-theme="light"] .abil-tl .it .hd{flex-direction:column;align-items:flex-start;gap:5px}
  [data-theme="light"] .abil-tl .it .no{font-size:24px;font-weight:800;line-height:1;letter-spacing:.01em;color:rgba(0,0,0,.22)}
  [data-theme="light"] .abil-tl .it .cn{font-size:15px;font-weight:700;letter-spacing:1px;color:#111}
  [data-theme="light"] .abil-tl .it .en{display:none}
  [data-theme="light"] .abil-tl .it.on{background:linear-gradient(158deg,rgba(229,32,32,.07),rgba(229,32,32,.02));border-left-color:var(--red)}
  [data-theme="light"] .abil-tl .it.on .no{color:var(--red)}
  /* 支持描边时：编号改空心，激活项转品牌红描边 */
  @supports (-webkit-text-stroke:1px #000){
    [data-theme="light"] .abil-tl .it .no{color:transparent;-webkit-text-stroke:1.1px rgba(0,0,0,.34)}
    [data-theme="light"] .abil-tl .it.on .no{color:transparent;-webkit-text-stroke-color:var(--red)}
  }

  /* ---------- 03 四大产品系列：单列 → 横向滑动轮播（scroll-snap，零 JS 依赖） ---------- */
  [data-theme="light"] .series-grid{
    display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:2px 20px 16px;margin:0 -20px;scrollbar-width:none;
  }
  [data-theme="light"] .series-grid::-webkit-scrollbar{display:none}
  [data-theme="light"] .series-grid > .series-card{flex:0 0 78%;scroll-snap-align:center}
  [data-theme="light"] .series-card .b h3{font-size:19px}
  [data-theme="light"] .series-card .b p{font-size:12px}
  /* 产品卡移动端：序号/名称/描述压到图上（显隐与定位在 pv-css 内联块，pv-toc 目录条同处隐藏），
     渐变底提对比（不加描边/阴影特效），与能力区 ab-cap 同一语言 */
  .series-card{position:relative}
  .series-card .b{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:42px 16px 14px;border-radius:0 0 12px 12px;
    background:linear-gradient(0deg,rgba(0,0,0,.80),rgba(0,0,0,.30) 62%,rgba(0,0,0,0));
  }
  .series-card .b .pv-no{display:block;font-size:13px;font-weight:700;letter-spacing:1px;color:#ff2231;line-height:1;margin-bottom:6px}
  [data-theme="light"] .series-card .b h3{color:#fff;letter-spacing:1px}
  [data-theme="light"] .series-card .b h3::after{margin-top:7px}
  [data-theme="light"] .series-card .b p{color:rgba(255,255,255,.85)}

  /* ---------- 04 品牌墙：左右 → 上下；bento 5×3 → 2 列；数据条 4 → 2 列 ---------- */
  [data-theme="light"] .brands .sec-inner{margin:0 12px;border-radius:16px;padding:30px 20px}
  [data-theme="light"] .brands .brand-wrap{grid-template-columns:1fr;gap:26px;align-items:start}
  [data-theme="light"] .brands .txt .sec-title{font-size:clamp(26px,7.2vw,32px);margin:14px 0 16px}
  [data-theme="light"] .brands .txt p{font-size:12px;line-height:1.95;max-width:none}
  [data-theme="light"] .brands .txt .deco{display:none}
  [data-theme="light"] .brands .bento{
    aspect-ratio:auto;grid-template-columns:repeat(2,1fr);
    grid-template-rows:none;grid-template-areas:none;gap:10px;
  }
  [data-theme="light"] .brands .bento .b{grid-area:auto;min-height:74px}
  [data-theme="light"] .brands .bento .beam{display:none}
  [data-theme="light"] .brands .bento .a-costco img{width:60%;max-width:60%;max-height:48%}
  [data-theme="light"] .brands .bento .a-bugatti img{max-width:62%;max-height:52%}
  [data-theme="light"] .brands .stats-strip{grid-template-columns:repeat(2,1fr);gap:24px 0;margin-top:36px;padding-top:28px}
  [data-theme="light"] .brands .stats-strip .cell{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;border-left:none}
  [data-theme="light"] .brands .stats-strip .cell:nth-child(even){border-left:1px solid rgba(255,255,255,.12);padding-left:16px}
}

/* =========================================================
   S7 全站入场动效（B 标准档 · 滚动双向 reveal）
   机制：main.js 给目标元素动态加 .rv（初始隐藏态），进入视口加 .in 播放；
        完全滚出视口上方时移除 .in，再次进入重播。
   安全兜底：无 JS / prefers-reduced-motion → 不加 .rv → 内容默认可见。
   参数由 JS 按视口宽度下发：--rv-y 位移 / --rv-t 时长 / --rv-d 阶梯延迟。
   ========================================================= */
.rv{
  opacity:0;
  transform:translateY(var(--rv-y,28px));
  transition:opacity var(--rv-t,.8s) cubic-bezier(.22,.61,.25,1),
             transform var(--rv-t,.8s) cubic-bezier(.22,.61,.25,1);
  transition-delay:var(--rv-d,0ms);
}
.rv-img{transform:translateY(var(--rv-y,28px)) scale(1.04)}
.rv.in{opacity:1;transform:translateY(0)}
.rv-img.in{transform:translateY(0) scale(1)}
@media (prefers-reduced-motion: reduce){
  .rv,.rv-img{opacity:1 !important;transform:none !important;transition:none !important}
}

/* =========================================================
   S8 · 03 PRODUCTS 车型图集遮罩（sg = series gallery）
   左大图 + 右侧两张（下 1 / 下 2）+ 底部缩略条
   ========================================================= */
.series-card:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* z-index 必须高于固定左栏导航（.sidebar z-index:100），否则遮罩被导航压住 */
/* 浅色网格版式：左上文字卡 + 全部图集平铺三列网格 */
.sg{position:fixed;inset:0;z-index:120;display:none;overflow-y:auto;overscroll-behavior:contain}
.sg.open{display:block}
.sg-backdrop{position:fixed;inset:0;background:rgba(244,244,245,.98);opacity:0;transition:opacity .35s ease}
.sg.open .sg-backdrop{opacity:1}
.sg-panel{
  position:relative;z-index:1;width:min(1280px,100%);margin:0 auto;
  padding:clamp(18px,2.4vw,40px) clamp(14px,2.6vw,40px) clamp(28px,4vw,64px);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.sg.open .sg-panel{opacity:1;transform:none}
.sg-topbar{display:flex;justify-content:flex-end;margin-bottom:clamp(10px,1.2vw,18px)}
.sg-close{
  flex:0 0 auto;width:44px;height:44px;border:1px solid rgba(0,0,0,.22);border-radius:50%;
  background:transparent;color:#111;font:26px/1 Arial;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s;
}
.sg-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.sg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,.8vw,12px)}
.sg-info{
  background:#fff;padding:clamp(22px,2.4vw,36px) clamp(18px,2vw,30px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.sg-name{margin:0;font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:1px;color:#111}
.sg-en{margin-top:9px;font-size:12px;font-weight:600;letter-spacing:3px;color:#9a9a9a;text-transform:uppercase}
.sg-desc{margin:clamp(16px,1.8vw,28px) 0 0;font-size:13px;line-height:1.95;color:#555}
.sg-more{
  margin-top:auto;padding:clamp(16px,1.8vw,26px) 0 2px;font-size:13px;letter-spacing:1px;
  color:#111;text-decoration:none;border-bottom:1px solid #111;
  transition:color .25s ease,border-color .25s ease;
}
.sg-more:hover{color:var(--red);border-color:var(--red)}
.sg-tile{position:relative;overflow:hidden;background:#e9e9ea;aspect-ratio:16/10}
.sg-tile img{width:100%;height:100%;object-fit:cover;display:block}
.sg-tile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 10px;text-align:center;
  font-size:11px;letter-spacing:1.5px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0));
}

@media(max-width:900px){
  .sg-grid{grid-template-columns:1fr 1fr}
  .sg-info{grid-column:1/-1}
}
@media(max-width:560px){
  .sg-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .sg-panel,.sg-backdrop{transition:none !important}
  .sg-panel{opacity:1;transform:none}
}

/* =========================================================
   S9 · 02 能力区 移动端：6 项文字压到各自图上 + 图片横向手动滑动
   （桌面端保持「左文字列表 + 右大图点击切换」不变）
   ========================================================= */
@media(max-width:760px){
  .abil-tl{display:none}
  [data-theme="light"] .ability-media,.ability-media{
    display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    aspect-ratio:auto;border-radius:0;margin:0 0 2px;padding-bottom:6px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .ability-media::-webkit-scrollbar{display:none}
  .ability-media .ab-slide{
    position:relative;inset:auto;opacity:1;flex:0 0 86%;scroll-snap-align:start;
    aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#101010;
  }
  .ability-media .ab-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ab-cap{
    display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:16px 16px 15px;
    background:linear-gradient(0deg,rgba(0,0,0,.80),rgba(0,0,0,.30) 62%,rgba(0,0,0,0));
  }
  .ab-cap .ab-no{display:block;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--red)}
  .ab-cap .ab-cn{display:block;margin-top:5px;font-size:17px;font-weight:700;letter-spacing:1.5px;color:#fff}
  .ab-cap .ab-en{display:block;margin-top:4px;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.68)}
  .ability-media .ab-ctrl{right:12px;bottom:12px;padding:2px 4px}
  .ability-media .ab-idx{font-size:11px;min-width:36px;letter-spacing:1px}
  .ability-media .ab-btn{width:28px;height:28px;font-size:18px}
}

/* =========================================================
   B 方案 · 红色上位（2026-09-12）
   目标：把品牌红从「零星点缀」提到「结构层」——区块眉题 / 导航当前页 /
        数据数字 / 阅读全文 / 卡片 hover 都吃红。
   ⚠️ 区块主标题下的红细线已撤（坤哥：两个红线太复杂了）；线条只保留眉题前那一根短的。
   用色规则（关键）：白底用品牌红 #e60012；黑底（.dark-keep、侧栏、压在图上的正文）
        用亮红 #ff2231 —— #e60012 在纯黑上会发闷。
   --accent 随主题走，.dark-keep 内强制回亮红。
   ========================================================= */
:root{ --accent:#ff2231 }
[data-theme="light"]{ --accent:#e60012 }
.dark-keep{ --accent:#ff2231 }

/* 1 · 区块眉题：编号短横线 + 文字全部吃红 */
.tag-line i{background:var(--accent)}
.tag-line span{color:var(--accent)}
[data-theme="light"] .brands .txt .tag-line.o span{color:#ff2231}

/* 2 · ~~区块主标题下加一道红细线~~ —— 已撤（坤哥：两个红线太复杂了）
   参照 BDA 站（Better Design Award）的区块标题排布：那里一条装饰线都没有，
   层级全靠 字号/颜色/字重 拉开。这里只做「把眉题和标题收紧成一个组」——原文
   .tag-line 的 margin-bottom 是 clamp(18px,3vh,34px)，两块文字散着；参考图里
   英文标题和中文小标是紧贴成组的。顺带把眉题字号略提（.78vw → .95vw）当"标签"用。 */
.sec .tag-line{margin-bottom:clamp(8px,.8vw,22px)}
.sec .tag-line span{font-size:clamp(12px,.95vw,36px)}

/* 3 · 左侧导航：当前页吃红（侧栏恒黑底 → 亮红） */
.sidebar .menu li.active a{color:#ff2231;font-weight:600}
.sidebar .menu li a:hover{color:#fff}

/* 4 · 04 BRAND 数据数字：黑底用亮红（需压过 S6 的 [data-theme="light"] 同名规则） */
.brands .stats-strip .num,
[data-theme="light"] .brands .stats-strip .num{color:#ff2231}

/* 5 · 新闻列表「阅读全文」：文字压在图上 + 右侧暗角 → 亮红 */
.n-row .more{color:#ff2231;border-bottom-color:rgba(255,34,49,.55)}
.n-row:hover .more{color:#fff;border-color:#ff2231}

/* 6 · 卡片 hover 描边（浅色下卡片无边框 → 只在图上加内描边，避免与相邻卡片 8px 缝打架） */
.series-card:hover{border-color:rgba(230,0,18,.5)}
[data-theme="light"] .series-card:hover .m{outline:2px solid rgba(230,0,18,.6);outline-offset:-2px}
.w-card{transition:box-shadow .25s ease}
.w-card:hover{box-shadow:inset 0 3px 0 #e60012}

/* =========================================================
   S11 · 作品页「空洞」修复（2026-09-12，坤哥：怎么出现空档了）
   原因：>900px 时 .w-wrap 是 4 列网格、每行 4 格，第 1 行是「文字卡 + 图 + 图 + 图」。
        卡片高约 223px，而图片按 aspect-ratio:1.9/1 只有约 155px →
        第 1 行右边两张图下面空出约 62px 灰洞（第 2 行只有 155px 高）。
        ⚠️ 这是**既有问题**（用基线 CSS 渲染对比，行高完全一致），不是后来改坏的。
   修法：grid-auto-rows:1fr 让两行等高（容器高度不定时 fr 行会一起拉到最高那行），
        再让 figure 撑满行高 → 6 个格子齐平，图从 1.9:1 变成约 1.32:1（多裁两侧一点）。
   ⚠️ 只在 >900px 生效：≤900px 时卡片自己占一整行（.w-card{grid-column:1/-1}），
      网格是「卡 1 行 + 图 3 行」，不需要也不该等高，否则卡片下面会多出一块白。
   ========================================================= */
/* 大屏（>1180px）：4 列网格，两行等高 → 全部格子齐平，空洞消失。
   1180 是算出来的下限：视口 ≥1180 时 列宽/卡高 ≥ 1.27（图片比例才不至于被压成近方形）。 */
@media(min-width:1181px){
  .w-wrap{grid-auto-rows:1fr}
  /* aspect-ratio 必须一起关掉：figure 高度被 height:100% 变确定后，
     aspect-ratio:1.9 会反过来算宽度（226×1.9≈429px），把网格轨道撑宽 → 整页横向溢出。
     关掉后宽度由 stretch 决定，裁切交给 img 的 object-fit:cover。 */
  .w-wrap figure{height:100%;aspect-ratio:auto}
}
/* 中窄屏（≤1180px）：4 列太挤 —— 卡片会被压成「近方形高」，图片再被拉成 0.91~1.04:1。
   改用「卡片独占一行 + 图片两列」，与 ≤900px 的手机/平板排法统一，图片回到 16:10。 */
@media(max-width:1180px){
  .w-wrap{grid-template-columns:1fr 1fr;width:92%;grid-auto-rows:auto}
  .w-card{grid-column:1/-1}
  .w-wrap figure{aspect-ratio:16/10;height:auto}
}

/* =========================================================
   S12 · 关于页标题（2026-09-12 定稿为「B 中间版」）
   坤哥先要「英文放大、中文缩小（照 BDA 参考图）」，做完后问「前后那种好？」
   → 三版对照（factory-pick/cmp-ABC.jpg）后选 B：
     · A 前：中文大事记（大黑）+ 英文灰小字 —— 信息最清楚，但英文太弱、没用上
     · C 现在：英文 MEMORABILIA（大红）+ 中文小灰 —— 最"国际"，但正文全中文而标题是英文，
              中英不对位、中文信息被压成小注（且 MEMORABILIA 对中文读者偏生僻）
     · B 定稿：中文保持大标题（信息效率），英文眉题放到它上方一行、红色、加粗、紧贴
   结论：中文站里中文必须是主层；英文那行靠"颜色 + 位置"拿存在感，不靠抢字号。
   ========================================================= */
.ab-section .sec-tag.sm{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(10px,.9vw,22px);
  margin-bottom:clamp(8px,.8vh,18px);
}
.ab-section .sec-tag.sm .en{
  font-size:clamp(13px,1.1vw,42px);
  font-weight:700;letter-spacing:3px;
  color:var(--accent);
}
.ab-section .sec-tag.sm .no{font-size:clamp(14px,.95vw,36px);letter-spacing:1px}
.ab-section .sec-title{
  font-size:clamp(28px,3.4vw,128px);
  font-weight:800;letter-spacing:1px;line-height:1.16;
  color:var(--text);
  margin:0 0 clamp(14px,1.6vh,30px);
}

/* =========================================================
   S13 · 作品页「作品图集」遮罩（2026-09-14）
   坤哥要求：点 works.html 的任意作品图 → 当前页弹出图集；
   风格参考首页车型图集，但**布局改成 B 版：左大图 + 右侧竖排缩略图列**。
   素材：assets/img/wgallery/<01..04>/<nn>.jpg（1600x1067 = 3:2，从原片裁切）
   01 滑板车 / 02 自行车 / 03 摩托车 / 04 其它（专业应用车型）
   ⚠️ z-index 必须 > .sidebar(100) 与 .sg(120)
   ========================================================= */
.wg{position:fixed;inset:0;z-index:140;display:none;overflow-y:auto;overscroll-behavior:contain}
.wg.open{display:block}
.wg-backdrop{position:fixed;inset:0;z-index:0;background:rgba(8,8,10,.98);opacity:0;transition:opacity .38s ease}
.wg.open .wg-backdrop{opacity:1}
.wg-panel{
  position:relative;z-index:1;width:min(92%,1500px);margin:0 auto;
  padding:clamp(18px,2.6vh,36px) 0 clamp(22px,3.2vh,46px);
  opacity:0;transform:translateY(12px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1);
}
.wg.open .wg-panel{opacity:1;transform:none}

.wg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(12px,1.4vw,22px)}
.wg-kicker{font-size:12px;letter-spacing:5px;color:var(--red);font-weight:700}
.wg-name{font-size:clamp(20px,1.7vw,36px);font-weight:800;color:#fff;letter-spacing:1px;margin-top:7px}
.wg-count{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.45);margin-top:7px}
.wg-close{
  flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;
  font-size:20px;line-height:1;transition:.22s;
}
.wg-close:hover{background:var(--red);border-color:var(--red)}

/* 布局 B：左大图 + 右竖排缩略图列。
   .wg-thumbwrap 是网格项、内容绝对定位 → 它自身不贡献高度，
   行高只由大图决定，缩略列再 stretch 到同样高度并内部滚动。 */
/* 大图列宽用「高度上限」反推：66vh x 1.5。否则视口越宽大图越扁
   （max-height 卡住高度、宽度继续涨 → 1600 下变成 2:1，白裁掉 1/3 画面）。
   轨道总宽小于容器时整体居中。 */
.wg-stage{
  display:grid;justify-content:center;
  grid-template-columns:minmax(0,calc(66vh * 1.5)) clamp(132px,12.5vw,216px);
  gap:clamp(10px,.9vw,18px);
}
.wg-big{
  position:relative;width:100%;aspect-ratio:3/2;max-height:66vh;
  overflow:hidden;border-radius:12px;background:#101010;
}
.wg-big img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .55s ease;
}
.wg-big img.on{opacity:1}
.wg-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 18px;
  font-size:13px;letter-spacing:1.5px;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.74),rgba(0,0,0,0));
}
.wg-thumbwrap{position:relative;min-height:0;min-width:0}
/* ⚠️ min-width:0 必须给：手机端 .wg-thumbs 改 static 后，它的内容宽度（10 张 x 97px ≈ 1047px）
   会成为网格项的最小宽度，把整列撑开 → 大图跟着变成 1047px 宽、整块飞出屏幕。*/
.wg-thumbwrap{overflow:hidden}
.wg-thumbs{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:clamp(6px,.55vw,10px);padding-right:5px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent;
}
.wg-thumbs::-webkit-scrollbar{width:5px}
.wg-thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px}
.wg-thumbs button{
  position:relative;flex:none;width:100%;aspect-ratio:3/2;overflow:hidden;padding:0;
  border:1px solid transparent;border-radius:8px;background:#101010;cursor:pointer;
  opacity:.42;transition:opacity .3s ease,border-color .3s ease;
}
.wg-thumbs button.on{opacity:1;border-color:var(--red)}
.wg-thumbs button:hover{opacity:.8}
.wg-thumbs button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wg-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* 作品图可点击的提示 */
.w-wrap figure{cursor:pointer}
.w-wrap figure:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* 手机 / 窄屏：大图在上，缩略图横滑在下 */
@media(max-width:860px){
  .wg-stage{grid-template-columns:1fr;justify-content:stretch}
  .wg-big{aspect-ratio:16/10;max-height:none}
  .wg-thumbwrap{min-height:0}
  .wg-thumbs{
    position:static;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:0 0 4px;gap:8px;
  }
  .wg-thumbs button{width:clamp(84px,25vw,128px)}
  .wg-close{width:34px;height:34px}
  .wg-head{align-items:center}
}


/* S14 · 手机、折叠屏：明确网格宽度，避免高度通过 aspect-ratio 反推宽度。 */
[data-theme="light"] .ability-media{width:100%;min-width:0}
@media(min-width:761px) and (max-width:1180px){
  [data-theme="light"] .ability-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  [data-theme="light"] .abil-tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px;min-width:0}
  [data-theme="light"] .abil-tl::before{display:none}
  [data-theme="light"] .abil-tl .it{padding-left:22px;min-width:0}
  [data-theme="light"] .abil-tl .it .cn{letter-spacing:1px}
  [data-theme="light"] .abil-tl .it .en{overflow-wrap:anywhere}
  [data-theme="light"] .ability-media{align-self:start}
  [data-theme="light"] .ability-head{align-items:flex-start;flex-wrap:wrap}
  [data-theme="light"] .ability-head .aside{max-width:100%;margin:0}
}
/* 点击范围与可见的细指示线分开，保留原来的视觉。 */
@media(max-width:1180px),(pointer:coarse){
  .hero .hero-dots{gap:6px}
  .hero .hero-dots button,.hero .hero-dots button.on{position:relative;width:44px;height:44px;background:transparent}
  .hero .hero-dots button::after{content:"";position:absolute;left:4px;right:4px;top:21px;height:2px;background:rgba(255,255,255,.4)}
  .hero .hero-dots button.on::after{background:var(--accent,var(--red))}
  .ability-media .ab-btn{width:44px;height:44px;font-size:22px}
  .ability-media .ab-ctrl{gap:0;padding:0 2px}
}
@media(max-width:760px){
  .sidebar{height:calc(52px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  .sidebar .menu{min-width:0}
  .sidebar .menu li a{display:flex;align-items:center;min-height:44px;white-space:nowrap;letter-spacing:1px}
  .hero .hero-dots{bottom:0;left:max(16px,env(safe-area-inset-left,0px))}
  .hero .sl-txt{padding-bottom:52px}
  .ability-media .ab-slide{pointer-events:auto}
  .ability-media .ab-cap{padding-bottom:58px}
  .ability-media .ab-ctrl{bottom:8px;right:8px}
  .sg-topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;pointer-events:none}
  .sg-close{pointer-events:auto;background:#f4f4f5}
  .sg-panel{padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){
  .sidebar{gap:6px}
  .sidebar .logo{width:100px;background-size:auto 18px}
  .sidebar .menu li a{font-size:13px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero .sl-img img.on{animation:none}
  .ability-media .ab-slide,.ability-media .ab-slide img{transition:none}
}

/* Address navigation remains available without a third-party JavaScript key. */
.ab-map-link{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;min-height:100%;padding:clamp(22px,4vw,54px);background:#f2f3f2;color:#111}
.ab-map-link strong{font-size:clamp(18px,1.6vw,26px);line-height:1.5}
.ab-map-link>span:not(.ab-map-pin){font-size:14px;line-height:1.8;color:#555}
.ab-map-link .ab-map-pin{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent,var(--red));color:white;font-size:26px}
.ab-map-link b{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--accent,var(--red))}
.ab-map-link:focus-visible{outline:3px solid var(--accent,var(--red));outline-offset:-3px}
/* Keep touch navigation consistent when a foldable opens or rotates. */
@media(min-width:761px) and (max-width:1180px) and (pointer:coarse){
  .sidebar{top:0;left:0;right:0;bottom:auto;width:100%;height:calc(52px + env(safe-area-inset-top,0px));flex-direction:row;align-items:center;gap:14px;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
  .sidebar .logo{width:118px;height:36px;aspect-ratio:auto;flex:none;border-radius:5px;background-size:auto 20px}
  .sidebar .menu{flex:1;min-width:0;flex-direction:row;align-items:center;justify-content:space-evenly;margin-top:0;gap:0}
  .sidebar .menu li+li::before,.sidebar .pager,.sidebar .theme-btn{display:none}
  .sidebar .menu li a{display:flex;align-items:center;min-height:44px;font-size:14px;letter-spacing:1px;white-space:nowrap}
  .main{margin-left:0;padding-top:calc(52px + env(safe-area-inset-top,0px))}
  .site-footer{margin-left:0}
}
.ab-map{min-height:280px}