/* ==========================================================================
   SUNTINSION 官网 · 视觉层 v2
   --------------------------------------------------------------------------
   基调：暖纸底 / 深炭骨架 / 单一黄铜强调
   排版：标题衬线（系统栈，零下载）· 正文系统无衬线 · 8pt 间距阶梯
   层级：标题重（衬线）· 正文常规 · 辅助更小更浅 —— 三档分明
   约束：纯 CSS、无 JS、无外部依赖；仅一个自托管字体（标题专用子集，见下）
   本文件由 _build/build_site.py 生成，请勿直接编辑（改脚本后重跑）
   ========================================================================== */

/* ---------- 0. 标题字体（自托管 · 2026-09-22 GEO 派工 / 杨总定案② ----------
   Noto Serif SC（思源宋体系）子集 woff2：只覆盖全站 4 类衬线块的用字 ＋ 全量 ASCII。
   许可 SIL OFL 1.1，许可全文随字体放在 assets/fonts/OFL.txt（不许只剩字体不带许可）。
   ⚠️ 维护点 —— 改下面这 4 类文案若带进新字，那个字会掉回系统宋体（不报错，只是看着不对）：
      h1/h2/h3/h4 · .faq-list summary · .cell .num · .stats b
      → 判据：改这 4 类文案 ＝ 必须重跑一次子集（做法见 GEO 的字体派工件第六节）。
   兜底：原系统栈一个不删，缺字自动往下一顺位找；不写 unicode-range（写了反而多一层掉字风险）。 */
@font-face{
  font-family:"Suntinsion Serif";
  /* ⚠️ 路径相对的是 style.css 自己（它就在 assets/ 下，故写 fonts/…）。
     写成 assets/fonts/… 会被解析成 assets/assets/fonts/… → 404 → 标题静默回退系统宋体。
     机检第 11 节会把这个文件算进每页体积，算不到就报红（就是这个坑的兜底）。 */
  src:url("fonts/notoserifsc-subset-title.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* LP 式三行页头高度（topbar 36＋双线区 8＋Logo 行 76＋导航行 52＋border≈173；随 logo 尺寸与双线更新，JS 仍按实测回填），
     hero sticky 定位与满高计算共用这一个值，改页头结构只改这里 */
  --headh:173px;

  /* 色彩：暖中性纸感 */
  /* v39（杨总 20:5x：「常见问题这一栏底色保持不变，其他位置都是调成米白那个底色，
     但是现在整个页面的底色都变成一个颜色了」）：
     主底与「米白」是两个色，v38 把它们统一成了一色，方向反了。
     现在：--paper = 米白 #FCFAF6（全站主底，也是他上一轮认可过的承诺条/页脚色）；
     FAQ 那一段单独用 #F6F3ED（.faq-band），成为唯一的略深米色块。
     --paper-2 随之让位给纯白 —— 它只剩 .note 一处使用，那是「抬升面」，
     与主底同色就失去抬升语义。 */
  --paper:#FCFAF6;      /* 页面底色（米白，非纯白） */
  --paper-2:#FFFFFF;    /* 卡片 / 抬升面 */
  --paper-3:#EFEAE1;    /* 图片占位、压深色块 */

  /* 墨色骨架与文字三级 */
  --ink:#1C1916;        /* 标题、深色骨架 */
  --ink-2:#4A443C;      /* 正文（v3：加深一档，屏显更清晰） */
  --ink-3:#6F675D;      /* 辅助信息 */

  /* 分隔线 */
  --line:#E3DCD1;
  --line-2:#D3CABB;

  /* 强调色：黄铜，全站唯一，克制使用 */
  --accent:#7E6039;
  --accent-2:#B99A6B;

  /* 深底反色 */
  --dark:#1C1916;
  --dark-2:#141210;
  --on-dark:#EDE7DC;
  --on-dark-2:#A79E90;

  /* 字体：衬线标题（自托管子集排第一顺位，系统宋体全栈兜底） */
  --serif:"Suntinsion Serif","Songti SC","STSong","SimSun","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  /* 字体：无衬线正文（系统栈，零加载）
     v35 补 "Microsoft YaHei"：原栈只有 macOS/Linux 的中文字体（PingFang／Hiragino／Source Han／
     Noto CJK／文泉驿），Windows 上一个都不命中，只能靠 sans-serif 兜底——实测 12px 正文
     「做别的款式不必重新量」的「量」被渲染成豆腐块（同页其它 13.5～21px 的同字正常）。
     显式列出雅黑后复测消失。Mac 上 PingFang 在前，顺序不受影响。 */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",sans-serif;

  /* 间距阶梯（4 / 8 基准） */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --s9:96px; --s10:128px;

  /* 版心与动效 */
  --maxw:1160px;
  --gut:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font:400 16px/1.85 var(--sans);
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--serif);font-weight:400}
b,strong{font-weight:600}

/* 焦点可见（无障碍） */
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

/* ---------- 3. 版心与区块 ---------- */
.wrap{max-width:min(var(--maxw),88vw);margin:0 auto;padding:0 var(--gut)}
/* v3（Loro Piana 气质）：区块留白 96→128，呼吸感优先 */
/* v46（杨总 2026-10-24 11:36：「我看了一下 LP 的设计，极少出现分割线去分割空间，
   大部分都是靠距离或者不同色块去营造空间感，所以这一轮的方向是去掉一些不合时宜的分割线」）：
   原来每条 section 都带一条底线，等于用线把整页切成若干横带。撤掉后相邻段落靠
   上下各 128 的留白分区（合计 256），深浅色块本身（hero 深色图／FAQ 略深米色／页脚铜块）继续承担分界。
   保留的线：页头底线（导航层边界）、卡片的 .cell 顶线、FAQ 列表与 details 线（条目分隔）、
   表格行线、链接下划线（可点性提示）—— 这些是内容结构，不是空间分区。 */
/* v52（杨总 2026-10-24 14:42：「每个大的段落之间也是没有形成足够的空间感，
   需要将高度重新调整一下……也要保证每个大的段落之间的空间尽量保持固定的距离」）：
   段间距原来上下各 128（相邻两段之间 256），全页本来就固定；但段内标题贴着正文，
   每段读起来是一整块挤紧的砖，256 的空白反而被浪费。段内拉开之后，段间再提一档到 144（区间 288），
   每一段都成为"标题—留白—正文—留白"的独立单元。有底色的段落（band／faq／stats）另有自己的
   padding，不受这条影响——它们靠色块分界，不需要再叠距离。 */
section{padding:144px 0}
section:last-of-type{border-bottom:0}

/* 标题层级：h1 ≫ h2 > h3，落差靠字号与留白
   v3：去掉黄铜短装饰线，纯文字排版；第二轮字号再拉大——Loro Piana 式大标题 */
h1{font-size:clamp(36px,5.4vw,64px);line-height:1.2;letter-spacing:.01em}
/* v50：区块标题统一居中，让每一节的标题都落在同一条中轴上——
   杨总「这个页面的文字时左时右，完全没有根据可循，看起来又乱又杂」。
   例外两处：文章页正文里的小节标题（左对齐才好顺着读）、首页 band 段的图右文标题（跟着图排）。 */
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.45;letter-spacing:.03em;text-align:center}
/* v52（杨总 2026-10-24 14:42：「这些大的标题……感觉离正文段落太近了，这样会显得上下拥挤，没有空间感」）：
   实测全站 h2 与紧随的正文档间距是 **0**——reset 把 h2 的 margin 归零，下面的 p／grid 也没有上距，
   标题的底边直接贴着正文的第一行。接 .sub 的地方有 12（副标自己的 margin-top），
   接 table／faq-list 的地方有 32（元素自带），于是同一站里出现 0／12／32 三种间距。
   现统一成两条：标题后直接接正文 → 48；接副标 → 副标仍贴标题 12、副标之后再给 32。
   用「后一个元素的上距」而不是给 h2 加下距，是因为副标要贴着标题、不能一起吃 48。 */
h2 + *:not(.sub){margin-top:var(--s7)}
h2 + .sub{margin-bottom:var(--s6)}
.article h2,.band-cap h2,.faq-band h2{text-align:left}
h3{font-size:20px;line-height:1.65;letter-spacing:.01em}
/* 页面主标题：标签是 h1（结构化数据要求），视觉沿用 h2 那一档 */
/* v50（杨总 2026-10-24 12:36：「文字整体在画面中心点才是最好看的，就像 LP 官网那样」）：
   页头三行（主标／副标／导语）原来一律左对齐，容器 744 宽居中而文字贴左，
   右边空出一大块，整块的重心就落在画面左侧。三行统一居中。 */
