/* ==========================================================================
   个人 / 企业介绍框架模板 · 共用设计系统
   黑灰单色 · 三套版式共享的变量与基础组件
   ========================================================================== */

:root{
  /* ---- 黑灰色板，无彩色 ---- */
  --ink:#0A0A0A;
  --ink-2:#151515;
  --ink-3:#202020;
  --gray-9:#2E2E2E;
  --gray-6:#6E6E6E;
  --gray-4:#8A8A8A;
  --gray-2:#B8B8B8;
  --line:#E3E3E1;
  --line-d:#272727;
  --paper:#F6F6F4;
  --white:#FFFFFF;

  --font-sans:"Inter","HarmonyOS Sans SC","MiSans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --wrap:1320px;
  --gutter:clamp(20px,4.6vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.75;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;outline:none}
::selection{background:var(--ink);color:var(--white)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--d{background:var(--line-d)}

/* ------------------------------------------------------------- 排版级 */
.eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray-6);display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55;flex:none}
.eyebrow--plain::before{display:none}

.display{font-size:clamp(34px,6.4vw,86px);line-height:1;font-weight:800;letter-spacing:-.035em}
.h1{font-size:clamp(30px,4.4vw,60px);line-height:1.06;font-weight:800;letter-spacing:-.03em}
.h2{font-size:clamp(25px,3.1vw,44px);line-height:1.14;font-weight:750;letter-spacing:-.025em}
.h3{font-size:clamp(19px,1.7vw,25px);line-height:1.28;font-weight:700;letter-spacing:-.015em}
.h4{font-size:16.5px;font-weight:700;line-height:1.4}
.lead{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--gray-9)}
.muted{color:var(--gray-6)}
.tiny{font-size:13px;line-height:1.65;color:var(--gray-6)}
.mono{font-family:var(--font-mono);letter-spacing:.05em}
.on-ink{color:var(--white)}
.on-ink .muted,.on-ink .tiny{color:var(--gray-4)}
.on-ink .eyebrow{color:var(--gray-4)}

/* ====================================================== 形象照粘贴位 ★ */
/* 用法：<div class="photo" data-ratio="3/4"><span>粘贴形象照</span></div>
   替换真图：见 assets/img/README 说明，或用 <img> 直接塞进 .photo 内 */
