/* Raymond Zhan — shared design system
   Palette: antique brass / ivory / ink-navy. Tokens are declared complete in :root,
   then redefined (tokens only) for the two dark states. */

:root{
  --ground:#FAF7F2;
  --surface:#FFFFFF;
  --band:#F3EEE4;
  --panel:#322F2B;
  --panel-ink:#EFE9DF;
  --ink:#322F2B;
  --ink-soft:#403A34;
  --ink-faint:#756A5C;
  --gold:#A8874C;
  --gold-bright:#C5A46D;
  --rule:rgba(168,135,76,.30);
  --rule-soft:rgba(50,47,43,.12);
  --good:#5C6B4A;
  --warn:#A8874C;
  --crit:#7A4A32;
  --good-bg:rgba(92,107,74,.12);
  --warn-bg:rgba(168,135,76,.12);
  --crit-bg:rgba(122,74,50,.12);

  --serif-latin:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --display-num:"Playfair Display",Georgia,"Times New Roman",serif;
  /* 中文一律用苹方黑体（macOS/iOS 原生），不再使用宋体 */
  --serif-cjk:"PingFang SC","苹方-简","Hiragino Sans GB","Microsoft YaHei",
    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --script:"Italianno",cursive;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --measure:1180px;
  --gutter:clamp(20px,5vw,40px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1A1815; --surface:#242019; --band:#2B261E;
    --panel:#16140F; --panel-ink:#EFE9DF;
    --ink:#EFE9DF; --ink-soft:#B6ADA0; --ink-faint:#8A8073;
    --gold:#C5A46D; --gold-bright:#D8C3A5;
    --rule:rgba(197,164,109,.32); --rule-soft:rgba(239,233,223,.13);
    --good:#A3B48C; --warn:#D8C3A5; --crit:#C79478;
    --good-bg:rgba(163,180,140,.14); --warn-bg:rgba(216,195,165,.14); --crit-bg:rgba(199,148,120,.14);
  }
}
:root[data-theme="dark"]{
  --ground:#1A1815; --surface:#242019; --band:#2B261E;
  --panel:#16140F; --panel-ink:#EFE9DF;
  --ink:#EFE9DF; --ink-soft:#B6ADA0; --ink-faint:#8A8073;
  --gold:#C5A46D; --gold-bright:#D8C3A5;
  --rule:rgba(197,164,109,.32); --rule-soft:rgba(239,233,223,.13);
  --good:#A3B48C; --warn:#D8C3A5; --crit:#C79478;
  --good-bg:rgba(163,180,140,.14); --warn-bg:rgba(216,195,165,.14); --crit-bg:rgba(199,148,120,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* 吸顶导航高 74px，锚点目标要留出余量，否则标题会被导航盖住 */
[id]{scroll-margin-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif-cjk);font-weight:600;text-wrap:balance;line-height:1.25;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}
.band{padding-block:clamp(48px,6vw,84px)}
.band--sand{background:var(--band)}
.band--rule{border-top:1px solid var(--rule)}
.stack{display:grid;gap:18px}
.stack--tight{display:grid;gap:10px}

.eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.eyebrow--cjk{letter-spacing:.16em;font-weight:500}
.lede{color:var(--ink-soft);font-size:16.5px;max-width:64ch}
.fill{border-bottom:1px dashed var(--gold);color:var(--gold);padding-bottom:1px}
.num,td.n,th.n,.tile__v,.headline__v,.step__n,.brand__mark{font-variant-numeric:lining-nums tabular-nums}
.num{font-variant-numeric:lining-nums tabular-nums}


/* ---------- 进入视野时上浮 ----------
   默认全部可见；只有脚本就绪后才给 html 加 .js-reveal 启用动画。
   这样脚本失效、或用户开了「减少动态效果」时，内容照常完整显示。 */
@media (prefers-reduced-motion:no-preference){
  html.js-reveal [data-reveal]{opacity:0;transform:translateY(16px)}
  html.js-reveal [data-reveal].is-in{
    opacity:1;transform:none;
    transition:opacity .66s cubic-bezier(.22,.72,.3,1),
               transform .66s cubic-bezier(.22,.72,.3,1);
    transition-delay:var(--reveal-delay,0ms);
  }
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.nav__in{display:flex;align-items:center;gap:26px;height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
/* Logo：金色 T&R 字母组合 + 一层同色投影，无填充无边框。盒子本身不可见，只是占位。
   投影往右下偏 3px：金色在 35% 这个浓度下本来就淡，偏移小于 3px 时会和字身
   粘在一起，方向读不出来。颜色跟 --gold 走，深色模式下变浅、读作暖光晕。
   注意它会跟着下面的 scaleY 一起纵向拉伸，视觉上略大于写的数值。 */
.brand__mark{
  flex:none;border:none;padding:0;
  display:inline-block;white-space:nowrap;
  font-family:var(--display-num);font-weight:800;font-size:26px;letter-spacing:.01em;
  color:var(--gold);line-height:1;
  text-shadow:3px 3px 4px color-mix(in srgb,var(--gold) 35%,transparent);
  /* 纵向拉高 15%，宽度不动。用 scaleY 而不是加大 font-size：字号会同时撑宽，
     和品牌名之间的间距、以及页脚四列的宽度预算都得跟着重算。transform 不参与
     布局，盒子仍是 26px 高，导航 74px 的行高和页脚列宽都不受影响。 */
  transform:scaleY(1.15);
}
/* 金属质感：两层背景都裁到字形上。上面那条纯色 color 留着当兜底——不支持
   background-clip:text 的浏览器仍然拿到原来的金色字，不会变成透明看不见。

   下层是静态的纵向明暗：顶部亮、中段一条暗带、底部回亮。金属看起来像金属
   靠的就是这条暗带（受光面和背光面的交界），只有横向渐变的话再亮也是平的。
   上层是移动的高光，宽 250%、可视窗口只占 40%，高光压在 50% 处，所以静止时
   窗口里只有下层的金属色，扫过中间才亮一下。
   两层都用 color-mix 从品牌色调出来，深色模式下整体跟着变淡，不会刺眼。 */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .brand__mark{
    background-image:
      linear-gradient(100deg,
        transparent 34%,
        color-mix(in srgb,var(--gold-bright) 25%,#fff) 47%,
        color-mix(in srgb,var(--gold-bright) 10%,#fff) 50%,
        color-mix(in srgb,var(--gold-bright) 25%,#fff) 53%,
        transparent 66%),
      linear-gradient(176deg,
        color-mix(in srgb,var(--gold-bright) 55%,#fff) 0%,
        var(--gold-bright) 20%,
        var(--gold) 40%,
        color-mix(in srgb,var(--gold) 70%,#000) 55%,
        var(--gold) 70%,
        var(--gold-bright) 92%,
        color-mix(in srgb,var(--gold-bright) 70%,#fff) 100%);
    background-size:250% 100%, 100% 100%;
    background-position:0 0, 0 0;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    /* 字身透明之后 text-shadow 会从字里透出来，换成 drop-shadow 打在
       裁切后的字形上。drop-shadow 的模糊半径约等于 text-shadow 的一半。 */
    text-shadow:none;
    filter:drop-shadow(3px 3px 2px color-mix(in srgb,var(--gold) 35%,transparent));
  }
  /* 只让导航里那个扫光。页脚同一个类，保持静止的金属金，
     一页两处同时闪会互相抢。只动第一层（高光），第二层的金属底不动。
     停在 0 和 100% 时高光都在窗口外，所以每轮跳回起点看不出接缝。 */
  .nav .brand__mark{animation:brand-sheen 8s ease-in-out infinite}
  @keyframes brand-sheen{
    0%,68%{background-position:0 0, 0 0}
    100%  {background-position:100% 0, 0 0}
  }
}
/* & 取 T R 的一半高，并略微上提到视觉中线 */
.brand__mark i{font-size:.5em;font-style:normal;vertical-align:.32em;letter-spacing:.04em}
.foot .brand__mark{font-size:23px}
/* 「TIFFANY & RAYMOND」在导航的 20px/.06em 下自然宽 239px，页脚两栏时放不下
   会折成两行。最紧的是视口 561px——正好在下面 560px 那个两栏转单栏断点的上沿，
   两栏在这里最窄。实测 16px 起就会在 561px 折行，15px/.06em（179px）是能全宽度
   单行的上限。与页脚标记本来就比导航小一号的关系也一致。 */
.foot .brand__name{font-size:15px;letter-spacing:.06em}
/* 资质行在导航放大到 12px（211px）后，页脚放不下：≥1001px 时页脚是
   1.3fr+3×1fr 四列，品牌列在 1001px 处最窄，实测上限约 176px。挪断点没用，
   640px 阈值只会把失败点从 561px 推到 1001px。页脚保持 10.5px，字距 .2→.16em
   得 175px。 */
.foot .brand__sub{font-size:10.5px;letter-spacing:.16em}
.brand__name{font-family:var(--serif-latin);font-size:20px;font-weight:600;letter-spacing:.06em;line-height:1.15;display:block}
.brand__sub{font-size:12px;letter-spacing:.2em;color:var(--ink-faint);line-height:1.3;display:block;text-align:center}
.nav__links{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:14px;white-space:nowrap}
/* 只作用于直接子链接：下拉面板现在也挂在 .nav__links 里面，
   不限定层级的话面板里每条链接都会跟着带上导航的下划线 */
.nav__links > a{text-decoration:none;color:var(--ink-soft);padding-block:4px;border-bottom:1.5px solid transparent}
.nav__links > a:hover,.nav__links > a:focus-visible{color:var(--ink);border-bottom-color:var(--gold)}
.nav__links > a[aria-current]{color:var(--ink);border-bottom-color:var(--gold)}

/* ---------- 桌面端分组下拉 ---------- */
.nav__trigger{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:14px;color:var(--ink-soft);
  background:none;border:0;border-bottom:1.5px solid transparent;
  padding:4px 0;margin:0;cursor:pointer;
}
.nav__trigger:hover,.nav__trigger.is-current{color:var(--ink);border-bottom-color:var(--gold)}
.nav__trigger[aria-expanded="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.nav__chev{width:13px;height:13px;flex:none;color:var(--ink-faint);transition:transform .22s ease}
.nav__trigger[aria-expanded="true"] .nav__chev{transform:rotate(180deg);color:inherit}

/* 面板在 DOM 里紧跟自己的触发器（键盘 Tab 才会从触发器走进面板里的链接），
   定位则挂到 .nav（sticky，本身就是定位元素）的下沿、横跨整个内容宽度——
   中间的 .nav__in / .nav__links 都不是定位元素，绝对定位会直接落到 .nav 上。 */
.nav__mega{
  position:absolute;left:0;right:0;top:100%;white-space:normal;
  visibility:hidden;opacity:0;transform:translateY(-7px);
  transition:opacity .2s ease,transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s;
}
.nav__mega.is-open{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .2s ease,transform .26s cubic-bezier(.4,0,.2,1),visibility 0s;
}
/* 宽度按项数收住：栏目都在导航右半边，铺满整个 1180px 只会空出一大片。
   --mega-w 由 MENUS 里的 width 覆盖。打开时 initMegaMenu 会改写 margin-left，
   让面板文字对齐自己的触发器；这里的 auto（贴内容区右缘）只是脚本没跑时的兜底。 */
.mega{
  max-width:var(--mega-w,480px);margin-left:auto;
  background:var(--surface);border:1px solid var(--rule-soft);border-top:none;
  box-shadow:0 26px 48px -24px rgba(26,24,21,.34);
  padding:18px 26px 22px;
}
.mega__k{font-size:11.5px;letter-spacing:.16em;color:var(--gold);font-weight:500;
  padding-bottom:12px;border-bottom:1px solid var(--rule-soft)}
.mega__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px 26px;margin-top:16px}
.mega__item{display:grid;gap:3px;text-decoration:none}
.mega__t{font-family:var(--serif-cjk);font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:1.5px solid transparent;justify-self:start;transition:color .18s,border-color .18s}
.mega__d{font-size:12.5px;line-height:1.5;color:var(--ink-faint);white-space:normal}
.mega__item:hover .mega__t,.mega__item:focus-visible .mega__t{color:var(--gold);border-bottom-color:var(--gold)}
.mega__item[aria-current] .mega__t{color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;font-size:14.5px;font-family:inherit;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s;
  /* 圆角挂在 .btn 上，三个变体共用：圆角是按钮这个部件的属性，不是某个变体的。
     只圆金按钮的话，清单页上「预约免费沟通」那种幽灵按钮会方角贴在圆角金按钮
     旁边，一排里两种转角。 */
  --btn-r:10px;
  border-radius:var(--btn-r);
}
/* 实心金按钮做成一小块金属，和导航 T&R、首页标语同一种材质：
   一层静止的竖向渐变给光影，一层高光横着扫过去。

   竖向渐变只往下压、不往上提。白字压在 --gold 上对比度本来只有 3.4，
   任何比 --gold 更亮的地方都更难读；现在文字带（按钮高 44px、文字占中间
   30%–70%）落在 0.78–0.95 倍 --gold 上，对比度升到 4.2 上下。
   顶边那道亮线压到 2.5%（约一个像素），落在上内边距里，碰不到字——
   再宽就成了一块玻璃高光，不是金属。底边也不留回光，让按钮压得住。 */
.btn--gold{
  background:var(--gold);color:#fff;font-weight:500;
  background-image:linear-gradient(179deg,
    color-mix(in srgb,var(--gold-bright) 62%,#fff) 0%,
    var(--gold-bright) 2.5%,
    var(--gold) 14%,
    color-mix(in srgb,var(--gold) 90%,#000) 42%,
    color-mix(in srgb,var(--gold) 78%,#000) 78%,
    color-mix(in srgb,var(--gold) 72%,#000) 100%);
  /* 这两行是必须的。background-clip 默认 border-box（画到边框外沿），
     background-origin 默认 padding-box（渐变从内边距框起算），.btn 又带着
     1px 透明边框——于是最上面那一行边框落在渐变的 0% 之外，默认的
     background-repeat:repeat 把上一张平铺的底部绕了回来，也就是渐变最暗的
     那一档 rgb(121,97,55)，看着就是一条黑线。origin 改成 border-box 让渐变
     正好铺满要画的范围，再关掉平铺，四条边都不会再绕。 */
  background-origin:border-box;
  background-repeat:no-repeat;
  /* 投影只给实心金按钮——它是主行动，投影是把它托起来；幽灵按钮是次要动作，
     描边加投影会显得虚。参数照站上已有的那套收小一档（文章题图是
     border-radius:35px 配 0 20px 45px rgba(0,0,0,.3)）。用中性黑不用金色：
     站上唯一的 box-shadow 先例就是黑色，金色投影压在象牙白上会发糊。 */
  box-shadow:0 8px 20px -4px rgba(0,0,0,.35);
  position:relative;isolation:isolate;
}
/* 扫光走 ::after，压在文字底下（z-index:-1 的子层画在父元素背景之上、
   行内文字之下），所以白字始终是实的，只有它身后的金面亮一下。
   不用 overflow:hidden 裁切：.btn 是 inline-flex，一改 overflow 基线就从
   最后一行文字换成盒子下边缘，旁边的文字会跟着错位；也不用 clip-path，
   那个连 :focus-visible 的描边一起裁掉。渐变本身开到 300% 宽，
   窗口只露三分之一，两端露出来的都是透明段，每轮跳回起点看不出来。 */
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* ::after 铺的是内边距框，比边框框每边小 1px，圆角也得跟着小 1px；
     不然扫光的方角会从按钮的圆角外面探出来。 */
  border-radius:calc(var(--btn-r) - 1px);
  background-image:linear-gradient(104deg,
    transparent 41%,
    rgba(255,255,255,.05) 45.5%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.05) 54.5%,
    transparent 59%);
  /* 周期、延迟、缓动、关键帧百分比、行程倍数，全都照首页「放在一起」
     那道扫光抄一遍（index.html 里的 hero-em-sheen）：14 秒一轮、延迟 0.5 秒、
     前 18% 扫完、250% 行程。两处的高光因此同起同落、快慢也一样。
     以后改其中一处，另一处要跟着改。 */
  background-size:250% 100%;
  background-position:0 0;
  background-repeat:no-repeat;
  animation:btn-sheen 14s ease-in-out .5s infinite;
}
@keyframes btn-sheen{
  0%          {background-position:0 0}
  18%         {background-position:100% 0}
  18.01%,100% {background-position:0 0}
}
/* hover 换成墨底：background 简写把 background-image 一起清成 none，
   金属那层自动撤掉；扫光也收掉——深墨底上再扫一道白光不是同一种材质。
   文字用 --ground 而不是写死 #fff：深色模式下 --ink 是米白 #EFE9DF，
   白字压上去只有 1.21:1，等于看不见。--ground 跟着模式翻面，
   浅色 12.8:1、深色 14.9:1。 */
.btn--gold:hover,.btn--gold:focus-visible{background:var(--ink);color:var(--ground)}
.btn--gold:hover::after,.btn--gold:focus-visible::after{opacity:0}
.btn--ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--gold);color:var(--gold)}
.btn--onpanel{border-color:rgba(197,164,109,.5);color:var(--panel-ink);background:transparent}
.btn--onpanel:hover,.btn--onpanel:focus-visible{background:var(--gold);border-color:var(--gold);color:#fff}
.nav .btn{flex:none}


/* ---------- 手机端栏目菜单 ---------- */
.nav__toggle{
  /* 用 flex 竖排居中：grid 的 align-content 默认把行堆在顶部，三条线会偏上 */
  display:none;flex:none;width:42px;height:42px;padding:0;cursor:pointer;
  background:transparent;border:1px solid var(--rule);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--gold);
  transition:transform .22s ease,opacity .18s ease}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 展开动画：整体下滑 + 各项依次淡入。
   0fr → 1fr 是让「高度 auto」可过渡的写法，所以要多一层 .nav__menu-clip
   承担 overflow:hidden——内边距若留在被裁剪的那一层，收起时会露出一条缝。
   收起状态用 visibility:hidden，顺带把菜单移出 Tab 顺序和无障碍树。 */
.nav__menu{
  border-top:1px solid var(--rule);background:var(--ground);
  display:grid;grid-template-rows:0fr;visibility:hidden;opacity:0;
  transition:grid-template-rows .26s cubic-bezier(.4,0,.2,1),
             opacity .18s ease,
             visibility 0s linear .26s;
}
/* 缓动特意不用页面浮现那条 cubic-bezier(.22,.72,.3,1)：那条前段极陡，
   放在 660ms 的滚动动画上正好，压到 0.4 秒的菜单上会把九成行程塞进
   前 100ms，看起来就是「直接弹出来」。这里换成前后均匀的曲线。 */
.nav__menu.is-open{
  grid-template-rows:1fr;visibility:visible;opacity:1;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),
             opacity .22s ease,
             visibility 0s;
}
.nav__menu-clip{min-height:0;overflow:hidden}
/* 十五个栏目一列排下来有九百多像素，手机上根本翻不到底——菜单在吸顶导航里，
   页面滚动带不动它。所以栏目排成两列（560px 以上三列），并给整块加上
   最大高度和自身滚动，万一以后栏目再变多也不会有够不着的项。
   小标题和底部按钮用 grid-column:1/-1 通栏，靠自动排布分组，HTML 仍是一条平铺的列表。 */
.nav__menu .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(14px,4vw,26px);padding-block:4px 14px}
@media (min-width:560px){
  .nav__menu .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.nav__menu.is-open .nav__menu-clip{overflow-y:auto;max-height:calc(100dvh - 74px);
  overscroll-behavior:contain}
.nav__menu a,.nav__menu-h{
  display:block;padding:11px 2px;font-size:15.5px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule-soft);
  opacity:0;transform:translateY(-12px);
  transition:opacity .14s ease,transform .14s ease;
}
/* 分组小标题：不是链接，只是把下面几条归在一起，单独占一整行 */
.nav__menu-h{
  grid-column:1/-1;
  font-size:11.5px;letter-spacing:.16em;color:var(--gold);font-weight:600;
  padding:14px 2px 6px;border-bottom:none;
}
.nav__menu .wrap > .nav__menu-h:first-child{padding-top:8px}
.nav__menu.is-open a,.nav__menu.is-open .nav__menu-h{
  opacity:1;transform:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.32,.14,.24,1);
  /* --i 由 renderChrome 逐项写在行内，让菜单项依次落位 */
  transition-delay:calc(var(--i,0) * 34ms + 30ms);
}
.nav__menu a[aria-current]{color:var(--gold);font-weight:600}
/* 手机菜单里的「预约咨询」不走 .btn，圆角和投影单独给一份，
   免得同一句话在手机上是方角、在桌面上是圆角 */
.nav__menu-cta{
  grid-column:1/-1;
  margin-top:12px;text-align:center;background:var(--gold);color:#fff!important;
  font-weight:500;padding:14px 18px!important;border-bottom:none!important;
  border-radius:10px;box-shadow:0 8px 20px -4px rgba(0,0,0,.35);
}

/* 收成两组下拉 + 关于我们之后，导航在 960px 以上都放得下（品牌 302 +
   三项 310 + 搜索 36 + 按钮 102 + 间距，约 880），以下改用汉堡菜单 */
@media (min-width:961px){
  .nav__toggle,.nav__menu{display:none!important}
}
@media (max-width:960px){
  .nav__links,.nav__mega{display:none}
  .nav__toggle{display:flex}
  .nav__in{gap:12px}
  /* .nav__links 在窄屏隐藏后，原本靠它的 margin-left:auto 失效了，
     需要把右侧这两个元素重新推到右边 */
  /* 与汉堡按钮等高，两个并排的控件高度必须一致 */
  .nav__cta{margin-left:auto;height:42px;padding:0 16px;font-size:14px}
}
@media (max-width:430px){
  /* 极窄屏优先保住「预约咨询」这个转化入口：收掉品牌文字，只留 R 标记 */
  .brand > span:last-child{display:none}
  .nav__in{gap:10px}
  .nav__cta{padding:0 14px}
}

/* ---------- section heads ---------- */
.sec__head{display:flex;align-items:baseline;gap:20px;margin-bottom:30px}
.sec__title{font-size:clamp(23px,3vw,31px)}
.sec__rule{flex:1;height:1px;background:var(--rule)}
.sec__more{font-size:14px;color:var(--gold);text-decoration:none;white-space:nowrap}
.sec__more:hover{text-decoration:underline}

/* ---------- page header (interior pages) ---------- */
.phead{background:var(--surface);border-bottom:1px solid var(--rule);padding-block:clamp(30px,4vw,52px)}
.crumb{font-size:13px;color:var(--ink-faint);margin-bottom:14px}
.crumb a{color:var(--gold);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.phead h1{font-size:clamp(27px,4vw,40px);margin-bottom:14px}

/* ---------- 主题页页头：左文右图 ---------- */
.thead{background:var(--surface);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);align-items:stretch}
.thead__body{padding:clamp(30px,4vw,56px) 0 clamp(30px,4vw,56px) 0;
  display:flex;flex-direction:column;justify-content:center}
.thead__wrap{max-width:calc(var(--measure) * 0.60);margin-left:auto;
  padding-inline:var(--gutter) clamp(24px,3vw,48px);width:100%}
.thead__img{position:relative;min-height:340px;overflow:hidden;background:var(--band)}
.thead__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thead__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(250,247,242,.55) 0%,rgba(250,247,242,0) 32%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .thead__img::after{
    background:linear-gradient(90deg,rgba(26,24,21,.6) 0%,rgba(26,24,21,0) 32%)}
}
:root[data-theme="dark"] .thead__img::after{
  background:linear-gradient(90deg,rgba(26,24,21,.6) 0%,rgba(26,24,21,0) 32%)}
@media(max-width:1000px){
  .thead{grid-template-columns:1fr}
  .thead__img{min-height:220px;order:-1}
  .thead__img::after{background:none}
  .thead__wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
}

/* ---------- prose ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(20px,2.5vw,25px);margin-top:34px;margin-bottom:12px;padding-top:18px;border-top:1px solid var(--rule)}
.prose h3{font-size:18.5px;margin-top:24px;margin-bottom:8px}
.prose p{margin-bottom:14px;color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{margin-bottom:16px;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:19px;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:5px;top:11px;width:5px;height:5px;background:var(--gold)}
.prose a{color:var(--gold)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule-soft);background:var(--surface);
  overscroll-behavior-x:contain;scrollbar-width:thin}
table{border-collapse:collapse;width:100%;min-width:min(520px,100%);font-size:clamp(13px,1.05vw,14.5px)}
caption{text-align:left;font-size:13px;color:var(--ink-faint);padding:12px 16px;border-bottom:1px solid var(--rule-soft)}
th,td{padding:11px clamp(9px,1.1vw,16px);text-align:left;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;background:var(--band);
}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;white-space:nowrap}
td.n{font-weight:500;font-size:clamp(13px,1.05vw,15px)}
thead th{white-space:nowrap}
tbody tr:hover{background:var(--band)}

/* ---------- calculator ---------- */
/* 计算器页整体放宽：结果区的逐年表动辄八九列，1180 的版心下右栏只剩 600 多 px，
   表格只能横着滚。导航和页脚一起放宽，左右边缘才和计算器对齐。 */
body:has(.wrap.calc){--measure:1600px}
.calc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(24px,3.5vw,44px);align-items:start}
/* 「收起输入栏」（calc.js 插入，结果区顶上、底下两排按钮里各一个）：电脑版把左栏收起，
   结果占满整行，宽表格整张放得下。手机版本来就是上下排，不显示。只管屏幕，打印另有规则。 */
.calcbar__btn svg{flex:none;width:16px;height:16px}
/* 有表格放不下时（calc.js 量出来的）按钮转成金色提示 */
.calcbar__btn--hint{color:var(--gold);border-color:var(--gold);background:var(--warn-bg)}
/* 结果区的表：表头允许折行，列宽交给数字去定（「一生的税（含期末欠税）」这种长表头
   不再把一整列撑宽）；首列是方案名、项目名，给个最小宽度，免得被数字列挤成一字一行。
   手机上表格反正要横着滚，表头折行只会更难看，所以只在电脑版放开。 */
@media (min-width:1001px){
  .calc .out thead th,.calc .out thead th.n{white-space:normal;text-wrap:balance;vertical-align:bottom}
}
.calc .out tbody td:first-child:not(.n){min-width:7em}
@media (max-width:1000px){.btn.calcbar__btn{display:none}}
@media screen and (min-width:1001px){
  .calc.calc--wide{grid-template-columns:minmax(0,1fr)}
  .calc.calc--wide > :not(.out){display:none}
}
/* 结果区每个带标题的小节可以收起（calc.js 给 .sec__head 加箭头）。只在屏幕上收，
   打印照样全印。标题上有的写了内联 margin-bottom，收起时要压掉。 */
.sec__head--tog .sec__title{cursor:pointer}
.sec__tog{
  flex:none;align-self:center;display:inline-grid;place-items:center;
  width:30px;height:30px;padding:0;color:var(--ink-faint);background:transparent;
  border:1px solid var(--rule-soft);border-radius:8px;cursor:pointer;
  transition:color .18s,border-color .18s;
}
.sec__tog:hover,.sec__tog:focus-visible{color:var(--gold);border-color:var(--gold)}
.sec__tog svg{transition:transform .18s}
.sec__tog[aria-expanded="false"] svg{transform:rotate(-90deg)}
@media screen{
  .sec--closed > :not(.sec__head){display:none!important}
  .sec--closed > .sec__head{margin-bottom:0!important}
}
.panel{background:var(--surface);border:1px solid var(--rule);padding:clamp(20px,2.6vw,28px)}
.panel__h{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;font-family:var(--sans);margin-bottom:18px}
/* 表单里按选择收起的格子用的是 hidden 属性，而 hidden 在浏览器默认样式里是
   display:none——优先级低于下面 .field 的 display:grid，结果收起的格子照样显示。
   这里补一条作者级的兜底，否则每个用 hidden 收起 .field 的计算器都会漏出来。 */
[hidden]{display:none!important}

.field{display:grid;gap:6px;margin-bottom:16px}
.field__l{font-size:14px;color:var(--ink);font-weight:500}
.field__hint{font-size:12.5px;color:var(--ink-faint);line-height:1.6}
.field input[type=number],.field input[type=text],.field select{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule-soft);
  border-radius:0;font-variant-numeric:tabular-nums;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field input[type=range]{width:100%;accent-color:var(--gold)}
.field__row{display:flex;gap:10px;align-items:center}
.field__row input[type=range]{flex:1}
.field__row output{
  min-width:74px;text-align:right;font-variant-numeric:tabular-nums;
  font-size:15px;color:var(--gold);font-weight:600;
}
/* 选项按文字宽度占位、放不下就折到下一行（折行后每行铺满）；原来一律等分，
   表单列只有 420px，四个长选项各分不到 100px，「每年填满档位」被拆成「档 / 位」。
   分隔线画在每格的左边和上边、整体左移上移 1px，贴着外框的那条被 overflow 裁掉，
   这样不管折成几行，格子之间都只有一条线。
   span 撑满整格、文字居中：同一行有的折行有的不折时，选中的金色块也一样高。 */
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--rule-soft);overflow:hidden}
.seg label{flex:1 1 auto;display:flex;margin:-1px 0 0 -1px;border-left:1px solid var(--rule-soft);border-top:1px solid var(--rule-soft)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{
  flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;text-wrap:balance;padding:10px 6px;font-size:14px;
  color:var(--ink-soft);cursor:pointer;
}
/* 选项多、字又长的（如 Roth 转换的四种方案）排成两列，免得三个一行、最后一个落单 */
.seg--2 label{flex-basis:50%}
.seg input:checked+span{background:var(--gold);color:#fff;font-weight:500}
.seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:-2px}

/* 显式 minmax(0,1fr)：隐式轨道按 auto 算，最小值取 min-content，
   结果区里一个放不下的子元素就能把整列撑出屏幕。 */
.out{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.headline{background:var(--panel);color:var(--panel-ink);padding:clamp(22px,3vw,30px)}
.headline__l{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,169,97,.9);font-weight:600;margin-bottom:10px}
.headline__v{font-family:var(--display-num);font-weight:700;font-size:clamp(42px,6.4vw,66px);
  color:#fff;line-height:1.06;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden}
.headline__d{font-size:14.5px;color:rgba(234,227,214,.75);margin-top:12px;line-height:1.65}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
/* 按格子数排列，不留空格：4 / 8 格 → 4 列或 2 列；6 格 → 3 列或 2 列；太窄时 1 列 */
.tiles:has(> .tile:nth-child(4n):last-child){grid-template-columns:repeat(auto-fill,minmax(
  max(clamp(calc(25% - 1px),(688px - 100%)*999,calc(50% - 1px)),clamp(0px,(344px - 100%)*999,100%)),1fr))}
.tiles:has(> .tile:nth-child(6):last-child){grid-template-columns:repeat(auto-fill,minmax(
  max(clamp(calc(33.34% - 1px),(516px - 100%)*999,calc(50% - 1px)),clamp(0px,(344px - 100%)*999,100%)),1fr))}
.tile{background:var(--surface);padding:16px 18px}
.tile__l{font-size:12px;color:var(--ink-faint);letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.tile__v{font-family:var(--display-num);font-weight:700;font-size:29px;margin-top:5px;line-height:1.18;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden}
.tile__d{font-size:12.5px;color:var(--ink-faint);margin-top:4px;line-height:1.5}
.tile--good .tile__v{color:var(--good)}
.tile--warn .tile__v{color:var(--warn)}
.tile--crit .tile__v{color:var(--crit)}
.tile--gold .tile__v{color:var(--gold)}

.note{font-size:13.5px;color:var(--ink-soft);line-height:1.7;padding:14px 16px;border-left:2px solid var(--gold);background:var(--band)}
.note strong{color:var(--ink)}
.flag{display:inline-block;font-size:12px;padding:2px 9px;letter-spacing:.04em;font-weight:600}
.flag--good{color:var(--good);background:var(--good-bg)}
.flag--warn{color:var(--warn);background:var(--warn-bg)}
.flag--crit{color:var(--crit);background:var(--crit-bg)}

/* stacked bar for bracket fill */
.bars{display:grid;gap:9px}
.bar__top{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.bar__track{height:10px;background:var(--rule-soft);overflow:hidden;display:flex}
.bar__seg{height:100%}

.disclaim{font-size:12.5px;color:var(--ink-faint);line-height:1.7}

/* ---------- cards / grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
/* 首页「服务与内容领域」：七个栏目加一张入口卡正好两行四格。三列放七张会剩两个空格，
   露出底色像两块色斑。窄一点的屏幕两列（八张正好四行），手机一列。 */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
@media (max-width:1100px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}
.cardlink{background:var(--ground);padding:24px 22px;text-decoration:none;display:block;transition:background .18s}
.cardlink:hover,.cardlink:focus-visible{background:var(--surface)}
.cardlink__i{color:var(--gold);width:22px;height:22px;display:block}
.cardlink__t{font-family:var(--serif-cjk);font-size:18.5px;font-weight:600;margin-top:12px}
.cardlink__d{font-size:14px;color:var(--ink-soft);margin-top:7px}
.cardlink__k{font-size:12.5px;color:var(--ink-faint);margin-top:11px}


/* ---------- 文章页 ---------- */
.art__head{background:var(--surface);border-bottom:1px solid var(--rule);padding-block:clamp(28px,4vw,48px) clamp(22px,3vw,34px)}
.art__title{font-size:clamp(26px,3.6vw,38px);line-height:1.3;margin-top:12px;text-wrap:balance}
.art__lede{color:var(--ink-soft);font-size:17px;margin-top:16px;max-width:64ch;line-height:1.75}
.art__by{font-size:13px;color:var(--ink-faint);margin-top:16px}
.art__author{color:var(--gold);font-weight:600;letter-spacing:.04em}
/* 名字后面的资质：同色、常规字重，和名字连成一体；整串不在中间折行 */
.art__cred{color:var(--gold);letter-spacing:.02em;white-space:nowrap}
/* 圆角与阴影加在 figure 上而不是 img 上：元素自身的 box-shadow 不受自己的
   overflow:hidden 裁剪，加在 img 上则会被 figure 裁掉。 */
.art__hero{margin-inline:auto;max-width:min(68ch, 100% - var(--gutter)*2);
  aspect-ratio:16/9;overflow:hidden;background:var(--band);
  border-radius:35px;box-shadow:0 20px 45px rgba(0,0,0,.3)}
/* 桌面端题图不通栏：缩到与正文同宽、居中、两侧留白，并按原图比例完整显示不裁切。
   宽度用 68ch——与 .art__body 去掉左右 gutter 后的内容宽度相同，两者边缘才对齐。
   这里不能用内边距来对齐，否则圆角和阴影会落在内边距的外沿而不是图片上。
   手机端仍是通栏 16/9——窄屏上留白没有意义。 */
@media (min-width:861px){
  .art__hero{aspect-ratio:auto}
  .art__hero img{height:auto}
}
.art__hero img{width:100%;height:100%;object-fit:cover;display:block}
.art__body{padding-block:clamp(30px,4vw,48px) clamp(24px,3vw,36px);max-width:calc(68ch + var(--gutter)*2)}
.art__body h2{font-size:clamp(20px,2.4vw,24px);margin-top:36px;padding-top:20px}
.art__body h3{font-size:18px;margin-top:26px}
.art__body p{font-size:16.5px;line-height:1.85}
.art__body ul li,.art__body ol li{font-size:16px;line-height:1.8}
.art__body ol{padding-left:1.4em;margin-bottom:16px;display:grid;gap:8px;color:var(--ink-soft);list-style:decimal}
.art__body ol li{padding-left:4px}
.art__body .tablewrap{margin:18px 0 22px}
/* 文内图表：SVG 数据图，跟文章案例的数字一一对应 */
.art__fig{margin:26px 0 30px;padding:0}
.art__fig img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--rule-soft)}
.art__fig figcaption{font-size:13px;color:var(--ink-faint);line-height:1.65;margin-top:9px}
.art__body table{min-width:0;font-size:14px}
.art__body blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:2px solid var(--gold);color:var(--ink-soft);font-size:16px}
.art__body hr{border:0;border-top:1px solid var(--rule);margin:30px 0}
.art__body code{font-family:var(--mono);font-size:.92em;background:var(--band);padding:1px 6px}

/* 文内提示框：复合案例 / 关键数字 / 可动手 / 注意 */
.callout{margin:26px 0;padding:20px 22px 8px;border:1px solid var(--rule);background:var(--band);position:relative}
.callout__h{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px!important}
.callout p{font-size:15.5px;margin-bottom:12px}
.callout--case{background:var(--surface);border-left:3px solid var(--gold)}
.callout--key{background:var(--band)}
.callout--tip{background:var(--good-bg);border-color:transparent}
.callout--tip .callout__h{color:var(--good)}
.callout--warn{background:var(--crit-bg);border-color:transparent}
.callout--warn .callout__h{color:var(--crit)}
.callout .tablewrap{background:var(--surface)}

.art__tools{margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--rule)}
.art__toollist{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* 「相关工具」下面接「对应的自查清单」（scripts/add-checklist-links.mjs 生成），两行之间留点空 */
.art__toollist + .eyebrow{margin-top:22px}
.art__tool{text-decoration:none;font-size:14px;padding:9px 14px;border:1px solid var(--rule);color:var(--ink)}
.art__tool:hover{border-color:var(--gold);color:var(--gold)}
.art__disclaim{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule-soft)}
.art__related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.art__jumps{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.art__jump{font-size:13px;text-decoration:none;color:var(--ink-soft);padding:6px 12px;border:1px solid var(--rule)}
.art__jump:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- 文章浮动目录 ----------
   宽屏贴在正文右侧随页面浮动，窄屏收进右下角的圆按钮里。整块由 calc.js 的
   initArticleToc() 从正文的 h2 现生成，HTML 里没有对应的标记。

   两个断点写成 1199.98 / 1200，而不是站内别处那种 1000 / 1001：整数写法在
   缩放或分数视口宽度（1199.5px）下两条规则都不匹配，目录会整个消失。
   目录只是辅助，宁可两边各让半像素也不能出现"某个缩放级别下没有目录"。 */
.toc{
  position:fixed;z-index:40;box-sizing:border-box;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
}
.toc__h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  font-family:var(--sans);font-weight:600;padding:13px 16px 11px;
  border-bottom:1px solid var(--rule-soft)}
/* 滚动条放在列表上而不是整块上：标题行要一直留在顶上。
   左侧那条细线画在滚动容器上，条目滚动时它保持满高，成为一条连续的轨。 */
.toc__list{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;margin:10px 0 12px 16px;padding-right:14px;
  border-left:1px solid var(--rule-soft);display:block}
.toc__list li{padding:0}
.toc__link{display:block;text-decoration:none;font-size:13px;line-height:1.5;
  color:var(--ink-faint);padding:6px 0 6px 13px;margin-left:-1px;
  border-left:2px solid transparent;transition:color .16s,border-color .16s}
.toc__link:hover{color:var(--gold)}
.toc__link.is-active{color:var(--gold);border-left-color:var(--gold);font-weight:600}

/* 窄屏的入口。做成药丸而不是纯图标圆钮：里面那个「3/8」是手机上最有用的一条
   信息——不点开就知道读到哪了。没进到任何一节时这段是空的，:empty 把它收掉，
   药丸缩回成一个圆钮。高 44px 是触控目标的下限，再小拇指点不准。 */
.toc__fab{
  position:fixed;z-index:41;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  min-width:44px;height:44px;border-radius:999px;padding:0 13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--surface);border:1px solid var(--rule);color:var(--gold);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:opacity .22s ease,visibility .22s ease;
}
.toc__fab svg{width:21px;height:21px;flex:none}
.toc__pos{font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;color:var(--ink-soft)}
.toc__pos:empty{display:none}
/* 读者已经翻过正文、到了相关文章和页脚时收起 */
.toc__fab.is-off{opacity:0;visibility:hidden;pointer-events:none}
/* 往下读的时候整个淡出（JS 加的 is-idle），正文一个像素都不挡。
   这里只熄灭不 visibility:hidden——元素留在无障碍树和 Tab 顺序里，
   键盘走到它时下面那条把它点回来；对读屏和键盘用户来说它一直在。 */
.toc__fab.is-idle{opacity:0;pointer-events:none}
.toc__fab.is-idle:focus-visible{opacity:1;pointer-events:auto}

/* 窄屏：面板贴着按钮从右下角弹出，默认收起 */
@media (max-width:1199.98px){
  .toc{
    right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));
    width:min(304px,calc(100vw - 32px));max-height:min(56vh,420px);
    box-shadow:0 18px 40px rgba(0,0,0,.24);
  }
  .toc:not(.is-open){opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none}
}