h1.pt{font-size:clamp(30px,3.6vw,44px);line-height:1.45;letter-spacing:.03em;text-align:center}

/* v52：页头三行的间距按层级由紧到松——主标 24 副标、副标 32 导语。
   原来 12／24（24 来自 p+p 的默认上距），44px 的主标与 13px 的副标只隔 12，
   大标题下沿贴着小字，页头三行挤成一条。h2 后面那一档仍是 12（副标本来就该贴着标题）。 */
.sub{margin-top:var(--s3);font-size:13px;letter-spacing:.14em;color:var(--ink-3);text-align:center}
h1.pt + .sub{margin-top:var(--s5)}
.sub + .lede-sm{margin-top:var(--s6)}
.body{max-width:800px}
/* v53（杨总 2026-10-24 14:55：「这段居中更好」）：段落居中。
   v54（杨总 2026-10-24 15:12：「改成『外地客户支持全国上门量体，具体安排按城市与时间沟通。』」）：
   这一段只剩一句话，v53 为「营业时间……」加的 .brk（display:block 主动断行）随之退役——
   一句话不会再折到第二行，留着就是一条永远不会命中的规则。 */
.body p{font-size:17px;line-height:2.05}
.p-center{text-align:center}
p+p{margin-top:var(--s5)}
/* max-width 46em 的作用是限制行宽；左对齐时它靠左，居中必须补 margin auto 才真居中。 */
.lede-sm{font-size:16.5px;line-height:1.9;color:var(--ink-2);max-width:46em;text-align:center;margin-left:auto;margin-right:auto}

/* 正文内文链：细下划线（v3：墨色为主，点缀色退场） */
.more{
  display:inline-block;margin-top:var(--s7);
  font-size:13px;letter-spacing:.18em;color:var(--ink);
  border-bottom:1px solid var(--line-2);padding-bottom:4px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.more:hover{border-bottom-color:var(--ink)}

/* ---------- 4. 页头与导航（v3 第十四轮：LP 实测同款「方向感知滑走/滑回」） ---------- */
/* 杨总 15:1x 重新确认 LP 真实效果：「页面下拉页头自然上滑消失，当页面上拉的时候，
   页头就有自然下滑出现」——浏览器实测（2026-10-23 15:2x，viewport 1264×591）取到一手实现：
   .component-app-header__box = position:fixed / top:0 / height:162px / z-index:201 /
   transition:0.6s ease-in-out；两态类 nav-down（translateY(0)=显示）／
   nav-up（translateY(-162px)=上滑消失）。
   → 结论：**整条页头 fixed 滑走/滑回，高度不变、不缩 logo、不缩行高**。
     此前第十二轮做的「吸顶＋渐收（缩 logo/缩行高/渐隐通知条）」是方向性错误，本轮全撤。 */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:201;
  background:var(--paper);
  /* v48（杨总 2026-10-24 12:08：「页头下面这根线可以去掉」）：
     页头与内容同为 --paper，线原来是为了在滚动时切出页头的边界。
     撤线后页头靠"整条滑走／滑回"的动作与不透明底色自证层级（nav-down 时整条移出视口）。 */
  transition:transform .6s ease-in-out;
  will-change:transform;
}
/* nav-up＝向下滚：整条上滑出视口（与 LP 同款位移与时长） */
header.site.nav-up{transform:translateY(-100%)}
/* 页头 fixed 后脱离文档流 → body 顶部留出页头高度（占位补偿，LP 同款做法） */
body{padding-top:var(--headh)}
/* 第一行：细通知条——NAP 全套＋营业时间＋预约电话（NAP 多源一致＝AI 采信信号）
   v3 第二十二轮（杨总 16:4x 第②条「地址和营业时间分开放在两边并不好看，loro 那种集中放在中间会好看一些」）：
   由 space-between 两端分置改为一句话居中，地址与营业时间用中点隔开，整行像 Loro Piana 的公告条。
   分隔双线也放在这一行下面（杨总：分割线「我说的分割线你依然没有加上，相反你加错了位置」——
   上一轮错加在数据条上了，见下方数据条规则）。 */
.topbar-wrap{display:flex;justify-content:center;align-items:center;gap:10px;
  min-height:36px;font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.topbar-right{white-space:nowrap}
/* v3 第二十五轮（杨总 17:2x 第③条「这里加了·去分割，但是这个标点并未居中，展示效果不好」）：
   「·」的垂直位由**字体自己决定**（实测落在基线附近偏下），flex 的 align-items:center 只对行盒
   生效，管不到字形本身 → 怎么调都偏。改为**几何圆点**：字符不显示（font-size:0），用 3px 的
   自身盒当点，居中交给 flex，任何字体下都不会偏。 */
.topbar-sep{
  width:3px;height:3px;flex:none;border-radius:50%;
  background:rgba(28,25,22,.32);font-size:0;line-height:0;overflow:hidden;
}
/* LP 式双线：一条浅细线在上、3px 间隔、一条铜色 2px 线在下，压在通知条底沿 */
.topbar{position:relative;padding-bottom:8px}
.topbar::before{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--line-2)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-2)}
/* 第二行：Logo 居中（两侧留白，LP 式）
   v3 第二十一轮（杨总 16:2x 第①条「页头 logo 摆放没有居中」）：
   原来用 grid 三列 1fr auto 1fr，但 head-main 只有 brand 一个子元素 → 它落进第 1 列，
   justify-self:center 只在这一列里居中 → 整枚 logo 偏左。改 flex 居中，几何上就是真居中。 */
/* v56（杨总 2026-10-24 15:44：「中间的LOGO也没有上下居中」）：
   原来是 min-height:76 + flex 居中——盒子确实居中，但下方紧接导航行，导航行自己有
   7px 内距＋链接 6px 上内距＋行盒余量，视觉间距被撑到 36，而上距只有 23。
   改为显式上下内距（28 / 16），让"双线→logo"与"logo→导航文字"都落在 28 左右。
   同时把选择器从 header.site .head-main 降为 .head-main：原来的两段式权重 0,1,1
   一直压着 768 断点里的 .head-main（0,1,0），那两条移动端 min-height 从来没生效过。 */
.head-main{
  display:flex;justify-content:center;align-items:center;
  gap:var(--s5);padding:28px 0 16px}
/* 图案与字标同色：原图案是品牌黄铜 #A69959、字标是墨色，两者色相与明度都不一致（杨总「颜色没有统一，很丑」）。
   统一到深铜 --accent（#7E6039）：仍是品牌铜色系，但在纸底上对比度约 5:1，字标也能读清。 */
.brand{display:flex;align-items:center;gap:14px;color:var(--accent);white-space:nowrap}
/* 页头用「图案 + 站内字体英文」：原 logo 竖排组合在本尺寸下英文只有 6px 高，
   小尺寸下不可读，故只取图案，英文由页面字体承担（见任务书 logo 章节）。
   v3 第十二轮：品牌口号「了解于您，更甚于您」按杨总批示删除（显挤），字标只留 SUNTINSION */
/* v3 第二十一轮：34/19 这个比例是「字标下方还有一行中文」时定的——那时字标块是两行高，
   图案相对显小。中文撤掉后字标只剩一行，图案就显得压不住了。改为 30 / 21（约 1.43 : 1，
   参照 Loro Piana 页头徽章与字标的高度关系）。 */
.brand-mark{width:30px;height:30px;flex:none}
.brand-txt{font-family:var(--sans);font-size:21px;line-height:1.15;letter-spacing:.22em}
/* 第三行：8 项导航，当前项铜色高亮（LP 式字色高亮，无下划线）
   v3 第二十一轮（杨总 16:2x 第①②条「页头文字没有和下方页面两边对齐」「和页面文字差得太远」）：
   原来 nav 是「居中紧排」（gap 32），8 项总宽约 460，在 1160 内容栏里只占中间一小段，
   而上面通知条的地址贴着内容栏左端 → 两行左边界差近 300px，看着别扭。
   改为 nav 拿满内容栏宽度、项间 space-between：最左项左边缘＝通知条左端＝正文左端，
   一条竖线上对齐；项间距由布局自动摊开（约 90px），不再是一小撮挤在中间。 */