.photo{
  position:relative;overflow:hidden;
  aspect-ratio:var(--pr,3/4);
  background:
    repeating-linear-gradient(45deg,#EFEFED 0 10px,#E7E7E5 10px 20px);
  border:1px dashed var(--gray-2);
  display:grid;place-items:center;
  cursor:copy;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.photo:hover{border-color:var(--ink)}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo__hint{
  position:relative;text-align:center;padding:18px;pointer-events:none;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-4);line-height:1.9;
}
.photo__hint strong{
  display:block;font-size:13px;letter-spacing:.06em;color:var(--gray-6);
  font-family:var(--font-sans);font-weight:650;text-transform:none;margin-bottom:6px;
}
.photo__hint::before{
  content:"";display:block;width:34px;height:1px;background:var(--gray-2);margin:0 auto 14px;
}
/* 粘贴位放入真图后：去虚线框与指针提示 */
.photo:has(>img){border:0;cursor:default}
/* 形象照全图展示：框比例跟随原图，绝不裁切 */
.photo--full{aspect-ratio:auto;background:none}
.photo--full>img{position:static;width:100%;height:auto;object-fit:contain}
/* 深色区块里的粘贴位 */
.on-ink .photo{
  background:repeating-linear-gradient(45deg,#1C1C1C 0 10px,#232323 10px 20px);
  border-color:var(--gray-9);
}
.on-ink .photo:hover{border-color:var(--gray-4)}
.on-ink .photo__hint{color:var(--gray-6)}
.on-ink .photo__hint strong{color:var(--gray-2)}
.on-ink .photo__hint::before{background:var(--gray-9)}
/* 纸面卡片内的粘贴位恢复浅色（如框架 B 的企业介绍卡） */
.tpl-b__card--paper .photo,
.tpl-b__card--paper .photo-strip .photo{
  background:repeating-linear-gradient(45deg,#EFEFED 0 10px,#E7E7E5 10px 20px);
  border-color:var(--gray-2);
}
.tpl-b__card--paper .photo:hover{border-color:var(--ink)}
.tpl-b__card--paper .photo__hint{color:var(--gray-4)}
.tpl-b__card--paper .photo__hint strong{color:var(--gray-6)}
.tpl-b__card--paper .photo__hint::before{background:var(--gray-2)}

/* 多图粘贴位（横向组图） */
.photo-strip{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.photo-strip .photo{--pr:16/9}

/* ============================================================ 内容块 */
.meta-list{border-top:1px solid var(--line)}
.meta-list>div{
  display:grid;grid-template-columns:96px 1fr;gap:16px;
  padding-block:11px;border-bottom:1px solid var(--line);
}
/* 双列信息表（宽屏两栏，窄屏回落单列） */
.meta-list--2col{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.6vw,64px)}
.meta-list--2col>div:nth-last-child(-n+2){border-bottom:0}
@media (max-width:900px){
  .meta-list--2col{grid-template-columns:1fr}
  .meta-list--2col>div:nth-last-child(2){border-bottom:1px solid var(--line-d)}
}
.meta-list dt,.meta-list .k{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-4);padding-top:3px;
}
.meta-list dd,.meta-list .v{margin:0;font-size:14.5px;font-weight:600}
.meta-list .v small{display:block;margin-top:4px;font-weight:400;font-size:13px;color:var(--gray-6)}

/* 编号条目列表 */
.numlist{counter-reset:n;border-top:1px solid var(--line)}
.numlist>li{
  counter-increment:n;
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding-block:clamp(11px,1.2vw,16px);
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.numlist>li::before{
  content:"0" counter(n);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--gray-4);
}
.numlist strong{display:block;font-size:16px;font-weight:650;margin-bottom:5px}
.numlist p{font-size:14.5px;color:var(--gray-6);line-height:1.72}

/* 双列编号条目（宽屏两栏，窄屏自动回落单列） */
.numlist--2col{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.6vw,64px)}
@media (max-width:900px){.numlist--2col{grid-template-columns:1fr}}

/* 要点清单 */
.dotlist>li{
  position:relative;padding-left:20px;
  font-size:14.5px;color:var(--gray-6);line-height:1.78;
}
.dotlist>li+li{margin-top:9px}
.dotlist>li::before{
  content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--gray-4);
}

/* 标签 */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--line);color:var(--gray-6);
}
.on-ink .tags span{border-color:var(--line-d);color:var(--gray-4)}

