/* ===== 肥哥食堂 · 校园外卖官网 全局样式 =====
   本文件所有颜色 / 字号 / 圆角 / 阴影 / 间距 / 动效时长都走 CSS 变量，
   变量由 render.js 按 content.json 的 theme + style 注入到
   #preview / #site-root / #page-root 三个容器上 —— 因此后台改任意一项都会全站生效。
   :root 里的是「默认值」，改这里等于改出厂设置。 */
:root{
  /* ---------- 配色（对应 content.theme） ---------- */
  --yellow:#FFC400;          /* 品牌主色 */
  --yellow-deep:#F5B400;     /* 主色加深（悬停） */
  --yellow-soft:#FFF7E1;     /* 浅色辅底 */
  --brown:#966506;           /* 强调色（已按 WCAG AA 调深：白底 5.05:1 / 浅黄底 4.72:1） */
  --brown-sub:#6B5A2A;       /* 强调色副文 */
  --dark:#1A1426;            /* 深色背景 */
  --ink:#3A2E12;             /* 正文文字 */
  --ink-soft:#5b4a22;        /* 次要文字 */
  --page-bg:#ffffff;         /* 页面背景 */
  --card-bg:#ffffff;         /* 卡片底色 */
  --hero-top:#FFFDF6;        /* 首屏渐变色 */
  --line:#f0e6cf;            /* 描边 / 分隔线 */
  --dark-text:#ffffff;       /* 深色区文字 */
  --on-primary:#3A2E12;      /* 主色上的文字 */
  --glyph:#7a5200;           /* 图标 / 标识 */

  /* 需要透明度的颜色：RGB 三元组 */
  --page-bg-rgb:255,255,255;
  --dark-rgb:26,20,38;
  --dark-text-rgb:255,255,255;
  --yellow-rgb:255,196,0;
  --shadow-rgb:181,121,10;
  --shadow-lg-rgb:26,20,38;

  /* ---------- 字体（对应 content.style） ---------- */
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-base:16px;
  --lh:1.7;
  --fw-heading:800;
  --ls-heading:-.012em;
  --fs-h1:52px;
  --fs-h2:34px;
  --fs-h3:19px;
  /* 由基准字号推导的层级 */
  --fs-xs:calc(var(--fs-base) * .8125);   /* 13 */
  --fs-sm:calc(var(--fs-base) * .875);    /* 14 */
  --fs-md:calc(var(--fs-base) * .9375);   /* 15 */
  --fs-lg:calc(var(--fs-base) * 1.0625);  /* 17 */
  --fs-xl:calc(var(--fs-base) * 1.125);   /* 18 */
  --fs-h4:calc(var(--fs-h3) * .95);       /* 18 */
  --fs-h5:calc(var(--fs-h3) * .895);      /* 17 */
  --ic-size:26px;                          /* 图标基准尺寸 */

  /* ---------- 形状 ---------- */
  --radius:18px;
  --radius-btn:12px;
  --radius-sm:calc(var(--radius) * .83);
  --radius-lg:calc(var(--radius) * 2.33);
  --sh-1:.10;
  --sh-2:.14;
  --sh-3:.18;
  /* 多层阴影：近距离描边感 + 远距离扩散，比单层阴影更有高级感 */
  --shadow-sm:0 1px 2px rgba(var(--shadow-rgb),calc(var(--sh-1) * .5)),0 4px 14px rgba(var(--shadow-rgb),var(--sh-1));
  --shadow:0 2px 6px rgba(var(--shadow-rgb),calc(var(--sh-2) * .45)),0 14px 34px rgba(var(--shadow-rgb),var(--sh-2));
  --shadow-lg:0 4px 12px rgba(var(--shadow-lg-rgb),calc(var(--sh-3) * .5)),0 28px 64px rgba(var(--shadow-lg-rgb),var(--sh-3));
  --shadow-xl:0 8px 20px rgba(var(--shadow-lg-rgb),calc(var(--sh-3) * .55)),0 44px 96px rgba(var(--shadow-lg-rgb),calc(var(--sh-3) * 1.35));

  /* ---------- 布局 ---------- */
  --maxw:1200px;
  --wrap-pad:24px;
  --nav-h:68px;
  --sec-pad:84px;
  --phone-max:340px;         /* 首屏手机壳宽度（宽屏基准，窄屏由媒体查询下调） */

  /* ---------- 动效（可被后台统一调节） ---------- */
  --ease-out:cubic-bezier(.22,.78,.28,.99);
  --ease-spring:cubic-bezier(.34,1.42,.44,1);
  --dur-1:.18s;
  --dur-2:.3s;
  --dur-3:.7s;
  --hd-glow:.30;             /* 首屏光晕强度 */
  --card-lift:6px;           /* 卡片悬停上浮距离 */
  --ring:0 0 0 3px rgba(var(--yellow-rgb),.32);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
/* scrollIntoView（跳过导航等程序化滚动）不遵守 scroll-padding-top，需用 scroll-margin-top 补偿 */
#site-root [id],#page-root [id],main[id],main[id]:focus{scroll-margin-top:calc(var(--nav-h) + 16px)}
main[id]:focus{outline:none}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--page-bg);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad)}

/* ============================================================
   排印精修（中文排版细节）
   ============================================================ */
/* 标题避免孤字 / 平衡换行 */
h1,h2,h3,.h2{text-wrap:balance}
p,.lead,.sub{text-wrap:pretty}
/* 中文正文标点挤压 + 中西文间距 */
body{text-spacing-trim:space-first}
p,.lead,.sub,.card p,.adv p{line-break:strict;word-break:normal}
/* 数字与货币统一等宽，统计数字不错位 */
.num,.price,.stat b,.hero-stats .s b{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
/* 大标题收紧字距与行高，视觉更紧凑有力 */
/* 标题字体令牌 --font-heading：后台「排版与字号 → 标题字体」可换，默认跟随正文字体 */
.hero h1,.h2,.cta h2{text-wrap:balance;font-family:var(--font-heading,inherit)}
h2{font-family:var(--font-heading,inherit)}

/* ---------- 导航 ---------- */
/* 跳过导航：键盘用户首个 Tab 即可直达主内容 */
.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--yellow);color:var(--on-primary);
  padding:10px 18px;border-radius:var(--radius-btn);
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  box-shadow:var(--shadow);transition:top var(--dur-2) var(--ease-out);
}
.skip-link:focus{top:12px;outline:3px solid var(--yellow-deep);outline-offset:2px}
.nav{
  position:sticky;top:0;z-index:100;
  /* 导航配色令牌：后台「站点设置 → 导航栏」可调，留空走默认 */
  background:var(--nav-bg,rgba(var(--page-bg-rgb),.86));
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--nav-border,var(--line));
  transition:box-shadow var(--dur-2) var(--ease-out),height var(--dur-2) var(--ease-out);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);transition:height var(--dur-2) var(--ease-out)}
/* 页面向下滚动后导航轻微收缩 + 浮起阴影，形成层次 */
.nav.scrolled{box-shadow:0 1px 0 var(--line),var(--shadow-lg)}
.nav.scrolled .wrap{height:calc(var(--nav-h) - 6px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:calc(var(--fs-base) * 1.25);color:var(--ink);white-space:nowrap;flex:0 0 auto}
/* 品牌名是单个文本节点，父级 nowrap 管不到它内部的换行，必须自己禁掉
   （否则「肥哥食堂」会被压成两行，页眉高度随之撑高） */
.brand .brand-name{white-space:nowrap}
.nav .btn{white-space:nowrap;flex:0 0 auto;padding:var(--btn-pad-y,10px) var(--btn-pad-x,18px);font-size:var(--btn-fs,var(--fs-sm))}
.brand .logo{
  width:38px;height:38px;border-radius:calc(var(--radius) * .9);
  background:linear-gradient(140deg,var(--yellow),var(--yellow-deep));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease-spring);
}
.brand:hover .logo{transform:rotate(-6deg) scale(1.05)}
.brand b{color:var(--brown)}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0}
.nav-links a{
  position:relative;padding:8px 13px;border-radius:var(--radius-sm);font-size:var(--fs-md);font-weight:500;
  color:var(--nav-link,var(--ink-soft));transition:color var(--dur-1) ease,background var(--dur-1) ease;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--nav-hover,var(--brown));background:var(--nav-hover-bg,var(--yellow-soft))}
/* 激活项的下划线动画取代纯底色块，更克制 */
.nav-links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;border-radius:2px;
  background:var(--nav-active,var(--yellow-deep));transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease-out);
}
.nav-links a.active{color:var(--nav-active,var(--brown));background:transparent;font-weight:700}
.nav-links a.active::after{transform:scaleX(1)}
/* 桌面档通用兜底：导航项由用户自由增删，任何宽度下塞不下时宁可换到第二行，
   也绝不让整页出现横向滚动条（.wrap 是 nowrap + .nav-links 可收缩，
   只要内部允许换行，超量时就会自然折行）。 */
@media (min-width:1101px){
  .nav-links{flex-wrap:wrap;justify-content:flex-end}
}
/* 紧凑档（≥1101px，无上限）：导航项由用户自由增删，10 项时全尺寸内边距实测需 872px。
   ⚠️ 关键：页眉内容列被 --wrap-max 限制在 1530px，视口再宽也不会变宽 ——
   所以「宽屏余量更足」是错觉，1920 下可用宽度和 1530 完全一样。
   这里绝不加上限（不写 max-width），否则宽屏会退回 872px 并折成两行。 */
@media (min-width:1101px){
  .nav-links{gap:2px}
  .nav-links a{padding:7px 9px;font-size:var(--fs-sm)}
  .nav-links a::after{left:9px;right:9px}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* 按钮设计令牌：全部可在后台「站点设置 → 按钮与交互」里调整；
     var() 的第二参是出厂值，不设置即与旧版观感完全一致 */
  background:var(--btn-bg,var(--yellow));
  color:var(--btn-color,var(--on-primary));
  font-weight:var(--btn-fw,700);
  font-size:var(--btn-fs,var(--fs-md));
  padding:var(--btn-pad-y,12px) var(--btn-pad-x,24px);
  border-radius:var(--btn-radius,var(--radius-btn));
  border:var(--btn-border-w,0px) solid var(--btn-border-c,transparent);
  cursor:pointer;
  box-shadow:var(--btn-shadow,var(--shadow-sm));transition:background var(--dur-1) ease,transform var(--dur-1) ease,box-shadow var(--dur-1) ease;
  position:relative;overflow:hidden;
}
/* 用户把链接设为「无链接」时，按钮退化成不可点击的标签：
   保持外观但不再有悬停反馈，与属性面板的提示保持一致 */
.btn[aria-disabled="true"],.clink[aria-disabled="true"]{cursor:default}
.btn[aria-disabled="true"]:hover{background:var(--btn-bg,var(--yellow));transform:none;box-shadow:var(--shadow-sm)}
.btn[aria-disabled="true"]::before{display:none}
/* 无 href 的链接（链接诚实化：<a> 不带 href 属性）同样按不可点击处理 */
a.btn:not([href]){cursor:default;pointer-events:none}
.nav-links a:not([href]){cursor:default}
.nav-links a:not([href]):hover{color:var(--nav-link,var(--ink-soft));background:transparent}
.footer a:not([href]){cursor:default}
.footer a:not([href]):hover{color:rgba(var(--dark-text-rgb),.7);transform:none}
.clink[aria-disabled="true"],a.clink:not([href]){cursor:default}
.btn:hover{background:var(--btn-bg-hover,var(--yellow-deep));transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0) scale(.985)}
/* 悬停时一道柔光扫过，是「贵」感的关键细节 */
.btn::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform var(--dur-3) var(--ease-out);
}
.btn:hover::before{transform:translateX(130%)}
.btn.dark{background:var(--dark);color:var(--dark-text)}
.btn.dark:hover{background:var(--dark);filter:brightness(1.22)}
.btn.ghost{background:transparent;color:var(--brown);border:var(--btn-ghost-border-w,1.5px) solid var(--btn-ghost-border-c,var(--yellow))}
.btn.ghost:hover{background:var(--yellow-soft)}
.btn.ghost::before{display:none}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:3px;background:var(--ink);border-radius:3px;transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-1) ease}

/* ---------- 通用区块 ---------- */
section{padding:var(--sec-pad) 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.09em;
  color:var(--brown);background:var(--yellow-soft);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
  border:1px solid rgba(var(--yellow-rgb),.5);
}
.eyebrow::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--yellow-deep);flex:0 0 auto;
}
.h2{font-size:var(--fs-h2);font-weight:var(--fw-heading);color:var(--ink);line-height:1.22;margin-bottom:14px;letter-spacing:var(--ls-heading)}
.lead{font-size:var(--fs-lg);color:var(--ink-soft);max-width:620px;margin:0 auto}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- 区块级对齐（后台可选 默认/居中/居左/居右） ---------- */
section[data-align="left"]{text-align:left}
section[data-align="right"]{text-align:right}
section[data-align="left"] .lead{margin-left:0;margin-right:auto}
section[data-align="right"] .lead{margin-left:auto;margin-right:0}
/* 显式居中时，卡片内部文字仍左对齐，避免排版失衡 */
section[data-align="center"] :is(.card,.adv,.step,.case .c,.food-card){text-align:left}
section[data-align="left"] :is(.card,.adv,.step,.case .c,.food-card){text-align:left}
.hero-text{text-align:left}

/* ============================================================
   颜色令牌（全局 --g-* / 区块 --sec-*，可被后台覆盖）
   约定：--g-t / --g-h / --sec-t / --sec-h 由 render.js 按需输出，
   未设置时为「空值」。若直接写 color:var(--g-t, inherit)，空值会触发
   「计算值非法(IACVT)」而使整条声明被丢弃 —— 因此这里统一改用
   fallback 到具体颜色令牌的写法，保证任何情况下都有合法颜色。
   ============================================================ */
#site-root, #preview{color:var(--g-t, var(--ink))}
#site-root :is(h1,h2,h3,.h2), #preview :is(h1,h2,h3,.h2){color:var(--g-h, var(--ink))}
#site-root section[data-sec], #preview section[data-sec]{color:var(--sec-t, var(--g-t, var(--ink)))}
#site-root section[data-sec] :is(h1,h2,h3,.h2), #preview section[data-sec] :is(h1,h2,h3,.h2){color:var(--sec-h, var(--g-h, var(--ink)))}
#site-root section[data-sec] :is(p,.lead,.sub), #preview section[data-sec] :is(p,.lead,.sub){color:var(--sec-t, var(--g-t, var(--ink-soft)))}

/* 独立页面同样继承全局 / 区块颜色令牌 */
#page-root{color:var(--g-t, var(--ink))}
#page-root :is(h1,h2,h3,.h2){color:var(--g-h, var(--ink))}
#page-root section[data-sec]{color:var(--sec-t, var(--g-t, var(--ink)))}
#page-root section[data-sec] :is(h1,h2,h3,.h2){color:var(--sec-h, var(--g-h, var(--ink)))}
#page-root section[data-sec] :is(p,.lead,.sub){color:var(--sec-t, var(--g-t, var(--ink-soft)))}