/* v56（杨总 2026-10-24 15:44：「页头最下面这排的文字有点太坠了」）：
   原来 min-height:52 + 居中，导航文字盒底离页头底边只剩 7px——v48 撤掉 header 底边框之后
   页头下沿彻底敞开，这 7px 就成了"贴边发坠"。改为显式下内距 22，三行节奏收成 28 / 28 / 22。 */
.head-nav{display:flex;justify-content:center;align-items:center;padding:0 0 16px}
nav.main{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:space-between;width:100%}
nav.main a{
  position:relative;padding:6px 0;
  font-size:14px;letter-spacing:.06em;color:var(--ink-2);
  transition:color .25s var(--ease);
}
nav.main a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
nav.main a:hover,nav.main a[aria-current]{color:var(--accent-2)}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a[aria-current]::after{transform:scaleX(0)}

/* ---------- 5. 首屏 ---------- */
.hero{
  padding:120px 0 128px;
  /* v46：底线随全站一起撤 —— 首屏与下方内容靠留白与深浅色块分区 */
  background:var(--paper); /* v3：去渐变，平铺象牙底 */
}
/* v3 第三轮：中轴构图——标题/导语/按钮居中，主图居中大图（Loro Piana 式） */
.hero-center{max-width:860px;margin:0 auto;text-align:center}
.hero-center .eyebrow::before{display:none} /* 居中构图下左侧细线不协调，去 */
.hero-center h1 .sm{letter-spacing:.28em}
.btns-center{justify-content:center}
.hero-fig-center{max-width:960px;margin:var(--s8) auto 0}
.hero-fig-center img{aspect-ratio:3/2}
/* v3 第十二轮：LP 式 hero——初始态图宽＝内容栏宽（与左右两侧最远的字对齐、不超出，
   杨总 13:2x 批示），下拉后**直接**变大到满屏（阶跃 steps，无渐变过渡过程——杨总 13:4x
   批示「渐变变大的过程会感觉头晕，loro 下拉后是直接变大」）；**无遮罩渐变**，文字直接叠纯图。 */
/* v3 第十九轮（杨总 16:0x 三条）：①「整个人物都没了，图片裁剪了」②「滚轮滑了这么多
   页面却并没有下移，这也是卡顿感的重要来源」。两条同源、一起改：
   ① 上一轮 clip「开窗」取的是**满屏 cover 画面的中央**——视口一宽一扁，中央就只剩胸口布料，
      人头被裁在窗外。改为图片盒子本身从「内容栏尺寸」跳到「满屏」，img 一律 object-fit:cover，
      且 object-position:center top（顶部对齐）→ 初始态永远从头顶开始显示，人物不会丢。
   ② 180vh 轨道里 hero sticky 一屏，前 80vh 滚动全空转（滚很多、页面不动）。轨道改等高、
      hero 回正常文档流 → 滚一下页面就跟着走，没有空转段。
   放大仍是**阶跃**（steps(1,end) 只有 0/1 两个状态）：滚动过程中样式值不变，不会逐帧重排，
   第十五轮那种 width/height 逐帧 layout 的卡顿不会回潮。 */
.hero-track{height:auto}
/* v3 第二十轮（杨总 16:1x 第①条）：hero 容器原来硬撑「一屏 - 页头高」，图只有 760 高，
   1824×1257 视口下上下各空 176px，首屏发空。改为容器高度＝图高＋上下各 48，页头下不再大片留白；
   图尺寸与构图完全不动（不加大＝不会多裁人物）。--cw/--ch 提到容器上，子元素继承。 */
.hero.hero-full{position:relative;padding:0;
  --cw:min(var(--maxw),88vw);--heropad:48px;--hero-ar:1.4993;
  --ch:max(min(65vh,760px), calc(.6 * 100vw / var(--hero-ar) - var(--heropad) * 2));
  height:calc(var(--ch) + var(--heropad) * 2);min-height:400px;overflow:hidden;
  /* v34：声明为尺寸容器——放大态的层间距要跟「hero 实际高度」走，不能跟视口走。
     实测反例：1440×700 视口 hero 只有 576 高（65vh 主导），而 1874×611 视口 hero 有 750 高
     （宽度公式主导）。按视口高或按固定 px 取间距，两者必有一边过满/过空 → 用 cqh。 */
  container-type:size}
.hero-fig-full{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;overflow:hidden;
  width:var(--cw);height:var(--ch);
  animation:hero-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
.hero-full .hero-fig-full img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top}
/* v3 第二十四轮（杨总 17:0x：「放大后的页面是否可以尽量保留人物的完整性…我这边只显示了一个头」）：
   根因不在宽度公式，在**容器高**——容器高＝65vh，而满宽图的自然高＝100vw / 1.4993，视口一宽扁
   两者差得越多，object-position:center top 就裁得越狠（1824×630 实测：满宽图高 1217、容器 506，
   只剩顶部 42%，脖子以下全没了 → 看着只有一个头）。
   上一版试过「收窄宽度换完整」，实测左右各留 355px 米白，放大感全没了 → 否决。
   本版反向解：**宽度照旧满屏，把容器高按满宽图高反算一个下限**——
     容器高 ≥ 满宽图高 × 0.6（即最多裁 40%，与杨总认可的那张 1824×1257 截图同档）
   → 裁切比例在所有视口收敛到 ≤40%，高窗口仍走 65vh 原值不受影响。
   图 1000×667，比例 1.4993 写进 --hero-ar，换图要同步改（原写 1.8735 是错值，已改）。 */
@keyframes hero-grow{from{width:var(--cw);height:var(--ch)}to{width:100%;height:100%}}
.hero-cover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--gut);
  /* v3 第二十一轮（杨总 16:2x 第④条「页面变大之后这里的文字排版显得很挤，应该同步放大一些，
     并适当分开一些」）：图放大到满屏后，文字块还是内容栏尺寸、字号也没变，就被图的体量压扁了。
     给文字块加一条与 hero-grow 完全同步的阶跃放大（同 range 0→10vh、同 steps(1,end)），
     整体等比 ×1.14 —— 字、按钮、行距一起长，间距自动摊开，且不逐帧重排。 */
  }
/* v37（杨总 20:2x：「太大了也不好看啊，我刚才说的是只调整我指出来的那些就行了，其他地方不要调」）：
   v36 用「整层同比 k = 画幅倍率」把比例做成了恒等式，但 1874 下 k 是 1.616 —— 标题被放大到视觉 103px、
   文字块 326→527，比例对了、体量过头。根子在于：他要的不是「整块跟画面一起长」，而是「按钮别掉队」。
   所以回到 v34 的分层尺寸（标题 84／副标 22／层间距按 cqh 摊开，整层 scale 只留 1.06），
   只补一件 v34 漏掉的事：**按钮自己也得长大**。
   按钮倍率必须与标题同源，否则比例随视口漂：
     标题倍率 = h1 字号 / 64 = clamp(72,4.6vw,84)/64 = clamp(1.125, .071875vw, 1.3125)
     字号 13×倍率 = clamp(14.625px, .934vw, 17.06px)
     padding 40×倍率 = clamp(45px, 2.875vw, 52.5px)
     min-height 52×倍率 = clamp(58.5px, 3.7375vw, 68.25px)
     按钮组 gap 16×倍率 = clamp(18px, 1.15vw, 21px)
   实测落点：1874 标题 84 → 按钮 17.06/52.5/68.25 → 组宽 464.6×1.06＝492.6，÷ 标题 946 ＝ 52.1%；
   1440 标题 72 → 按钮 14.625/45/58.5 → 组宽 398×1.06＝422，÷ 810 ＝ 52.1%。两态与各视口恒等。
   下移取 8cqh（上限 76）：按钮从 52 长到 68、块再高 17px，10cqh 时 1440×700 只剩 26px 到 hero 底，
   收到 8cqh 后 1440 为 37、1874 为 68，四档都留得住呼吸。 */