/* 数据行 */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px;background:var(--line)}
.figures>div{background:rgba(255,255,255,.55);padding:clamp(14px,1.5vw,20px)}
.figures b{display:block;font-size:clamp(23px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1}
.figures span{display:block;margin-top:8px;font-size:12.5px;color:var(--gray-6)}
/* 深色右栏：数据卡融入底图；文字居中，竖线两侧等距，首尾各加一条竖线 */
.on-ink .figures{background:transparent;gap:0}
.on-ink .figures>div{
  background:transparent;text-align:center;
  padding:clamp(14px,1.5vw,20px) clamp(18px,2.2vw,34px);
  border-left:1px solid rgba(159,197,236,.28);
}
.on-ink .figures>div:last-child{border-right:1px solid rgba(159,197,236,.28)}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:14px 26px;font-size:14px;font-weight:650;cursor:pointer;
  background:var(--ink);color:var(--white);border:1px solid var(--ink);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.btn svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
/* 白底区块上的白底按钮：黑边保证可见，hover 反转为黑底白字 */
.btn--paper{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn--paper:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.on-ink .btn{background:var(--white);color:var(--ink);border-color:var(--white)}
.on-ink .btn:hover{background:transparent;color:var(--white)}
.on-ink .btn--ghost{background:transparent;color:var(--white);border-color:var(--gray-9)}
.on-ink .btn--ghost:hover{background:var(--white);color:var(--ink);border-color:var(--white)}

/* 顶部返回条（三套框架共用） */
.tplbar{
  position:sticky;top:0;z-index:90;
  background:rgba(10,10,10,.92);backdrop-filter:blur(12px);
  color:var(--gray-4);border-bottom:1px solid var(--line-d);
}
.tplbar__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:52px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.tplbar a{transition:color .4s var(--ease)}
.tplbar a:hover{color:var(--white)}
.tplbar__nav{display:flex;gap:20px;flex-wrap:wrap}

/* 页脚 */
.tplfoot{
  background:var(--ink-2);color:var(--gray-6);
  border-top:1px solid var(--line-d);
  padding-block:clamp(36px,4vw,60px);
}
.tplfoot__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.tplfoot nav{display:flex;gap:20px;flex-wrap:wrap}
.tplfoot a{transition:color .4s var(--ease)}
.tplfoot a:hover{color:var(--white)}

/* ======================================================== 版式 A ★ */
/* 杂志对开：左侧固定形象照栏 + 右侧分栏内容 */
.tpl-a{display:grid;grid-template-columns:minmax(280px,34%) 1fr;min-height:100vh}
.tpl-a__side{
  height:auto;
  background:var(--ink);color:var(--white);
  padding:clamp(28px,3.4vw,52px);
  display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);
}
.tpl-a__photo{--pr:3/4;width:100%}
.tpl-a__id h1{font-size:clamp(26px,2.6vw,38px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.tpl-a__id .role{
  margin-top:10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray-4);
}
.tpl-a__main{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(28px,3vw,52px) clamp(24px,3.6vw,64px);
  /* 江禾设计联盟「企业形象照」同款底图：
     左上柔光 + 135° 蓝灰黑三段渐变 */
  background:
    radial-gradient(120% 130% at 14% 6%, rgba(255,255,255,.24), rgba(255,255,255,0) 56%),
    linear-gradient(135deg,#3B414A 0%,#1E2229 46%,#0A0C0F 100%);
  color:var(--white);
}
/* 斜向高光带：周期性自动扫过（移植自联盟站 hover 光带，改为常动） */
.tpl-a__main::before{
  content:"";position:absolute;top:0;bottom:0;left:-40%;right:-40%;z-index:0;
  pointer-events:none;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.17) 50%, rgba(255,255,255,0) 62%);
  transform:translateX(-35%);
  animation:mainSheen 9s var(--ease) infinite;
}
@keyframes mainSheen{
  0%{transform:translateX(-35%);opacity:0}
  12%{opacity:1}
  55%{transform:translateX(35%);opacity:1}
  68%,100%{transform:translateX(35%);opacity:0}
}
/* 四角压暗 */
.tpl-a__main::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(112% 112% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 100%);
}
.tpl-a__main>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.tpl-a__main::before{animation:none}}

/* 深色右栏的正文可读性覆盖 */
.on-ink .lead{color:var(--gray-2)}
.on-ink .numlist p,.on-ink .dotlist>li{color:var(--gray-4)}
.on-ink .figures span,.on-ink .meta-list .v small{color:var(--gray-4)}
.on-ink .tpl-a__block{border-bottom-color:var(--line-d)}
.on-ink .numlist{border-top-color:var(--line-d)}
.on-ink .numlist>li{border-bottom-color:var(--line-d)}
.on-ink .meta-list{border-top-color:var(--line-d)}
.on-ink .meta-list>div{border-bottom-color:var(--line-d)}
.on-ink .meta-list--2col>div:nth-last-child(-n+2){border-bottom:0}
.tpl-a__block{padding-block:clamp(22px,2.6vw,38px);border-bottom:1px solid var(--line)}
.tpl-a__block:last-child{border-bottom:0}
.tpl-a__block-head{
  display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(16px,1.8vw,24px);
}
.tpl-a__block-head .no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--gray-4);
}
.tpl-a__two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,30px)}