/* ============================================================
   Hero 首屏：三层氛围 + 光晕 + 悬浮手机
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(var(--yellow-rgb),var(--hd-glow)),transparent 62%),
    radial-gradient(900px 480px at 8% 12%,var(--yellow-soft),transparent 55%),
    linear-gradient(180deg,var(--hero-top),var(--yellow-soft));
  padding:74px 0 96px;
  overflow:hidden;
}
/* 首屏底部的柔和网格，增加「设计过的」质感（纯 CSS，无图片） */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--shadow-rgb),.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--shadow-rgb),.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(760px 420px at 30% 40%,#000,transparent 78%);
  mask-image:radial-gradient(760px 420px at 30% 40%,#000,transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
/* 展示图可换边：区块设置里选「左」时给区块加 hero-flip */
.hero-flip .hero-grid{grid-template-columns:.95fr 1.05fr}
.hero-flip .hero-text{order:2}
.hero-flip .phone-wrap{order:1}
.hero h1{font-size:var(--fs-h1);line-height:1.1;font-weight:var(--fw-heading);color:var(--ink);margin-bottom:20px;letter-spacing:calc(var(--ls-heading) * 1.4)}
.hero h1 .hl{
  color:var(--brown);position:relative;display:inline-block;
}
/* 标题高亮下方手绘感底纹。
   ⚠️ 底纹色不能再直接吃 --yellow：点餐页等主题把 --brown 与 --yellow 都设成了同一个色，
   文字与底纹就撞成一片（首页棕字黄线好看，正因为两者不同）。
   改成从「文字色」派生出浅一档，任何主题都保证有色差；仍可用 --hl-mark 手动覆盖。 */
.hero h1 .hl::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.3em;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--yellow-rgb),.75),rgba(var(--yellow-rgb),.34));
  border-radius:4px;transform:skewX(-6deg);
}
@supports (color:color-mix(in oklab,red,blue)){
  .hero h1 .hl::after{
    background:linear-gradient(90deg,
      var(--hl-mark, color-mix(in oklab, var(--brown) 34%, #fff)),
      var(--hl-mark-2, color-mix(in oklab, var(--brown) 12%, #fff)));
  }
}
.hero p.sub{font-size:var(--fs-xl);color:var(--ink-soft);margin-bottom:30px;max-width:480px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(var(--shadow-rgb),.16)}
.hero-stats .s b{display:block;font-size:calc(var(--fs-base) * 1.625);font-weight:var(--fw-heading);color:var(--sec-accent, var(--brown));letter-spacing:-.02em}
.hero-stats .s span{font-size:var(--fs-xs);color:var(--sec-muted, var(--ink-soft))}
.phone-wrap{position:relative;display:flex;justify-content:center;min-width:0}
/* 手机背后的品牌光斑，让主体「浮」起来 */
.phone-wrap::before{
  content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  top:6%;left:11%;
  background:radial-gradient(circle,rgba(var(--yellow-rgb),.42),transparent 68%);
  filter:blur(28px);z-index:0;
}
/* 手机壳尺寸随视口流体缩放：窄屏不溢出、宽屏不失控（上限由 --phone-max 控制） */
.phone{
  position:relative;z-index:1;
  width:calc(var(--phone-max) * var(--sec-phone-scale, 1));
  max-width:100%;
  border-radius:var(--sec-img-radius, clamp(24px, calc(var(--phone-max) * .115), 40px));
  box-shadow:var(--shadow-xl);
  border-style:solid;border-color:var(--sec-card, var(--card-bg));
  border-width:clamp(5px, calc(var(--phone-max) * .024), 9px);
  background:var(--sec-card, var(--card-bg));overflow:hidden;
  transition:transform .5s var(--ease-out);
}
.phone:hover{transform:translateY(-8px) rotate(-.8deg)}
.phone img{width:100%;height:auto;display:block;aspect-ratio:9/16;object-fit:cover;object-position:top center}
.phone-badge{
  position:absolute;top:18px;right:-12px;z-index:2;
  background:var(--dark);color:var(--dark-text);
  font-size:var(--fs-xs);font-weight:700;padding:9px 15px;border-radius:var(--radius-sm);box-shadow:var(--shadow);
  display:inline-flex;align-items:center;gap:6px;
}
.phone-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(var(--yellow-rgb),.25)}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:24px;margin-top:46px}
.grid.c2{grid-template-columns:repeat(var(--cols,2),1fr)}
.grid.c3{grid-template-columns:repeat(var(--cols,3),1fr)}
.grid.c4{grid-template-columns:repeat(var(--cols,4),1fr)}
/* ---------- 自定义区块（用户自建类型）---------- */
.clist{display:flex;flex-direction:column;gap:18px;margin-top:46px}
.citem{display:flex;gap:16px;align-items:flex-start;background:var(--sec-card, var(--card-bg));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm)}
.citem .ic{flex:0 0 auto}
.citem .cbody{flex:1 1 auto;min-width:0}
.citem h3{font-size:var(--fs-md);margin:0 0 6px}
.citem p{margin:0;color:var(--sec-muted, var(--ink-soft));font-size:var(--fs-sm);line-height:1.7}
.clink{display:inline-block;margin-top:12px;font-size:var(--fs-sm);font-weight:600;color:var(--brown);text-decoration:none}
.clink:hover{text-decoration:underline}

.card{--card-pad:28px;
  position:relative;
  background:var(--sec-card, var(--card-bg));border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--card-pad);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease,border-color var(--dur-2) ease;
  overflow:hidden;
}
/* 卡片顶部一抹品牌渐变，悬停时展开 —— 取代厚重描边 */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-deep));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-2) var(--ease-out);
}
.card:hover{transform:translateY(calc(var(--card-lift) * -1));box-shadow:var(--shadow);border-color:rgba(var(--shadow-rgb),.3)}
.card:hover::before{transform:scaleX(1)}
.card .ic{
  width:52px;height:52px;border-radius:calc(var(--radius) * 1.17);display:flex;align-items:center;justify-content:center;
  font-size:26px;background:var(--yellow-soft);margin-bottom:16px;
  transition:transform var(--dur-2) var(--ease-spring),background var(--dur-2) ease;
}
.card:hover .ic{transform:scale(1.06) rotate(-4deg)}
.card h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:var(--ls-heading)}
.card p{font-size:var(--fs-md);color:var(--sec-muted, var(--ink-soft))}
.card .num{
  font-size:var(--fs-sm);font-weight:800;color:var(--brown);
  width:40px;height:40px;border-radius:50%;background:var(--yellow-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}

/* ---------- 点餐小程序 ---------- */
.app-block{background:var(--yellow-soft)}
.app-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.app-features{display:grid;gap:18px;margin-top:30px}
.app-features .f{display:flex;gap:14px;align-items:flex-start}
.app-features .f .dot{
  flex:none;width:42px;height:42px;border-radius:var(--radius);background:var(--sec-card, var(--card-bg));
  display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) ease;
}
.app-features .f:hover .dot{transform:scale(1.08) translateY(-2px);box-shadow:var(--shadow)}
.app-features .f b{display:block;font-size:var(--fs-base);color:var(--ink)}
.app-features .f span{font-size:var(--fs-sm);color:var(--ink-soft)}
.food-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.food-card{
  background:var(--sec-card, var(--card-bg));border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease;border:1px solid var(--line);
}
.food-card:hover{transform:translateY(calc(var(--card-lift) * -1));box-shadow:var(--shadow)}
.food-card .pic{height:150px;border-radius:var(--sec-img-radius, calc(var(--radius) - 2px));overflow:hidden;background:rgba(var(--dark-rgb),.06);position:relative}
.food-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease-out)}
/* 图片底部渐隐，与文字区衔接更柔和 */
.food-card .pic::after{
  content:"";position:absolute;inset:auto 0 0 0;height:44%;
  background:linear-gradient(180deg,transparent,rgba(var(--dark-rgb),.16));
  pointer-events:none;
}
.food-card .meta{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;gap:10px}
.food-card .meta b{font-size:var(--fs-md);color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.food-card .meta .price{font-size:var(--fs-md);font-weight:800;color:var(--brown);flex:0 0 auto}

/* ---------- 浅色底区块（可被 .dark-sec 覆盖，故顺序在前） ---------- */
.soft-bg{background:var(--yellow-soft)}

/* ---------- 暗场优势 ---------- */
.dark-sec{background:var(--dark);color:var(--dark-text)}
/* 暗场加一层品牌光晕，避免「纯深色块」的呆板 */
.dark-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 82% 0%,rgba(var(--yellow-rgb),.16),transparent 66%);
}
.dark-sec .wrap{position:relative;z-index:1}
/* 暗场文字必须压过全局 --g-t/--g-h 与区块 --sec-t/--sec-h 覆盖。
   选择器带 #site-root 前缀，权重高于
   `#site-root section[data-sec] :is(h1,h2,h3,.h2)`，确保深色底上永远用浅色字。 */
.dark-sec .h2,
#site-root .dark-sec .h2, #preview .dark-sec .h2, #page-root .dark-sec .h2,
#site-root .dark-sec :is(h1,h2,h3,.h2), #preview .dark-sec :is(h1,h2,h3,.h2), #page-root .dark-sec :is(h1,h2,h3,.h2),
#site-root .dark-sec[data-sec] .h2, #preview .dark-sec[data-sec] .h2, #page-root .dark-sec[data-sec] .h2,
#site-root section.dark-sec[data-sec] :is(h1,h2,h3,.h2),
#preview section.dark-sec[data-sec] :is(h1,h2,h3,.h2),
#page-root section.dark-sec[data-sec] :is(h1,h2,h3,.h2){
  color:var(--dark-text)
}
.dark-sec .lead,
.dark-sec p,
#site-root .dark-sec :is(p,.lead,.sub), #preview .dark-sec :is(p,.lead,.sub), #page-root .dark-sec :is(p,.lead,.sub),
#site-root section.dark-sec[data-sec] :is(p,.lead,.sub),
#preview section.dark-sec[data-sec] :is(p,.lead,.sub),
#page-root section.dark-sec[data-sec] :is(p,.lead,.sub){
  color:rgba(var(--dark-text-rgb),.78)
}
/* 暗场区块自身的文本色（含未加 data-sec 的兜底） */
.dark-sec,
#site-root section.dark-sec, #preview section.dark-sec, #page-root section.dark-sec{
  color:var(--dark-text)
}
.dark-sec .card h3,.dark-sec .adv h3{color:var(--dark-text)}
.dark-sec .card p,.dark-sec .adv p{color:rgba(var(--dark-text-rgb),.74)}
.dark-sec .eyebrow{background:rgba(var(--yellow-rgb),.16);color:var(--yellow);border-color:rgba(var(--yellow-rgb),.32)}
.dark-sec .eyebrow::before{background:var(--yellow)}
.adv-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:22px;margin-top:46px}
.adv{--card-pad:26px;
  position:relative;
  background:var(--sec-card, rgba(var(--dark-text-rgb),.05));
  border:1px solid rgba(var(--dark-text-rgb),.1);
  border-radius:var(--radius);padding:var(--card-pad);
  transition:background var(--dur-2) ease,transform var(--dur-2) var(--ease-out),border-color var(--dur-2) ease;
  overflow:hidden;
}
.adv::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(320px 180px at 50% 0%,rgba(var(--yellow-rgb),.22),transparent 70%);
  transition:opacity var(--dur-2) ease;pointer-events:none;
}
.adv:hover{background:rgba(var(--yellow-rgb),.1);transform:translateY(calc(var(--card-lift) * -1));border-color:rgba(var(--yellow-rgb),.36)}
.adv:hover::before{opacity:1}
.adv .ic{font-size:30px;margin-bottom:14px;transition:transform var(--dur-2) var(--ease-spring)}
.adv:hover .ic{transform:scale(1.1)}
.adv h3{font-size:var(--fs-h4);font-weight:700;margin-bottom:8px;letter-spacing:var(--ls-heading)}
.adv p{font-size:var(--fs-sm);color:var(--sec-muted, rgba(var(--dark-text-rgb),.7))}

/* ---------- 数据成果 ---------- */
.stats{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:24px;margin-top:46px}
.stat{
  text-align:center;padding:30px 16px;border-radius:var(--radius);
  background:var(--sec-card, var(--yellow-soft));position:relative;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease;
}
.stat::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:44px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-deep));
}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat b{display:block;font-size:calc(var(--fs-h2) * 1.235);font-weight:var(--fw-heading);color:var(--sec-accent, var(--brown));line-height:1;letter-spacing:-.035em}
.stat span{font-size:var(--fs-md);color:var(--sec-muted, var(--ink-soft));margin-top:8px;display:block}
/* 统计口径脚注：小字、居中、与数字保持呼吸距离；不抢主体视觉 */
.stat-note{margin-top:26px;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));
  text-align:center;line-height:1.9;max-width:760px;margin-left:auto;margin-right:auto}

/* ---------- 合作案例 / 伙伴 ---------- */
.case{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:24px;margin-top:46px}
.case .c{background:var(--sec-card, var(--card-bg));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease}
.case .c:hover{transform:translateY(calc(var(--card-lift) * -1));box-shadow:var(--shadow)}
.case .c .top{
  height:168px;background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
.case .c .c-media{height:168px;overflow:hidden;background:rgba(var(--dark-rgb),.06)}
.case .c .c-photo,.case .c .c-media img{display:block;width:100%;height:100%;object-fit:cover}
  display:flex;align-items:center;justify-content:center;font-size:34px;position:relative;overflow:hidden;
}
/* 顶部色块加斜向高光纹理 */
.case .c .top::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 10px,transparent 10px 20px);
  opacity:.7;
}
.case .c .top .ic-svg,.case .c .top .ic-img{position:relative;z-index:1}
.case .c .body{padding:20px}
.case .c .body h3{font-size:var(--fs-h5);margin-bottom:6px;letter-spacing:var(--ls-heading)}
.case .c .body p{font-size:var(--fs-sm);color:var(--ink-soft)}
.partners{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:40px}
.partners .p{
  display:inline-flex;align-items:center;
  background:var(--sec-card, var(--card-bg));border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 28px;
  font-weight:700;color:var(--ink-soft);font-size:var(--fs-base);box-shadow:var(--shadow-sm);
  transition:color var(--dur-1) ease,border-color var(--dur-1) ease,transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease;
}
.partners .p:hover{color:var(--brown);border-color:var(--yellow);transform:translateY(-3px);box-shadow:var(--shadow)}

/* ---------- 合作步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:22px;margin-top:46px}
.step{
  background:var(--sec-card, var(--card-bg));border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease;
}
.step:hover{transform:translateY(calc(var(--card-lift) * -1));box-shadow:var(--shadow)}
/* 巨大的弱化序号做底，形成编辑感层次 */
.step::after{
  content:attr(data-step);position:absolute;right:14px;top:2px;
  font-size:64px;font-weight:900;line-height:1;letter-spacing:-.05em;
  color:rgba(var(--shadow-rgb),.09);pointer-events:none;
}
.step .num{font-size:var(--fs-sm);font-weight:800;color:var(--dark-text);background:var(--sec-accent, var(--brown));width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:var(--fs-h5);margin-bottom:8px;letter-spacing:var(--ls-heading)}
.step p{font-size:var(--fs-sm);color:var(--sec-muted, var(--ink-soft))}
/* 并列的「合作线」卡片：面向标签 + 正文 + 资料清单 + 备注。
   普通流程步骤不带这些字段，仍是原来的编号卡，样式零影响。 */
.step-track{display:flex;flex-direction:column}
.step-track .st-who{margin:0 0 12px;padding:9px 12px;border-radius:0 10px 10px 0;
  font-size:var(--fs-xs);font-weight:700;line-height:1.55;letter-spacing:.01em;
  color:var(--sec-accent, var(--brown));background:var(--yellow-soft, #FFF7E1);
  border-left:3px solid var(--sec-accent, var(--brown))}
.step-track .st-lbl{margin:16px 0 8px;font-size:var(--fs-xs);font-weight:800;
  color:var(--sec-muted, var(--ink-soft));letter-spacing:.06em}
.step-track .st-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.step-track .st-list li{position:relative;padding-left:21px;font-size:var(--fs-sm);
  line-height:1.62;color:var(--ink-soft)}
.step-track .st-list li::before{content:"✓";position:absolute;left:0;top:-1px;
  font-weight:800;color:var(--sec-accent, var(--brown))}
.step-track .st-note{margin-top:auto;padding-top:14px;font-size:var(--fs-xs);
  line-height:1.6;color:var(--sec-muted, var(--ink-soft));border-top:1px dashed var(--line)}

/* ---------- 联系 CTA ---------- */
.cta{
  background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  border-radius:var(--radius-lg);padding:56px 40px;text-align:center;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
/* CTA 内的同心圆光晕，让色块有纵深 */
.cta::before{
  content:"";position:absolute;left:-14%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 66%);pointer-events:none;
}
.cta h2{font-size:calc(var(--fs-h2) * .94);font-weight:var(--fw-heading);color:var(--dark);margin-bottom:12px;letter-spacing:var(--ls-heading);position:relative}
.cta p{font-size:var(--fs-lg);color:var(--sec-muted, var(--brown-sub));margin-bottom:26px;position:relative}
.cta .btn.dark{background:var(--dark);position:relative}
.cta .qr{
  position:absolute;right:36px;bottom:36px;width:96px;height:96px;border-radius:var(--radius-sm);
  background:var(--sec-card, var(--card-bg));display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--ink-soft);
  box-shadow:var(--shadow);text-align:center;line-height:1.3;z-index:1;
}

/* ---------- 页脚 ---------- */
.footer{background:var(--dark);color:rgba(var(--dark-text-rgb),.75);padding:56px 0 30px;position:relative}
.footer::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--yellow-rgb),.4),transparent);
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
/* 页脚栏目标题必须自带守卫：独立页的页脚挂在 #page-root 里，会被上面
   全局色令牌层 #page-root :is(h1,h2,h3,.h2)（特异度 1,0,1）压过本条（0,1,1）。
   令牌 --g-h 未设置时回落到 --ink（深棕 #3A2E12），落在深底上只剩 1.1:1 ——
   实测 10 个子页全中，首页因有 #site-root 那条而幸免。后台画布同理要带 #preview。 */
.footer h4, .footer h3, #site-root .footer :is(h3,h4), #page-root .footer :is(h3,h4), #preview .footer :is(h3,h4){color:var(--dark-text);font-size:var(--fs-base);margin-bottom:16px;font-weight:700;letter-spacing:0}
.footer a{display:block;font-size:var(--fs-sm);color:rgba(var(--dark-text-rgb),.7);margin-bottom:4px;padding:5px 0;transition:color var(--dur-1) ease,transform var(--dur-1) ease}
.footer a:hover{color:var(--yellow);transform:translateX(3px)}
.footer .brand{color:var(--dark-text);margin-bottom:14px}
.footer .brand b{color:var(--yellow)}
.footer .brand:hover .logo{transform:none}
.footer p{font-size:var(--fs-sm);line-height:1.8}
/* .5 的白在 #1A1426 上是 5.25:1，但皮肤会把页脚底色换成更亮的深色
   （route 的 #0E3B3E 上实测只剩 4.28:1，13px 小字不达 AA）——提到 .62 后
   各套页脚底色都过线，视觉上仍是次要信息层。 */