@media (min-width:1200px){
  .hero-cover{animation:cover-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
  .hero-cover .eyebrow{animation:eyebrow-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
  .hero-cover h1{animation:h1-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
  .hero-cover h1 .sm{animation:sm-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
  .hero-cover .btns{animation:btns-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
  .hero-cover .btns a{animation:btn-grow 1s steps(1,end) both;animation-timeline:scroll(root);animation-range:0 10vh}
}
@keyframes cover-grow{from{transform:translateY(0) scale(1)}to{transform:translateY(clamp(8px,8cqh,76px)) scale(1.06)}}
@keyframes eyebrow-grow{from{font-size:12px;margin-bottom:44px}to{font-size:14px;margin-bottom:clamp(44px,10.5cqh,80px)}}
@keyframes h1-grow{from{font-size:64px}to{font-size:clamp(72px,4.6vw,84px)}}
@keyframes sm-grow{from{font-size:18px;letter-spacing:.24em;margin-top:32px}to{font-size:22px;letter-spacing:.3em;margin-top:clamp(32px,6cqh,48px)}}
@keyframes btns-grow{from{margin-top:68px;gap:16px}to{margin-top:clamp(68px,14.5cqh,112px);gap:clamp(18px,1.15vw,21px)}}
/* v37 的新增件：按钮跟着标题一起长。v34 只放大了字号与间距，按钮一直是 13px（两态实测都是 13px），
   于是「按钮÷标题」从 52.1% 掉到 39.8% —— 这才是「好像就只有这两个没有变化」的由来。 */
@keyframes btn-grow{from{font-size:13px;padding:0 40px;min-height:52px}
  to{font-size:clamp(14.625px,.934vw,17.06px);padding:0 clamp(45px,2.875vw,52.5px);min-height:clamp(58.5px,3.7375vw,68.25px)}}
/* v3 第二十二轮（杨总 16:4x 第①条「不能单纯只是放大文字，相互间距可以稍微拉开一些，
   否则拥挤感依然存在」——同意：等比 scale 只把密度整体乘一个系数，字与字之间还是那么挤，
   真正解挤要动层间距。这里把三处呼吸口拉开：小字→大标题 32→44、大标题→副标 24→32、副标→按钮 48→68。 */
.hero-cover .eyebrow{color:rgba(246,243,237,.92);font-size:12px;margin-bottom:44px}
.hero-cover h1{color:var(--paper);max-width:min(1040px,92vw)} /* v37：标题 84px 时文本宽 892，原 860 会逼出断行；1040 兼顾更长的将来标题 */
.hero-cover h1 .sm{color:rgba(246,243,237,.85);font-size:18px;letter-spacing:.24em;margin-top:32px}
.hero-cover .btns{margin-top:68px}
/* 数据条移出 hero 后独立成节：上距接 hero 底线，自身 border-top 保留规格表气质
   v3 第二十一轮（杨总 16:2x 第③条「和页头融为一体，也不好看…可以做一条类似于这样的分割线」）：
   照 Loro Piana 通知条下方那条分隔线的做法，用「一条浅细线 ＋ 4px 间隔 ＋ 一条铜色细线」双线，
   把数据条这一节从上方彻底切开，不再和页头糊成一片。 */
/* v44（杨总 2026-10-24 11:13：「文字下面的这条分割线去掉效果会更好，上下分区可以通过空间距离
   来营造，没必要做一个分割线，这里分割之后感觉空间很局促」）：
   这条线是通用 section{border-bottom} 落在这节上，而本节 padding-bottom 原是 0 ——
   线就贴着四块文字下沿（间隔 0），看着像把内容切掉一条，所以"局促"。
   撤线、下留白补到 --s9（96），与下一节（lead-section）的 64 上留白合起来 160，
   靠距离分区。注：本行上方那句「自身 border-top 保留规格表气质」的旧口径已在 v43 一并撤除
   （那条顶线同属"格子线"），此处以 10-24 的最新口径为准。 */
/* v45（杨总 2026-10-24 11:25：「这一段是否可以删除……将上面那段文字下移并重新调整合适的距离空间」）：
   下面那段 lede 整段删除后，数据条与下方 band 段之间只剩本节下留白＋band 上留白（96＋96＝192）。
   同时按「下移」把上留白从 --s8(64) 提到 --s9(96)：数据条整块下移 32，与 hero 图之间不再贴那么紧。
   初版上下同档 96，实测数据条到 band 段 192、比上方 129 松 63，整块读起来偏上；
   下留白收到 --s8(64) 后到 band 段 160，与改前（到原 lead 段）同一个数，节奏不乱。
   （上方 v44 注释里「与下一节（lead-section）的 64 上留白合起来 160」一句随该节删除而失效。） */
.stats-sec{padding:var(--s9) 0 var(--s8);border-bottom:0}
.stats-sec .stats{margin-top:0}
/* v3 第十轮：LP 式品类横块——左图右文杂志排版（文字原样搬，只换形态） */
.band{padding:var(--s9) 0}
.band-wrap{display:grid;grid-template-columns:5fr 6fr;gap:var(--s8);align-items:center}
.band-fig{margin:0}
.band-fig img{display:block;width:100%;height:auto}
.band-cap .sec-head{text-align:left;margin-bottom:var(--s6)}
.band-body p{margin:0 0 var(--s5);max-width:36em}
.band-body p:last-child{margin-bottom:0}
/* v3 第十轮：LP 式服务承诺条——五格细线分隔，无图标克制排版（短语均取自既定事实卡） */
/* v37（杨总 20:2x：「这一块的空间太宽了，和页底的宽度差不多了，我说过要参照一下 LP 的布局」）：
   底色是杨总认可的（20:3x 还要页脚跟它同色），所以留 --paper-2 不动；真正的病在**高度**：
   它同时是 <section>，被通用 section{padding:128px 0} 套上上下各 128，整条 389 高、内容只占 132，
   读成一条和页脚同量级的大横带。下面把 padding 收到 48。 */
/* v37b（真正让「空间太宽」的是这条）：承诺条是 <section class="promise">，被通用
   section{padding:128px 0} 套上了上下各 128 的留白 —— 实测整条 1874×389，内容只占中间 132，
   上下一共空 257px，读成一条和页脚同量级的大横带。收到 48（--s7），整条 389→216。 */
/* v38a（杨总 20:4x：「常见问题这一栏保留这个底色，剩下全栏包括页头都调整成这个底色」）：
   取色实证 FAQ 区 #F6F3ED（--paper）、承诺条与页脚 #FCFAF6（--paper-2）—— 6 个色阶的差读成两条米白。
   两处整栏底色统一到 --paper，全站只剩一片米白 + 铜块（LP 同构）。
   v38b（「这个区域的空间高度还是太高了，参照 LP 的这个空间高度正好」）：
   LP 服务条上留白 36 / 下留白 44，合计 80；我们 95 / 94，合计 189 —— 是我们高了 2.4 倍。
   padding 48→24，格内 32→16，每边留白 40，合计 80，与 LP 逐位相同。 */
/* v39（「这个高度依然没有变化」）：v38 只收了承诺条本体（217→137），但铜块上方还有页脚自己的
   64px 上留白，两者相加 201 才是他眼里的「那一条」—— 所以本体怎么收都看不出变化，文字也在 201 里偏上 32px。
   本节 padding 24→16、格内 16→12；页脚上留白另在 footer.site 一并收（64→24）。
   整条 201→约 136，文字回到本体正中。 */
/* v39b：去掉 border-bottom —— 页脚上留白收到 0 后，铜块直接顶在下沿，
   零间距处再留一条线会被读成铜块的上边框，脏。上行线保留（FAQ 段的收口）。 */
/* v42（杨总 21:1x：「这个高度还是做高一些，LP 是一排文字，我们是两排，这个高度就有点挤」）：
   v38 把留白压到与 LP 逐位相同（80），前提是 LP 只有一行字；我们标题＋副标题两行、内容本体 56，
   56 挤在 80 里，每边只剩 12 —— 读成"两条字塞进一条细缝"。
   按「内容上下各留 LP 那份 43」重算：32＋12＝44，整条 113→145，与 LP 的呼吸量一致，只是内容更高。
   只动 section 上下 padding，.promise-cell 的内距与 align-items:center 一概不碰 ——
   文字块与图标仍以格子中心为轴，加高多少，上下各多分一半，不会出现"高度变了文字没动"。
   （竖线是 cell 的 border-left，随 cell 走，80/145=55%，比原来 71% 更接近 LP 的短竖线。） */
.promise{padding:var(--s6) 0;background:var(--paper)}
/* 「我们这是五列信息的，比 LP 多一列，所以要稍微宽一些才好看」：
   内容宽 1160 → 1220（占 1874 视口 65.1%），每格 221 → 233；再窄「做别的款式不必重新量」就折行。 */
.promise-wrap{display:grid;grid-template-columns:repeat(5,1fr);max-width:min(1220px,92vw)}
/* v35（杨总 18:5x 第 2 条「参照 LP 的样式，加一下图片点缀」）：LP 服务条是「细线图标＋一行文字」
   横排、中间竖线分隔。我们原来是纯文字两行居中。改为「图标左置＋两行文字右置」，格内整体居中，
   文字回到左对齐（有图标时居中会让两行列头参差）。图标 26px、1.25 描边、无填充、取正文灰，
   与 LP 的轻量线条同档。 */
/* v37「同时这块也太挤了」：图标与文字只隔 14px，28px 的图标几乎贴到字上；左右内边距 16 也压得紧。
   左右 16→24、图标与文字 14→22 —— 内容占格宽 59.3%→67.8%，接近 LP 的饱满度。 */
/* v46（杨总：「这个位置的可以保留，但是分割线的高度调整到和这些文字同高即可，现在似乎太高了，
   我看了 LP 的设计，他们应该是同高的」）：原来 border-left 画在格子上＝格子全高（145 条里 80 高），
   比两行文字（56）上下各多出 12。改为格子内绝对定位的细线，上下各缩进 cell 的 padding（--s3=12），
   高度自然等于内容高：文字块 56 → 线 56；任何断点文字折行变高，线跟着变高，不用逐档写死。
   首格与两列档的行首（奇数格）不画线，规则同原来（见 :first-child 与 ≤900 断点）。 */
.promise-cell{position:relative;padding:var(--s3) var(--s5);
  display:flex;align-items:center;justify-content:center;gap:22px;text-align:left}
.promise-cell::before{content:"";position:absolute;left:0;top:var(--s3);bottom:var(--s3);width:1px;background:var(--line)}
.promise-ic{width:28px;height:28px;flex:none;color:var(--ink-2);fill:none;
  stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.promise-tx{display:block;min-width:0}
.promise-cell:first-child::before{display:none}
.promise-cell b{display:block;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.promise-cell span{display:block;margin-top:8px;font-size:12px;color:var(--ink-3)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:var(--s9);
  align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  margin-bottom:var(--s6);
  font-size:11px;letter-spacing:.32em;color:var(--ink-3); /* v3：铜色小字退场，只留铜细线 */
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent-2)}
h1 .sm{
  display:block;margin-top:var(--s5);
  font-family:var(--sans);font-size:16px;font-weight:400;
  letter-spacing:.2em;line-height:1.7;color:var(--ink-3);
}
.lede{margin-top:var(--s6);max-width:34em;font-size:18px;line-height:2.0}
/* v45：首页 hero 后那句 standfirst（「一人一版，30多个部位精细量体……」整段）已按杨总 10-24 删除；
   .lead-section 与 .lede-standfirst 两条规则一并退役（全站仅首页用过，已核 23 页）。 */

/* 数据条：像一张规格表，安静、精确（v3：数字更松弛） */
/* v43（杨总 2026-10-24：「去掉这种格子一样的方格线是否会更好，显得更简约一些，
   符合整体的页面氛围」）：四格原来是「顶线＋三条竖线」的表格框，读起来像一张被线画住的表。
   线与线之间的四块文字本身就靠 48px 的格间空隙分得开，撤线后四组数据浮在米白上，
   与全站「细线只用于收口、不用于画格子」的调子一致。格左右内距 24 不动，四块位置一格未移。 */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:var(--s9);
}
/* v3 第二十一轮：四格原来一律左对齐＋首格贴内容栏左端、末格贴右端，
   格子右半大片空白 → 杨总「文字分开在两边」。改四格内容居中，四块重量均等。 */
.stats div{padding:32px 24px 0;text-align:center}
.stats b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,2.2vw,30px);line-height:1.35;color:var(--ink);letter-spacing:.01em;
  white-space:nowrap; /* v3：禁折行——「30多个部位」「步行约 200 米」在 42px 时折成两行是乱感主因 */
}
.stats span{display:block;margin-top:12px;font-size:13.5px;line-height:1.8;color:var(--ink-3)}

/* ---------- 6. 按钮（v3：极简细线风——透明底＋细边框＋大字距，hover 墨色填充） ---------- */
.btns{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 40px;
  font-size:13px;letter-spacing:.22em;
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

/* v3 第十八轮（杨总 15:4x「右边方框里没有内容，鼠标放上去才有」）：
   根因——hero 内按钮原来写在通用 .btn 之前，而 `.hero-cover .btn`(0,2,0) 与
   `.btn.ghost`(0,2,0) 特异性相同，后者靠书写顺序把字色压回墨色 var(--ink)，
   叠在深色照片上等于隐形。改用 a.btn 把特异性提到 (0,2,1)，并挪到通用规则之后，双保险。 */
.hero-cover a.btn{border-color:rgba(246,243,237,.8);color:var(--paper)}
.hero-cover a.btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hero-cover a.btn.ghost{background:transparent;border-color:rgba(246,243,237,.45);color:var(--paper)}
.hero-cover a.btn.ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---------- 7. 左右分栏（编辑式） ---------- */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s8);align-items:start}
.split>div:last-child{max-width:660px}

/* ---------- 8. 网格与卡片 ---------- */
.grid{display:grid;gap:var(--s5)}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* g22：明确 2×2，用于「按场景分」「四个品类」等 4 项卡片，避免 3+1 孤儿 */
.grid.g22{grid-template-columns:repeat(2,minmax(0,1fr))}
/* v50（杨总 2026-10-24 12:36：「这个六步，我认为上面三步，下面三步才是最好的」）：
   原来自动适配在 1104 内容宽下算出 4 列，六格排成 4+2，第二行两格孤零零挂在左边。
   固定 3 列，六格正好 3+3。同规则的「六类常见客户」（关于页）也是 6 格，一并变成 3+3。 */
/* v52（杨总 2026-10-24 14:42：「这一款块的宽度超出其他位置很多，看起来很怪」
   「边界不应该超出两张图片的左右最外沿，如果单排三列无法做到，那就将六步从两行改成三行，
   每行仅两步，同时调整中间的距离，要有足够的空间感」）：
   六步原来在 .wrap（内容 1104）里排三列，比同页正文与两张图（744）宽出 300，
   整页只有这一块"顶到边"，缩略图里一眼就能看出。
   三列塞进 744 只剩 184 一格，字排不下，所以按杨总给的第二方案：两列三行。
   列距 96（与首页两处两列格同一值，跨页同构），行距 128（比列距大一档，
   因为纵向是三行、行与行之间要能看出"一步结束、下一步开始"）。
   格宽 324，正文上限 360 不生效，每格自然写满。 */
.grid.g3.steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:96px;row-gap:128px}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* v3 第四轮：区块标题居中＋正文居中窄栏（LP 式聚焦构图） */
.sec-head{text-align:center;max-width:680px;margin:0 auto var(--s8)}
.body-center{max-width:740px;margin:0 auto}
.body-center p{font-size:17px;line-height:2.05;text-align:center}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* v3：卡片去底色盒子，本来靠「顶部一道细线」出编辑式。
   v47（杨总 2026-10-24 11:54 问两处「这些线是否有必要去掉」——"为什么选我们"与"我们能做什么"）：
   两段的格子结构不同（2×2 与 2×2），但都用这条规则；每格顶线在 2×2 里读成四条短横，
   像一张没画完的表。而且每格本来就有锚点——前者是「版型／试身／工艺／售后」小标签，
   后者是 01–04 编号——线与锚点重复。去掉后靠 96 的行间距与小标签定位，格子上留白 32 不动。
   hover 的变色（原来只改线色）随之失效，一并删除，不另造 hover 效果。 */
.cell{
  background:none;border:0;
  padding:var(--s6) 0 0;
}
/* v50：卡片里的标题与描述一起居中。原来每格文字左对齐，短句就贴在格左界上，
   两列四格里右列文字天生比左列短，整块重心被拉向左侧（杨总：「文字目前依然偏左」）。 */
.cell{text-align:center}
.cell h3{margin-bottom:var(--s4);font-size:22px}
/* v51（杨总 2026-10-24 14:34：「居中之后，小字的行数可以多分几行，现在看起来太长了，
   空间感不够，左右显得拥挤」）：
   两列格的正文一行能排到 504（首页）／540（服务·面料·休闲），一行约 36 字；
   三列格只有 352。同一个站里正文行宽差一倍，两列格那两处读起来又长又挤。
   现给正文一个统一行宽上限 360px（与三列格 352 同档），每行约 25 字，
   短句折成两三行，左右留白自然回来——这是"空间感"的来源，不是靠加间距。
   用 px 不用 em：字号还有 14/15 两档时，em 会算出两个不同宽度，反而更不齐。
   字号同时统一到 14px（杨总 v48 12:08「这些下面的字可以适当缩小」定过的值），
   首页那条 .svc-grid/.why-grid 的 14px 覆盖随之退役——它本来只是把 15 调成 14，
   现在基准就是 14，不必再单列一层。 */
.cell p{max-width:360px;margin-left:auto;margin-right:auto;font-size:14px;line-height:1.9;color:var(--ink-2)}
/* v3 第二十轮曾把「版型：」「试身：」这类前缀提成独立小标签行（.k），
   并给「我们能做什么」配 01–04 编号（.num），两块形成同一节奏。
   v48（杨总 2026-10-24 12:08：「我感觉这些小字可以去掉，并没有特别需要的必要」）：
   两组小字全部退役——它们原来和顶线一起承担"分块"的职责，顶线在 v47 撤掉后，
   小字反而成了多余的一层。模板里连 span 一起去掉，不留空标签。
   同时：格子顶部 26px 内距（原本就是「顶线到文字」的距离）收为 0，行距只由 96 gap 承担。
   注意：流程页「六步流程」的 01–06 仍在用 .num —— 那是**有语义的步骤序号**（第几步），
   不是装饰，规则保留、只撤首页的渲染。 */
.cell .num{
  display:block;margin-bottom:14px;
  font-family:var(--sans);font-size:11px;letter-spacing:.2em;line-height:1.4;color:var(--ink-3);
}
.svc-grid,.why-grid{column-gap:96px;row-gap:96px}
.svc-grid .cell,.why-grid .cell{padding:0}
/* v49（杨总 2026-10-24：「对于这种题目的字，我认为不必要太小。或者说应该和正文有所区分，
   这样才能形成属于自己的一个空间，如果和正文拉不开，空间感是会减弱的」）：
   标题原来单独压到 20px／行高 1.5／下距 14，理由是"正文缩小、让位给留白"。
   但正文在 v48 已收到 14px，标题再压到 20 就只剩 1.43 倍级差，标题读不成一层。
   现整条退役，改吃全站卡片基准 .cell h3（22px／下距 16）——与其它页同步，不再单独特殊化。
   标题与正文的级差靠"字号 22 vs 14 ＋ 衬线 vs 无衬线 ＋ 深浅两色"三层一起给，
   不靠把标题继续放大。
   v51：原来这里还压了一条「正文 14px」（全站基准当时是 15），v51 已把基准收到 14，
   这一条成了同值覆盖，一并退役。 */
/* 变体选择器：原来在默认样式之外又给「为什么选我们」加了一道顶线。
   v47 同批撤掉（默认 .cell 的顶线已去，这条是它的覆盖规则，不同步改就等于没改——
   实测第一版只改默认规则，截图里"为什么选我们"四格仍有线，故此条一并处理）。
   v49（杨总 2026-10-24：「实际空间感并没有拉开」「这个地方应该同步调整才对」）：
   这条规则还留着两处更隐蔽的不同步，本轮清干净——
   ① gap 是简写，48px 把 .svc-grid/.why-grid 的 column-gap:96 压回 48：
      实测 .svc-grid 中缝 96px、.why-grid 中缝只有 48px，两栏贴在一起，空间感自然拉不开。
      改法：只写 row-gap，列距交回 .svc-grid/.why-grid 统一。
   ② .grid.rule-top .cell 权重 0,3,0 高于 .svc-grid .cell 的 0,2,0，
      把「为什么选我们」每格顶部又顶出 24px，而「我们能做什么」是 0（实测 h3 y 与 cell y：一处 +24、一处 +0）。
      线已撤，这段内距失去来由，整条删掉，格顶内距归 .svc-grid/.why-grid 的 0。
   ③ 行距同理：`.svc-grid,.why-grid` 给的是 96，被这条压成 48——列距 96 而行距 48，
      横向开、纵向挤，两处节奏不一致。行距也交回统一值。
   至此 rule-top 变体再无任何职责（顶线 v47 已撤、列距格顶 v49 撤、行距本步撤），
   规则整条退役，模板里的类名一并去掉，不留空类。
   教训：改一条规则先查变体覆盖——v47 的顶线、v48 的 26px 内距，两次都是在变体上漏改。 */

/* ---------- 9. 图片 ---------- */
figure{margin:0}
figure img{
  width:100%;height:auto;
  aspect-ratio:3/2;object-fit:cover;
  background:var(--paper-3);
  outline:1px solid rgba(28,25,22,.07);outline-offset:-1px;
}
figcaption{
  margin-top:var(--s3);
  font-size:12.5px;letter-spacing:.08em;line-height:1.7;color:var(--ink-3);
}
/* 博客文章页图注居中（杨总 2026-10-11 18:1x 令「博客里所有文章的图注，全部调整成居中对齐」；
   只圈文章容器，首屏 hero-fig 等主站图注维持原样） */
.article figcaption{text-align:center}
.figure-row{
  display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:var(--s8);
}
/* 首屏竖构图 */
.hero-fig img{aspect-ratio:3/2;width:100%}
.hero-fig figcaption{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
}
/* 通栏大图 */
figure.wide img{aspect-ratio:16/7}

/* ---------- 10. 表格 ---------- */
table{width:100%;border-collapse:collapse;margin-top:var(--s6);font-size:15px}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.85}
th{width:150px;white-space:nowrap;font-weight:400;font-size:13px;letter-spacing:.1em;color:var(--ink-3)}
td{color:var(--ink-2)}