/* 介绍区块：左右两半各自居中 */
#company .tpl-a__two{column-gap:clamp(76px,8vw,128px);justify-items:center}
#company .tpl-a__two>div{
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* #who：介绍文字整幅居中，资料表横向三列置其下，小字行压至框架底部 */
#who .who-intro{max-width:880px;margin-inline:auto;text-align:center}
#who .who-intro .muted{max-width:62ch;margin-inline:auto}
#who .meta-list{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  width:100%;max-width:720px;margin:clamp(22px,2.4vw,32px) auto 0;
  border-top:0;
}
#who .meta-list>div{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;text-align:center;
  padding:6px clamp(10px,1.4vw,20px);border-bottom:0;
}
#who .meta-list>div+div{border-left:1px solid rgba(159,197,236,.28)}
#who .meta-list dt,#who .meta-list dd{text-align:center}
#company .dotlist>li{padding-left:0;text-align:center}
#company .dotlist>li::before{
  position:static;display:inline-block;vertical-align:middle;
  margin-right:9px;transform:translateY(-3px);
}
#company .h4{text-align:center}
#what .numlist>li>div{text-align:center}
#what>.lead{margin-inline:auto}
#who>.tags,#what>.tags,#company>.tags{justify-content:center}

/* 大标题（编号+标题）整体居中 */
.tpl-a__block-head{justify-content:center}

/* figures 上方小字行：竖线分割、居中 */
.stat-line{
  margin-top:clamp(16px,1.8vw,24px);
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.5vw,22px);flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.14em;color:var(--gray-4);
}
.stat-line i{width:1px;height:12px;background:rgba(159,197,236,.4);flex:none}

/* 04 特效框架卡片：浅蓝渐变描边 + 微光晕呼吸 */
.frame-card,.on-ink #contact .numlist>li{
  position:relative;
  border:1px solid rgba(159,197,236,.26);
  background:linear-gradient(160deg,rgba(159,197,236,.10),rgba(255,255,255,.02) 45%,rgba(159,197,236,.05));
  box-shadow:inset 0 0 24px rgba(150,195,240,.05);
  animation:frameGlow 7s ease-in-out infinite;
}
.frame-card{padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px)}
.on-ink #contact .numlist>li{display:block;border-radius:2px;padding:18px 20px 18px 54px;border-bottom:0}
.on-ink #contact .numlist{border-top:0;gap:clamp(12px,1.4vw,18px)}
.on-ink #contact .numlist>li{border-bottom:0}
.on-ink #contact .numlist>li::before{position:absolute;left:20px;top:21px}
.on-ink #contact .numlist>li>div{text-align:center}
.on-ink #contact .meta-list dt,.on-ink #contact .meta-list dd{text-align:center}
#contact>.lead{text-align:center;margin-inline:auto}
@keyframes frameGlow{
  0%,100%{border-color:rgba(159,197,236,.20)}
  50%{border-color:rgba(159,197,236,.48)}
}
@media (prefers-reduced-motion:reduce){
  .frame-card,.on-ink #contact .numlist>li{animation:none}
}

/* 区块特效框架包裹：每个区块整体套用与 frame-card 同款的
   浅蓝描边 + 内光晕 + 呼吸边框（frameGlow） */
.tpl-a__block.block-frame{
  border:1px solid rgba(159,197,236,.26);
  background:linear-gradient(160deg,rgba(159,197,236,.10),rgba(255,255,255,.02) 45%,rgba(159,197,236,.05));
  box-shadow:inset 0 0 24px rgba(150,195,240,.05);
  animation:frameGlow 7s ease-in-out infinite;
  padding:clamp(24px,3vw,42px) clamp(20px,2.8vw,40px);
  margin-bottom:clamp(16px,2vw,26px);
}
.tpl-a__block.block-frame:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){
  .tpl-a__block.block-frame{animation:none}
}
@media (max-width:720px){
  #company .tpl-a__two{column-gap:clamp(18px,2vw,30px)}
  .on-ink #contact .numlist{grid-template-columns:1fr}
  #who .meta-list{grid-template-columns:1fr;max-width:470px}
  #who .meta-list>div{padding:10px 0}
  #who .meta-list>div+div{border-left:0;border-top:1px solid var(--line-d)}
}