.footer-bottom{border-top:1px solid rgba(var(--dark-text-rgb),.12);margin-top:40px;padding-top:22px;font-size:var(--fs-xs);color:rgba(var(--dark-text-rgb),.62);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* 管理入口：刻意做得很淡，访客基本不会注意；鼠标移上去才亮。
   原来的「后台登录 / 编辑本站」太显眼，已换成这个。 */
.footer-admin{margin-left:auto;color:rgba(var(--dark-text-rgb),.32);font-size:calc(var(--fs-xs) * .94);
  /* 让开右下角悬浮的「回到顶部」（right:22px + 直径 46px = 覆盖到距右边缘 68px 处）。
     实测：滚到页脚时这个链接整个被圆钮盖住，点不到——而它是唯一的后台入口。 */
  text-decoration:none;padding:2px 0;margin-right:56px;transition:color var(--dur-1) ease}
.footer-admin:hover{color:var(--yellow);text-decoration:none;transform:none}

/* 前台不再有悬浮的「编辑本站」按钮：入口统一收到页脚右下角（.footer-admin），
   刻意做得低调，访客基本不会注意。原 .admin-entry 样式已移除。 */

/* ============================================================
   滚动揭示动画（支持错峰）
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
/* 容器内子项依次进入：给 .reveal-stagger 的子元素自动排延迟 */
.reveal-stagger>*{opacity:0;transform:translateY(22px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.reveal-stagger.in>*{opacity:1;transform:none}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.13s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.21s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.29s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.37s}
.reveal-stagger.in>*:nth-child(6){transition-delay:.45s}
.reveal-stagger.in>*:nth-child(7){transition-delay:.53s}
.reveal-stagger.in>*:nth-child(8){transition-delay:.61s}
/* 首屏文字左→右、手机右→左，避免整块一起动 */
.hero-text.reveal{transform:translateX(-24px)}
.phone-wrap.reveal{transform:translateX(24px)}
.hero-text.reveal.in,.phone-wrap.reveal.in{transform:none}

/* ---------- 回到顶部 ---------- */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:120;width:46px;height:46px;border-radius:50%;
  background:var(--dark);color:var(--dark-text);display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:var(--shadow);opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--dur-2) ease,visibility var(--dur-2),transform var(--dur-2) var(--ease-out),background var(--dur-1) ease;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brown);transform:translateY(-3px)}

/* ---------- 滚动进度条 ---------- */
.scroll-progress{
  position:fixed;left:0;top:0;height:2.5px;z-index:130;width:0;
  background:linear-gradient(90deg,var(--yellow),var(--brown));
  transition:width .1s linear;pointer-events:none;
}

/* ---------- 无障碍：焦点可见 + 减少动效 ---------- */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
/* 柔和焦点环：键盘导航时更精致，也用于卡片/导航的活动态 */
.card:focus-within,.adv:focus-within,.case .c:focus-within{box-shadow:var(--ring)}
.nav a.on:focus-visible,.nav a:hover:focus-visible{box-shadow:var(--ring);border-radius:8px}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion: no-preference){
  .phone{animation:heroFloat 7s var(--ease-out) infinite}
  .phone:hover{animation-play-state:paused}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.reveal-stagger>*{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .nav,.to-top,.cta .qr,.scroll-progress{display:none}
  .m-toolbar,.m-chips,.m-achips,.m-loca-note,.mf-loc-switch{display:none}
  /* 屏幕版的「公示信息更新于」与打印附页自带的那行重复，打印时只留附页版 */
  .m-updated{display:none}
  .m-card{break-inside:avoid;box-shadow:none}
  section{padding:24px 0;break-inside:avoid}
  body{color:#000}
}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  .brand{font-size:calc(var(--fs-base) * 1.05)}
  .hero-grid,.app-grid{grid-template-columns:1fr;gap:36px}
  .phone-wrap{order:-1}
  .phone-wrap.reveal{transform:translateY(24px)}
  .hero-text.reveal{transform:translateY(24px)}
  .grid.c3,.grid.c4,.adv-grid,.stats,.steps,.case{grid-template-columns:repeat(var(--cols-md,2),1fr)}
  /* 逐档隐藏：区块可在平板档单独隐藏 */
  #site-root .bp-md-hide,#page-root .bp-md-hide{display:none!important}
  /* 逐档字号：未设置时 zoom:1，无副作用 */
  #site-root section[data-sec],#page-root section[data-sec]{zoom:var(--fs-md,1)}
  .hero h1{font-size:calc(var(--fs-h1) * .77)}
  .hero::before{background-size:44px 44px}
  /* 单列布局时手机图改为居中展示，宽度取窗口与上限的较小值，避免过高挤出正文 */
  .phone-wrap{--phone-max:300px}
}
/* 1100px 以下：9 项导航 + 品牌 + CTA 实测需 ~1078px，放不下即收纳为汉堡菜单（避免横向溢出与挤压） */
@media(max-width:1100px){
  .nav-links{
    position:absolute;top:var(--nav-h);left:0;right:0;background:var(--page-bg);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 16px 18px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 8px;font-size:var(--fs-md)}
  .nav-links a::after{left:8px;right:auto;width:18px}
  .nav-toggle{display:flex}
}
@media(max-width:720px){
  /* 窄屏保留唯一 CTA（缩紧），避免与下拉菜单重复 */
  .nav .btn{padding:9px 14px;font-size:var(--fs-xs)}
  section{padding:calc(var(--sec-pad) * .72) 0}
  .h2{font-size:calc(var(--fs-h2) * .8)}
  .hero h1{font-size:calc(var(--fs-h1) * .62)}
  .hero{padding:52px 0 68px}
  .grid.c2,.grid.c3,.grid.c4,.adv-grid,.stats,.steps,.case,.food-gallery{grid-template-columns:repeat(var(--cols-sm,1),1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* 逐档隐藏：区块可在手机档单独隐藏（平板档隐藏的在此同样不显示） */
  #site-root .bp-sm-hide,#page-root .bp-sm-hide{display:none!important}
  #site-root section[data-sec],#page-root section[data-sec]{zoom:var(--fs-sm,1)}
  .cta .qr{display:none}
  .step::after{font-size:52px}
  .phone-wrap{--phone-max:254px}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap;gap:18px 28px}
  .phone-wrap{--phone-max:220px}
}

/* ---------- 联系区块二维码（支持上传真实小程序码图片） ---------- */
.cta .qr.has-img { padding: 6px; overflow: hidden; }
.cta .qr.has-img img { display: block; }

/* ---------- 超小屏导航：品牌与 CTA 不再拥挤 ---------- */
@media(max-width:420px){
  .wrap { padding: 0 calc(var(--wrap-pad) * .67); }
  .brand { font-size: calc(var(--fs-base) * 1.06); }
  .brand .logo { width: 34px; height: 34px; font-size: 18px; }
  .nav .btn { padding: 8px 12px; font-size: calc(var(--fs-base) * .78); }
}

/* ============================================================
   矢量图标系统（替换 emoji，统一 24×24 描边风格）
   ============================================================ */
.ic-svg{width:var(--ic-size);height:var(--ic-size);display:block;flex:0 0 auto;transition:transform var(--dur-2) var(--ease-spring)}
.ic-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.ic-emoji{font-size:var(--ic-size);line-height:1}

.card .ic{color:var(--sec-accent, var(--brown))}
.card .ic .ic-svg{width:calc(var(--ic-size) * .96);height:calc(var(--ic-size) * .96)}

.app-features .f .dot{color:var(--brown)}
.app-features .f .dot .ic-svg{width:calc(var(--ic-size) * .81);height:calc(var(--ic-size) * .81)}

.adv .ic{color:var(--sec-accent, var(--yellow));margin-bottom:15px}
.adv .ic .ic-svg{width:calc(var(--ic-size) * 1.15);height:calc(var(--ic-size) * 1.15)}

.case .c .top{color:var(--sec-accent, var(--glyph))}
.case .c .top .ic-svg{width:calc(var(--ic-size) * 1.31);height:calc(var(--ic-size) * 1.31)}

/* 品牌标识 */
.brand .logo{color:var(--on-primary)}
.brand .logo .logo-svg{width:calc(var(--ic-size) * .88);height:calc(var(--ic-size) * .88);display:block}
/* 品牌标识可以直接换成一张图片，按圆角容器裁切 */
.brand .logo .logo-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ---------- 图片被清空时的品牌占位块（DIY 安全网：任何地方清空图片都不会破图） ---------- */
.img-fallback{
  width:100%;aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--yellow-soft),rgba(var(--yellow-rgb),.55));
  color:var(--glyph);
}
.img-fallback .logo-svg{width:30%;height:auto;opacity:.55}
.img-fallback-sm{aspect-ratio:16/10;border-radius:inherit}
.img-fallback-sm .logo-svg{width:26%}
.footer .brand .logo{color:var(--on-primary)}

/* ============================================================
   商家公示（外卖平台合规页）：搜索 + 商家卡 + 菜单折叠 + 公示声明
   ============================================================ */
.merchants-sec .m-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.m-search{flex:1 1 300px;max-width:520px;padding:13px 18px;border-radius:var(--radius-btn);
  border:1.5px solid var(--line);background:var(--sec-card,var(--card-bg));font-size:var(--fs-md);
  color:var(--ink);outline:none;transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease}
.m-search:focus{border-color:var(--sec-accent,var(--brown));box-shadow:var(--ring)}
.m-search::placeholder{color:var(--ink-soft)}
.m-count{font-size:var(--fs-sm);color:var(--sec-muted,var(--ink-soft));font-variant-numeric:tabular-nums}
.m-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}
.m-chip{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--sec-card,var(--card-bg));
  color:var(--sec-muted,var(--ink-soft));font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:color var(--dur-1) ease,border-color var(--dur-1) ease,background var(--dur-1) ease,transform var(--dur-1) ease}
.m-chip:hover{color:var(--sec-accent,var(--brown));border-color:var(--sec-accent,var(--brown));transform:translateY(-2px)}
/* 品类是「区域之下」的第二级筛选，选中态刻意不做实心填充：
   否则与上方实心的「全部区域」形成两个抢焦点的主选中态。 */
.m-chip.active{background:var(--sec-card,var(--card-bg));border-color:var(--sec-accent,var(--brown));
  color:var(--brown);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--sec-accent,var(--brown))}
/* 当前区域下没有的品类：置灰不可点，避免点进一个必然空白的列表 */
.m-chip.is-off{opacity:.4;cursor:not-allowed}
.m-chip.is-off:hover{color:inherit;border-color:var(--line);transform:none}
.m-notice{margin-top:24px;padding:14px 20px;border-radius:var(--radius);text-align:left;
  background:var(--sec-card,var(--yellow-soft));border:1px dashed rgba(var(--yellow-rgb),.55);
  color:var(--sec-muted,var(--ink-soft));font-size:var(--fs-sm);line-height:1.9}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;margin-top:28px;text-align:left}
.m-card{background:var(--sec-card,var(--card-bg));border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease}
.m-card:hover{transform:translateY(calc(var(--card-lift) * -1));box-shadow:var(--shadow)}
.m-top{display:flex;align-items:flex-start;gap:12px}
.m-ic{width:46px;height:46px;border-radius:calc(var(--radius) * .78);background:var(--yellow-soft);
  color:var(--sec-accent,var(--brown));display:flex;align-items:center;justify-content:center;flex:none}
.m-name{font-size:var(--fs-md);font-weight:800;color:var(--ink);letter-spacing:var(--ls-heading);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-cat{display:inline-block;margin-top:4px;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));
  background:var(--yellow-soft);border-radius:999px;padding:2px 10px}