/* ---------- 11. 常见问题（原生 details，无 JS，内容全在源码里） ---------- */
/* v39：全站主底改为米白 #FCFAF6 后，FAQ 这一栏保持原来的 #F6F3ED，成为唯一略深的米色块。
   杨总：「常见问题这一栏底色保持不变，其他位置都是调成米白那个底色」。 */
/* v47（杨总 2026-10-24 11:54：「稍微加深一点即可，这个是 LP 的色差对比，这个是我们目前的色差对比」）：
   实测 LP 两块相邻底色的通道差是 −8／−11／−12（#F6F5F1 → #EEEAE5，亮度差约 11），
   我们原来是 −6／−7／−9（#FCFAF6 → #F6F3ED，亮度差约 7）—— 差 4，肉眼就读成"没有色块"。
   取 #F1EDE6（241/237/230），与全站底 #FCFAF6 的差变成 −11／−13／−16，与 LP 同档；
   只调 FAQ 这一处，全站底色与米白体系不动（杨总 v39 定过）。 */
.faq-band{background:#F1EDE6}
/* v3 第四十一轮（杨总 21:0x：「常见问题那一栏，配一张合适的图片放进去」）：
   这一栏原来是通栏单列，列表只占左侧约六成，右边整片留白。改两栏——左问答、右一张制版图。
   右栏 484 宽，图 484/375（1.29）＝左栏内容高（标题 64＋间距 32＋列表 234＋链接 48＋行高 29），上下沿自然齐平。 */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) 484px;column-gap:72px}