/* 面板展开时压在正文上的一层：点哪儿都是收起，也把「现在是一层浮层」说清楚。
   z-index 压在吸顶导航（50）之下，导航不被盖住也不被调暗——站内跳转随时可用。 */
.toc__scrim{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.30);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.toc__scrim.is-open{opacity:1;visibility:visible}
@media (min-width:1200px){.toc__scrim{display:none}}

/* 宽屏：常驻正文右侧。
   left 里的 68ch + gutter*2 和 .art__body 的 max-width 是同一个式子——正文列
   居中，所以它的右沿就是 50% 加上半个列宽。这要求 .toc 自身的字号字体与
   .art__body 一致（两者都继承 body 的 16px / --sans），ch 才算得出同一个值；
   字号只写在 .toc__h / .toc__link 上，不要挪到 .toc 上。 */
@media (min-width:1200px){
  .toc{
    --col:calc(68ch + var(--gutter)*2);
    top:106px;left:calc(50% + var(--col)/2 + 30px);
    width:min(248px,calc(50vw - var(--col)/2 - 52px));
    max-height:calc(100vh - 150px);
    box-shadow:none;
  }
  /* 与上面那条 .toc:not(.is-open) 同级，靠后生效：宽屏下不受窄屏开合状态影响 */
  .toc:not(.is-open){opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .toc.is-off{opacity:0;visibility:hidden;pointer-events:none}
  .toc__fab{display:none}
}

/* 带图的文章卡片（首页 / 目录 / 栏目页） */
.posts--grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.post--img{border-top:none;padding-top:0}
.post--img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:14px;background:var(--band)}
.post__meta{font-size:12px;letter-spacing:.08em;color:var(--ink-faint);display:flex;gap:10px}
.post__meta span{color:var(--gold)}
.post__t{font-family:var(--serif-cjk);font-weight:600;font-size:18.5px;margin-top:10px;line-height:1.45}
.post:hover .post__t{color:var(--gold)}
.post__d{font-size:14px;color:var(--ink-soft);margin-top:9px;line-height:1.7}
.post{text-decoration:none;display:block}