.m-meta{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--sec-muted,var(--ink-soft))}
.m-meta li{display:flex;gap:8px;line-height:1.65}
.m-meta .k{flex:none;font-weight:700;color:var(--glyph,var(--brown))}
/* 打印附页：屏幕上完全不占位，仅在打印/导出 PDF 时展开 */
.m-print-only{display:none}
@media print{
  .m-print-only{display:block;margin-top:28px}
  .m-print-only>h3{font-size:16px;font-weight:800;margin-bottom:4px}
  .m-print-only>p{font-size:11px;color:#555;margin-bottom:10px}
  .m-print-grp{break-inside:avoid;margin-bottom:14px}
  .m-print-grp h3{font-size:13px;font-weight:800;margin:10px 0 4px}
  .m-print-only table{width:100%;border-collapse:collapse;font-size:10.5px;line-height:1.5}
  .m-print-only th,.m-print-only td{text-align:left;vertical-align:top;border-bottom:1px solid #ddd;padding:4px 6px}
  .m-print-only th{width:18%;font-weight:700}
}
.m-empty{display:none;margin-top:26px;text-align:center;color:var(--sec-muted,var(--ink-soft));font-size:var(--fs-md)}
.m-empty[data-show]{display:block}
.m-updated{margin-top:22px;text-align:center;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}
/* 仅供读屏软件 / SEO 的页面主标题（无 hero 的页面自动补齐） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   商户主页（foodpanda 式详情层）：可点击卡片 + 全屏 overlay + 迷你购物车
   ============================================================ */
.m-card-clickable{cursor:pointer}
.m-card-clickable:focus-visible{outline:3px solid var(--sec-accent,var(--brown));outline-offset:2px}
.m-open-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px dashed var(--line);padding-top:10px}

/* overlay 外壳 */
.m-detail-mask{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  padding:28px;background:rgba(15,12,8,.55);opacity:0;transition:opacity var(--dur-2) ease}
.m-detail-mask.open{opacity:1}
.m-detail{position:relative;width:min(720px,100%);max-height:min(92vh,100% - 56px);
  background:var(--card-bg,#fff);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.985);transition:transform var(--dur-2) var(--ease-out)}
.m-detail-mask.open .m-detail{transform:none}
.md-close{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;
  border:none;cursor:pointer;background:rgba(255,255,255,.92);color:#333;font-size:16px;line-height:1;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-1) ease,background var(--dur-1) ease}
.md-close:hover{transform:rotate(90deg);background:#fff}

/* 头部横幅：无图时品牌渐变 + 大图标 */
.md-hero{position:relative;height:170px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--yellow-soft),rgba(var(--yellow-rgb),.55));
  display:flex;align-items:center;justify-content:center}
.md-hero.has-banner{height:210px}
.md-hero img{width:100%;height:100%;object-fit:cover;display:block}
.md-hero-glyph{color:var(--glyph,var(--brown));opacity:.5}
.md-hero-glyph .ic-svg{width:84px;height:84px}

/* 主体滚动区 */
.md-body{overflow-y:auto;padding:22px 26px 18px;flex:1 1 auto;overscroll-behavior:contain}
.md-head{display:flex;align-items:center;gap:14px;margin-top:-46px;position:relative;z-index:2}
.md-hero.has-banner ~ .md-body .md-head{margin-top:-56px}
.md-ic{width:64px;height:64px;border-radius:calc(var(--radius) * .9);background:var(--card-bg,#fff);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);flex:none;
  display:flex;align-items:center;justify-content:center}
.md-title{min-width:0}
.md-title h3{font-size:calc(var(--fs-h3) * 1.16);font-weight:800;color:var(--ink);letter-spacing:var(--ls-heading)}
.md-sub{display:block;margin-top:3px;font-size:var(--fs-sm);color:var(--sec-accent,var(--brown));font-weight:700}
.md-desc{margin-top:14px;font-size:var(--fs-sm);color:var(--sec-muted,var(--ink-soft));line-height:1.8}
.md-meta{list-style:none;margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--yellow-soft,#FFF7E1);display:flex;flex-direction:column;gap:8px}
.md-meta li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--sec-t,var(--ink-soft));line-height:1.7}
.md-meta .k{flex:none;font-weight:800;color:var(--brown,#8F7420)}
.md-list{list-style:none;display:flex;flex-direction:column}
.md-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 2px;border-bottom:1px dashed var(--line);transition:background var(--dur-1) ease}
.md-item.hit{background:var(--yellow-soft,#FFF7E1)}
.md-item.picked .mdi b{color:var(--sec-accent,var(--brown))}
.mdi{min-width:0;display:flex;flex-direction:column;gap:3px}
.mdi b{font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.mdi-desc{font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}
.mdi-price{font-size:var(--fs-sm);font-weight:800;color:var(--sec-accent,var(--brown))}
/* 菜品步进器：未加购只露「＋」，加过才露数量与「−」 */
.md-step{flex:none;display:flex;align-items:center;gap:8px}
.ms-qty{min-width:20px;text-align:center;font-size:var(--fs-sm);font-weight:800;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ms-minus{width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;font-weight:700;
  border:1.5px solid var(--sec-accent,var(--brown));background:transparent;color:var(--sec-accent,var(--brown));
  transition:transform var(--dur-1) var(--ease-spring),background var(--dur-1) ease}
.ms-minus:hover{background:var(--yellow-soft,#FFF7E1);transform:scale(1.08)}
.md-add{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:var(--sec-accent,var(--brown));color:#fff;font-size:17px;line-height:1;font-weight:700;
  transition:transform var(--dur-1) var(--ease-spring),filter var(--dur-1) ease}
.md-add:hover{filter:brightness(1.12)}
/* 现制说明：原来每家 5~6 道菜重复同一句话，去重后提到商户级只出现一次 */
.md-dish-note{display:flex;align-items:baseline;gap:8px;margin:4px 0 12px;padding:9px 12px;
  border-radius:var(--radius-sm);background:var(--yellow-soft,#FFF7E1);
  font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.6}
.md-dish-note b{flex:none;font-size:var(--fs-xs);font-weight:800;color:var(--brown,#8F7420)}
.md-foot-note{margin-top:18px;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));text-align:center;opacity:.85}

/* 底部购物车条 */
.md-bar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-top:1px solid var(--line);background:var(--card-bg,#fff);position:relative}
.md-cart{font-size:var(--fs-sm);color:var(--ink-soft);flex:none}
.md-cart b{color:var(--sec-accent,var(--brown));font-variant-numeric:tabular-nums}
.md-checkout{padding:10px 20px;font-size:var(--fs-sm);flex:none}
.md-toast{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(6px);
  background:var(--dark,#1A1426);color:#fff;font-size:var(--fs-xs);padding:8px 16px;border-radius:999px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-1) ease,transform var(--dur-1) ease}
.md-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 明细行：件数 / 金额 / 起送缺口 */
.md-sum{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.md-sum b{font-size:var(--fs-md);color:var(--sec-accent,var(--brown));font-variant-numeric:tabular-nums}
.md-sum i{font-style:normal;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}
.md-min{flex:none;font-size:var(--fs-xs);font-weight:800;color:var(--brown);
  background:var(--yellow-soft,#FFF7E1);border-radius:999px;padding:5px 10px;white-space:nowrap}

/* 顶栏：手机上给出「返回列表」的明确出口 */
.md-top{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--card-bg,#fff)}
.md-back{border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:var(--fs-sm);font-weight:800;color:var(--sec-accent,var(--brown));padding:4px 2px}
.md-back:hover{text-decoration:underline}
.md-top-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.md-top-area{margin-left:auto;flex:none;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}

/* 下单引导层：盖在商户主页之上，把已选清单如实带出并给出真实下单去处。
   不收集任何个人信息，也不假装能在这个页面下单。 */
.md-guide{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(15,12,8,.5);animation:mdgIn var(--dur-2) var(--ease-out)}
.md-guide[hidden]{display:none}
@keyframes mdgIn{from{opacity:0}to{opacity:1}}
.mdg-card{position:relative;width:min(420px,100%);background:var(--card-bg,#fff);border-radius:var(--radius);
  padding:28px 26px 24px;box-shadow:var(--shadow-xl);text-align:center}
.mdg-card h4{font-size:var(--fs-h3);font-weight:800;color:var(--ink);margin-bottom:12px;letter-spacing:var(--ls-heading)}
.mdg-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border:none;background:transparent;
  cursor:pointer;font-size:15px;color:var(--ink-soft);border-radius:50%;transition:background var(--dur-1) ease}
.mdg-x:hover{background:var(--yellow-soft,#FFF7E1)}
.mdg-sum{font-size:var(--fs-sm);color:var(--sec-accent,var(--brown));font-weight:700;line-height:1.7;
  padding:10px 12px;border-radius:var(--radius-sm);background:var(--yellow-soft,#FFF7E1);margin-bottom:12px}
.mdg-note{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.85;margin-bottom:16px}
.mdg-qr{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px}
.mdg-qr img,.mdg-qr-ph{width:132px;height:132px;border-radius:12px;object-fit:contain;background:#fff}
.mdg-qr-ph{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);
  font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));background:var(--yellow-soft,#FFF7E1)}
.mdg-qr i{font-style:normal;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}
.mdg-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mdg-call,.mdg-ok{padding:12px 20px;border-radius:var(--radius-btn);font-size:var(--fs-sm);font-weight:800;
  cursor:pointer;text-decoration:none;font-family:inherit;transition:filter var(--dur-1) ease,background var(--dur-1) ease}
.mdg-call{border:1.5px solid var(--sec-accent,var(--brown));color:var(--sec-accent,var(--brown));background:transparent}
.mdg-call:hover{background:var(--yellow-soft,#FFF7E1)}
.mdg-ok{border:none;background:var(--sec-accent,var(--brown));color:#fff}
.mdg-ok:hover{filter:brightness(1.1)}
/* 顶栏的「← 返回」是唯一关闭入口，保留右上角按钮会在窄屏里和区域标签打架。
   元素仍留在 DOM 中（bindMerchantDetail 靠 data-md-close 委托），只是不显示。 */
.md-close{display:none}

/* 门面角标 / 概览指标 / 拨号 */
.md-hero-badge{position:absolute;left:16px;bottom:14px;z-index:2;font-size:var(--fs-xs);font-weight:800;
  color:#fff;background:rgba(0,0,0,.55);border-radius:999px;padding:5px 12px}
.md-stats{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.md-stats li{display:flex;align-items:baseline;gap:6px;flex:1 1 auto;min-width:110px;
  padding:9px 12px;border-radius:var(--radius-sm);background:var(--yellow-soft,#FFF7E1)}
.md-stats i{font-style:normal;font-size:var(--fs-xs);color:var(--ink-soft);flex:none}
.md-stats b{font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.md-tel{display:inline-block;margin-top:6px;font-size:var(--fs-sm);font-weight:800;
  color:var(--sec-accent,var(--brown));text-decoration:none}
.md-tel:hover{text-decoration:underline}

/* 分栏：点单 / 商家信息 / 证照公示 */
.md-tabs{position:sticky;top:0;z-index:3;display:flex;gap:4px;margin:20px -26px 0;padding:10px 26px 0;
  background:var(--card-bg,#fff);border-bottom:1px solid var(--line)}
.md-tab{flex:1;border:none;background:transparent;cursor:pointer;font-family:inherit;
  padding:10px 4px 12px;font-size:var(--fs-sm);font-weight:800;color:var(--ink-soft);
  border-bottom:3px solid transparent;transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.md-tab:hover{color:var(--sec-accent,var(--brown))}
.md-tab.active{color:var(--ink);border-bottom-color:var(--sec-accent,var(--brown))}
.md-pane{padding-top:6px}
.md-pane .md-meta{margin-top:14px}
.md-pane-hint{margin-top:14px;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));line-height:1.8}

@media(max-width:720px){
  .m-detail-mask{padding:0}
  .m-detail{width:100%;max-height:100%;height:100%;border-radius:0}
  .md-hero{height:140px}
  .md-hero.has-banner{height:170px}
  .md-body{padding:18px 16px 14px}
  .md-head{margin-top:-40px}
  .md-bar{padding:10px 12px}
  .md-checkout{padding:10px 14px}
  /* 窄屏正文左右内边距是 16px，分栏条要按这个值出血对齐 */
  .md-tabs{margin:16px -16px 0;padding:8px 16px 0}
  .md-tab{padding:8px 2px 11px;font-size:var(--fs-xs)}
  .md-stats li{min-width:0;flex:1 1 45%;padding:8px 10px}
  .md-top{padding:8px 10px}
  /* 窄屏底部条放不下四段：件数与合计重复，优先保住「还差多少起送」这类可操作提示 */
  .md-cart{display:none}
  .md-sum b{font-size:var(--fs-sm)}
  .md-min{padding:4px 8px}
}
@media print{.m-detail-mask{display:none}}

/* ============================================================
   foodpanda 式商家公示主体（mf-panda）：粉色 hero + 大搜索条 +
   圆形服务入口 + 餐厅大图卡网格。主题色走页面令牌（app 页配粉色系）。
   ============================================================ */
.mf-panda .m-chips{justify-content:flex-start;margin-top:6px}
.mf-panda .m-toolbar{margin-top:26px;justify-content:space-between}
.mf-hero{padding:64px 24px 40px;text-align:center;
  background:linear-gradient(180deg,var(--hero-top,#FFFDF6),var(--page-bg,#fff))}
.mf-hero-eyebrow{font-size:var(--fs-sm);font-weight:800;letter-spacing:.14em;
  color:var(--brown);text-transform:uppercase;margin-bottom:10px}
.mf-hero-title{font-size:clamp(30px,4.6vw,52px);line-height:1.15;font-weight:800;
  color:var(--ink);letter-spacing:-.015em;max-width:820px;margin:0 auto}
.mf-hero-lead{margin:14px auto 0;max-width:640px;font-size:var(--fs-lg);
  color:var(--sec-muted,var(--ink-soft));line-height:1.75}
.mf-searchbar{margin:28px auto 0;max-width:620px;display:flex;align-items:stretch;
  background:var(--sec-card,var(--card-bg));border-radius:14px;overflow:hidden;
  box-shadow:0 10px 34px rgba(var(--sk-a-rgb,var(--yellow-rgb)),.16),0 2px 6px rgba(var(--sk-a-rgb,var(--yellow-rgb)),.08);
  border:1.5px solid rgba(var(--sk-a-rgb,var(--yellow-rgb)),.14)}
.mf-searchbar-ic{display:flex;align-items:center;padding:0 4px 0 14px;color:var(--brown)}
/* min-width:0 必须有：flex 子项默认 min-width:auto，<input> 会按 size 属性
   撑出固有宽度不肯收缩，而 .mf-searchbar 带 overflow:hidden →
   窄屏下「查找商家」按钮被整块裁掉、不可滑出。 */
.mf-panda .m-search{flex:1;min-width:0;border:none;box-shadow:none;background:transparent;padding:16px 10px;font-size:var(--fs-md)}
.mf-panda .m-search:focus{box-shadow:none;border:none}
.mf-search-btn{flex:none;border:none;cursor:pointer;padding:0 26px;margin:6px;border-radius:10px;
  background:var(--sec-accent,var(--brown));color:var(--on-accent,var(--on-primary,#fff));font-weight:800;font-size:var(--fs-md);
  transition:filter var(--dur-1) ease}
.mf-search-btn:hover{filter:brightness(1.08)}
/* 定位条：先确认「在哪个学校 / 园区」，再往下选区域 */
.mf-loc{margin:26px auto 0;max-width:620px;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:14px;background:var(--sec-card,var(--card-bg));
  border:1.5px solid rgba(var(--sk-a-rgb,var(--yellow-rgb)),.14);box-shadow:0 6px 22px rgba(var(--sk-a-rgb,var(--yellow-rgb)),.10)}
.mf-loc-ic{flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;background:var(--yellow-soft,#FFF7E1);
  color:var(--brown)}
.mf-loc-ic .ic-svg{width:20px;height:20px}
.mf-loc-txt{min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.mf-loc-txt b{font-size:var(--fs-md);font-weight:800;color:var(--ink);letter-spacing:var(--ls-heading)}
.mf-loc-txt i{font-style:normal;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}
.mf-loc-switch{margin-left:auto;flex:none;border:1.5px solid var(--sec-accent,var(--brown));
  background:transparent;color:var(--sec-accent,var(--brown));cursor:pointer;font-family:inherit;
  font-size:var(--fs-xs);font-weight:800;padding:8px 14px;border-radius:999px;
  transition:background var(--dur-1) ease,color var(--dur-1) ease}
.mf-loc-switch:hover{background:var(--sec-accent,var(--brown));color:var(--on-accent,var(--on-primary,#fff))}
/* 区域 chips：比品类 chips 高一级，用实心块区分层级 */
.m-achips{margin-top:22px;display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.m-achip{flex:none;display:flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  padding:10px 16px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--sec-card,var(--card-bg));color:var(--ink);
  transition:border-color var(--dur-1) ease,background var(--dur-1) ease,transform var(--dur-1) var(--ease-out)}
.m-achip:hover{border-color:var(--sec-accent,var(--brown));transform:translateY(-2px)}
.m-achip-t{font-size:var(--fs-sm);font-weight:800;white-space:nowrap}
.m-achip i{font-style:normal;font-size:var(--fs-xs);font-weight:800;color:var(--sec-muted,var(--ink-soft));
  background:rgba(var(--shadow-rgb),.10);border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums}
.m-achip.active{background:var(--sec-accent,var(--brown));border-color:var(--sec-accent,var(--brown));color:var(--on-accent,var(--on-primary,#fff))}
.m-achip.active i{background:rgba(255,255,255,.22);color:var(--on-accent,var(--on-primary,#fff))}
.m-loca-note{margin-top:2px;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));line-height:1.7}
.mf-modes{margin-top:26px;display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.mf-mode{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--sec-muted,var(--ink-soft));font-family:inherit}
/* 当前方式回显：紧贴圆形入口下方的一行小字，切换时实时改写 */
.mf-mode-cur{margin-top:12px;text-align:center;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft))}
.mf-mode-cur:empty{display:none}
.mf-mode-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--sec-card,var(--card-bg));color:var(--sec-accent,var(--brown));
  border:2px solid var(--line);transition:transform var(--dur-2) var(--ease-spring),border-color var(--dur-1) ease}
.mf-mode.on .mf-mode-ic{background:var(--sec-accent,var(--brown));border-color:var(--sec-accent,var(--brown));
  color:var(--on-accent,var(--on-primary,#fff))}
.mf-mode-t{font-size:var(--fs-sm);font-weight:700}
.mf-mode.on .mf-mode-t{color:var(--sec-accent,var(--brown))}
/* 餐厅卡：大图卡面 + 优惠角标 + 双行信息 */
.mf-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:22px}
.mf-panda .m-card{padding:0;overflow:hidden;gap:0}
.mf-cover{position:relative;aspect-ratio:16/9;background:rgba(var(--shadow-rgb),.06)}
.mf-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mf-grad{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}
.mf-grad-ch{position:absolute;right:10px;bottom:2px;font-size:64px;font-weight:900;line-height:1;
  color:rgba(255,255,255,.75);letter-spacing:-.04em;pointer-events:none}
.mf-grad-ic{color:var(--sec-accent,var(--brown));opacity:.9}
.mf-grad-ic .ic-svg{width:56px;height:56px}
.mf-badge{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:8px;
  background:var(--sec-accent,var(--brown));color:var(--on-accent,var(--on-primary,#fff));font-size:var(--fs-xs);font-weight:800;
  box-shadow:0 4px 12px rgba(0,0,0,.18)}
/* 暂停营业：商家记录仍在（公示留痕），只是不再出现在列表里。
   这里兜底隐藏，避免无 JS / JS 未跑完时先闪出来；筛选逻辑本身在 filterMerchants 里判。 */
.m-card[data-off]{display:none}
.mf-badge-off{background:#6b7280;color:#fff;letter-spacing:.02em}
.mf-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.mf-line1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mf-info .m-name{font-size:calc(var(--fs-base) * 1.06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-rate{flex:none;font-weight:800;font-size:var(--fs-sm);color:var(--brown);
  font-variant-numeric:tabular-nums}
.mf-line2{font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));font-weight:600}
/* 卡片上的区域标签：让「这家店在哪个校区」在列表里就能读到 */
.mf-area-tag{align-self:flex-start;font-size:11px;font-weight:800;color:var(--brown);
  background:var(--yellow-soft,#FFF7E1);border-radius:6px;padding:3px 8px;line-height:1.4}
.mf-meta{list-style:none;margin-top:2px;border-top:1px dashed var(--line);padding-top:8px;
  display:flex;flex-direction:column;gap:3px}
.mf-meta li{display:flex;gap:8px;font-size:var(--fs-xs);color:var(--sec-muted,var(--ink-soft));line-height:1.5}
.mf-meta .k{flex:none;font-weight:700;color:var(--glyph,var(--brown))}
.mf-meta li span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-cta{margin-top:6px;font-size:var(--fs-xs);font-weight:800;color:var(--brown);
  transition:transform var(--dur-1) ease}
.m-card-clickable:hover .mf-cta{transform:translateX(3px)}
@media(max-width:720px){
  .mf-hero{padding:44px 16px 30px}
  .mf-modes{gap:20px}
  .mf-mode-ic{width:54px;height:54px}
  .mf-grid{grid-template-columns:1fr 1fr;gap:12px}
  .mf-info{padding:10px 12px 12px}
  .mf-meta li:nth-child(n+3){display:none}
  /* 手机上列表很长，区域条要跟住：否则换校区必须一路滚回顶部。
     top 让出 sticky 导航；导航滚动后会收缩 6px（.nav.scrolled），
     用同色阴影把那条缝填掉，避免卡片从缝隙里穿过去。 */
  .m-achips{position:sticky;top:var(--nav-h);z-index:60;margin-top:14px;
    background:var(--page-bg);padding:10px 0 10px;box-shadow:0 -10px 0 var(--page-bg)}
}
/* 移动端点击热区：触屏上「按得中」比「看着小」重要。
   圆钮保持原有视觉尺寸，用透明 ::after 向外扩 6px 把命中区抬到 44px 以上；
   文字类按钮直接加高内边距。桌面端不改，避免影响已调好的视觉密度。 */
@media(max-width:720px){
  .m-chip{padding:12px 16px}
  .m-achip{padding:12px 16px}
  .m-achip-t{font-size:var(--fs-sm)}
  .md-tab{padding:13px 2px 14px}
  .mf-loc-switch{padding:11px 15px}
  .md-back{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .md-add,.ms-minus{position:relative}
  .md-add::after,.ms-minus::after{content:"";position:absolute;inset:-6px;border-radius:50%}
  .md-checkout{min-height:44px}
}

@media(max-width:480px){.mf-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .m-grid{grid-template-columns:1fr;gap:16px}
  .m-toolbar{margin-top:26px}
}

/* ============================================================
   图片观感与加载体验
   ============================================================ */
img{image-rendering:auto}
/* 图片未加载完成时显示品牌色微光骨架，避免布局跳动。
   ⚠️ 不能用 :not([complete])——complete 是 DOM 属性不是 HTML 属性，
   属性选择器永远匹配 → 动画在图片加载完成后仍永久空转（每帧重绘）。
   改由 app.js 在图片 load/已完成后补 .img-done 类关掉动画。 */
.phone img,.food-card .pic img{background:linear-gradient(100deg,rgba(var(--shadow-rgb),.06) 30%,rgba(var(--shadow-rgb),.12) 50%,rgba(var(--shadow-rgb),.06) 70%);background-size:200% 100%}
@media (prefers-reduced-motion: no-preference){
  .phone img:not(.img-done),.food-card .pic img:not(.img-done){animation:imgShimmer 1.6s linear infinite}
}
@keyframes imgShimmer{to{background-position:-200% 0}}

/* 选中文字用品牌色 */
::selection{background:var(--yellow);color:var(--on-primary)}

/* 键盘导航（独立页面同样生效） */
#site-root a:focus-visible,#page-root a:focus-visible,#site-root button:focus-visible,#page-root button:focus-visible{
  outline:2px solid var(--brown);outline-offset:3px;border-radius:8px;
}
.to-top:focus-visible{outline-color:var(--dark-text)}

/* ============================================================
   独立页「校园配送」专用：图文纪实画廊 + 卡片配图
   —— 只作用于 .dlv-* / .cimg，首页结构与外观不受影响
   ============================================================ */

/* 卡片配图：图标卡（无图）完全不受影响；有图时图片贴满卡片顶部。
   ⚠️ 负 margin 与宽度都按各容器自己的 --card-pad 算（.card 28px、.adv 26px），
   改内边距只需动 --card-pad 一处，图片不会再缩回卡片左上角。
   图片一律 16:10 + object-fit:cover → 同区块内所有卡等高对齐。 */
.cimg{display:block;max-width:none;border-radius:var(--sec-img-radius, 0);background:rgba(var(--shadow-lg-rgb),.04);
  aspect-ratio:16/10;object-fit:cover;width:100%;margin:0 0 18px}
/* 只有声明了 --card-pad 的容器（.card 28px、.adv 26px）才做负 margin 全出血；
   没声明的容器按 0 兜底，退回"图占满内容宽"，不会再撑破卡片。 */
.card > .cimg,.adv > .cimg{width:calc(100% + var(--card-pad, 0px) * 2);
  margin:calc(var(--card-pad, 0px) * -1) calc(var(--card-pad, 0px) * -1) 18px}
/* 有图的卡片：文字回到卡片内边距里，图标与标题间距收一点，版面更稳 */
.adv:has(.cimg),.card:has(.cimg){padding-top:0}
.adv:has(.cimg) .ic,.card:has(.cimg) .ic{margin-bottom:12px}

.dlv-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px}

.dlv-fig{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--card-bg);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(var(--shadow-lg-rgb),var(--sh-1))}
.dlv-fig img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:transform var(--dur-2) var(--ease-out)}
.dlv-fig:hover img{transform:scale(1.035)}
.dlv-fig figcaption{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:14px 18px 16px}
.dlv-fig figcaption b{font-size:var(--fs-h4);font-weight:700;color:var(--ink);
  letter-spacing:var(--ls-heading)}
.dlv-fig figcaption span{font-size:var(--fs-sm);color:var(--ink-soft)}

@media(max-width:720px){
  .dlv-gallery{grid-template-columns:1fr;gap:16px}
}

/* ============================================================
   机构档案（Institutional Dossier）· 公司简介页组件层
   目标：深墨与暖金的比例、细线、衬线大数字、纸纹与克制动效，
   把「工商信息 / 品牌墙 / 时间轴 / 证照墙」从普通卡片列表抬到档案质感。
   全部挂在 .dsheet / .lwall / .rail / .certs / .hero-mast 这些新类上，
   不改任何既有区块的默认外观。
   ============================================================ */

/* ---------- 令牌：新增显示字族、细线与纸纹 ---------- */
:root{
  --font-display:Georgia,"Times New Roman","Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
  --rule:rgba(var(--shadow-rgb),.14);
  --rule-2:rgba(var(--shadow-rgb),.26);
  --track:.16em;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --ease-glide:cubic-bezier(.22,.61,.36,1);
}

/* 眉题本身已是带圆点的胶囊，不再追加下划线金线——那条线会掉进胶囊内部，
   看起来像排版出错。刊头与组件层的质感不依赖它。 */

/* ---------- 一、工商信息数据表 ---------- */
.dsheet{margin:38px auto 0;max-width:940px;border-top:1px solid var(--rule)}
.drow{
  display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:18px 26px;
  align-items:baseline;padding:16px 14px;margin:0 -14px;
  border-bottom:1px solid var(--rule);position:relative;
  transition:background var(--dur-1) var(--ease-glide)}
.drow::before{
  content:"";position:absolute;left:-14px;top:0;bottom:0;width:2px;
  background:var(--sec-accent, var(--brown));transform:scaleY(0);transform-origin:center;
  transition:transform var(--dur-2) var(--ease-glide)}
.drow:hover{background:linear-gradient(90deg,rgba(var(--yellow-rgb),.10),rgba(var(--yellow-rgb),0) 62%)}
.drow:hover::before{transform:scaleY(1)}
.dsheet dt{
  margin:0;font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--track);
  color:var(--sec-muted, var(--ink-soft))}
.dsheet dd{
  margin:0;font-size:var(--fs-lg);font-weight:600;line-height:1.62;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dsheet dd .dflag{
  display:inline-block;margin-left:9px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.04em;vertical-align:.14em;
  color:var(--brown-sub,var(--brown));background:rgba(var(--yellow-rgb),.24);
  border:1px dashed rgba(var(--shadow-rgb),.42)}
.drow.is-todo dd{color:var(--ink-soft);font-weight:500}
.dsheet-note{
  margin:20px auto 0;max-width:940px;font-size:var(--fs-sm);line-height:1.75;
  color:var(--sec-muted, var(--ink-soft))}
.dsheet-note::before{content:"※ ";color:var(--sec-accent, var(--brown))}

/* ---------- 二、品牌合作墙 ---------- */
.lwall{
  display:grid;grid-template-columns:repeat(var(--lw-cols,3),1fr);
  margin:42px auto 0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.lw-tile{
  position:relative;overflow:hidden;margin:0;padding:26px 24px 24px;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--sec-card, var(--card-bg));
  transition:background var(--dur-2) var(--ease-glide),transform var(--dur-2) var(--ease-glide)}
.lw-tile:hover{background:var(--yellow-soft,#FFF7E1);transform:translateY(-2px);z-index:1}
/* 掠光：悬停时一道斜光扫过，只在 hover 时跑一次 */
.lw-sheen{
  position:absolute;top:-60%;left:-70%;width:46%;height:220%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(16deg);opacity:0}
.lw-tile:hover .lw-sheen{animation:lwSheen .82s var(--ease-glide) 1 forwards}
@keyframes lwSheen{from{left:-70%;opacity:.9}to{left:130%;opacity:0}}
.lw-mark{display:flex;align-items:center;height:52px;margin-bottom:14px}
/* 未上传标识时用品牌色首字牌兜底——是设计，不是缺图 */
.lw-mono{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em;
  color:#fff;background:linear-gradient(150deg,var(--lw-tint,#8a6a2a),rgba(0,0,0,.28));
  box-shadow:0 6px 16px rgba(var(--shadow-lg-rgb),.22),inset 0 1px 0 rgba(255,255,255,.34);
  filter:saturate(.55);transition:filter var(--dur-2) var(--ease-glide),transform var(--dur-2) var(--ease-glide)}
.lw-img{
  max-width:132px;max-height:52px;width:auto;height:auto;object-fit:contain;display:block;
  filter:grayscale(1) contrast(1.06);opacity:.72;
  transition:filter var(--dur-2) var(--ease-glide),opacity var(--dur-2) var(--ease-glide),transform var(--dur-2) var(--ease-glide)}
/* 单字首字牌放大一档，两字保持原字号 */
.lw-mono[data-mono-len="1"]{font-size:24px}
.lw-tile:hover .lw-mono{filter:saturate(1);transform:scale(1.05)}
.lw-tile:hover .lw-img{filter:none;opacity:1;transform:translateY(-1px)}
.lw-tile figcaption{display:flex;flex-direction:column;gap:3px}
.lw-tile figcaption b{
  font-size:var(--fs-lg);font-weight:800;letter-spacing:var(--ls-heading);color:var(--ink)}
.lw-tile figcaption i{
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:var(--track);
  color:var(--sec-accent, var(--brown))}
.lw-tile p{
  margin:10px 0 0;font-size:var(--fs-sm);line-height:1.72;
  color:var(--sec-muted, var(--ink-soft))}

/* ---------- 三、发展时间轴 ---------- */
.rail{list-style:none;margin:44px auto 0;padding:0 0 0 34px;max-width:860px;position:relative}
.rail::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule-2) 12%,var(--rule-2) 88%,transparent)}
.rail::after{
  content:"";position:absolute;left:6px;top:6px;width:3px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--yellow),var(--sec-accent, var(--brown)));
  transition:height 1.5s var(--ease-glide) .12s}
.rail.in::after{height:calc(100% - 12px)}
.rn{position:relative;padding:0 0 34px}
.rn:last-child{padding-bottom:0}
.rn-dot{
  position:absolute;left:-33px;top:8px;width:15px;height:15px;border-radius:50%;
  background:var(--page-bg,#fff);border:2px solid var(--rule-2);
  transition:border-color var(--dur-2) var(--ease-glide),transform var(--dur-2) var(--ease-glide),box-shadow var(--dur-2) ease}
.rn:hover .rn-dot,.rn:first-child .rn-dot{
  border-color:var(--sec-accent, var(--brown));transform:scale(1.16);
  box-shadow:0 0 0 5px rgba(var(--yellow-rgb),.18)}
.rn-year{
  font-family:var(--font-display);font-size:var(--fs-h2);line-height:1;font-weight:400;
  letter-spacing:-.01em;color:var(--sec-accent, var(--brown));
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.rn-year:empty{display:none}
.rn h3{margin:0 0 6px;font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--ls-heading);color:var(--ink)}
.rn p{margin:0;font-size:var(--fs-md);line-height:1.78;color:var(--sec-muted, var(--ink-soft))}

/* ---------- 四、证照墙 ---------- */
.certs{display:grid;grid-template-columns:repeat(var(--lw-cols,4),1fr);gap:22px;margin:44px auto 0}
.cert{
  position:relative;margin:0;padding:14px 14px 16px;border-radius:var(--radius);
  background:var(--sec-card, var(--card-bg));border:1px solid var(--rule);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease-glide),box-shadow var(--dur-2) var(--ease-glide),border-color var(--dur-2) ease}
.cert:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--rule-2)}
/* 纸纹底：扫描件未上传时，版面本身就像一张证书 */
.cert::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:var(--grain);background-size:160px 160px;opacity:.035;mix-blend-mode:multiply}
.cert-tick{position:absolute;width:11px;height:11px;pointer-events:none;
  border-color:var(--sec-accent, var(--brown));opacity:.5}
.cert-tick.tl{left:7px;top:7px;border-left:1.5px solid;border-top:1.5px solid}
.cert-tick.br{right:7px;bottom:7px;border-right:1.5px solid;border-bottom:1.5px solid}
.cert-plate{
  display:flex;align-items:center;justify-content:center;height:132px;overflow:hidden;
  border-radius:calc(var(--radius) - 6px);background:rgba(var(--shadow-lg-rgb),.045)}
.cert-plate img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-3) var(--ease-glide)}
.cert:hover .cert-plate img{transform:scale(1.04)}
.cert-empty{
  font-size:var(--fs-xs);letter-spacing:var(--track);color:var(--sec-muted, var(--ink-soft));
  padding:9px 14px;border:1px dashed var(--rule-2);border-radius:999px}
.cert figcaption{
  margin:14px 0 4px;font-size:var(--fs-h5);font-weight:800;letter-spacing:var(--ls-heading);color:var(--ink)}
.cert p{margin:0;font-size:var(--fs-sm);line-height:1.68;color:var(--sec-muted, var(--ink-soft))}

/* ---------- 五、深墨刊头（hero variant: masthead） ---------- */
.hero-mast{
  position:relative;overflow:hidden;color:var(--dark-text,#fff);
  background:
    radial-gradient(920px 460px at 82% -8%,rgba(var(--yellow-rgb),.20),transparent 62%),
    radial-gradient(680px 420px at 6% 108%,rgba(var(--shadow-rgb),.22),transparent 66%),
    linear-gradient(168deg,#1d1710 0%,#120e08 54%,#171208 100%)}
.hero-mast .mast-grain{
  position:absolute;inset:0;pointer-events:none;background-image:var(--grain);
  background-size:170px 170px;opacity:.06;mix-blend-mode:overlay}
/* 极淡的竖向格线，给刊头一点"排版"的骨架 */
.hero-mast .mast-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 12 - 1px),rgba(255,255,255,.045) calc(100% / 12 - 1px) calc(100% / 12))}
.hero-mast .wrap{position:relative;z-index:1}
.hero-mast .eyebrow{color:rgba(var(--yellow-rgb),.92)}
.hero-mast h1{color:var(--dark-text,#fff);max-width:15em}
.hero-mast .hl{color:var(--yellow)}
.hero-mast .hl::after{opacity:.28}
.hero-mast p.sub{color:rgba(var(--dark-text-rgb),.76);max-width:46ch}
.hero-mast .btn.ghost{border-color:rgba(255,255,255,.34);color:#fff}
.hero-mast .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
/* 数据横排：衬线大数字 + 细线分隔，实力感主要靠这一条 */
.mast-rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:52px;border-top:1px solid rgba(255,255,255,.16)}
.mast-rail .mr{
  padding:20px 22px 4px;border-right:1px solid rgba(255,255,255,.12)}
.mast-rail .mr:last-child{border-right:none}
.mast-rail b{
  display:block;font-family:var(--font-display);font-weight:400;line-height:1;
  font-size:clamp(30px,4.4vw,46px);letter-spacing:-.02em;color:var(--yellow);
  font-variant-numeric:tabular-nums}
.mast-rail span{
  display:block;margin-top:9px;font-size:11.5px;font-weight:700;
  letter-spacing:var(--track);
  /* 原来写死半透明白：那是给深底 masthead 用的。spotlight 变体在浅色皮肤
     （journal 等）上会渲出浅底首屏，白字压浅底对比度只有 1.08:1，等于看不见。
     改为跟随区块的弱化文字令牌，没定义该令牌的深底首屏仍回退到原来的白。 */
  color:var(--sec-muted, rgba(var(--dark-text-rgb),.62))}
/* 配图压成带金边的图版，右下角标一句说明 */
.mast-plate{position:relative;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg)}
.mast-plate::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(var(--yellow-rgb),.16),0 40px 90px rgba(0,0,0,.5)}
.mast-cap{
  display:block;margin-top:12px;font-size:11.5px;letter-spacing:var(--track);
  color:rgba(var(--dark-text-rgb),.5);text-align:right}

/* ---------- 响应式与偏好 ---------- */
@media(max-width:980px){
  .lwall{grid-template-columns:repeat(2,1fr)}
  .certs{grid-template-columns:repeat(2,1fr)}
  .mast-rail{margin-top:40px}
}
@media(max-width:720px){
  .drow{grid-template-columns:1fr;gap:5px;padding:14px 12px;margin:0 -12px}
  .dsheet dt{letter-spacing:.12em}
  .lwall{grid-template-columns:1fr}
  .certs{grid-template-columns:repeat(2,1fr);gap:14px}
  .cert-plate{height:104px}
  .rail{padding-left:26px}
  .rn-dot{left:-25px;width:13px;height:13px}
  .rn-year{font-size:var(--fs-h3)}
  .mast-rail{grid-template-columns:repeat(2,1fr)}
  .mast-rail .mr{border-bottom:1px solid rgba(255,255,255,.1)}
}
@media(prefers-reduced-motion:reduce){
  .lw-sheen,.rail::after{animation:none;transition:none}
  .drow,.lw-tile,.lw-img,.lw-mono,.cert,.rn-dot{transition:none}
}
@media print{
  .hero-mast,.mast-plate{background:#fff;color:#000}
  .lw-tile,.cert{break-inside:avoid}
}
/* ============================================================
   刊头配色的特异性修正
   颜色令牌层用 `#page-root section[data-sec] :is(h1,…)`（1,2,1）统一定色，
   普通类选择器压不过它。下面用同等特异性、且排在后面的写法覆盖，
   颜色仍取各页主题变量，换主题不会跑色。
   ============================================================ */
#page-root section.hero-mast, #site-root section.hero-mast, #preview section.hero-mast{
  color:rgba(var(--dark-text-rgb),.76)}
#page-root section.hero-mast :is(h1,.h2), #site-root section.hero-mast :is(h1,.h2), #preview section.hero-mast :is(h1,.h2){
  color:var(--dark-text, #fff)}
#page-root section.hero-mast :is(p,.sub,.lead), #site-root section.hero-mast :is(p,.sub,.lead), #preview section.hero-mast :is(p,.sub,.lead){
  color:rgba(var(--dark-text-rgb),.74)}
#page-root section.hero-mast .eyebrow, #site-root section.hero-mast .eyebrow, #preview section.hero-mast .eyebrow{
  color:var(--yellow);background:rgba(var(--yellow-rgb),.10);
  border-color:rgba(var(--yellow-rgb),.34)}
/* 高亮词走主色：.hero h1 .hl 是 (0,2,1)，这里 (0,2,2) 才压得住 */
.hero-mast h1 .hl{color:var(--yellow)}
.hero-mast h1 .hl::after{background:linear-gradient(90deg,rgba(var(--yellow-rgb),.34),rgba(var(--yellow-rgb),.12))}
/* 眉题已是胶囊，不再追加那条金线 */
.hero-mast .eyebrow::after{display:none}
.hero-mast .mast-plate{border-color:rgba(var(--dark-text-rgb),.22)}

/* ============================================================
   组件套件（kit）· 样式层
   六个排布组件 + 五种页面基调。入场动画沿用已有的 .reveal-stagger
   （IntersectionObserver，全浏览器可用）；
   只有"随滚动持续变化"的那部分用 animation-timeline: view()，
   并用 @supports 包住——不支持的浏览器自动退回普通入场，不会不动。
   ============================================================ */

/* ---------- 基调（tone）：同一套组件换一层皮 ---------- */
.tone-ink{
  background:
    radial-gradient(880px 460px at 88% -10%,rgba(var(--yellow-rgb),.14),transparent 62%),
    radial-gradient(680px 420px at 4% 110%,rgba(var(--shadow-rgb),.18),transparent 64%),
    linear-gradient(170deg,#1c1610 0%,#110d07 58%,#171208 100%);
  color:rgba(var(--dark-text-rgb),.74)}
.tone-ink .h2,.tone-ink h2,.tone-ink h3{color:var(--dark-text,#fff)}
.tone-ink .lead,.tone-ink p{color:rgba(var(--dark-text-rgb),.66)}
.tone-ink .eyebrow{color:var(--yellow);border-color:rgba(var(--yellow-rgb),.3);background:rgba(var(--yellow-rgb),.08)}
.tone-ink .eyebrow::before{background:var(--yellow)}
.tone-ink .h2{letter-spacing:-.02em}

.tone-paper{
  background:
    linear-gradient(180deg,var(--hero-top,#FFFDF6),var(--page-bg,#fff) 62%),
    var(--page-bg,#fff)}
.tone-paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);
  background-size:170px 170px;opacity:.05;mix-blend-mode:multiply}
.tone-paper{position:relative}

.tone-blueprint{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px),
    linear-gradient(165deg,#0e2233 0%,#0a1a28 55%,#0d2131 100%);
  color:rgba(214,236,255,.72);position:relative}
.tone-blueprint .h2,.tone-blueprint h2,.tone-blueprint h3{color:#eaf4ff}
.tone-blueprint .lead,.tone-blueprint p{color:rgba(214,236,255,.62)}
.tone-blueprint .eyebrow{color:#8fd3ff;border-color:rgba(143,211,255,.32);background:rgba(143,211,255,.08)}
.tone-blueprint .eyebrow::before{background:#8fd3ff}

.tone-tech{
  background:
    radial-gradient(420px 420px at 50% 0%,rgba(120,255,214,.10),transparent 70%),
    radial-gradient(rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:auto,26px 26px;
  background-color:#080b0e;color:rgba(226,236,240,.7);position:relative}
.tone-tech .h2,.tone-tech h2,.tone-tech h3{color:#eef7f9}
.tone-tech .lead,.tone-tech p{color:rgba(226,236,240,.6)}
.tone-tech .eyebrow{color:#78ffd6;border-color:rgba(120,255,214,.3);background:rgba(120,255,214,.07)}
.tone-tech .eyebrow::before{background:#78ffd6}

.kit-note{
  margin:26px 0 0;font-size:var(--fs-sm);line-height:1.75;color:var(--sec-muted, var(--ink-soft))}
.kit-note::before{content:"※ ";color:var(--sec-accent, var(--brown))}
.tone-ink .kit-note,.tone-blueprint .kit-note,.tone-tech .kit-note{color:rgba(255,255,255,.5)}
.tone-ink .kit-note::before,.tone-blueprint .kit-note::before,.tone-tech .kit-note::before{color:var(--yellow)}

/* ---------- 一、逐行宣言 ---------- */
.kit-statement{padding:calc(var(--sec-pad) * 1.25) 0}
.stmt{max-width:1080px;margin:0 auto}
.stmt-row{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.tone-paper .stmt-row,.soft-bg .stmt-row{border-bottom-color:var(--rule)}
.stmt-row:last-child{border-bottom:none}
.stmt-row h3{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(28px,5.4vw,62px);line-height:1.12;letter-spacing:-.025em;
  color:var(--sec-h, var(--dark-text, var(--ink)))}
.stmt-row p{margin:12px 0 0;max-width:56ch;font-size:var(--fs-lg);line-height:1.72}
.stmt-row:hover h3{color:var(--sec-accent, var(--yellow))}
.stmt-row h3{transition:color var(--dur-2) var(--ease-glide)}

/* ---------- 二、粘性分栏 ---------- */
.kit-split .wrap.split{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:0 clamp(32px,6vw,88px);align-items:start}
.split-stick{position:sticky;top:calc(var(--nav-h) + 40px)}
.split-stick .h2{margin-bottom:14px}
.split-list{list-style:none;margin:0;padding:0}
.split-list li{
  display:grid;grid-template-columns:64px 1fr;gap:0 22px;align-items:start;
  padding:30px 0;border-top:1px solid rgba(255,255,255,.1);
  transition:background var(--dur-2) var(--ease-glide)}
.tone-paper .split-list li,.soft-bg .split-list li{border-top-color:var(--rule)}
.split-list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.tone-paper .split-list li:last-child,.soft-bg .split-list li:last-child{border-bottom-color:var(--rule)}
.split-list li:hover{background:rgba(255,255,255,.035)}
.tone-paper .split-list li:hover,.soft-bg .split-list li:hover{background:rgba(var(--yellow-rgb),.07)}
.sp-n{
  font-family:var(--font-display);font-size:34px;line-height:1;font-weight:400;
  color:var(--sec-accent, var(--yellow));font-variant-numeric:tabular-nums;opacity:.85}
.split-list h3{margin:0 0 8px;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.split-list p{margin:0;font-size:var(--fs-lg);line-height:1.78;max-width:52ch}
.sp-tag{
  display:inline-block;margin-top:12px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:var(--track);
  color:var(--sec-accent, var(--yellow));border:1px solid currentColor}

/* ---------- 三、数据矩阵 ---------- */
/* 格子宽度按「5-6 个字符的大数字」定的：minmax 太窄会把 1200万+ / 30 分钟 折成两行，
   同行格子因此高低不齐、最后一个还孤零零掉到下一排（截图实测过）。
   折行能力保留 —— 那是用户往数值位写长句时的兜底，但正常值不该走到那一步。 */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:2px;
  background:rgba(255,255,255,.09)}
.tone-paper .mgrid,.soft-bg .mgrid{background:var(--rule)}
.mcell{
  min-width:0;   /* grid 子项默认 min-width:auto，长内容会把整列顶宽 → 压到邻居 */
  padding:30px 26px 26px;background:var(--sec-card, var(--card-bg));
  transition:background var(--dur-2) var(--ease-glide)}
.tone-ink .mcell,.tone-tech .mcell,.tone-blueprint .mcell{background:rgba(255,255,255,.035)}
.mcell:hover{background:rgba(var(--yellow-rgb),.10)}
.tone-ink .mcell:hover,.tone-tech .mcell:hover,.tone-blueprint .mcell:hover{background:rgba(255,255,255,.075)}
.mcell b{
  display:block;font-family:var(--font-display);font-weight:400;line-height:1.05;
  /* 这里原本写死 white-space:nowrap：用户在数值位写长一点（例如把统计口径
     整句填进来）就绝不折行，直接把相邻格子顶开、文字互相压住。
     改成「keep-all 保证 30万+ / 76%→92% 这类值不从中间断开（原 nowrap 就是为了它），
     但允许在需要时换到第二行；anywhere 是最后的兜底，宁可折字也不许溢出压邻居」。 */
  font-size:clamp(26px,3vw,38px);letter-spacing:-.035em;
  white-space:normal;word-break:keep-all;text-wrap:balance;overflow-wrap:anywhere;
  color:var(--sec-accent, var(--yellow));font-variant-numeric:tabular-nums}
.mcell span{display:block;margin-top:12px;font-size:var(--fs-sm);letter-spacing:.02em;line-height:1.6;
  word-break:keep-all;overflow-wrap:anywhere}
/* 通用防「长内容顶破格子」：后台每个文字位用户都能写任意长度，布局必须自己消化，
   而不是把邻居顶开、文字互相压住（/p/data 的指标格实测过这种塌法）。
   grid/flex 子项一律允许收缩（min-width:0），短内容位允许折行但不许溢出。 */
.mgrid>*,.stats>*,.cmp>*,.stmt>*,.stmt-row,.rail>*,.rn-body,.lwall>*,.certs>*,.clist>*,.citem,.dsheet>*,.drow,.show>*,.sh-text,.sp-c{min-width:0}
.stat b,.rn-year,.cmp-row b,.cmp-row .us,.cmp-row .th,.citem h3,.stmt-row h3,.sh-text h3,.sp-c h3{
  word-break:keep-all;overflow-wrap:anywhere}
.mbar{display:block;position:relative;height:3px;margin-top:18px;border-radius:2px;
  background:rgba(255,255,255,.14);overflow:hidden}
.tone-paper .mbar,.soft-bg .mbar{background:var(--rule)}
.mbar u{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;text-decoration:none;
  background:linear-gradient(90deg,var(--sec-accent, var(--yellow)),rgba(var(--yellow-rgb),.45));
  transition:width 1.15s var(--ease-glide) .18s}
.reveal-stagger.in .mbar u{width:calc(var(--p,0) * 1%)}

/* ---------- 四、对照表 ---------- */
.cmp{border-top:1px solid rgba(255,255,255,.14)}
.tone-paper .cmp,.soft-bg .cmp{border-top-color:var(--rule-2)}
.cmp-head,.cmp-row{
  display:grid;grid-template-columns:minmax(96px,.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(14px,2.4vw,34px);align-items:start;padding:18px 12px;margin:0 -12px}
.cmp-head{padding-top:10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.tone-paper .cmp-head,.soft-bg .cmp-head{border-bottom-color:var(--rule-2)}
.cmp-head b{font-size:11px;font-weight:800;letter-spacing:var(--track);color:inherit;opacity:.55}
.cmp-head span{font-size:11px;font-weight:800;letter-spacing:var(--track)}
.cmp-head .us{color:var(--sec-accent, var(--yellow))}
.cmp-head .th{opacity:.5}
.cmp-row{border-bottom:1px solid rgba(255,255,255,.09);
  transition:background var(--dur-1) var(--ease-glide)}
.tone-paper .cmp-row,.soft-bg .cmp-row{border-bottom-color:var(--rule)}
.cmp-row:hover{background:rgba(var(--yellow-rgb),.07)}
.cmp-row b{font-size:var(--fs-sm);font-weight:800;letter-spacing:.01em;line-height:1.6}
.cmp-row .us{font-size:var(--fs-md);line-height:1.7;color:var(--ink)}
.tone-ink .cmp-row .us,.tone-tech .cmp-row .us,.tone-blueprint .cmp-row .us{color:var(--dark-text,#fff)}
.cmp-row .th{font-size:var(--fs-md);line-height:1.7;opacity:.52}

/* ---------- 五、规格条款 ---------- */
.spec{list-style:none;margin:0;padding:0;counter-reset:none}
.spec li{
  display:grid;grid-template-columns:76px 1fr;gap:0 20px;align-items:baseline;
  padding:18px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.tone-paper .spec li,.soft-bg .spec li{border-bottom-color:var(--rule-2)}
.spec li:last-child{border-bottom:none}
.spec-no{
  font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:.02em;
  color:var(--sec-accent, var(--yellow));font-variant-numeric:tabular-nums}
.tone-blueprint .spec-no,.tone-tech .spec-no{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-sm);opacity:.9}
.spec h3{margin:0 0 5px;font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em}
.spec p{margin:0;font-size:var(--fs-md);line-height:1.78;max-width:64ch}
.spec li:hover .spec-no{opacity:1;transform:translateX(2px)}
.spec-no{transition:transform var(--dur-2) var(--ease-glide),opacity var(--dur-2) ease}

/* ---------- 六、图文交替整版 ---------- */
.show{margin-top:46px}
.show article{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0 clamp(28px,5vw,76px);align-items:center;
  padding:clamp(38px,5vw,68px) 0;border-bottom:1px solid rgba(255,255,255,.09)}
.tone-paper .show article,.soft-bg .show article{border-bottom-color:var(--rule)}
.show article:last-child{border-bottom:none}
.show article.rev .sh-media{order:2}
.sh-media{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  aspect-ratio:4/3;background:rgba(var(--shadow-lg-rgb),.06);
  box-shadow:0 26px 60px rgba(var(--shadow-lg-rgb),.16)}
.sh-media img{width:100%;height:100%;object-fit:cover;display:block}
.sh-text h3{margin:10px 0 12px;font-size:clamp(22px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.28}
.sh-text p{margin:0;font-size:var(--fs-lg);line-height:1.82;max-width:46ch}
.sh-no{
  font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:.22em;
  color:var(--sec-accent, var(--yellow))}
.sh-metric{
  display:inline-block;margin-top:16px;padding:7px 14px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;
  color:var(--sec-accent, var(--brown));background:rgba(var(--yellow-rgb),.14);
  border:1px solid rgba(var(--shadow-rgb),.18)}
.tone-ink .sh-metric,.tone-tech .sh-metric,.tone-blueprint .sh-metric{
  color:var(--yellow);background:rgba(var(--yellow-rgb),.1);border-color:rgba(var(--yellow-rgb),.28)}

/* ---------- 滚动驱动：只在支持的环境里开，且只做"持续变化"的部分 ---------- */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .sh-media img{
      animation:kitParallax linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    @keyframes kitParallax{from{transform:scale(1.08) translateY(-2.2%)}to{transform:scale(1) translateY(2.2%)}}
    .split-stick{
      animation:kitStick linear both;animation-timeline:view();
      animation-range:entry 60% cover 55%}
    @keyframes kitStick{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:none}}
    .stmt-row h3{
      animation:kitLine linear both;animation-timeline:view();
      animation-range:entry 15% entry 85%}
    @keyframes kitLine{from{opacity:.18;transform:translateY(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
  }
}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  .kit-split .wrap.split{grid-template-columns:1fr;gap:8px}
  .split-stick{position:static}
  .show article{grid-template-columns:1fr;gap:22px}
  .show article.rev .sh-media{order:0}
  .cmp-head,.cmp-row{grid-template-columns:1fr;gap:6px}
  .cmp-head{display:none}
  .cmp-row{padding:16px 0;margin:0}
  .cmp-row .th::before{content:"常见做法 · ";opacity:.7;font-size:11px;letter-spacing:var(--track)}
  .cmp-row .us::before{content:"我们 · ";color:var(--sec-accent, var(--yellow));font-size:11px;letter-spacing:var(--track)}
}
@media(max-width:720px){
  .stmt-row{padding:20px 0}
  .split-list li{grid-template-columns:44px 1fr;gap:0 14px;padding:22px 0}
  .sp-n{font-size:26px}
  .split-list h3{font-size:clamp(20px,5.6vw,26px)}
  .spec li{grid-template-columns:52px 1fr;gap:0 14px}
  .mgrid{grid-template-columns:repeat(2,1fr)}
}
@media print{
  .tone-ink,.tone-tech,.tone-blueprint{background:#fff!important;color:#000!important}
  .show article{break-inside:avoid}
}

/* ============================================================
   两种新首屏：hero-min（浅底居中巨字）/ hero-spot（深底居中聚光）
   两者都不放展示图，靠字号、留白与一条数据带撑住版面。
   ============================================================ */
.hero-center{text-align:center;padding-top:calc(var(--sec-pad) * 1.35);padding-bottom:calc(var(--sec-pad) * 1.15)}
.hero-center .eyebrow{margin:0 auto}
.hero-center h1{
  margin:26px auto 0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,7.4vw,86px);line-height:1.06;letter-spacing:-.035em;max-width:16ch}
.hero-center .sub{
  margin:26px auto 0;max-width:58ch;font-size:clamp(16px,1.5vw,20px);line-height:1.75}
.hero-center .hero-cta{justify-content:center;margin-top:38px}
.hero-rail{margin-top:64px}

/* 极简：浅底、极细描边的高亮词、大量留白 */
.hero-min{background:linear-gradient(180deg,var(--hero-top,#FFFDF6),var(--page-bg,#fff) 70%)}
.hero-min h1{color:var(--ink)}
.hero-min .hl{color:var(--sec-accent, var(--brown))}
.hero-min .hl::after{background:linear-gradient(90deg,rgba(var(--yellow-rgb),.5),rgba(var(--yellow-rgb),.14))}
.hero-min .mast-rail b{color:var(--sec-accent, var(--brown))}
.hero-min .mast-rail .mr{border-right-color:var(--rule)}
.hero-min .mast-rail{border-top-color:var(--rule-2)}
/* 数据带原本是为深底写的（标签取 --dark-text），浅底上要改回墨色，否则文字隐形 */
.hero-min .mast-rail span{color:var(--sec-muted, var(--ink-soft))}
.hero-min .mast-rail b{font-variant-numeric:lining-nums tabular-nums}

/* 聚光：深底 + 文字后面一团柔光 */
.hero-spot{
  position:relative;overflow:hidden;color:rgba(var(--dark-text-rgb),.74);
  background:radial-gradient(760px 420px at 50% 26%,rgba(var(--yellow-rgb),.20),transparent 66%),
    linear-gradient(172deg,#1b1510,#0f0c07 62%,#151007)}
.hero-spot .mast-grain{position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:170px 170px;opacity:.06;mix-blend-mode:overlay}
.hero-spot h1{color:var(--dark-text,#fff)}
.hero-spot .hl{color:var(--yellow)}
.hero-spot .hl::after{background:linear-gradient(90deg,rgba(var(--yellow-rgb),.34),rgba(var(--yellow-rgb),.12))}
.hero-spot .sub{color:rgba(var(--dark-text-rgb),.7)}
.hero-spot .btn.ghost{border-color:rgba(255,255,255,.34);color:#fff}
.hero-spot .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.hero-spot .eyebrow{color:var(--yellow);border-color:rgba(var(--yellow-rgb),.3);background:rgba(var(--yellow-rgb),.08)}
.hero-spot .eyebrow::before{background:var(--yellow)}
.hero-spot .mast-rail{border-top-color:rgba(255,255,255,.16)}
.hero-spot .mast-rail .mr{border-right-color:rgba(255,255,255,.12)}

@media(max-width:720px){
  .hero-center{padding-top:calc(var(--sec-pad) * .9);padding-bottom:calc(var(--sec-pad) * .8)}
  .hero-center h1{font-size:clamp(30px,9.4vw,44px);letter-spacing:-.028em}
  .hero-rail{margin-top:44px}
}

/* ---------- 基调发布令牌（不是只写 color，见文件顶部说明） ---------- */
.tone-ink{
  --sec-h:#F7F0E4;--sec-t:rgba(247,240,228,.74);--sec-muted:rgba(247,240,228,.5);
  --sec-accent:var(--yellow);--sec-card:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.12);--rule:rgba(255,255,255,.11);--rule-2:rgba(255,255,255,.2);--track:rgba(255,255,255,.13)}
.tone-tech{
  --sec-h:#EFF8FA;--sec-t:rgba(226,236,240,.74);--sec-muted:rgba(226,236,240,.56);
  --sec-accent:#78FFD6;--sec-card:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.12);--rule:rgba(255,255,255,.1);--rule-2:rgba(255,255,255,.18);--track:rgba(255,255,255,.13)}
.tone-blueprint{
  --sec-h:#EAF4FF;--sec-t:rgba(214,236,255,.74);--sec-muted:rgba(214,236,255,.62);
  --sec-accent:#8FD3FF;--sec-card:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.13);--rule:rgba(255,255,255,.11);--rule-2:rgba(255,255,255,.2);--track:rgba(255,255,255,.14)}
/* paper 就是全站默认观感，不发布任何令牌 —— 它本来就正常，多写反而盖掉全局标题色 */

/* ---------- 首屏裁决：变体决定深浅，基调只负责底色与内边距 ---------- */
.hero.tone-ink,.hero.tone-tech,.hero.tone-blueprint{padding-top:calc(var(--sec-pad) * 1.1)}
/* 浅底首屏（默认 / 极简）就算被配了深色调，也只取它的氛围，字必须留在浅底配色上。
   只在真的带 tone 时才覆盖，避免连带改掉首页首屏原有的三层光晕。 */
.hero.tone-ink:not(.hero-spot):not(.hero-mast),
.hero.tone-tech:not(.hero-spot):not(.hero-mast),
.hero.tone-blueprint:not(.hero-spot):not(.hero-mast){
  background-image:linear-gradient(180deg,var(--hero-top,#FFFDF6),var(--page-bg,#fff) 70%);
  --sec-h:var(--g-h, var(--ink));--sec-t:var(--g-t, var(--ink));--sec-muted:var(--ink-soft);--sec-accent:var(--brown);--sec-card:var(--card-bg);
  --line:rgba(var(--shadow-lg-rgb),.14);--rule:rgba(var(--shadow-lg-rgb),.09);--rule-2:rgba(var(--shadow-lg-rgb),.16)}
/* 深底首屏（聚光 / 刊头）：反过来发布浅字令牌，供令牌层读取 */
.hero.hero-spot,.hero.hero-mast{
  --sec-h:var(--dark-text,#fff);--sec-t:rgba(var(--dark-text-rgb),.72);--sec-muted:rgba(var(--dark-text-rgb),.56);
  --sec-accent:var(--yellow);--sec-card:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.14);--rule:rgba(255,255,255,.12);--rule-2:rgba(255,255,255,.2)}

/* 打印：基调翻回浅底，令牌也必须一起翻，否则白纸上印白字 */
@media print{.tone-ink,.tone-tech,.tone-blueprint{--sec-h:#000;--sec-t:#222;--sec-muted:#555;--sec-accent:#333;--sec-card:#fff}}

/* ============================================================
   基调补丁层：tone 翻成深底之后，仍然把浅底值写死在自己身上的组件件
   ============================================================ */
/* 圆形序号：白字配浅底强调色没问题，配基调的浅色强调色就糊了 —— 让基调指定「压在上面用什么字」 */
.tone-ink{--on-accent:#110D07}
.tone-tech{--on-accent:#080B0E}
.tone-blueprint{--on-accent:#0A1A28}
.step .num{color:var(--on-accent, #fff)}
/* 「面向：…」小牌：浅米底写死，深底区块里就成了浅块 + 浅字 */
.step-track .st-who{background:var(--sec-card, var(--yellow-soft, #FFF7E1))}
.step-track .st-list li{color:var(--sec-t, var(--ink-soft))}
.partners .p{color:var(--sec-t, var(--ink-soft))}
.partners .p:hover{color:var(--sec-accent, var(--brown))}
.cta .qr{color:var(--sec-muted, var(--ink-soft))}
/* paper 的底色不能借用 --hero-top：有的页面把首屏顶色设成了深色 */
.tone-paper{background:linear-gradient(180deg,var(--yellow-soft,#FFFDF6),var(--page-bg,#fff) 62%),var(--page-bg,#fff)}
/* 浅底首屏上的眉标：基调把 .eyebrow 改成了浅色字，首屏还是浅底，得改回来 */
.hero.tone-ink:not(.hero-spot):not(.hero-mast) .eyebrow,
.hero.tone-tech:not(.hero-spot):not(.hero-mast) .eyebrow,
.hero.tone-blueprint:not(.hero-spot):not(.hero-mast) .eyebrow{
  color:var(--brown);background:var(--yellow-soft);border-color:rgba(var(--yellow-rgb),.5)}

/* ---------- 小标签取「强调字色」，不取「填充色」 ----------
   --yellow 是给按钮当底用的，直接拿来写 11–17px 的小字达不到 AA；
   --brown 才是各页主题里的「强调字」色位（后台可单独改）。
   基调区块里 --sec-accent 已由基调发布成浅色，同一条规则自动走对的一边。 */
.spec-no,.sh-no,.sp-n,.sp-tag,.cmp-head .us,.mcell b,.rn-year{color:var(--sec-accent, var(--brown))}
.sp-n{opacity:1}
/* 深底基调里，主题的 --yellow 可能偏暗（如赭红），提一档再当强调色用 */
@supports (color:color-mix(in srgb,red 50%,#fff)){
  .tone-ink{--sec-accent:color-mix(in srgb,var(--yellow) 74%,#FFFFFF)}
  .dark-sec .eyebrow{color:color-mix(in srgb,var(--yellow) 62%,#FFFFFF)}
}
/* 基调区块的眉标与指标条：--yellow 是给浅底当填充用的，深底上偏暗，统一改走基调强调色 */
.tone-ink .eyebrow,.tone-tech .eyebrow,.tone-blueprint .eyebrow{color:var(--sec-accent)}
.tone-ink .sh-metric,.tone-tech .sh-metric,.tone-blueprint .sh-metric{color:var(--sec-accent)}
@supports (color:color-mix(in srgb,red 50%,#fff)){
  .hero.hero-spot,.hero.hero-mast{--sec-accent:color-mix(in srgb,var(--yellow) 74%,#FFFFFF)}
  .hero.hero-spot .eyebrow,.hero.hero-mast .eyebrow{color:var(--sec-accent)}
}
/* 深底首屏的高亮词与数据带：主题的 --yellow 是给浅底当填充用的，压在近黑底上会发闷 */
.hero.hero-spot .hl,.hero.hero-mast .hl,.hero.hero-spot h1 .hl,.hero.hero-mast h1 .hl{color:var(--sec-accent)}
.hero.hero-spot .mast-rail b,.hero.hero-mast .mast-rail b{color:var(--sec-accent)}
/* 对照表表头与「常见做法」列原本用 opacity 做弱化，小字一弱化就读不动了：改成弱化色 */
.cmp-head b,.cmp-head .th,.cmp-row .th{opacity:1;color:var(--sec-muted, var(--ink-soft))}

/* ============================================================
   区块头部形式（后台「区块设置 → 头部形式」下拉可选）
   这是"每页看着都一样"的正解：以前 11 处头部全是同一段居中文案，
   换皮肤只换质感（字体/圆角/字距），不换编排。
   默认 center 时渲染层一个字节都不输出，所以这一整块对未设置的页面零影响。
   特异性 .head.head-x (0,2,0) 压得住既有的 .center (0,1,0)。
   ============================================================ */
/* ⚠️ 排除 .split-stick：粘性分栏本身就是 position:sticky，同特异性下这条写在后面会把它
   顶成 relative → 左栏不再钉住，导言压到右栏条目上（手机端 edu-mechanism 实测重叠）。
   sticky 已经是定位上下文，绝对定位的图元挂在它下面成立，不需要再声明一次。 */
.head:not(.split-stick){position:relative}

/* —— 杂志分栏：左标题、右导言，头版那种读法 —— */
.head.head-split{text-align:left;display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:8px clamp(26px,5vw,74px);align-items:end}
.head.head-split .eyebrow{grid-column:1;grid-row:1;justify-self:start;margin:0}
.head.head-split h2{grid-column:1;grid-row:2;margin:0}
.head.head-split .lead{grid-column:2;grid-row:1 / span 2;align-self:end;
  margin:0;padding-left:clamp(14px,2.4vw,28px);
  border-left:1px solid var(--sec-rule,var(--rule-2,var(--rule)));
  font-size:var(--fs-lg);line-height:1.78;max-width:44ch;text-align:left}

/* —— 工程编号：左侧 gutter 一个大序号，像图纸目录 —— */
.head.head-index{text-align:left;display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0 clamp(14px,2.4vw,30px);align-items:baseline}
.head.head-index::before{content:counter(feige-head,decimal-leading-zero);
  grid-column:1;grid-row:1 / span 3;align-self:start;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;font-size:clamp(28px,4.2vw,54px);line-height:1;letter-spacing:-.04em;
  color:var(--sec-accent,var(--yellow));opacity:.5;font-variant-numeric:tabular-nums}
.head.head-index .eyebrow{grid-column:2;grid-row:1;justify-self:start;margin:0}
.head.head-index h2{grid-column:2;grid-row:2;margin:0}
.head.head-index .lead{grid-column:2;grid-row:3;margin:14px 0 0;max-width:62ch;text-align:left}
/* 序号每页重新起算，且只在用了编号头部的区块上自增 */
#page-root,#preview{counter-reset:feige-head}
.head.head-index{counter-increment:feige-head}

/* —— 反色横幅：给长页面一个明确的停顿。
     不用 100vw（会顶出横向滚动条），也不用 z-index:-1（会钻到页面底色后面看不见）。
     用负外边距把色块推出 .wrap 的内边距，读起来像通栏但不越界。 —— */
.head.head-band{text-align:left;
  margin-inline:calc(-1 * clamp(14px,2.6vw,34px));
  padding:clamp(24px,3.4vw,44px) clamp(20px,2.8vw,38px);
  background:var(--ink,#141414);color:#fff;
  border-radius:var(--r-lg,14px);box-shadow:0 18px 44px rgba(var(--shadow-rgb,0,0,0),.14)}
.head.head-band .eyebrow{margin:0 0 10px;color:var(--yellow);opacity:.9}
.head.head-band h2{margin:0;color:#fff}
.head.head-band .lead{margin:14px 0 0;color:rgba(255,255,255,.74);max-width:58ch;text-align:left}
/* 深底区块里的横幅反过来（避免黑压黑） */
.tone-ink .head.head-band,.tone-tech .head.head-band,.tone-blueprint .head.head-band,
.hero.head-band{background:rgba(255,255,255,.07);box-shadow:none;
  border:1px solid rgba(255,255,255,.16)}
.tone-ink .head.head-band h2,.tone-tech .head.head-band h2{color:#fff}

/* —— 素净左对齐：不居中不装饰，让内容自己说话 —— */
.head.head-plain{text-align:left}
.head.head-plain h2{margin:0}
.head.head-plain .lead{margin:12px 0 0;max-width:64ch}
/* 窄屏：分栏与编号都退回单列，序号不占独立 gutter */
@media (max-width:760px){
  .head.head-split{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
  .head.head-split .eyebrow{grid-column:1;grid-row:1}
  .head.head-split h2{grid-column:1;grid-row:2}
  .head.head-split .lead{grid-column:1;grid-row:3;padding-left:0;border-left:0;margin-top:6px}
  .head.head-index{grid-template-columns:minmax(0,1fr);gap:0}
  .head.head-index::before{grid-column:1;grid-row:1;font-size:clamp(24px,7vw,38px);margin-bottom:2px}
  .head.head-index .eyebrow{grid-column:1;grid-row:2}
  .head.head-index h2{grid-column:1;grid-row:3}
  .head.head-index .lead{grid-column:1;grid-row:4}
  .head.head-band{margin-inline:0;padding:22px 20px}
}
/* 打印时不留大面积反色（送审稿纸面上只有黑白，墨块会糊成一片） */
@media print{
  .head.head-band{background:none!important;color:inherit!important;box-shadow:none;
    border:1px solid #bbb;border-radius:0}
  .head.head-band h2,.head.head-band .lead,.head.head-band .eyebrow{color:#1f1f1f!important}
  .head.head-index::before{opacity:.55}
}

/* ============================================================
   图元系统：头部图元 / 区块底纹 / 照片位
   （后台「区块设置 → 头部图元 · 区块底纹 · 照片位」三处可选）
   存在的理由：区块只靠文字承重，页面必然长得一样。这里补的是"非文字承重件"，
   全部由 CSS 画：不引入外部图片、不放占位网图、不虚构任何事实。
   三条硬约束：
     ① 装饰件一律 aria-hidden + pointer-events:none —— 不进可读文本、不抢点击；
     ② 一律压在内容之下 —— 用 isolation:isolate 让区块自己成为层叠上下文后配 z-index:-1。
        不能直接给整站 section 加 isolation：商家公示的浮层就住在 section 里，
        它的 z-index 一旦被关进区块，后面的区块会把它盖住（那是真回归）。
        所以只对"确实画了底纹的区块"开隔离。
     ③ 深底区块（.tone-ink / .tone-tech / .tone-blueprint / .dark-sec）换一套浅色图元。
   ============================================================ */

/* —— 序号计数器：每页各自从 01 起算，与「头部形式 · 工程编号」的计数器相互独立 —— */
#site-root,#page-root,#preview{counter-reset:feige-fig}
.head{isolation:isolate}

/* —— 通用 —— */
.vfig,.vtex{position:absolute;pointer-events:none;user-select:none;-webkit-user-select:none}
.head>.vfig{z-index:-1}
section[data-sec]:has(> .vtex),section[data-sec]:has(> .vfig-ghost){isolation:isolate}

/* —— 巨型序号：斜体等宽的大字号，压在眉题与标题之下 —— */
.vfig-num{
  left:-.04em;top:50%;transform:translateY(-50%);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;font-size:clamp(78px,10.5vw,164px);line-height:.74;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:var(--sec-accent,var(--brown));opacity:.14;counter-increment:feige-fig}
.vfig-num::before{content:counter(feige-fig,decimal-leading-zero)}
.vfig-num[data-txt]::before{content:attr(data-txt)}
/* 左对齐的头部形式里序号不能压住标题起始位 */
.head.head-split>.vfig-num,.head.head-index>.vfig-num,.head.head-plain>.vfig-num,
.head.head-band>.vfig-num{left:auto;right:0;opacity:.09}

/* —— 测量标尺：一条带刻度的基线，给区块一个"图纸感"的停顿 —— */
.vfig-rule{
  left:50%;bottom:calc(-1 * clamp(16px,2.2vw,26px));transform:translateX(-50%);
  width:min(300px,54%);height:16px}
/* 标尺是绝对定位的，头部不给位它就会压在正文第一行上（对照表那种紧跟头部的版式实测会撞） */
.head:has(> .vfig-rule){padding-bottom:clamp(26px,3vw,38px)}
.head.head-split>.vfig-rule,.head.head-index>.vfig-rule,.head.head-plain>.vfig-rule,
.head.head-band>.vfig-rule{left:0;transform:none;width:min(260px,46%)}
.vfig-rule::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sec-rule,var(--rule-2))}
.vfig-rule::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:8px;
  background:repeating-linear-gradient(90deg,var(--sec-rule,var(--rule-2)) 0 1px,transparent 1px 12px);
  -webkit-mask-image:linear-gradient(90deg,#000,#000 58%,transparent);
  mask-image:linear-gradient(90deg,#000,#000 58%,transparent)}
/* 标尺左端一个强调块：读起来像"从这里起量" */
.vfig-rule{border-left:3px solid var(--sec-accent,var(--yellow))}

/* —— 底纹大字：整块版面的水印级承重，只有填了文字才画 —— */
.vfig-ghost{
  right:2.5%;bottom:1.5%;z-index:-1;
  font-family:var(--font-display,Georgia,serif);font-weight:900;
  font-size:clamp(84px,15vw,236px);line-height:.8;letter-spacing:-.045em;
  white-space:nowrap;color:var(--sec-accent,var(--brown));opacity:.055}
.vfig-ghost::before{content:attr(data-txt)}

/* —— 区块底纹：方格 / 网点 / 斜纹 / 纸噪 —— */
.vtex{inset:0;z-index:-1;overflow:hidden;
  --tex-line:rgba(var(--shadow-rgb),.15);--tex-dot:rgba(var(--shadow-rgb),.30);--tex-cell:34px}
.tone-ink .vtex,.tone-tech .vtex,.tone-blueprint .vtex,.dark-sec .vtex{
  --tex-line:rgba(255,255,255,.07);--tex-dot:rgba(255,255,255,.16)}
.vtex::before{content:"";position:absolute;inset:-1px;
  -webkit-mask-image:radial-gradient(135% 108% at 50% 0%,#000 26%,rgba(0,0,0,.25) 72%,transparent 96%);
  mask-image:radial-gradient(135% 108% at 50% 0%,#000 26%,rgba(0,0,0,.25) 72%,transparent 96%)}
.vtex-grid::before{background-image:
  linear-gradient(to right,var(--tex-line) 1px,transparent 1px),
  linear-gradient(to bottom,var(--tex-line) 1px,transparent 1px);
  background-size:var(--tex-cell) var(--tex-cell)}
.vtex-dots::before{background-image:radial-gradient(var(--tex-dot) 1.1px,transparent 1.5px);
  background-size:19px 19px}
.vtex-diag::before{background-image:repeating-linear-gradient(45deg,var(--tex-line) 0 1px,transparent 1px 10px)}
.vtex-grain::before{background-image:var(--grain);background-size:160px 160px;opacity:.6;mix-blend-mode:multiply}

/* —— 照片位（区块级：头部之后一整幅）—— */
.vphoto{position:relative;max-width:var(--maxw);margin:clamp(22px,3vw,40px) auto 0;padding:0 var(--wrap-pad)}
.vphoto>.vf-img{width:100%;aspect-ratio:16/7;object-fit:cover;
  border-radius:var(--sec-img-radius,var(--radius-lg));box-shadow:var(--shadow)}
/* 空框压到 300px 高：整幅比例摆一个空盒子会把整屏吃掉，
   传上照片后才撑回 16:7 —— 空位是给自己看的施工标记，不是给访客看的版面。 */
.vphoto>.vframe{width:100%;aspect-ratio:21/9;max-height:300px;
  border-radius:var(--sec-img-radius,var(--radius-lg))}
.vphoto figcaption{margin:14px auto 0;max-width:66ch;text-align:center;
  font-size:var(--fs-sm);line-height:1.7;color:var(--sec-muted,var(--ink-soft))}
.vphoto figcaption::before{content:"图 · ";color:var(--sec-accent,var(--brown))}

/* —— 占位框：该有实拍图、照片还没上传的位置 —— */
.vframe{
  position:relative;display:grid;place-content:center;justify-items:center;gap:9px;
  width:100%;padding:18px;overflow:hidden;isolation:isolate;
  border:1px dashed var(--rule-2);border-radius:var(--sec-img-radius,var(--radius));
  background-color:rgba(var(--shadow-lg-rgb),.045);color:var(--sec-muted,var(--ink-soft))}
.vframe::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;
  background-image:repeating-linear-gradient(135deg,var(--rule) 0 1px,transparent 1px 13px)}
.vf-glyph{width:clamp(34px,4.4vw,52px);height:auto;opacity:.7}
.vf-glyph svg{display:block;width:100%;height:auto}
.vf-txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:min(100%,30ch);font-size:var(--fs-sm);font-weight:700;line-height:1.45;
  letter-spacing:.01em;text-align:center;color:var(--sec-t,var(--ink))}
/* 芯片底色必须跟着「所在区块的卡片色」走：写死 --card-bg（全局白）时，
   深色皮肤（cockpit/dispatch）里浅色的 --sec-muted 文字落在白芯片上只剩 1.5:1，
   「待上传」等于没写。--sec-card 由各皮肤按深浅给定。 */
.vf-flag{padding:4px 11px;border:1px solid var(--rule-2);border-radius:999px;
  font-size:var(--fs-xs);font-style:normal;letter-spacing:.08em;
  background:var(--sec-card,var(--card-bg,#fff));color:var(--sec-muted,var(--ink-soft))}
.tone-ink .vframe,.tone-tech .vframe,.tone-blueprint .vframe,.dark-sec .vframe,.hero .vframe{
  border-color:rgba(255,255,255,.3);background-color:rgba(255,255,255,.045);color:rgba(255,255,255,.72)}
.tone-ink .vf-txt,.tone-tech .vf-txt,.tone-blueprint .vf-txt,.dark-sec .vf-txt{color:rgba(255,255,255,.9)}
.tone-ink .vf-flag,.tone-tech .vf-flag,.tone-blueprint .vf-flag,.dark-sec .vf-flag{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78)}
/* 各个"图集容器"里的框：高宽由容器定，框只负责填满 */
.sh-media>.vframe,.c-media>.vframe,.cert-plate>.vframe{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0;border:0}
.c-media{position:relative}
.c-media .vframe{height:100%}
/* 卡片顶部的框与 .cimg 同宽同位：有图和没图时卡片轮廓一致，混排不错位 */
.card>.vframe,.adv>.vframe{display:grid;aspect-ratio:16/10;height:auto;border-radius:0;border-inline:0;border-top:0;
  width:calc(100% + var(--card-pad,0px) * 2);margin:calc(-1 * var(--card-pad,0px)) calc(-1 * var(--card-pad,0px)) 0}
.card:has(> .vframe),.adv:has(> .vframe){padding-top:0}

@media (max-width:760px){
  .vfig-num{font-size:clamp(58px,17vw,96px);opacity:.09}
  .vfig-ghost{display:none}
  .vfig-rule{width:min(200px,62%)}
  .vphoto>.vf-img,.vphoto>.vframe{aspect-ratio:4/3}
  .vtex{--tex-cell:26px}
}

/* 打印送审：装饰一律不上纸，但"还缺哪张照片"必须在纸面上看得见 */
@media print{
  .vtex,.vfig-num,.vfig-ghost,.vfig-rule{display:none!important}
  .vframe{border:1px solid #8a8a8a;background:#fff!important;box-shadow:none}
  .vframe::before{display:none}
  .vphoto>.vframe{max-height:200px;aspect-ratio:21/9}
}


/* ============================================================
   打印收口（放在文件最末尾：基调令牌、color-mix 覆盖都要被它压住）
   公示页要打印送审，纸面上只有黑白。只翻 background/color 是不够的——
   标题走的是 --sec-h 令牌，令牌不一起翻就是"白纸上印白字"。
   ============================================================ */
@media print{
  .tone-ink,.tone-tech,.tone-blueprint,.dark-sec,.hero.hero-spot,.hero.hero-mast{
    --sec-h:#000;--sec-t:#1f1f1f;--sec-muted:#555;--sec-accent:#333;--sec-card:#fff;
    --on-accent:#fff;--line:#bbb;--rule:#ccc;--rule-2:#8a8a8a;
    background-image:none!important;background-color:#fff!important;color:#1f1f1f!important}
  /* 纸面上不留浅色字：区块里所有文字一律近黑。
     逐条覆盖写不完——`.dark-sec` / `.hero-mast` 那批高特异性规则专门把正文写成半透明白。 */
  section[data-sec],section[data-sec] *{color:#1f1f1f!important}
  .hero.hero-spot .btn.ghost,.hero.hero-mast .btn.ghost{border-color:#8a8a8a!important}
  .hero.hero-spot .mast-rail,.hero.hero-mast .mast-rail{border-top-color:#ccc!important}
  .hero.hero-spot .mast-rail .mr,.hero.hero-mast .mast-rail .mr{border-right-color:#ddd!important}
  /* 圆形序号改成描边，避免"深底深字" */
  .step .num{background:none!important;border:1px solid #8a8a8a}
  /* 按钮 / 筛选片 / 角标：浏览器勾上「背景图形」时会是深底 + 刚被压近黑的字，
     统一改成白纸描边，勾不勾背景图形都读得动 */
  .btn,.btn.dark,.btn.ghost,.m-chip,.m-chip.active,.m-achip,.m-achip.active,.m-achip i,
  .mf-search-btn,.mf-badge,.phone-badge,.img-fallback{
    background:#fff!important;color:#1f1f1f!important;border:1px solid #8a8a8a!important;box-shadow:none!important}
  .eyebrow{background:#fff!important;border-color:#ccc!important}
  .eyebrow::before{background:#333!important}
  .lw-mono{background:#fff!important;box-shadow:none!important;border:1px solid #8a8a8a}
  .lw-sheen{display:none!important}
  .sh-metric,.sp-tag{background:#fff!important;border-color:#8a8a8a!important}
  /* 页脚：屏上是「深底 + 白字」，纸面上深底没了（皮肤那层把底色刷成白，
     浏览器不勾「背景图形」时首页也一样）→ 白字白底，一整个页脚消失。
     这里不靠皮肤层，直接收口：页脚里所有文字近黑、底色白纸。
     `.footer a` 这类自带 color 的规则不会被 .footer 的继承压住，必须逐个 *。 */
  footer.footer{background:#fff!important;color:#1f1f1f!important}
  footer.footer,footer.footer *{color:#1f1f1f!important;background-color:#fff!important}
  footer.footer::before{display:none!important}
  footer.footer .brand .logo,footer.footer .qr img{filter:grayscale(1) contrast(1.15)}
  .mast-grain,.hero::before,.hero::after,.cert::before,.case .c .top::after{display:none!important}
}
/* 弹窗打开时锁背景滚动：iOS / 安卓上不然能拿页面当滚轮上下拽 */
body.md-locked{overflow:hidden}

/* ---------- 访客 AI 问答 ----------
   右下角浮标 + 展开面板。与「回到顶部」共用一条竖线：装了问答就把回顶按钮抬上去，
   两个浮层不叠在一起。公示页要打印送审，所以打印时整个组件必须消失。 */
.ai-ask-btn{
  position:fixed;right:22px;bottom:22px;z-index:122;
  height:46px;padding:0 18px;border:0;border-radius:23px;cursor:pointer;
  background:var(--brown);color:var(--dark-text);
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow-lg,var(--shadow));
  transition:background var(--dur-1) ease,transform var(--dur-2) var(--ease-out);
}
.ai-ask-btn:hover{background:var(--dark);transform:translateY(-2px)}
.ai-ask-btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.has-aiask .to-top{bottom:82px}

.ai-ask-panel{
  position:fixed;right:22px;bottom:80px;z-index:123;
  width:min(360px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 130px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card-bg);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg,var(--shadow));
}
.ai-ask-panel[hidden]{display:none}
.ai-ask-head{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--yellow-soft);border-bottom:1px solid var(--line)}
.ai-ask-head b{font-size:15px;font-weight:800}
.ai-ask-x{margin-left:auto;width:26px;height:26px;border:0;border-radius:50%;background:transparent;
  color:var(--ink-soft);font-size:19px;line-height:1;cursor:pointer;font-family:inherit}
.ai-ask-x:hover{background:rgba(150,101,6,.12);color:var(--ink)}
.ai-ask-note{margin:0;padding:10px 14px;font-size:12px;line-height:1.6;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.ai-ask-log{flex:1 1 auto;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.ai-ask-msg{max-width:88%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.7;word-break:break-word;white-space:pre-wrap}
.ai-ask-msg.me{align-self:flex-end;background:var(--brown);color:var(--dark-text);border-bottom-right-radius:4px}
.ai-ask-msg.bot{align-self:flex-start;background:var(--yellow-soft);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.ai-ask-msg.is-err{background:#fdf0ef;color:#a63a34;border-color:#f0c8c4}
.ai-ask-msg.is-waiting{color:var(--ink-soft)}
.ai-ask-msg.is-waiting::after{content:"";display:inline-block;width:1em;text-align:left;animation:aiDots 1.1s steps(4,end) infinite}
@keyframes aiDots{0%{content:""}25%{content:"·"}50%{content:"··"}75%{content:"···"}}
.ai-ask-src{align-self:flex-start;font-size:11.5px;color:var(--ink-soft)}
.ai-ask-src a{color:var(--brown);text-decoration:underline;text-underline-offset:2px}
.ai-ask-tips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.ai-ask-tip{border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  border-radius:14px;padding:5px 10px;font-family:inherit;font-size:12px;cursor:pointer}
.ai-ask-tip:hover{border-color:var(--brown);color:var(--brown)}
.ai-ask-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.ai-ask-in{flex:1 1 auto;min-width:0;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--page-bg);color:var(--ink);font-family:inherit;font-size:13.5px}
.ai-ask-in:focus{outline:none;border-color:var(--brown)}
.ai-ask-go{height:38px;padding:0 15px;border:0;border-radius:10px;background:var(--yellow);color:var(--on-primary);
  font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.ai-ask-go:hover:not(:disabled){background:var(--yellow-deep)}
.ai-ask-go:disabled{opacity:.55;cursor:progress}
@media (max-width:520px){
  .ai-ask-panel{right:12px;left:12px;width:auto;bottom:74px;max-height:calc(100vh - 96px)}
  .ai-ask-btn{right:12px;bottom:12px}
  .has-aiask .to-top{bottom:68px;right:12px}
}
@media print{.ai-ask,.ai-ask-btn,.ai-ask-panel{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .ai-ask-btn,.ai-ask-msg.is-waiting::after{transition:none;animation:none}
  .ai-ask-msg.is-waiting::after{content:"…"}
}

/* ===== 全站动效补强（配合 app.js 的 setupCounters / heroStagger / partnersMarquee / setupProgress）=====
   全部为渐进增强：类名由 JS 添加，无 JS / 后台画布 / 打印 / 「减弱动效」环境均不受影响。 */

/* ① 首屏分层入场：JS 给首屏子元素加 .hv 并按序设置 transitionDelay */
.hv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.hv-in .hv{opacity:1;transform:translateY(0)}

/* ② 合作伙伴墙无缝滚动：两份内容首尾相接，-50% 匀速循环，悬停暂停 */
.partners.mq{overflow:hidden;padding:4px 0}
.partners.mq .mq-track{display:flex;align-items:stretch;width:max-content;animation:mqScroll 38s linear infinite}
.partners.mq .mq-track .p{margin-right:14px;flex:0 0 auto}
.partners.mq:hover .mq-track,.partners.mq:focus-within .mq-track{animation-play-state:paused}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .partners.mq .mq-track{animation:none;flex-wrap:wrap;width:auto}
}

/* ③ 滚动进度细线：顶栏上方，跟随皮肤强调色 */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-deep));
  z-index:300;pointer-events:none;
  transition:width .12s linear;
}

/* ④ 数字滚动期间防抖动：统计数字统一等宽数字（部分选择器已有，这里兜底补齐） */
.stat b,.mcell b,.hero-stats .s b,.mast-rail .mr b,.hero-rail .mr b{font-variant-numeric:tabular-nums lining-nums}