/* v43：首页图注去掉后，右栏只剩图。原来图 484/375 是靠「图 375＋图注 33＝408」与左栏齐平，
   图注一删就短 33px、下沿悬空。改为图填满右栏（figure 由 grid stretch 拿到左栏高度），
   cover 裁掉左右各 10px（原图 695×562，按 484×408 需放大到 0.726 倍），画面主体不动。 */
.faq-fig{margin:0;display:grid}
.faq-fig img{width:100%;height:100%;object-fit:cover;object-position:center}
/* v47：标题与第一条之间那条起始线去掉（纯装饰，与标题抢开间）；
   条目之间的分隔线保留 —— 它是 accordion 的可点区域边界，去掉后三行问题会连成一段，
   读者判断不出哪一行能展开。（杨总要连这条也去的话，得同时给展开态加底色之类的替代提示。） */
.faq-list{margin-top:var(--s6)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  position:relative;cursor:pointer;list-style:none;
  padding:24px 44px 24px 0;
  font-family:var(--serif);font-size:18px;line-height:1.6;color:var(--ink);
  transition:color .25s var(--ease);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:6px;top:50%;margin-top:-7px;
  width:11px;height:11px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{transform:rotate(-135deg)}
.faq-list summary:hover{color:var(--accent)}
.faq-list .a{padding:0 60px 28px 0;font-size:15.5px;line-height:1.95;color:var(--ink-2);max-width:70ch}

/* ---------- 12. 提示块 ---------- */
.note{
  background:var(--paper-2);border-left:2px solid var(--accent);
  padding:var(--s5) var(--s6);margin-top:var(--s7);
  font-size:14.5px;line-height:1.9;color:var(--ink-2);
}

/* ---------- 13. 页脚（v3 第二十五轮：Loro Piana 式内嵌色块）
   杨总 17:2x 四条一并改：
     ①「黑色画面是否过多？像 loro 这样应该会更好看吧」——原来页脚是**通栏满宽**墨块、741 高，
        整块黑压屏。改 LP 做法：页脚底色回纸白，墨色收进一个**圆角内块**（与内容栏同宽，左右各留
        332px 纸白），块内只四列；版权行移到块外的纸白上。黑面积 1.35M → 0.29M px²（降 79%）。
     ②「来店里聊聊…可以删掉，页头已经有预约信息了」——整块 CTA 行（含大字电话）删除。
     ③④「这里的内容也是重复的…首页本来已经有介绍了」——品牌列的「广州白云区西服定制门店／
        2019 年成立…／广州本地到店…」整段删除，品牌列只留 logo。
   门店信息仍按 NAP 全项保留：那是 AI 采信要的多源一致，属事实层，不属文案重复。 ---------- */
/* v3 第二十六轮（杨总：页脚过小、头重脚轻，参照 LP）：LP 页脚块占屏宽 72.3%，我们原 60.5%。
   页脚容器比正文栏宽出 200px，并让版权行与之同宽对齐——LP 也是页脚略宽于正文。
   块高由内边距与字号撑起：字号 13→14，块高 272→约 320，块高/块宽回到 LP 的 23% 档 */
/* v37c（杨总 20:3x：「去掉页底四周的底色，改成和承诺条一样的底色，让两个色块融成一体…
   LP 这款是两个色块，我们是三个色块」）：
   实测截图取色——承诺条区 #FCFAF6（--paper-2）、页脚区 #F6F3ED（--paper），差 6 个色阶。
   于是从上到下读成三条：亮米白（承诺条）／铜块／暗米白（页脚）。
   LP 只有两条：一整片米白 ＋ 一块砖红浮在上面（砖红左右都露米白，米白是连续的）。
   当日改法：页脚底色换成 --paper-2，与承诺条同色连成一片。
   v38 修正（杨总 20:4x 定口径）：统一到另一头 ——「常见问题这一栏保留这个底色（#F6F3ED / --paper），
   剩下全栏包括页头都调整成这个底色」。承诺条与页脚一并回到 --paper，全站一片米白，结论不变（两个色块）。 */
/* v39：上留白 64→24。承诺条与铜块之间这段同色空白，会被读成承诺条的下半截，
   既把整条撑高（201），又让文字看起来偏上。收到 24 后承诺条的下边界线成为真正的分界。 */
/* v39b：上留白 24→0。这段同色空白只加在文字下方，是「看着偏上」的唯一来源；
   收不掉它，任何 padding 微调都消不掉这 23px 偏差。铜块直接顶在承诺条下沿。 */
footer.site{background:var(--paper);color:var(--ink-2);font-size:15px;padding:0 0 var(--s5)}
footer.site .wrap{max-width:min(calc(var(--maxw) + 240px),90vw)}
.foot-inner{
  /* v3 第二十七轮（杨总：参照 LP，页脚用 logo 的品牌色）：底＝--accent #7E6039（logo 图案原色）。
     12.5–14px 正文在铜底上必须换色：#EDE7DC 对 #7E6039 实测 4.72:1（AA 通过），
     原 --on-dark-2 #A79E90 只有 2.19:1（那是配墨黑的，不能沿用） */
  background:var(--accent);color:var(--on-dark);
  border-radius:8px;padding:88px 80px 84px;
}
/* 门店列改成 minmax：地址一行实测需 273px（13px 字号），1180 档按 fr 只分到 262 → 断行。
   设下限 280px（实测需 273，留 7px 亚像素余量）后，任何 ≥1081 的宽度都保证地址收进一行；更宽时按 1.6fr 富余给门店列 */
/* v35（杨总 18:5x 第 1 条「这一整块排版参照 LP，布局太散、空间比例不合理」）：
   实测根因——三列**各 347px 等宽**，而第一二列的内容只有 60 上下，实心内容只占横向 26%，
   空白 74%（LP 约 51%），三列看上去是「三个孤立的点」。LP 是四列且**列宽跟内容走**，不是等分。
   改法：门店信息拆成「门店地址」「预约与联系」两列 → 四列；列宽 max-content；
   space-between 铺到块内两端（LP 的末列也是顶到右内边距）。gap 作最小值兜底。 */
.foot-grid{display:grid;grid-template-columns:max-content max-content max-content max-content;
  justify-content:space-between;gap:var(--s6)}
/* 页脚深底上用原 logo 竖排组合（图案 + SUNTINSION），此尺寸下英文约 17px，可读 */
footer.site h4{
  margin-bottom:26px;
  /* 杨总 18:2x 二次：参照 LP 页脚——LP 实测标题字高 14px、正文 10px，标题是正文的 1.4 倍。
     我们正文 15px，标题取 19px（1.27 倍，留一点余地免得压过正文），字距收到 .06em，
     字重回 400（19px 的笔画本身够宽，不需要加重；加重反而显笨） */
  font-family:var(--sans);font-size:19px;letter-spacing:.06em;
  font-weight:400;color:#F6F3ED;
}
footer.site ul{display:grid;gap:18px;line-height:1.7}
/* 地址这类长中文串在窄列里断行会断成「一期4 / 栋1509」，交给 balance 均分成两行 */
.foot-grid>div:nth-child(3) li{text-wrap:balance}
footer.site .foot-inner a{color:var(--on-dark);transition:color .25s var(--ease)}
footer.site .foot-inner a:hover{color:#fff}
/* 版权行落在纸白上（LP 同款）：深色块不再承担页脚的全部体量 */
.foot-bottom{
  /* v3 第三十二轮（杨总 18:3x，参照 LP 底栏：左信息／中 logo／右备案组）：
     原 flex space-between 的中间项落点由"左版权宽 − 右 ICP 宽"决定，必然偏右；
     改 `1fr auto 1fr` 三列——中间列是 auto，几何居中于容器，与左右文字宽度无关。 */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s6);
  /* v3 第四十轮（杨总 21:0x：「文字包括 LOGO 整体上移一些，现在看起来有点下坠」）：
     实测铜块下沿→内容 48、内容→页底 32，中心比区块中心低 8px，故上收下放。 */
  padding-top:32px;padding-bottom:16px;
  font-size:13px;line-height:1.8;letter-spacing:.04em;color:var(--ink-3);
}
.foot-brand{display:flex;align-items:center;gap:10px;justify-self:center;color:var(--accent)}
.foot-mark{width:26px;height:26px;display:block;flex:none}
/* 与页头同一套构成：图案＋字母，只是按版权行 13px 等比缩小（页头是 30/21） */
.foot-brand-txt{font-family:var(--sans);font-size:14px;letter-spacing:.18em;line-height:1;color:var(--accent)}
.foot-right{display:flex;align-items:center;justify-content:flex-end;gap:var(--s7);flex-wrap:wrap}
/* v43（杨总 2026-10-24：「这三个稍微集中一点是否会更好看一些，像一个整体」）：
   三个链接之间原 24px（13px 字、单链接宽 27–54，开间比字还宽，读成三个散点）。
   收到 16 与 48 的组间距离形成「社交三连｜备案号」两个组，三个链接成为一体。 */
.foot-social{display:flex;gap:var(--s4);flex:none}
.foot-social a{border-bottom:1px solid var(--line-2);transition:color .25s var(--ease),border-color .25s var(--ease)}
.foot-social a:hover{color:var(--ink);border-color:var(--accent-2)}
/* ICP 备案号：出号前预留一行空间，出号后写入 ICP_NO 重跑即可，页脚不会跳动 */
footer.site .icp{
  min-height:22px;flex:none;
  font-size:11.5px;line-height:1.8;letter-spacing:.04em;color:var(--ink-3);
}
footer.site .icp a{border-bottom:1px solid var(--line-2);transition:color .25s var(--ease)}
footer.site .icp a:hover{color:var(--ink)}

/* ---------- 15. 面包屑 ---------- */
.crumb{padding-top:var(--s6);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.crumb a{border-bottom:1px solid var(--line-2);transition:color .25s var(--ease),border-color .25s var(--ease)}
.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent-2)}