@media (max-width:1000px){
  .posts--grid,.art__related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .posts--grid,.art__related{grid-template-columns:1fr}
}

/* ---------- 问答 ----------
   .qa 是主题页文章下面那三问（数据在 topics.js 的 faq）；宽屏三栏并排，窄屏一栏。
   .faq 是常见问题页（faq.html），由 scripts/build-structured-data.mjs 从文章的
   「常见问题」生成，按文章分组、每条可以展开收起。 */
.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px clamp(24px,3vw,40px)}
.qa__item{padding-top:18px;border-top:1px solid var(--rule)}
.qa__q{font-size:18px;line-height:1.5;margin-bottom:10px}
.qa__a{font-size:15px;line-height:1.85;color:var(--ink-soft)}
.qa__a strong{color:var(--ink);font-weight:600}
@media (max-width:1000px){
  .qa{grid-template-columns:minmax(0,1fr);max-width:72ch}
}
.faq{max-width:76ch}
.faq__group + .faq__group{margin-top:34px}
.faq__src{font-size:15px;font-weight:500;line-height:1.5;margin-bottom:8px}
.faq__src a{color:var(--ink-faint);text-decoration:none}
.faq__src a:hover{color:var(--gold)}
.faq__item{border-top:1px solid var(--rule-soft)}
.faq__item:last-child{border-bottom:1px solid var(--rule-soft)}
.faq__item > summary{
  list-style:none;cursor:pointer;position:relative;padding:14px 34px 14px 0;
  font-family:var(--serif-cjk);font-size:16.5px;font-weight:600;line-height:1.55;color:var(--ink);
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > summary::after{
  content:"";position:absolute;right:8px;top:22px;width:8px;height:8px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq__item[open] > summary::after{transform:translateY(4px) rotate(225deg)}
.faq__item > summary:hover{color:var(--gold)}
.faq__item > p{padding:0 0 18px;font-size:15px;line-height:1.85;color:var(--ink-soft)}
.faq__item > p strong{color:var(--ink);font-weight:600}
.faq__item > p a{color:var(--gold)}

/* ---------- 站内搜索 ---------- */
/* 导航栏里的放大镜。窄屏隐藏——那时导航已经收进汉堡菜单，搜索也在里面。 */
.nav__search{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;
  color:var(--ink-soft);text-decoration:none;border:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav__search:hover,.nav__search:focus-visible{color:var(--gold);border-color:var(--rule)}
.nav__search svg{width:17px;height:17px}
.nav__search[aria-current]{color:var(--gold);border-color:var(--rule)}

.srch{max-width:760px}
.srch__form{display:flex;gap:0;border:1px solid var(--rule);background:var(--surface)}
.srch__form:focus-within{border-color:var(--gold)}
.srch__in{
  flex:1;min-width:0;padding:15px 18px;font:inherit;font-size:17px;font-family:var(--serif-cjk);
  background:transparent;color:var(--ink);border:0;border-radius:0;
}
.srch__in:focus{outline:none}
.srch__in::placeholder{color:var(--ink-faint)}
.srch__clear{
  flex:none;width:46px;border:0;background:transparent;color:var(--ink-faint);
  font:inherit;font-size:20px;line-height:1;cursor:pointer;
}
.srch__clear:hover{color:var(--gold)}
.srch__chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.srch__chip{
  font:inherit;font-size:13.5px;padding:6px 13px;cursor:pointer;
  background:transparent;color:var(--ink-soft);border:1px solid var(--rule);border-radius:0;
}
.srch__chip:hover,.srch__chip:focus-visible{border-color:var(--gold);color:var(--gold)}
.srch__count{font-size:13.5px;color:var(--ink-faint);margin-bottom:4px}
.srch__note{
  font-size:13.5px;color:var(--ink-soft);background:var(--warn-bg);
  border-left:2px solid var(--gold);padding:11px 14px;margin-bottom:22px;
}

.srch__list{display:grid;gap:1px;background:var(--rule);border-block:1px solid var(--rule)}
.srch__hit{background:var(--ground);padding:20px 22px;text-decoration:none;display:block;transition:background .18s}
.srch__hit:hover,.srch__hit:focus-visible{background:var(--surface)}
.srch__kind{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  font-weight:600;display:flex;gap:10px;align-items:baseline;
}
.srch__kind em{font-style:normal;color:var(--ink-faint);letter-spacing:.06em;text-transform:none;font-weight:400}
.srch__t{font-family:var(--serif-cjk);font-size:18.5px;font-weight:600;margin-top:8px;line-height:1.45}
.srch__hit:hover .srch__t{color:var(--gold)}
.srch__d{font-size:14px;color:var(--ink-soft);margin-top:7px;line-height:1.7}
.srch__hit mark{background:var(--warn-bg);color:inherit;font-weight:600;padding:0 1px}

.srch__empty{padding:34px 0 8px}
.srch__empty h2{font-size:21px}
.srch__empty p{color:var(--ink-soft);margin-top:10px;max-width:52ch}

/* ---------- 计算器页的「找计算器」（assets/tool-finder.js） ----------
   搜索框和小按钮沿用上面站内搜索的 .srch__form / .srch__chip；
   分区标题右边的收起按钮沿用计算器结果区的 .sec__tog / .sec--closed。 */
.tf{padding-block:clamp(26px,3.5vw,40px)}
.tf__lead{font-size:14px;color:var(--ink-faint);margin:22px 0 4px}
.tf__group{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:6px 14px;align-items:baseline;
  padding:10px 0;border-top:1px solid var(--rule-soft)}
.tf__group:first-child{border-top:0}
.tf__gl{font-size:12.5px;letter-spacing:.12em;color:var(--gold);font-weight:600;text-transform:uppercase}
/* 英文分组名按句首大写（见 en-glossary），标签栏也要宽一些，否则「Home and property」会折行 */
:root[lang="en"] .tf__group{grid-template-columns:10.5em minmax(0,1fr)}
:root[lang="en"] .tf__gl{letter-spacing:.04em;text-transform:none;font-size:13.5px}
.tf__chips{display:flex;flex-wrap:wrap;gap:8px}
.tf__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.tf__foot{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:flex-end;margin-top:14px}
.tf__btn{font:inherit;font-size:13.5px;color:var(--gold);background:none;border:0;padding:4px 0;cursor:pointer;
  border-bottom:1px solid transparent}
.tf__btn:hover,.tf__btn:focus-visible{border-bottom-color:var(--gold)}
.tf__more{display:none;margin-right:auto}
@media (max-width:760px){
  .tf__group,:root[lang="en"] .tf__group{grid-template-columns:minmax(0,1fr)}
  .tf__groups--folded .tf__group:nth-child(n+5){display:none}
  .tf__more{display:inline-block}
}
.tf__note{color:var(--ink-soft);font-size:15px;max-width:72ch;margin:-14px 0 26px}
.tf__note a{color:var(--gold)}
.tf__back{white-space:nowrap}
.tf__rel{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:-10px 0 26px}
.tf__rel span{font-size:13.5px;color:var(--ink-faint);margin-right:4px}
.tf__grid .cardlink{position:relative}
.tf__grid .cardlink[data-step]::after{
  content:attr(data-step);position:absolute;top:18px;right:20px;
  font-family:var(--display-num);font-size:22px;line-height:1;color:var(--gold);
}
/* 分区标题右边的数量；收起后整段变矮，八个分区收起来一屏就能看全 */
.tf__n{flex:none;font-size:13px;color:var(--ink-faint);cursor:pointer;white-space:nowrap}
.tf__cat--closed{padding-block:clamp(20px,2.4vw,28px)}
@media print{.tf,.tf__n,.sec__tog{display:none!important}}

/* 与导航同一个断点：收进汉堡菜单之后，搜索也在菜单里 */
@media (max-width:960px){
  .nav__search{display:none}
}

/* ---------- 中 / EN 切换 ----------
   每一页的右上角，链到同一页的另一种语言（英文版是 /en/ 下的镜像）。
   窄屏上它和「预约咨询」、汉堡按钮并排，所以不收进菜单：切语言是
   看不懂当前语言的人要找的第一个东西，不能藏在一个他读不懂的菜单里。 */
.nav__lang{
  display:flex;align-items:center;justify-content:center;flex:none;
  height:36px;min-width:40px;padding:0 10px;
  font-size:12.5px;font-weight:600;letter-spacing:.08em;line-height:1;
  color:var(--ink-soft);text-decoration:none;border:1px solid var(--rule);
  transition:color .18s,border-color .18s;
}
.nav__lang:hover,.nav__lang:focus-visible{color:var(--gold);border-color:var(--gold)}
@media (max-width:960px){
  /* 原来靠「预约咨询」的 margin-left:auto 把右侧控件推过去，现在排头的是切换按钮 */
  .nav__lang{height:42px;margin-left:auto}
  .nav__lang + .nav__cta{margin-left:0}
}
@media (max-width:430px){
  .nav__lang{min-width:38px;padding:0 8px}
}

/* ---------- 英文版 ----------
   中文字体栈里排在前面的苹方、雅黑也带拉丁字形，但 Windows 上会先落到雅黑的
   英文字形，远不如系统 UI 字体。英文页把这两个栈换成纯拉丁的。 */
html[lang="en"]{
  --serif-cjk:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* 英文单词长，窄栏里不断词会留下大块空白 */
html[lang="en"] .prose,html[lang="en"] .lede{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---------- footer ---------- */
.foot{background:var(--ground);border-top:1px solid var(--rule);padding-block:42px 38px;font-size:13.5px}
.foot__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:30px;padding-bottom:28px;border-bottom:1px solid var(--rule-soft)}
.foot__col h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--sans);font-weight:600;margin-bottom:12px}
.foot__col ul{display:grid;gap:7px;color:var(--ink-soft)}
.foot__col a{text-decoration:none;color:var(--ink-soft)}
.foot__col a:hover{color:var(--gold)}
.foot__tag{font-family:var(--serif-latin);font-style:italic;color:var(--gold);font-size:17px;margin-top:12px}
.foot__legal{margin-top:24px;font-size:12px;color:var(--ink-faint);line-height:1.8;max-width:92ch}

@media (max-width:1000px){
  /* minmax(0,1fr) 而不是 1fr：1fr 轨道的自动最小值是 min-content，
     表单里的滑杆行、宽输入框一旦最小宽度超过屏幕，轨道就把整页撑出横向滚动。
     宽屏那条规则本来就带 minmax(0,…)，这里补上同样的保护。 */
  .calc{grid-template-columns:minmax(0,1fr)}
  .grid3,.grid2{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* 「TIFFANY & RAYMOND」比旧的「RAYMOND ZHAN」宽，导航在 431～515px 会被
     挤到横向溢出。沿用下面 430px 处既有的做法——收掉品牌文字、只留标记，
     保住「预约咨询」入口——但只作用于导航，页脚宽松不必跟着收。 */
  .nav .brand > span:last-child{display:none}
  .brand__sub{display:none}
  .foot__top{grid-template-columns:1fr}
  .sec__head{flex-wrap:wrap;gap:10px}
}
/* * 是类型选择器，不匹配伪元素——原来只写 * 的话 ::before/::after 上的动画
   照样跑。站上第一个伪元素动画是金按钮的扫光，所以这里补上两个伪元素。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 打印 / 存为 PDF ----------
   屏幕上只露出一个按钮；打印时全站去掉导航页脚，计算器页再额外把交互表单
   换成 calc.js 生成的 .psheet（抬头 + 你填的数字）。计算器专属规则都挂在
   body.calcpage 下，免得影响文章页的打印。 */
.printbar{display:grid;gap:8px;justify-items:start;margin-top:4px}
.printbar__d{font-size:12.5px;color:var(--ink-faint);max-width:46ch}
.psheet{display:none}
.printbar__row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}

/* ---------- 分享按钮（calc.js 的 initShare 插进来） ----------
   按钮是幽灵按钮的小一号；面板贴在按钮下方，窄屏上不超出屏幕。 */
.share{position:relative;display:inline-block}
.share__btn{padding:8px 16px;font-size:13.5px;gap:7px}
.share__btn svg{width:16px;height:16px;flex:none}
.share--head{margin-top:16px}
.share--calc .share__btn{padding:12px 22px;font-size:14.5px}
.share__panel{position:absolute;z-index:40;top:calc(100% + 8px);left:0;
  width:min(320px,calc(100vw - 32px));padding:16px 16px 14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.35)}
.share .share__h{font-size:11.5px;line-height:1.5;letter-spacing:.2em;color:var(--gold);font-weight:600;margin-bottom:10px}
.share__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.share .share__opt{font:inherit;font-size:13.5px;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer;
  padding:9px 8px;border:1px solid var(--rule);border-radius:8px;background:transparent;color:var(--ink);
  transition:color .18s,border-color .18s}
.share .share__opt:hover,.share .share__opt:focus-visible{border-color:var(--gold);color:var(--gold)}
.share .share__opt--main{grid-column:1 / -1;border-color:var(--gold);color:var(--gold);font-weight:600}
.share__tip{font-size:13px!important;line-height:1.7!important;color:var(--ink-soft);margin-top:12px;
  padding-top:12px;border-top:1px solid var(--rule-soft)}
.share__tip b{color:var(--ink)}
.share__toast{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,12px);
  padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.share__toast.is-on{opacity:1;transform:translate(-50%,0)}
/* 文章读完处那一块 */
.share-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  margin:34px 0 0;padding:18px 20px;background:var(--band);border-radius:12px}
.share-end .share-end__t{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0}
.share-end .share__panel{left:auto;right:0}
@media (max-width:560px){.share-end .share__panel{left:0;right:auto}}
/* 微信内置浏览器里的引导层：指向右上角 ··· */
.wxguide{position:fixed;inset:0;z-index:100;background:rgba(20,18,15,.82);color:#fff;
  display:flex;flex-direction:column;align-items:flex-end;padding:18px 26px 0 24px;text-align:right}