/* ======================================================== 版式 B ★ */
/* 名片海报：全屏形象照主视觉 + 卡片叠加 */
.tpl-b{background:var(--ink);color:var(--white)}
.tpl-b__hero{
  position:relative;min-height:min(92vh,860px);
  display:grid;grid-template-columns:1fr minmax(300px,42%);
  align-items:stretch;
}
.tpl-b__copy{
  padding:clamp(40px,5vw,80px) clamp(24px,4vw,72px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,2.4vw,32px);
}
.tpl-b__photo{--pr:auto;height:100%;border:0;border-left:1px solid var(--line-d);background:
  repeating-linear-gradient(45deg,#1C1C1C 0 10px,#232323 10px 20px)}
.tpl-b__name{font-size:clamp(38px,6.6vw,92px);line-height:.98;font-weight:850;letter-spacing:-.04em}
.tpl-b__name em{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--gray-4)}
.tpl-b__cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--line-d);
}
.tpl-b__card{background:var(--ink-2);padding:clamp(28px,3.2vw,46px)}
.tpl-b__card--paper{background:var(--paper);color:var(--ink)}
.tpl-b__card--paper .eyebrow{color:var(--gray-6)}
.tpl-b__card--paper .muted{color:var(--gray-6)}

/* ======================================================== 版式 C ★ */
/* 履历档案：编号章节，纵向长文档 */
.tpl-c__head{
  border-bottom:1px solid var(--line);
  padding-block:clamp(40px,5vw,80px);
}
.tpl-c__head-grid{
  display:grid;grid-template-columns:1fr minmax(240px,30%);
  gap:clamp(26px,3.4vw,60px);align-items:end;
}
.tpl-c__photo{--pr:4/5}
.tpl-c__body{padding-block:clamp(30px,4vw,60px)}
.tpl-c__sec{
  display:grid;grid-template-columns:minmax(120px,17%) 1fr;
  gap:clamp(20px,3vw,52px);
  padding-block:clamp(32px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.tpl-c__sec:last-child{border-bottom:0}
.tpl-c__sec-label{position:sticky;top:76px;align-self:start}
.tpl-c__sec-label .no{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--gray-4);
  margin-bottom:8px;
}
.tpl-c__sec-label strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.tpl-c__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px)}

/* ====================================================== 联系弹窗 */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.74);backdrop-filter:blur(5px)}
.modal__panel{
  position:relative;background:var(--paper);color:var(--ink);
  width:min(420px,100%);max-height:calc(100vh - 48px);overflow:auto;
  padding:clamp(30px,4vw,46px);border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(0,0,0,.45);
}
.modal__close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;
  display:grid;place-items:center;font-size:22px;line-height:1;
  color:var(--gray-6);border:1px solid var(--line);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.modal__close:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.modal__qr{width:min(250px,100%);margin:clamp(20px,3vw,30px) auto;border:1px solid var(--line)}
.modal__qr img{width:100%;height:auto;display:block}

/* ====================================================== 响应式 */
@media (max-width:1100px){
  .tpl-a{grid-template-columns:1fr;min-height:0}
  .tpl-a__side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:26px;align-items:flex-start}
  .tpl-a__photo{width:min(280px,42vw);flex:none}
  .tpl-a__id{flex:1;min-width:200px;align-self:center}
  .tpl-b__hero{grid-template-columns:1fr;min-height:0}
  .tpl-b__photo{min-height:clamp(340px,58vh,560px);border-left:0;border-top:1px solid var(--line-d)}
  .tpl-c__head-grid{grid-template-columns:1fr}
  .tpl-c__photo{--pr:16/10;max-width:520px}
  .tpl-c__sec{grid-template-columns:1fr;gap:20px}
  .tpl-c__sec-label{position:static}
}
@media (max-width:720px){
  .tpl-a__two,.tpl-c__cols{grid-template-columns:1fr}
  .tpl-a__side{flex-direction:column;align-items:center}
  .tpl-a__photo{width:min(360px,100%)}
  .tpl-a__id{text-align:center}
  .meta-list{width:100%}
  .meta-list>div{grid-template-columns:82px 1fr;gap:12px}
  .tpl-a__side .meta-list{max-width:420px}
  .tpl-a__cta{width:100%;max-width:420px}
  .tplbar__inner{font-size:9.5px;letter-spacing:.1em}
  .tplbar__nav{gap:13px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}