/* ---------- 16. 长文阅读页 ---------- */
.article{max-width:760px;margin-left:auto;margin-right:auto}
/* v50：页头段单独给一个 class，不再用内联 style —— 内联样式媒体查询覆盖不了，
   手机上 128px 的上留白会顶出一大块空白。桌面 128（与下节 128 等高，块在段内上下对称），
   640 以下收到 72。 */
.page-head{padding:144px 0}
.article h1{font-size:clamp(26px,3.4vw,38px);line-height:1.4;margin-bottom:var(--s5)}
.article h2{font-size:23px;line-height:1.55;margin:var(--s9) 0 var(--s3)}
.article h3{font-size:18px;margin:var(--s7) 0 var(--s2)}
.article p{line-height:1.95;margin-top:var(--s5)}
.article ul,.article ol{margin:var(--s5) 0 0 var(--s5);padding-left:var(--s5);color:var(--ink-2)}
.article ul{list-style:disc}
.article ol{list-style:decimal}
.article li{margin-top:var(--s3);line-height:1.9}
.article figure{margin-top:var(--s7)}
.article strong{color:var(--ink);font-weight:600}

/* ==========================================================================
   17. 响应式：1440 / 768 / 390
   ========================================================================== */
@media (max-width:1080px){
  /* 两栏在平板宽度下左栏只剩 345，问题会折行，故降单列、图落到列表下方 */
  .faq-grid{grid-template-columns:1fr;row-gap:var(--s7)}
  /* 单列不铺满：16:9 通栏把纸样上下沿切掉、图也压过文字，故沿用原比例并限宽 560 */
  .faq-fig{max-width:560px}
  .faq-fig img{aspect-ratio:484/375;height:auto}
  .hero-grid{grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8)}
  .split{grid-template-columns:240px minmax(0,1fr);gap:var(--s6)}
  /* v3 第二十五轮：品牌列只剩 logo。先用 2×2，实测 logo 那格下方空出 100px（行高被最长列决定）
     → 改「品牌整行＋看衣服／了解我们／门店信息 三列并排」，块高 471→约 400，底部齐平 */
  /* v3 第二十五轮：窄屏列宽不够装地址。CDP 实测一行需 273px（13px 字号）。品牌整行，
     下面三列，门店列用 minmax 兜住 280px 下限 → 1024 档门店列 280、另两列各 186，仍收进一行。 */
  /* v35：四列最小需 715px，1081 以下装不下——1024 实测四列同排时前三列被压到间距 27、
     第四列被地址列顶到 341px 开外，比原来的三列均分更难看。本档改两列 2×2：
     1024 每列 357、地址 314 仍收进一行；且块高 481（四列挤排曾试「两列＋后两列整行」= 701，否决）。 */
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6)}
  footer.site ul{gap:18px}
  /* 平板档品牌整行后块高 490、宽 866（近正方）→ 内边距收到 52/52/48，块高 452，回到横条比例 */
  .foot-inner{padding:68px 60px 60px}
}