.wxguide[hidden]{display:none}
.wxguide__arrow{width:64px;height:84px;color:var(--gold-bright);margin-right:4px}
.wxguide__t{font-size:22px;font-weight:600;margin-top:10px}
.wxguide__t b{color:var(--gold-bright);letter-spacing:.1em}
.wxguide__d{font-size:16px;margin-top:6px;opacity:.9}
.wxguide__x{font-size:13px;margin-top:28px;opacity:.6}

@media print{
  @page{margin:14mm}
  :root{--ground:#fff;--surface:#fff;--band:#fff;--panel:#fff;--panel-ink:#000;
    --ink:#000;--ink-soft:#1a1a1a;--ink-faint:#555;--rule:#999;--rule-soft:#ccc;
    --good:#2f4f2f;--warn:#7a5c1e;--crit:#7a2f1e}
  /* 入场动画没跑到的元素 opacity 还是 0，不复位就印出一片空白 */
  *{animation:none!important;transition:none!important;opacity:1!important;
    transform:none!important;box-shadow:none!important}
  html,body{background:#fff!important;color:#000!important}
  .nav,.nav__menu,.foot,.printbar,.cta,.art__related,.sec__more,.search,
  .toc,.toc__fab,.toc__scrim,.share,.share-end,.share__toast,.wxguide,
  .calcbar,.sec__tog{display:none!important}
  a{color:inherit!important;text-decoration:none!important}
  .tile,.headline,.note,.panel,.tablewrap,.psheet__tb tr{break-inside:avoid}
  h1,h2,.sec__head{break-after:avoid}

  body.calcpage .crumb,
  body.calcpage .phead h1,
  body.calcpage .phead .lede,
  body.calcpage .calc form{display:none!important}
  body.calcpage .phead{padding-block:0;border-bottom:0}
  body.calcpage .band{padding-block:0}
  body.calcpage .calc{display:block}
  body.calcpage .out{display:block}
  body.calcpage .out > * + *{margin-top:6mm}
  body.calcpage .headline__v{font-size:26pt!important}
  body.calcpage .headline__l,body.calcpage .headline__d{font-size:10pt!important}
  body.calcpage .tile__v{font-size:15pt!important}
  body.calcpage .tile__l,body.calcpage .tile__d{font-size:9pt!important}
  body.calcpage .note,body.calcpage .disclaim{font-size:9pt!important}

  .psheet{display:block!important;margin-bottom:7mm}
  .psheet__brand{font-size:8.5pt;letter-spacing:.05em;color:#555;
    border-bottom:1px solid #999;padding-bottom:2.5mm}
  .psheet__t{font-family:var(--serif-cjk);font-size:17pt;font-weight:600;margin-top:4mm}
  .psheet__meta{font-size:8.5pt;color:#555;margin-top:1.5mm}
  .psheet__h{font-size:10pt;font-weight:600;margin:6mm 0 2mm}
  .psheet__tb{width:100%;border-collapse:collapse;font-size:10pt}
  .psheet__tb th{width:62%;text-align:left;font-weight:400;color:#333;
    padding:1.6mm 0;border-bottom:1px solid #ddd;vertical-align:top}
  .psheet__tb td{text-align:right;font-weight:600;padding:1.6mm 0;
    border-bottom:1px solid #ddd;vertical-align:top;white-space:nowrap}
}