/* v3 第二十轮：两列在窄屏收小开间，避免每列过窄读成竖条 */
@media (max-width:1180px){
  .svc-grid,.why-grid{column-gap:56px;row-gap:72px}
}

/* v35：两列时每列下限由地址决定——地址一行需 314px，两列合计容器 <660px 就断开
   （断行会断成「益云／科创」这类词中切断）。870 以下门店地址与预约与联系各占整行。 */
@media (max-width:870px){
  .foot-grid>div:nth-child(n+3){grid-column:1/-1}
}

@media (max-width:900px){
  :root{--s9:76px;--s10:88px}
  .hero-grid{grid-template-columns:1fr;gap:var(--s8)}
  .hero-fig{order:2;max-width:520px}
  .split{grid-template-columns:1fr;gap:var(--s5)}

  /* v3 第十一轮响应式：横块收单列；承诺条两列（行首去左线）；
     页头两侧饰件与通知条右半隐藏，Logo 居中不变（duo 已按杨总 13:2x 批示删除） */
  .band-wrap{grid-template-columns:1fr;gap:var(--s6)}
  .promise-wrap{grid-template-columns:repeat(2,1fr)}
  .promise-cell:nth-child(odd)::before{display:none}
  /* v42：两列后成 3 行、整条本来就高，留白比桌面收一档 */
  .promise{padding:var(--s5) 0}
  .head-side{display:none}
  .topbar-right,.topbar-sep{display:none}
  /* v35：页脚两列已上移到 960 断点（低于 961 时四列共需 715px 会溢出），此处不再重复 */
}

@media (max-width:768px){
  /* 移动端页头同为 fixed＋方向感知（与桌面同一套滑走/滑回）；页头高度由 JS 实测回填 --headh，
     行高收紧只影响页头自身高度，不影响其他元素 */
  /* v56：原来这两条 min-height 被桌面的 header.site .head-main（0,1,1）压死、从未生效；
     桌面选择器已降为 .head-main，此处改为显式内距，按手机比例收一档。 */
  .head-main{padding:14px 0 10px}
  .head-nav{padding:0 0 8px}
  /* 移动端导航改为换行平铺：8 项全部可见，不做横向滚动条 */
  nav.main{
    width:100%;flex-wrap:wrap;gap:14px var(--s5);
    padding-bottom:12px;
  }
  nav.main a{font-size:13px}
  /* 移动端轨道与阶跃范围缩短，避免要滚很久才到数据条 */
  .hero.hero-full{--heropad:32px;min-height:0}
  .hero-track{height:auto}
  .hero-fig-full{animation-range:0 10vh}
  .brand-mark{width:26px;height:26px}
  .brand-txt{font-size:18px;letter-spacing:.2em}
  nav.main{gap:12px var(--s5)}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  :root{--gut:20px;--s9:56px;--s10:64px}
  section{padding:var(--s9) 0}
  h1{font-size:32px;line-height:1.3}
  h1.pt{font-size:24px;line-height:1.45}
  h1 .sm{font-size:14px;letter-spacing:.14em}
  .lede{font-size:16px}
  .eyebrow{font-size:10px;letter-spacing:.22em}

  /* v43：手机档 2×2 原来靠横线＋竖线画格子，与桌面同一轮一并撤线；
     四块之间是 36／28 的留白，位置与字号一概不动。 */
  .stats{grid-template-columns:1fr 1fr;gap:0}
  .stats div{padding:18px 14px}
  .stats div+div{padding-left:14px}
  .stats b{font-size:21px}

  .btns .btn{flex:1 1 auto;min-width:0;padding:0 20px}
  .grid.g2,.grid.g22,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .svc-grid,.why-grid{row-gap:48px}
  /* v52：六步在 640 以下已经是单列（.grid.g3 的 1fr），桌面那 128 的行距在单列里太长 */
  .grid.g3.steps{grid-template-columns:1fr;row-gap:56px;column-gap:0}
  .cell{padding:var(--s6) var(--s5)}
  .foot-grid{grid-template-columns:1fr;gap:var(--s7)}
  .foot-grid>div:nth-child(n+3){grid-column:auto}
  .foot-inner{padding:44px 28px 40px}
  .foot-bottom{grid-template-columns:1fr;gap:var(--s3);justify-items:start}
  .foot-brand{justify-self:start}
  figure.wide img{aspect-ratio:4/3}
  .faq-list summary{font-size:16.5px;padding:20px 40px 20px 0}
  .faq-list .a{padding-right:24px;font-size:15px}
  .article h2{margin-top:var(--s8)}
  .page-head{padding:72px 0 56px}
  section[style]{padding-top:var(--s9)!important}
}

/* ---------- 18. 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}