/* ============================================================================
   律衡 LexFlow · 官网前台视觉系统 v2（2026-11）
   ----------------------------------------------------------------------------
   一条原则：整站以「纸白 + 细线 + 宋体标题」为底，主题色只做点题，
   不做大面积深色块。所有页面共用同一套间距、字号、圆角与描边，
   保证从首页到内容页是同一家律所、同一套语言。

   命名空间沿用 .sf-* / .sfc-* / .srs-* / .rd-*，本文件在 app.css 之后加载，
   相同选择器后者生效，用来整体替换旧版深色皮肤。
   ========================================================================== */

:root{
  --s-bg:#ffffff;
  --s-paper:#f7f5f1;          /* 暖纸色，用作交替区块与图版底 */
  --s-paper-2:#f1eee8;
  --s-ink:#151c24;            /* 标题墨色 */
  --s-body:#4b5663;           /* 正文 */
  --s-meta:#67717f;           /* 次要信息：对白 4.95:1 / 对纸底 4.54:1，11px 也看得清 */
  --s-line:#e6e2da;           /* 暖色发丝线 */
  --s-line-soft:#efece6;
  --s-accent:var(--gold);            /* 品牌色：细线、图标、下划线、大面积点缀 */
  --s-accent-deep:var(--gold-deep);  /* 兼容旧名 */
  --s-accent-soft:var(--gold-soft);

  /* ------------------------------------------------------------------ 语义色
     2026-11 重做配色时立的规矩：同一个色相，按用途分档，绝不一个色值走天下。

       --s-accent-solid    实心块底（主按钮 / 徽章选中）。已由 themeConfig() 移出
                           对比度死区，能保证上面的字 ≥4.5:1。
       --s-on-accent       实心块上的字。**不要写 #fff**——浅色主题会变成白底白字，
                           中段明度会变成蓝底黑字，都是这么来的。
       --s-accent-hover    实心块 hover。深底再压暗、浅底再提亮，前景色永不翻转。
       --s-accent-text     主色当文字用（小标题 / 眉标）。白底上已保证 ≥4.5:1。
       --s-accent-text-2   次要主色文字（图注 / 元信息），保住 3:1 与层次差。

     规则：凡是「底色 + 字」的组合，底色用 solid/hover，字色用 on-accent。
     只有细线、图标、下划线这类不与文字叠压的装饰，才直接用 --s-accent。 */
  --s-accent-solid:var(--gold-solid);
  --s-on-accent:var(--on-gold);
  --s-accent-hover:var(--gold-hover);
  --s-on-accent-hover:var(--on-gold-hover);
  --s-accent-text:var(--gold-text);
  --s-accent-text-2:var(--gold-text-2);
  --s-accent-text-deep:var(--gold-text-deep);   /* 浅主色底上的主色文字 */

  /* 兜底：正常由 layout 的 <style id="lexflow-theme"> 覆盖。
     万一某页没注入，这里给香槟金一套可读的组合，不会出现透明字。 */
  --gold-solid:#b08d57;
  --on-gold:#14181f;
  --gold-hover:#a07f4c;
  --on-gold-hover:#14181f;
  --gold-text:#8a6a3c;
  --gold-text-2:#9c7a45;
  --gold-text-deep:#7a5c33;
  --s-r:2px;                  /* 统一圆角：小、克制 */
  --s-shadow:0 1px 2px rgba(21,28,36,.04),0 18px 40px -32px rgba(21,28,36,.28);
  --s-font-serif:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC","SimSun",serif;
  --s-font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* ---------------------------------------------------------------- 旧皮肤变量别名
     迁入的前台组件与 shared.css 仍在用 --line / --muted / --blue 这一套名字。
     前台不再加载 app.css，这些值必须在这里兜住——否则 var() 取不到值，
     该属性会退化成 inherit / 初始值（表现为「边框消失」「字色变深」）。
     下面的值**照搬 app.css :root**，目的是让本次分离做到零视觉差异。
     想把它们统一到暖纸色系（--line → --s-line 等）请作为独立的设计改动，别混在重构里。 */
  --text:#1c2733;  --muted:#6b7787;  --faint:#7f8894;
  --line:#e5e8ee;  --line-2:#eef1f5;
  --blue:#2f6fed;  --blue-soft:#eaf1ff;
  --green:#0f9d58; --green-soft:#e7f6ee;
  --amber:#b7791f; --amber-soft:#fdf4e3;
  --red:#d93025;   --red-soft:#fdecea;
  --purple:#6b46c1;--purple-soft:#f1ecfb;
  --teal:#0f8b8d;  --teal-soft:#e5f5f5;
  --indigo:#4338ca;--indigo-soft:#ecebfb;

  /* ---------------------------------------------------------------- 版面宽度
     2026-11 统一：全站只有「一个外框 + 一个阅读列」，任何页面不许另开一套。
     改版心只改这里，其余全部由变量推导，不再出现 812 / 920 / 1240 / 1440 各说各话。

       --sf-max   1240  外框：导航、页脚、通栏区块、列表页、页头 banner
       --sf-pad     40  外框左右内边距（≤820px 收到 20）
       --sf-side   340  详情页右栏（目录 / 热门 / 咨询卡）
       --sf-gap     60  双栏间距
       --sf-read   760  阅读列 = 1240 - 40×2 - 340 - 60
                        （文章正文、案例、单页、专栏章节、详情页标题与导语）

     关系：外框内容宽 1160，正好等于阅读列 760 + 间距 60 + 右栏 340。
     所以详情页左边缘与列表页左边缘落在同一条竖线上，双栏也刚好填满外框。 */
  --sf-max:1240px;
  --sf-pad:40px;
  --sf-side:340px;
  --sf-gap:60px;
  --sf-read:calc(var(--sf-max) - var(--sf-pad) * 2 - var(--sf-side) - var(--sf-gap));
}

/* ---------------------------------------------------------------- 基础重置
   2026-11 从 app.css 迁入：前台此前一直靠后台样式表提供 box-sizing / 标题边距 /
   图片约束这些地基，导致「少加载一个后台文件，整站尺寸全变」。
   迁完之后前台不再依赖 app.css 的布局脚手架。 */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:600;line-height:1.35}
h1{font-size:24px}
h2{font-size:19px}
h3{font-size:16px}
p{margin:0 0 1em}
.serif{font-family:var(--s-font-serif)}
.muted{color:var(--s-meta)}
.small{font-size:12px}
.tiny{font-size:11px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.nowrap{white-space:nowrap}
.flex{display:flex}
.gap8{gap:8px}
main{display:block}
/* 跳转链接：平时藏起来，键盘 Tab 到时从导航上方落下。
   长页面上不必再按十几次 Tab 才能进正文，读屏软件也靠它跳过菜单。 */
.sf-skip{
  position:fixed;left:12px;top:-64px;z-index:200;
  padding:10px 18px;background:var(--s-ink);color:#fff;
  font-size:13px;letter-spacing:.04em;border-radius:var(--s-r);
  transition:top .18s;
}
.sf-skip:focus{top:12px;outline:2px solid var(--s-accent);outline-offset:2px}

/* ================================================================ 前台组件（自 app.css 迁入）
   2026-11 分离：以下规则原在 app.css，与后台皮肤混在一起。
   位置必须在「基础重置」之后、本文件自己的组件规则之前——同优先级时
   site.css 后写的规则仍然胜出，行为与迁移前完全一致（逐元素计算样式实测零差异）。
   新增前台样式请直接写在本文件下方对应段落，不要再放回 app.css。 */
.sf-serif{font-family:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC","SimSun",serif}
.sf-wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ---------------- 顶部导航 ---------------- */
.sf-nav{position:sticky;top:0;z-index:60;background:rgba(10,18,26,.9);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.07);transition:background .3s,box-shadow .3s}
.sf-nav .sf-wrap{display:flex;align-items:center;gap:30px;height:74px}
.sf-brand{display:flex;align-items:center;gap:12px;flex:none}
.sf-brand .seal{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(176,141,87,.45);color:var(--gold);font-family:"Songti SC",serif;font-size:17px;letter-spacing:0;background:linear-gradient(150deg,rgba(176,141,87,.16),transparent)}
.sf-brand b{display:block;color:#fff;font-family:"Noto Serif SC","Songti SC",serif;font-size:17px;letter-spacing:.14em;line-height:1.2;font-weight:500}
.sf-brand span{display:block;color:rgba(255,255,255,.34);font-size:9.5px;letter-spacing:.22em;margin-top:3px;text-transform:uppercase}
.sf-nav nav{display:flex;align-items:center;gap:0;margin-left:auto}
.sf-nav nav>a,.sf-nav .nav-drop>a{position:relative;padding:9px 15px;font-size:13.5px;color:rgba(255,255,255,.68);letter-spacing:.05em;transition:color .2s}
.sf-nav nav>a:after,.sf-nav .nav-drop>a:after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s}
@media (hover:hover) and (pointer:fine){
.sf-nav nav>a:hover,.sf-nav .nav-drop>a:hover{color:#fff}
.sf-nav nav>a:hover:after,.sf-nav .nav-drop>a:hover:after{transform:scaleX(1)}}

.sf-nav nav>a.on,.sf-nav .nav-drop>a.on{color:#fff}
.sf-nav nav>a.on:after,.sf-nav .nav-drop>a.on:after{transform:scaleX(1)}
.sf-nav .sf-cta{flex:none;margin-left:10px;height:36px;padding:0 18px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(176,141,87,.55);color:var(--gold);font-size:12.5px;letter-spacing:.08em;transition:.2s}
@media (hover:hover) and (pointer:fine){
.sf-nav .sf-cta:hover{background:var(--gold-hover);color:var(--on-gold-hover);border-color:var(--gold-hover)}}

.sf-burger{display:none;margin-left:auto;width:36px;height:36px;border:1px solid rgba(255,255,255,.18);background:none;color:#fff;align-items:center;justify-content:center;gap:4px;flex-direction:column;cursor:pointer}
.sf-burger i{display:block;width:16px;height:1px;background:currentColor;transition:.2s}

/* ---------------- 通用按钮 ---------------- */
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 26px;font-size:13.5px;letter-spacing:.07em;border:1px solid transparent;transition:.22s;font-family:inherit;cursor:pointer;white-space:nowrap;background:transparent;-webkit-appearance:none}
.sf-btn.gold{background:var(--gold-solid);color:var(--on-gold);font-weight:600}
@media (hover:hover) and (pointer:fine){
.sf-btn.gold:hover{background:var(--gold-hover);color:var(--on-gold-hover)}}

.sf-btn.line{border-color:rgba(255,255,255,.24);color:#fff}
@media (hover:hover) and (pointer:fine){
.sf-btn.line:hover{border-color:var(--gold);color:var(--gold)}}

.sf-btn.ink{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){
.sf-btn.ink:hover{background:var(--ink-3)}}

.sf-btn.dark{background:#fff;border-color:rgba(18,32,46,.16);color:var(--text)}
@media (hover:hover) and (pointer:fine){
.sf-btn.dark:hover{border-color:var(--ink);color:var(--ink)}}

/* 浅色背景上的描边按钮（白底卡片内使用） */
.sf-btn.out{border-color:rgba(18,32,46,.18);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
.sf-btn.out:hover{border-color:var(--ink);background:rgba(18,32,46,.035);color:var(--ink)}}

.sf-btn.sm{height:36px;padding:0 16px;font-size:12.5px}

/* ---------------- 首页首屏 ---------------- */
.sf-hero{position:relative;background:#0c1722;color:#fff;overflow:hidden;padding-top:0;display:flex;flex-direction:column;min-height:calc(100vh / var(--z,1) - 74px)}
.sf-hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(920px 560px at 80% 4%,rgba(176,141,87,.2),transparent 62%),
  radial-gradient(760px 520px at 4% 100%,rgba(38,74,110,.42),transparent 66%);}
.sf-hero:after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,transparent 92%);
  mask-image:linear-gradient(180deg,transparent,#000 26%,transparent 92%);opacity:.55}
.sf-hero .sf-wrap{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;width:100%}
.sf-hero-inner{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;flex:1;padding:72px 0 56px}
.sf-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase}
.sf-eyebrow:before{content:"";width:32px;height:1px;background:var(--gold);opacity:.8}
.sf-hero h1{font-family:"Noto Serif SC","Songti SC","STSong",serif;font-weight:500;font-size:clamp(36px,4.3vw,56px);line-height:1.3;letter-spacing:.05em;margin:22px 0 22px}
.sf-hero h1 em{font-style:normal;color:var(--gold);position:relative}
.sf-hero .lead{font-size:15px;line-height:2.05;color:rgba(255,255,255,.62);max-width:520px;margin:0}
.sf-hero-actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.sf-hero-art{position:relative;aspect-ratio:1/1.04;width:100%;max-width:360px;margin-left:auto}
.sf-hero-art .motto{position:absolute;right:-28px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.22);font-family:"Noto Serif SC",serif}
@media(max-width:1240px){.sf-hero-art .motto{display:none}}
.sf-hero-art .frame{position:absolute;inset:0;border:1px solid rgba(176,141,87,.3)}
.sf-hero-art .frame:after{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.06)}
.sf-hero-art .glyph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.sf-hero-art .glyph span{font-family:"Noto Serif SC","Songti SC",serif;font-size:72px;line-height:1.16;color:rgba(255,255,255,.92);letter-spacing:.04em}
.sf-hero-art .glyph span:last-child{color:var(--gold)}
.sf-hero-art .since{position:absolute;left:-14px;bottom:-26px;font-size:10px;letter-spacing:.32em;color:rgba(255,255,255,.35)}
.sf-hero-art .dot{position:absolute;width:6px;height:6px;background:var(--gold)}
.sf-hero-art .dot.a{left:-3px;top:-3px}.sf-hero-art .dot.b{right:-3px;top:-3px}
.sf-hero-art .dot.c{left:-3px;bottom:-3px}.sf-hero-art .dot.d{right:-3px;bottom:-3px}

.sf-hero-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.1)}
.sf-hero-stats>div{padding:26px 0 30px;border-right:1px solid rgba(255,255,255,.07)}
.sf-hero-stats>div:last-child{border-right:0}
.sf-hero-stats .n{font-family:"Noto Serif SC","Songti SC",serif;font-size:34px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.sf-hero-stats .n small{font-size:13px;color:var(--gold);margin-left:2px}
.sf-hero-stats .l{font-size:11.5px;color:rgba(255,255,255,.4);letter-spacing:.14em;margin-top:7px}

/* ---------------- 通用区块 ---------------- */
.sf-sec{padding:92px 0}
.sf-sec.sf-paper{background:#f4f0e7}
.sf-sec.ink{background:#0c1722;color:#fff}
.sf-sec.tight{padding-top:0}
.sf-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:46px;flex-wrap:wrap}
.sf-hd .en{font-size:10.5px;letter-spacing:.32em;color:var(--gold);text-transform:uppercase}
.sf-hd h2{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:32px;letter-spacing:.07em;margin:12px 0 0;line-height:1.35}
.sf-hd .sub{color:#7d8896;font-size:13.5px;margin:9px 0 0;line-height:1.8}
.sf-sec.ink .sf-hd h2{color:#fff}
.sf-sec.ink .sf-hd .sub{color:rgba(255,255,255,.5)}
.sf-hd .more{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;letter-spacing:.08em;color:var(--gold-deep);padding-bottom:5px;border-bottom:1px solid var(--gold-22);white-space:nowrap;transition:.2s}
@media (hover:hover) and (pointer:fine){
.sf-hd .more:hover{border-color:var(--gold);gap:11px}}

.sf-sec.ink .sf-hd .more{color:var(--gold)}

/* 专业领域列表 */
.sf-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid rgba(18,32,46,.1)}
.sf-area{display:flex;gap:18px;padding:25px 4px;border-bottom:1px solid rgba(18,32,46,.1);transition:.22s;position:relative}
@media (hover:hover) and (pointer:fine){
.sf-area:hover{background:linear-gradient(90deg,var(--gold-06),transparent 70%);padding-left:12px}}

.sf-area .no{font-family:"Noto Serif SC",serif;font-size:12.5px;color:var(--gold);padding-top:4px;letter-spacing:.08em;flex:none}
.sf-area h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:18.5px;margin:0 0 7px;letter-spacing:.04em}
.sf-area p{font-size:12.8px;color:#7d8896;line-height:1.85;margin:0}
.sf-area .arw{margin-left:auto;align-self:center;color:var(--gold);opacity:0;transform:translateX(-8px);transition:.22s;flex:none}
@media (hover:hover) and (pointer:fine){
.sf-area:hover .arw{opacity:1;transform:none}}


/* 关于 / 数字 */
.sf-about{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:center}
.sf-about-visual{position:relative;aspect-ratio:4/4.6;background:linear-gradient(155deg,#18293b,#0c1722);display:grid;place-items:center;overflow:hidden}
.sf-about-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(420px 380px at 70% 20%,rgba(176,141,87,.24),transparent 62%)}
.sf-about-visual .big{position:relative;font-family:"Noto Serif SC",serif;font-size:96px;color:rgba(255,255,255,.94);letter-spacing:.06em;line-height:1}
.sf-about-visual .cap{position:absolute;bottom:26px;left:26px;font-size:10.5px;letter-spacing:.3em;color:rgba(255,255,255,.4);text-transform:uppercase}
.sf-about-visual .ln{position:absolute;top:26px;right:26px;width:44px;height:1px;background:var(--gold)}
.sf-about-visual .vslogan{position:absolute;right:26px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:"Noto Serif SC",serif;font-size:10.5px;letter-spacing:.32em;color:rgba(255,255,255,.28)}
.sf-about h2{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:30px;letter-spacing:.06em;margin:12px 0 18px}
.sf-about p{font-size:14.5px;line-height:2.1;color:#5c6876;margin:0 0 14px}
.sf-points{display:grid;gap:0;margin-top:28px;border-top:1px solid rgba(18,32,46,.1)}
.sf-point{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(18,32,46,.08);align-items:flex-start}
.sf-point b{font-family:"Noto Serif SC",serif;font-size:12px;color:var(--gold);letter-spacing:.08em;padding-top:3px;flex:none}
.sf-point div{font-size:13.2px;color:#4b5866;line-height:1.8}
.sf-point div strong{display:block;color:var(--text);font-weight:600;font-size:13.5px;margin-bottom:2px}

/* 律师团队 */
.sf-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sf-lawyer{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(18,32,46,.1);transition:.25s;overflow:hidden}
@media (hover:hover) and (pointer:fine){
.sf-lawyer:hover{border-color:rgba(176,141,87,.5);transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(12,23,34,.4)}}

.sf-lawyer .ph{position:relative;aspect-ratio:1/1.08;background:linear-gradient(155deg,#1a2c3f,#0c1722);display:grid;place-items:center}
.sf-lawyer .ph:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.09)}
.sf-lawyer .ph span{font-family:"Noto Serif SC","Songti SC",serif;font-size:46px;color:rgba(255,255,255,.9);letter-spacing:.04em}
.sf-lawyer .ph .tag{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.2em;color:var(--gold);z-index:2}
.sf-lawyer .bd{padding:17px 18px 20px;flex:1}
.sf-lawyer h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:17px;margin:0 0 4px;letter-spacing:.04em}
.sf-lawyer .t{font-size:11.5px;color:var(--gold-deep);letter-spacing:.08em}
.sf-lawyer .f{font-size:12px;color:var(--s-meta);margin-top:9px;line-height:1.75}

/* 文章：杂志式 */
.sf-mag{display:grid;grid-template-columns:1.02fr .98fr;gap:0;border:1px solid rgba(18,32,46,.1);background:#fff}
.sf-mag-cover{position:relative;min-height:340px;background:linear-gradient(150deg,#1a2c3f,#0c1722);display:flex;flex-direction:column;justify-content:space-between;padding:34px;overflow:hidden}
.sf-mag-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(360px 320px at 78% 10%,rgba(176,141,87,.26),transparent 60%)}
.sf-mag-cover .cat{position:relative;font-size:10.5px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.sf-mag-cover h3{position:relative;font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:26px;line-height:1.55;color:#fff;margin:0;letter-spacing:.03em}
.sf-mag-cover .meta{position:relative;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.1em}
.sf-mag-side{padding:8px 30px 12px;display:flex;flex-direction:column;justify-content:center}
.sf-news-row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid rgba(18,32,46,.08);align-items:flex-start;transition:.18s}
.sf-news-row:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){
.sf-news-row:hover .tt{color:var(--gold-deep)}}

.sf-news-row .dt{flex:none;text-align:center;width:46px;padding-top:2px}
.sf-news-row .dt b{display:block;font-family:"Noto Serif SC",serif;font-size:19px;color:var(--ink);line-height:1.1;font-weight:500}
.sf-news-row .dt span{font-size:10.5px;color:var(--s-meta);letter-spacing:.06em}
.sf-news-row .tt{font-size:14px;font-weight:500;line-height:1.6;transition:.18s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-news-row .ex{font-size:12px;color:var(--s-meta);margin-top:5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* 文章列表（内页） */
.sf-post-list{border-top:1px solid rgba(18,32,46,.1)}
.sf-post{display:flex;gap:26px;padding:28px 0;border-bottom:1px solid rgba(18,32,46,.1);transition:.2s}
@media (hover:hover) and (pointer:fine){
.sf-post:hover{background:linear-gradient(90deg,var(--gold-06),transparent 62%);padding-left:10px}}

.sf-post .dt{flex:none;width:70px;text-align:center;border-right:1px solid rgba(18,32,46,.1);padding-right:16px}
.sf-post .dt b{display:block;font-family:"Noto Serif SC",serif;font-size:25px;font-weight:500;color:var(--ink);line-height:1.1}
.sf-post .dt span{font-size:11px;color:var(--s-meta);letter-spacing:.08em}
.sf-post h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:18px;line-height:1.6;margin:8px 0 8px;letter-spacing:.02em}
@media (hover:hover) and (pointer:fine){
.sf-post:hover h3{color:var(--gold-deep)}}

.sf-post p{font-size:13px;color:var(--s-meta);line-height:1.85;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 案例 */
.sf-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sf-case{display:block;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);padding:26px 26px 24px;transition:.22s;position:relative}
@media (hover:hover) and (pointer:fine){
.sf-case:hover{border-color:rgba(176,141,87,.45);background:rgba(255,255,255,.05);transform:translateY(-3px)}}

.sf-case .tags{display:flex;gap:8px;margin-bottom:14px}
.sf-case .tags span{font-size:10.5px;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(176,141,87,.35);padding:2px 9px}
.sf-case h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:17px;line-height:1.7;color:#fff;margin:0 0 10px}
.sf-case p{font-size:12.5px;color:rgba(255,255,255,.46);line-height:1.9;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-case .ft{margin-top:16px;font-size:11px;color:rgba(255,255,255,.3);letter-spacing:.06em}

/* 浅色案例卡（列表页） */
.sf-case-l{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,32,46,.1);padding:26px 26px 22px;transition:.22s;height:100%}
@media (hover:hover) and (pointer:fine){
.sf-case-l:hover{border-color:rgba(176,141,87,.45);transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(12,23,34,.35)}}

.sf-case-l .tags{display:flex;gap:8px;margin-bottom:14px}
.sf-case-l .tags span{font-size:10.5px;letter-spacing:.1em;color:var(--gold-deep);background:var(--gold-06);border:1px solid var(--gold-22);padding:2px 9px}
.sf-case-l h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:16.5px;line-height:1.7;margin:0 0 10px}
.sf-case-l p{font-size:12.5px;color:var(--s-meta);line-height:1.9;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-case-l .ft{margin-top:auto;padding-top:16px;font-size:11px;color:var(--s-meta);letter-spacing:.04em}

/* 视频 */
.sf-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sf-video{display:block;background:#fff;border:1px solid rgba(18,32,46,.1);overflow:hidden;transition:.22s}
@media (hover:hover) and (pointer:fine){
.sf-video:hover{border-color:rgba(176,141,87,.45);transform:translateY(-3px);box-shadow:0 20px 36px -26px rgba(12,23,34,.4)}}

.sf-video .frame{position:relative;aspect-ratio:16/9;background:#0c1722;overflow:hidden}
.sf-video .frame img{width:100%;height:100%;object-fit:cover;opacity:.92;transition:.3s}
@media (hover:hover) and (pointer:fine){
.sf-video:hover .frame img{opacity:1;transform:scale(1.03)}}

.sf-video .frame .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.sf-video .frame .ph-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 14px 0;background:linear-gradient(150deg,#1c2f43,#0c1722);overflow:hidden}
.sf-video .frame .ph-fallback span{font-family:"Noto Serif SC",serif;font-size:104px;color:rgba(255,255,255,.12);letter-spacing:.04em;line-height:.8}
.sf-video .frame .play i{width:44px;height:44px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-size:12px;font-style:normal;background:rgba(12,23,34,.68);backdrop-filter:blur(2px)}
.sf-video .bd{padding:15px 17px 18px}
.sf-video h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:14.5px;margin:0;line-height:1.65}
.sf-video .d{font-size:11.5px;color:var(--s-meta);margin-top:6px}

/* CTA 区块 */
.sf-cta{position:relative;background:#0c1722;color:#fff;padding:86px 0;overflow:hidden}
.sf-cta:before{content:"";position:absolute;inset:0;background:radial-gradient(680px 420px at 82% 100%,rgba(176,141,87,.18),transparent 66%)}
.sf-cta .sf-wrap{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.sf-cta h2{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:clamp(26px,3vw,36px);letter-spacing:.06em;margin:14px 0 14px;line-height:1.5}
.sf-cta p{color:rgba(255,255,255,.55);font-size:13.5px;line-height:1.95;margin:0;max-width:520px}
.sf-cta .right{text-align:right}
.sf-cta .tel{font-family:"Noto Serif SC",serif;font-size:28px;color:var(--gold);letter-spacing:.04em;display:block;margin-bottom:18px}
.sf-cta .tel small{display:block;font-size:10.5px;letter-spacing:.26em;color:rgba(255,255,255,.35);margin-bottom:8px;font-family:inherit}

/* 通用栅格（内页复用） */
.sf-2col{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:start}
.sf-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(18,32,46,.1);border:1px solid rgba(18,32,46,.1)}
.sf-grid3>div{background:#fbfaf7;padding:26px 24px}
.sf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.sf-step{padding:26px 26px 26px 0;border-top:1px solid rgba(18,32,46,.16);position:relative}
.sf-step:before{content:"";position:absolute;top:-3px;left:0;width:5px;height:5px;background:var(--gold);border-radius:50%}
.sf-step .no{font-family:"Noto Serif SC",serif;font-size:30px;color:rgba(18,32,46,.14);line-height:1;letter-spacing:.02em}
.sf-step h3{font-family:"Noto Serif SC",serif;font-weight:500;font-size:18px;margin:14px 0 10px;letter-spacing:.04em}
.sf-step p{font-size:12.8px;color:#7d8896;line-height:1.9;margin:0}

/* 内页栅格（响应式） */
.sf-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sf-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sf-contact{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.sf-form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.sf-profile-hd{display:grid;grid-template-columns:112px 1fr;gap:30px;align-items:center;margin-top:26px}

/* ---------------- 内页头 ---------------- */
.sf-ph{position:relative;background:#0c1722;color:#fff;padding:74px 0 66px;overflow:hidden}
.sf-ph:before{content:"";position:absolute;inset:0;background:
  radial-gradient(760px 420px at 84% -10%,rgba(176,141,87,.2),transparent 64%),
  radial-gradient(620px 400px at 0% 120%,rgba(38,74,110,.4),transparent 66%)}
.sf-ph:after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:calc(100% / 8) 100%;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.sf-ph .sf-wrap{position:relative;z-index:2}
.sf-ph .crumb{font-size:11.5px;color:rgba(255,255,255,.36);letter-spacing:.08em;display:flex;gap:8px;align-items:center}
@media (hover:hover) and (pointer:fine){
.sf-ph .crumb a:hover{color:var(--gold)}}

.sf-ph .crumb i{font-style:normal;opacity:.4}
.sf-ph h1{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:clamp(28px,3.4vw,42px);letter-spacing:.06em;margin:16px 0 14px;line-height:1.4}
.sf-ph p{color:rgba(255,255,255,.56);font-size:14px;line-height:1.95;max-width:660px;margin:0}
.sf-ph .stats{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.sf-ph .stats b{font-family:"Noto Serif SC",serif;font-size:24px;color:var(--gold);font-weight:500;display:block}
.sf-ph .stats span{font-size:11px;color:rgba(255,255,255,.52);letter-spacing:.12em}

/* ---------------- 正文排版 ---------------- */
.sf-prose{font-size:15.5px;line-height:2.15;color:#2c3745}
.sf-prose>:first-child{margin-top:0}
.sf-prose p{margin:0 0 1.35em}
.sf-prose h1,.sf-prose h2,.sf-prose h3,.sf-prose h4{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;color:var(--ink);letter-spacing:.03em;margin:2em 0 .7em;line-height:1.5}
.sf-prose h2{font-size:22px;padding-left:14px;position:relative}
.sf-prose h2:before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;background:var(--gold)}
.sf-prose h3{font-size:18px}
.sf-prose img{max-width:100%;height:auto;display:block;margin:20px 0}
.sf-prose a{color:var(--gold-deep);border-bottom:1px solid var(--gold-22)}
.sf-prose blockquote{margin:20px 0;padding:16px 22px;background:#f6f2e9;border-left:2px solid var(--gold);color:#55616f;font-size:14.5px}
.sf-prose ul,.sf-prose ol{padding-left:1.4em;margin:0 0 1.35em}
.sf-prose li{margin-bottom:.4em}
.sf-prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13.5px}
.sf-prose th,.sf-prose td{border:1px solid rgba(18,32,46,.12);padding:9px 12px;text-align:left}
.sf-prose th{background:#f6f2e9;font-weight:500}

/* ---------------- 正文阅读版心（白纸卡片） ----------------
   页面底色下沉为暖灰，正文放进独立白纸卡片里，
   与背景形成层次，长文阅读更接近纸质/传统排版 */
.sf-read{padding:52px 0 96px;
  background:linear-gradient(180deg,var(--ink-06) 0,rgba(255,255,255,0) 46%),var(--gold-soft)}
.sf-sheet{
  position:relative;max-width:812px;margin:0 auto;background:#fff;
  border:1px solid rgba(18,32,46,.075);border-radius:3px;
  padding:clamp(30px,4.6vw,60px) clamp(22px,6.2vw,66px) clamp(32px,4vw,52px);
  box-shadow:0 1px 2px rgba(18,32,46,.035),0 4px 12px -6px rgba(18,32,46,.07),
             0 34px 74px -40px rgba(18,32,46,.34);
}
/* 顶部一道自左向右淡出的主题色细线 */
.sf-sheet:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-22) 30%,rgba(18,32,46,0) 74%);
}
/* 纸张内正文：宋体长文排版，接近纸质阅读 */
.sf-sheet .sf-prose{
  font-family:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC","SimSun",serif;
  font-size:16.5px;line-height:2.12;color:#28323f;letter-spacing:.015em;
}
.sf-sheet .sf-prose p{margin:0 0 1.1em}
.sf-sheet .sf-prose>:first-child{margin-top:0}
.sf-sheet .sf-prose>:last-child{margin-bottom:0}
.sf-sheet .sf-prose strong,.sf-sheet .sf-prose b{color:#16222f}
.sf-sheet .sf-prose h2{margin-top:1.85em;font-size:21px}
.sf-sheet .sf-prose h3{font-size:17.5px}
.sf-sheet .sf-prose blockquote{background:var(--ink-06);border-left:2px solid var(--gold);color:#4f5b69}
.sf-sheet .sf-prose th{background:var(--ink-06)}
/* 卡内分隔区（免责声明 / 延伸阅读） */
.sf-sheet-note{margin-top:42px;padding-top:20px;border-top:1px solid rgba(18,32,46,.09);
  font-size:12.5px;line-height:1.95;color:#7f8b99;letter-spacing:.01em}
.sf-sheet-note a{color:var(--gold-deep);border-bottom:1px solid var(--gold-22)}
.sf-related{margin-top:38px;padding-top:22px;border-top:1px solid rgba(18,32,46,.09)}
.sf-related .hd{display:flex;align-items:baseline;gap:12px;margin-bottom:2px}
.sf-related .hd .en{font-size:10px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.sf-related .hd .cn{font-family:"Noto Serif SC",serif;font-size:13.5px;color:var(--ink);letter-spacing:.08em}
.sf-related a{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:15px 0;border-bottom:1px solid rgba(18,32,46,.07);transition:.18s}
.sf-related a:last-child{border-bottom:0;padding-bottom:0}
@media (hover:hover) and (pointer:fine){
.sf-related a:hover{padding-left:6px}
.sf-related a:hover b{color:var(--gold-deep)}}

.sf-related a b{font-family:"Noto Serif SC",serif;font-size:14.5px;font-weight:500;color:#22303e;
  line-height:1.65;transition:.18s}
.sf-related a span{flex:none;font-size:11.5px;color:#aab3bf;font-variant-numeric:tabular-nums}
.sf-sheet .sf-series-bar{margin:-6px 0 26px;padding:10px 14px;background:var(--ink-06);
  border-left:2px solid var(--gold);border-radius:0 2px 2px 0}
.sf-sheet .sf-wall.light{border-radius:2px;background:#fbfaf7}
/* 带侧栏的正文（案例详情 / 专栏章节）：卡片不再居中限宽，交给栅格 */
.sf-sheet-wide{max-width:none;margin:0}
.sf-2col .sf-sheet{padding:clamp(26px,3.4vw,46px) clamp(20px,3.8vw,44px)}
.srs-read .sf-sheet{padding:clamp(24px,3vw,42px) clamp(20px,3.4vw,42px)}
.srs-article.sf-sheet .sf-prose{font-size:16.5px;line-height:2.1}
.sf-2col .sf-sheet .sf-sheet-note{margin-top:34px}
/* 窄屏：卡片贴边，去掉厚重阴影，改为上下细线 */
@media (max-width:760px){
  .sf-read{padding:28px 0 64px}
  .sf-sheet{border-radius:2px;box-shadow:0 1px 2px rgba(18,32,46,.04);
    padding:26px 20px 32px;border-left:0;border-right:0}
  .sf-sheet .sf-prose{font-size:16px;line-height:2}
  .sf-related a{gap:14px}
  .sf-related a b{font-size:14px}}

.sf-article-meta{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--s-meta);padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid rgba(18,32,46,.1);flex-wrap:wrap}
.sf-article-meta .cat{color:var(--gold-deep);border:1px solid var(--gold-22);padding:2px 10px;letter-spacing:.1em;font-size:11px}

/* 侧栏卡片 */
.sf-side{background:#fff;border:1px solid rgba(18,32,46,.1);padding:26px}
.sf-side h3{font-family:"Noto Serif SC",serif;font-weight:500;font-size:16px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(18,32,46,.1);letter-spacing:.04em}
.sf-side .kv{display:grid;grid-template-columns:64px 1fr;gap:10px 0;font-size:12.8px;color:#4b5866}
.sf-side .kv dt{color:#98a3b2;font-size:12px}
.sf-side .kv dd{margin:0}

/* 表单（前台） */
.sf-form .field{margin-bottom:16px}
.sf-form label{display:block;font-size:12px;color:#6b7787;margin-bottom:6px;letter-spacing:.04em}
.sf-form input,.sf-form textarea{width:100%;border:1px solid rgba(18,32,46,.14);background:#fff;padding:11px 13px;font-size:13.5px;font-family:inherit;color:var(--text);transition:.18s;outline:none;border-radius:0}
.sf-form input:focus,.sf-form textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-06)}
.sf-form textarea{min-height:150px;line-height:1.8;resize:vertical}

/* 团队详情 */
.sf-profile{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.sf-portrait{background:linear-gradient(155deg,#1a2c3f,#0c1722);aspect-ratio:3/3.7;display:grid;place-items:center;position:relative}
.sf-portrait span{font-family:"Noto Serif SC",serif;font-size:86px;color:rgba(255,255,255,.92)}
.sf-portrait:after{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.1)}

/* 空状态 */
.sf-empty{padding:60px 0;text-align:center;color:var(--s-meta);font-size:13.5px}

/* 分页 */
.sf-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:46px;flex-wrap:wrap}
.sf-pager a,.sf-pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(18,32,46,.14);font-size:13px;color:#4b5866;padding:0 12px;transition:.18s;background:#fff}
@media (hover:hover) and (pointer:fine){
.sf-pager a:hover{border-color:var(--gold);color:var(--gold-deep)}}

.sf-pager .on{background:var(--ink);border-color:var(--ink);color:#fff}
.sf-pager .off{opacity:.4}

/* ---------------- 页脚 ---------------- */
.sf-footer{background:#09111a;color:rgba(255,255,255,.46);padding:68px 0 0;font-size:13px}
.sf-foot-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.15fr;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.sf-footer h4{font-size:11px;letter-spacing:.2em;color:#fff;margin:0 0 16px;font-weight:500;text-transform:uppercase}
.sf-footer a{display:block;padding:5px 0;color:rgba(255,255,255,.46);font-size:12.8px;transition:.15s}
@media (hover:hover) and (pointer:fine){
.sf-footer a:hover{color:var(--gold)}}

.sf-footer p{font-size:12.5px;line-height:1.95;color:rgba(255,255,255,.4);margin:0}
.sf-foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.sf-foot-brand .seal{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(176,141,87,.4);color:var(--gold);font-family:"Songti SC",serif;font-size:16px}
.sf-foot-brand b{color:#fff;font-family:"Noto Serif SC",serif;font-size:15.5px;letter-spacing:.1em;font-weight:500}
.sf-foot-bottom{display:flex;justify-content:space-between;gap:16px;padding:20px 0 24px;font-size:11.5px;color:rgba(255,255,255,.28);flex-wrap:wrap}
.sf-foot-bottom a{display:inline;padding:0;color:rgba(255,255,255,.36)}
.sf-contact-line{display:flex;gap:8px;padding:4px 0;font-size:12.5px;color:rgba(255,255,255,.46);align-items:flex-start}
.sf-contact-line b{color:rgba(255,255,255,.7);font-weight:400;flex:none}

/* ---------------- 响应式 ---------------- */
@media(max-width:1080px){
  .sf-hero-inner{grid-template-columns:1fr;gap:44px;padding:64px 0 60px}
  .sf-hero-art{max-width:300px;margin:0}
  .sf-about{grid-template-columns:1fr;gap:36px}
  .sf-about-visual{aspect-ratio:16/9}
  .sf-cta .sf-wrap{grid-template-columns:1fr;gap:28px}
  .sf-cta .right{text-align:left}
  .sf-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-mag{grid-template-columns:1fr}
  .sf-mag-cover{min-height:260px}
  .sf-profile{grid-template-columns:1fr;gap:28px}
  .sf-portrait{max-width:280px;aspect-ratio:1/1.05}
  .sf-foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .sf-2col{grid-template-columns:1fr;gap:36px}
  .sf-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-grid3{grid-template-columns:1fr}
  .sf-steps{grid-template-columns:1fr 1fr}
  .sf-grid-2,.sf-grid-3{grid-template-columns:1fr}
  .sf-contact{grid-template-columns:1fr;gap:34px}
  .sf-profile-hd{grid-template-columns:88px 1fr;gap:20px}
  .sf-2col{gap:30px}}
@media(max-width:820px){
  .sf-wrap{padding:0 20px}
  .sf-nav nav{display:none}
  .sf-nav nav.open{display:flex;position:absolute;top:74px;left:0;right:0;background:#0a121a;flex-direction:column;align-items:stretch;padding:10px 20px 20px;border-bottom:1px solid rgba(255,255,255,.08);gap:0}
  .sf-nav nav.open>a,.sf-nav nav.open .nav-drop>a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
  .sf-nav nav.open .nav-drop-menu{position:static;transform:none;opacity:1;display:flex;background:transparent;border:0;box-shadow:none;padding:0 0 8px 12px}
  .sf-nav nav.open .nav-drop-menu a{color:rgba(255,255,255,.55);border:0;padding:8px 0}
  .sf-burger{display:flex}
  .sf-nav .sf-cta{display:none}
  .sf-sec{padding:64px 0}
  .sf-hd h2{font-size:26px}
  .sf-areas{grid-template-columns:1fr;gap:0}
  .sf-hero-stats{grid-template-columns:repeat(2,1fr)}
  .sf-hero-stats>div:nth-child(2){border-right:0}
  .sf-hero-stats>div:nth-child(1),.sf-hero-stats>div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.07)}
  .sf-cases{grid-template-columns:1fr}
  .sf-team,.sf-videos{grid-template-columns:1fr}
  .sf-foot-grid{grid-template-columns:1fr}
  .sf-post{gap:16px}
  .sf-post .dt{width:56px;padding-right:12px}
  .sf-post .dt b{font-size:22px}
  .sf-article-meta{gap:10px}
  .sf-hero-art{display:none}}
@media(max-width:560px){
  .sf-form-2{grid-template-columns:1fr}
  .sf-lawyer .ph{aspect-ratio:16/10}
  .sf-hero-actions .sf-btn{flex:1}
  .sf-mag-cover h3{font-size:21px}
  .sf-hd{flex-direction:column;align-items:flex-start;gap:14px}
  .sf-steps{grid-template-columns:1fr}}

/* ============================================================
   官网 · 视频课程（.sfc-*）
   ============================================================ */
.sfc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sfc-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid rgba(18,32,46,.1);
  transition:.22s;overflow:hidden}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover{border-color:rgba(176,141,87,.45);transform:translateY(-3px);box-shadow:0 24px 44px -30px rgba(12,23,34,.45)}}

.sfc-card .frame{position:relative;aspect-ratio:16/9;background:#0c1722;overflow:hidden;display:block}
.sfc-card .frame img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:.35s}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover .frame img{opacity:1;transform:scale(1.04)}}

.sfc-card .frame .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,#1b2d40,#0b1520);overflow:hidden}
.sfc-card .frame .ph:after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:25% 100%}
.sfc-card .frame .ph span{font-family:"Noto Serif SC",serif;font-size:58px;color:rgba(255,255,255,.2);
  line-height:1;letter-spacing:.06em;position:relative;z-index:1}
.sfc-card .frame .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.sfc-card .frame .play i{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  display:grid;place-items:center;font-size:12px;font-style:normal;background:rgba(12,23,34,.28);
  backdrop-filter:blur(3px);transition:.22s}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover .frame .play i{background:var(--gold);border-color:var(--gold);transform:scale(1.06)}}

/* 封面上的权限胶囊与时长角标已整体移交 site.css（.sfc-card .badge / .sfc-card .dur），
   这里不再保留任何声明。两处都写会让「改了一处、生效的是另一处」反复发生。 */
.sfc-card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.sfc-card h3{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:15.5px;line-height:1.65;
  margin:0 0 8px;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover h3{color:var(--gold-deep)}}

.sfc-card .sub{font-size:12px;color:var(--s-meta);line-height:1.8;margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sfc-card .meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--s-meta);margin-top:auto}
.sfc-card .meta .t{color:var(--s-meta);font-size:11.5px}
.sfc-card .meta .dot{width:2px;height:2px;background:#c5ccd6;border-radius:50%}
.sfc-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sfc-card .tags span{font-size:10px;color:var(--gold-deep);background:var(--gold-06);border:1px solid var(--gold-22);padding:1px 7px}

/* 课程详情 */
.sfc-hero{background:#0c1722;color:#fff;padding:30px 0 54px;position:relative;overflow:hidden}
.sfc-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 78% -10%,rgba(176,141,87,.14),transparent 70%)}
.sfc-hero .sf-wrap{position:relative;z-index:2}
.sfc-hero .crumb{font-size:11.5px;color:rgba(255,255,255,.36);letter-spacing:.08em;display:flex;gap:8px;align-items:center}
@media (hover:hover) and (pointer:fine){
.sfc-hero .crumb a:hover{color:var(--gold)}}

.sfc-hero .crumb i{font-style:normal;opacity:.4}
.sfc-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:18px 0 26px;flex-wrap:wrap}
.sfc-hd h1{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:clamp(24px,2.9vw,34px);
  line-height:1.45;letter-spacing:.03em;margin:0 0 12px;max-width:760px}
.sfc-hd .kicker{font-size:10.5px;letter-spacing:.22em;color:var(--gold-text);margin-bottom:10px;text-transform:uppercase}
.sfc-hd .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.5)}
.sfc-hd .meta b{color:rgba(255,255,255,.86);font-weight:500}
.sfc-hd .meta .dot{width:3px;height:3px;background:rgba(255,255,255,.26);border-radius:50%}
.sfc-free{font-size:10.5px;letter-spacing:.14em;color:#f2e2c4;border:1px solid rgba(176,141,87,.55);
  padding:3px 10px;background:rgba(176,141,87,.14)}

.sfc-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:30px;align-items:start}
.sfc-player{background:#000;border:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative}
.sfc-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.sfc-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.sfc-player .audio-wrap{padding:44px 30px;display:flex;flex-direction:column;align-items:center;gap:20px;
  background:linear-gradient(155deg,#1b2d3f,#0b1520)}
.sfc-player .audio-wrap img,.sfc-player .audio-wrap .aph{width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(176,141,87,.38)}
.sfc-player .audio-wrap .aph{display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-size:36px;color:var(--gold);background:rgba(255,255,255,.04)}
.sfc-player .audio-wrap audio{width:100%;max-width:520px}
.sfc-player .ext{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;text-align:center;color:rgba(255,255,255,.66);font-size:13px;
  background:radial-gradient(600px 300px at 50% 20%,rgba(176,141,87,.16),transparent 70%),linear-gradient(160deg,#182a3c,#0a1420)}
.sfc-player .ext .big{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.32);font-size:18px;color:#fff;background:rgba(255,255,255,.05)}
.sfc-player .ext p{margin:0;letter-spacing:.04em}
.sfc-player .ext a{color:var(--on-gold);background:var(--gold-solid);padding:9px 22px;font-size:12.5px;letter-spacing:.06em}
@media (hover:hover) and (pointer:fine){
.sfc-player .ext a:hover{background:#c39d64}}


.sfc-toc{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035);backdrop-filter:blur(4px)}
.sfc-toc .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.06em}
.sfc-toc .hd b{font-weight:500;color:#fff;font-size:12.5px}
.sfc-toc .list{max-height:392px;overflow:auto;padding:8px}
.sfc-toc .list::-webkit-scrollbar{width:4px}
.sfc-toc .list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.sfc-toc a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:6px;font-size:12.5px;
  color:rgba(255,255,255,.62);line-height:1.5;transition:.15s}
@media (hover:hover) and (pointer:fine){
.sfc-toc a:hover{background:rgba(255,255,255,.06);color:#fff}}

.sfc-toc a.on{background:rgba(176,141,87,.16);color:#fff}
.sfc-toc a .n{flex:none;width:20px;font-size:10.5px;color:rgba(255,255,255,.34);font-variant-numeric:tabular-nums}
.sfc-toc a.on .n{color:var(--gold)}
.sfc-toc a .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfc-toc a .d{flex:none;font-size:10px;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums}
.sfc-toc a.on .d{color:rgba(255,255,255,.55)}
.sfc-toc .play-ico{flex:none;font-size:8px;color:rgba(255,255,255,.28)}
.sfc-toc a.on .play-ico{color:var(--gold)}

.sfc-body{padding:56px 0 0}
.sfc-info{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.sfc-info h2{font-family:"Noto Serif SC","Songti SC",serif;font-weight:500;font-size:19px;letter-spacing:.04em;
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(18,32,46,.1)}
.sfc-prose{font-size:14px;line-height:2.05;color:#3f4a57}
.sfc-prose p{margin:0 0 1.2em}
.sfc-prose>:first-child{margin-top:0}
.sfc-teacher{border:1px solid rgba(18,32,46,.1);padding:22px 22px 20px;background:#fbfaf7}
.sfc-teacher .hd{font-size:10.5px;letter-spacing:.2em;color:var(--gold-deep);margin-bottom:12px}
.sfc-teacher .nm{font-family:"Noto Serif SC",serif;font-size:19px;color:var(--ink);margin-bottom:4px}
.sfc-teacher .rl{font-size:12px;color:var(--s-meta)}
.sfc-teacher .ln{height:1px;background:rgba(18,32,46,.1);margin:16px 0}
.sfc-teacher .kv{display:flex;justify-content:space-between;font-size:12px;color:var(--s-meta);padding:5px 0}
.sfc-teacher .kv b{color:var(--ink);font-weight:500}

@media(max-width:1000px){
  .sfc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sfc-layout,.sfc-info{grid-template-columns:1fr;gap:26px}
  .sfc-toc .list{max-height:none}}
@media(max-width:620px){
  .sfc-grid{grid-template-columns:1fr}
  .sfc-hero{padding:24px 0 40px}
  .sfc-hd{margin:14px 0 20px}}

/* 课程筛选胶囊 */
.sf-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.sf-chip{font-size:12.5px;color:#5f6b7a;padding:7px 16px;border:1px solid rgba(18,32,46,.14);
  transition:.18s;letter-spacing:.02em;background:#fff}
@media (hover:hover) and (pointer:fine){
.sf-chip:hover{border-color:rgba(176,141,87,.6);color:var(--gold-deep)}}

.sf-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.sf-wall{position:relative;aspect-ratio:16/9;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:36px 30px;gap:12px;
  background:linear-gradient(160deg,rgba(18,32,46,.96),rgba(11,20,30,.98))}
.sf-wall .lk{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(176,141,87,.45);color:var(--gold);background:rgba(176,141,87,.1)}
.sf-wall h3{margin:0;font-family:'Noto Serif SC',serif;font-size:19px;color:#fff;font-weight:600;letter-spacing:.02em}
.sf-wall p{margin:0;max-width:460px;font-size:13px;line-height:1.95;color:rgba(255,255,255,.6)}
.sf-wall p b{color:var(--gold-text);font-weight:600}
.sf-wall .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.sf-wall .hint{font-size:11.5px;color:rgba(255,255,255,.35);letter-spacing:.06em}
.sf-wall.light{aspect-ratio:auto;min-height:0;background:#fafbfc;border:1px dashed rgba(18,32,46,.16);border-radius:4px;
  padding:52px 34px;margin:8px 0 0}
.sf-wall.light h3{color:var(--ink)}
.sf-wall.light p{color:#5d6875}
.sf-wall.light .lk{border-color:var(--gold-22);color:var(--gold-deep);background:var(--gold-06,#fbf6e8)}
.sf-wall .excerpt{margin-top:8px;max-width:560px;font-size:13px;line-height:1.95;color:var(--s-meta);
  padding:16px 20px;border-left:2px solid rgba(18,32,46,.12);text-align:left}

.sf-rich{font-size:15px;line-height:1.9;color:#2b3743}
.sf-rich img{max-width:100%;height:auto;border-radius:2px}
.sf-rich table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px}
.sf-rich th,.sf-rich td{border:1px solid rgba(18,32,46,.12);padding:9px 12px;text-align:left;vertical-align:top}
.sf-rich th{background:#f7f8fa;font-weight:600}
.sf-rich h1,.sf-rich h2,.sf-rich h3{font-family:'Noto Serif SC',serif;line-height:1.5;margin:28px 0 12px;color:var(--ink)}
.sf-rich ul,.sf-rich ol{padding-left:1.4em;margin:14px 0}
.sf-rich li{margin:6px 0}
.sf-rich p{margin:0 0 14px}
.sf-rich blockquote{margin:18px 0;padding:10px 18px;border-left:3px solid var(--gold-22);background:#fafbfc;color:#5d6875}

.sf-series-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--s-meta);
  padding:10px 14px;background:#f7f8fa;border-left:2px solid var(--gold);margin-bottom:28px}
.sf-series-bar a{color:var(--gold-deep);border-bottom:1px solid var(--gold-22)}

/* ---------- 前台登录 / 注册 ---------- */
.sf-auth{padding-top:64px;padding-bottom:96px}
.sf-auth-grid{display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:start}
.sf-auth-intro .kicker{font-size:10.5px;letter-spacing:.3em;color:var(--gold-text);text-transform:uppercase;margin-bottom:18px}
.sf-auth-intro h1{font-family:'Noto Serif SC',serif;font-size:38px;line-height:1.42;color:var(--ink);margin:0 0 20px;font-weight:600}
.sf-auth-intro p{font-size:14px;line-height:2;color:#5d6875;margin:0 0 26px;max-width:520px}
.sf-auth-intro ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;max-width:540px}
.sf-auth-intro li{font-size:13.5px;line-height:1.9;color:#5d6875;padding-left:16px;border-left:2px solid rgba(18,32,46,.1)}
.sf-auth-intro li b{color:var(--ink)}
.sf-auth-card{border:1px solid rgba(18,32,46,.12);background:#fff;padding:28px 28px 30px}
.sf-auth-card .tabs{display:flex;gap:26px;border-bottom:1px solid rgba(18,32,46,.1);margin-bottom:22px}
.sf-auth-card .tabs a{font-size:14px;padding:0 0 12px;color:var(--s-meta);border-bottom:2px solid transparent;margin-bottom:-1px}
.sf-auth-card .tabs a.on{color:var(--ink);border-bottom-color:var(--gold)}
.sf-auth-card label{display:block;font-size:12px;color:var(--s-meta);margin:14px 0 6px;letter-spacing:.04em}
.sf-auth-card input[type=text],.sf-auth-card input[type=password]{width:100%;height:42px;padding:0 13px;font-size:14px;
  border:1px solid rgba(18,32,46,.16);border-radius:3px;background:#fff;color:var(--ink);outline:none;transition:.15s}
.sf-auth-card input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-06,#fbf6e8)}
.sf-auth-card .remember{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--s-meta)}
.sf-auth-card .tip{font-size:11.5px;line-height:1.8;color:var(--s-meta);margin-top:14px}
.sf-auth-card .msg{font-size:12.5px;line-height:1.7;padding:10px 12px;border-radius:3px;margin-bottom:4px}
.sf-auth-card .msg.err{background:#fdf2f2;color:#a33;border:1px solid #f3d6d6}

/* ---------- 会员中心 ---------- */
.mec-hd{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.mec-hd .av{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-solid),var(--gold-hover));color:var(--on-gold);font-size:21px;font-family:'Noto Serif SC',serif}
.mec-hd .who{flex:1;min-width:200px}
.mec-hd h1{margin:0;font-family:'Noto Serif SC',serif;font-size:26px;color:#fff;font-weight:600}
.mec-hd .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:rgba(255,255,255,.5)}
.mec-hd .meta .bd{color:var(--gold-text);border:1px solid rgba(176,141,87,.4);padding:1px 9px;border-radius:999px;font-size:11px}
.mec-hd .ops{display:flex;gap:10px;align-items:center;flex:none}
.mec-msg{margin-bottom:22px;padding:11px 15px;font-size:12.5px;border-radius:3px}
.mec-msg.ok{background:#f1f8f1;color:#2f6b3a;border:1px solid #d6e8d8}
.mec-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.mec-sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.mec-sec-hd h2{margin:0;font-family:'Noto Serif SC',serif;font-size:20px;color:var(--ink);font-weight:600}
.mec-sec-hd a{font-size:12.5px;color:var(--gold-deep)}
.mec-side{display:flex;flex-direction:column;gap:18px}
.mec-card{border:1px solid rgba(18,32,46,.1);padding:20px 22px;background:#fff}
.mec-card h3{margin:0 0 14px;font-size:13px;letter-spacing:.04em;color:var(--ink);font-weight:600}
.mec-card .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;color:var(--s-meta)}
.mec-card .kv b{color:var(--ink);font-weight:600}
.mec-card .hint{margin-top:12px;font-size:11.5px;line-height:1.9;color:var(--s-meta);padding-top:12px;border-top:1px solid rgba(18,32,46,.08)}
.mec-card label{display:block;font-size:11.5px;color:var(--s-meta);margin:10px 0 5px}
.mec-card input{width:100%;height:36px;padding:0 11px;font-size:13px;border:1px solid rgba(18,32,46,.16);border-radius:3px;outline:none}
.mec-card input:focus{border-color:var(--gold)}
.mec-card .msg.err{font-size:12px;color:#a33;background:#fdf2f2;padding:8px 10px;border-radius:3px}
.srs-article .sf-prose{font-size:15.5px;line-height:2.05}

@media (max-width:1024px){
  .sf-auth-grid{grid-template-columns:1fr;gap:36px}
  .mec-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){
  /* 权限墙在窄屏改为自适应高度，避免 16:9 盒子挤压文字 */
  .sf-wall{aspect-ratio:auto;min-height:320px;padding:26px 18px;gap:10px}
  .sf-wall h3{font-size:16px}
  .sf-wall p{font-size:12.5px;line-height:1.85}
  .sf-auth-intro h1{font-size:27px}
  .sf-wall{padding:26px 18px}
  .sf-wall h3{font-size:16px}
  .mec-hd .ops{width:100%}}

/* 会员中心的卡片密度（主列较窄，两列更易读） */
.mec-main .sfc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .mec-main .sfc-grid{grid-template-columns:1fr}}

/* 导航项增多后的自适应：中等宽度收紧间距，避免菜单折成两行 */
.sf-nav nav>a,.sf-nav .nav-drop>a{white-space:nowrap}
@media (max-width:1280px){
  .sf-nav .sf-wrap{gap:18px}
  .sf-nav nav>a,.sf-nav .nav-drop>a{padding:9px 11px;font-size:13px;letter-spacing:.03em}
  .sf-nav nav>a:after,.sf-nav .nav-drop>a:after{left:11px;right:11px}
  .sf-nav .sf-cta{padding:0 14px}}
@media (max-width:1120px){
  .sf-nav nav>a,.sf-nav .nav-drop>a{padding:9px 7px;font-size:12.5px;letter-spacing:0}
  .sf-nav nav>a:after,.sf-nav .nav-drop>a:after{left:7px;right:7px}}

/* ============================================================
   官网 · 图片位（未设置时自动回落到原有装饰风格）
   ============================================================ */
/* 导航 / 页脚 Logo */
.sf-brand .brand-logo{height:40px;width:auto;max-width:230px;object-fit:contain;object-position:left center;display:block}
.sf-foot-brand .brand-logo{height:36px;width:auto;max-width:200px;object-fit:contain;object-position:left center;display:block}
@media (max-width:640px){
  .sf-brand .brand-logo{height:32px;max-width:170px}}

/* 栏目页头图 */
.site-body[data-banner] .sf-ph{background-image:var(--sf-banner);background-size:cover;background-position:center 42%}
.site-body[data-banner] .sf-ph:before{background:linear-gradient(100deg,rgba(9,17,26,.93) 0%,rgba(9,17,26,.8) 46%,rgba(9,17,26,.54) 100%)}
.site-body[data-banner] .sf-ph:after{opacity:.22}

/* 首页首屏背景 */
.sf-hero[data-bg]{background-image:var(--hero-bg);background-size:cover;background-position:center}
.sf-hero[data-bg]:before{background:linear-gradient(105deg,rgba(8,15,23,.95) 0%,rgba(8,15,23,.86) 46%,rgba(8,15,23,.58) 100%)}

/* 首页首屏主图 */
.sf-hero-art.has-img img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:cover;object-position:center 22%;display:block}
.sf-hero-art.has-img .since{bottom:-26px}

/* 首页律所形象图 */
.sf-about-visual.has-img{background:#0c1722}
.sf-about-visual.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sf-about-visual.has-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,17,26,.05) 40%,rgba(9,17,26,.7) 100%)}
.sf-about-visual.has-img .vslogan,.sf-about-visual.has-img .cap{z-index:3}
.sf-about-visual.has-img .vslogan{color:rgba(255,255,255,.72);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.sf-about-visual.has-img .cap{color:rgba(255,255,255,.62);letter-spacing:.24em}

/* 律师头像：列表卡 */
.sf-lawyer .ph img.ava{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.sf-lawyer .ph:has(img.ava):after{inset:0;border:0;background:linear-gradient(180deg,transparent 58%,rgba(9,17,26,.62) 100%);z-index:1}
.sf-lawyer .ph .tag{z-index:2}

/* 律师头像：个人页 */
.sf-ava{position:relative;width:112px;height:132px;border:1px solid rgba(176,141,87,.32);overflow:hidden;background:linear-gradient(155deg,#1c2f43,#0c1722);flex:none}
.sf-ava img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
.sf-ava.empty{display:grid;place-items:center;color:var(--gold);font-family:"Noto Serif SC","Songti SC",serif;font-size:46px}

/* 视频课程封面、专栏封面、文章头图在窄屏下保持比例 */
@media (max-width:760px){
  .sf-profile-hd{grid-template-columns:92px 1fr;gap:20px}
  .sf-ava{width:92px;height:112px}
  .sf-hero-art{max-width:280px;margin:0 auto}}
/* 文章列表缩略图 */
.sf-post .th{flex:none;width:196px;height:118px;background-size:cover;background-position:center;
  border:1px solid rgba(18,32,46,.08);filter:grayscale(.15) contrast(1.02);transition:.25s}
@media (hover:hover) and (pointer:fine){
.sf-post:hover .th{filter:none;border-color:rgba(176,141,87,.4)}}

@media (max-width:820px){.sf-post .th{display:none}}

/* 导航 Logo 尺寸（横版字标在 44px 高度下最协调） */
.sf-brand .brand-logo{height:44px;max-width:250px}
@media (max-width:640px){.sf-brand .brand-logo{height:36px;max-width:190px}}

/* 首页领域卡：说明文字统一两行，保持卡片等高 */
.sf-areas.compact .sf-area{align-items:flex-start}
.sf-areas.compact .sf-area p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   加固播放器（视频防盗）：自绘控制条 + 动态水印
   ============================================================ */
.vpl{position:relative;background:#000;overflow:hidden;outline:none;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.vpl video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
.vpl audio{display:none}
/* 防盗：禁止选中 / 拖拽 / 长按唤出菜单（移动端保存视频的主要入口） */
.vpl video,.vpl audio,.vpl img,.vpl-embed iframe{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-user-drag:none;-webkit-touch-callout:none}
/* 遮挡层：盖在视频画面之上、控制条之下，右键与长按都落在这层普通 div 上 */
.vpl-shield{position:absolute;inset:0;z-index:2;background:transparent;-webkit-touch-callout:none}
.vpl:focus-visible{box-shadow:inset 0 0 0 2px rgba(176,141,87,.6)}
.vpl-empty{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(150deg,#182a3c,#0a1420);color:rgba(255,255,255,.5);text-align:center;padding:24px}
.vpl-empty b{color:rgba(255,255,255,.86);font-weight:500;font-size:14px}
.vpl-empty span{font-size:12px;line-height:1.8;max-width:34em}

/* 水印层 */
.vpl-wm{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:grid;grid-template-columns:1fr 1fr;align-content:space-around;justify-items:center;
  padding:5% 3%;overflow:hidden;mix-blend-mode:screen}
.vpl-wm span{font-size:clamp(9px,1.05vw,12px);letter-spacing:.06em;color:#fff;white-space:nowrap;
  transform:rotate(-17deg);transform-origin:center;font-family:ui-sans-serif,system-ui,-apple-system,"PingFang SC",sans-serif}

/* 中央播放键 */
.vpl-big{position:absolute;inset:0;z-index:4;display:grid;place-items:center;border:0;background:none;
  cursor:pointer;transition:opacity .22s,transform .22s}
.vpl-big-ic{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,18,26,.5);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(4px);
  transition:.2s;position:relative}
.vpl-big-ic:before{content:"";display:block;width:0;height:0;margin-left:4px;
  border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
@media (hover:hover) and (pointer:fine){
.vpl-big:hover .vpl-big-ic{background:var(--gold);border-color:var(--gold);transform:scale(1.05)}
.vpl-big:hover .vpl-big-ic:before{border-left-color:#0c1722}}

.vpl.is-playing .vpl-big{opacity:0;pointer-events:none;transform:scale(.96)}

/* 加载 / 错误 */
.vpl-load{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.vpl-load i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  border-top-color:var(--gold);animation:vplspin .8s linear infinite}
.vpl-err{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;background:rgba(8,14,20,.86);color:rgba(255,255,255,.62);text-align:center;padding:20px}
.vpl-err b{color:#fff;font-weight:500;font-size:13.5px;letter-spacing:.04em}
.vpl-err span{font-size:12px;line-height:1.75;max-width:32em}
.vpl-retry{margin-top:4px;padding:6px 16px;font-size:12px;color:var(--on-gold);background:var(--gold-solid);border:0;cursor:pointer}
@media (hover:hover) and (pointer:fine){
.vpl-retry:hover{background:#c39d64}}


/* 控制条 */
.vpl-bar{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:26px 14px 10px;
  background:linear-gradient(to top,rgba(6,12,18,.94),rgba(6,12,18,.6) 46%,transparent);
  transition:opacity .22s,transform .22s;opacity:1}
.vpl-hide .vpl-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.vpl-hide{cursor:none}
.vpl-prog{position:relative;height:14px;cursor:pointer;touch-action:none}
.vpl-prog:before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  background:rgba(255,255,255,.22);border-radius:2px;transition:height .15s,margin .15s}
@media (hover:hover) and (pointer:fine){
.vpl:hover .vpl-prog:before{height:5px;margin-top:-2.5px}}

.vpl-buf,.vpl-cur{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;pointer-events:none;transition:height .15s,margin .15s}
.vpl-buf{background:rgba(255,255,255,.32);width:0}
.vpl-cur{background:var(--gold);width:0}
@media (hover:hover) and (pointer:fine){
.vpl:hover .vpl-buf,.vpl:hover .vpl-cur{height:5px;margin-top:-2.5px}}

.vpl-knob{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px var(--gold-22);opacity:0;pointer-events:none;transition:opacity .15s}
@media (hover:hover) and (pointer:fine){
.vpl:hover .vpl-knob,.vpl-prog:focus-visible .vpl-knob{opacity:1}}


.vpl-row{display:flex;align-items:center;gap:6px;margin-top:2px;color:#fff}
.vpl-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;height:30px;min-width:30px;padding:0 5px;
  border:0;background:none;color:rgba(255,255,255,.9);cursor:pointer;border-radius:4px;transition:.15s}
@media (hover:hover) and (pointer:fine){
.vpl-btn:hover{color:var(--gold);background:rgba(255,255,255,.08)}}

.vpl-btn .ic-pause,.vpl-btn .ic-mute,.vpl-btn .ic-exit{display:none}
.vpl.is-playing [data-play] .ic-pause{display:block}
.vpl.is-playing [data-play] .ic-play{display:none}
.vpl.is-muted [data-mute] .ic-mute{display:block}
.vpl.is-muted [data-mute] .ic-vol{display:none}
.vpl.is-fs [data-full] .ic-exit{display:block}
.vpl.is-fs [data-full] .ic-full{display:none}
.vpl-time{font-size:11.5px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  padding:0 4px;white-space:nowrap}
.vpl-time b{font-weight:400;color:#fff}
.vpl-time i{font-style:normal;opacity:.4;margin:0 3px}
.vpl-flex{flex:1;min-width:0}
.vpl-vol{display:flex;align-items:center;gap:0}
.vpl-vol-track{width:0;overflow:hidden;transition:width .2s;display:flex;align-items:center}
@media (hover:hover) and (pointer:fine){
.vpl-vol:hover .vpl-vol-track{width:66px}}

.vpl-vol-track input{width:60px;height:3px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.28);
  border-radius:2px;outline:none;margin:0 3px;cursor:pointer}
.vpl-vol-track input::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:#fff}
.vpl-vol-track input::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:#fff}
.vpl-rate{font-size:11.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;min-width:38px}
.vpl-safe{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.04em;
  color:var(--gold);border:1px solid var(--gold-22);padding:2px 7px;border-radius:20px;
  background:var(--gold-06);white-space:nowrap;cursor:default}

/* 音频模式 */
.vpl.is-audio{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(600px 320px at 50% 18%,var(--gold-22),transparent 70%),linear-gradient(155deg,#1b2d3f,#0a1420)}
.vpl.is-audio .vpl-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.vpl.is-audio .vpl-art img,.vpl.is-audio .vpl-art>span{width:112px;height:112px;border-radius:50%;object-fit:cover;
  border:1px solid var(--gold-22);box-shadow:0 14px 40px -18px rgba(0,0,0,.8);
  display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-size:38px;color:var(--gold);background:rgba(255,255,255,.04)}
.vpl-eq{display:none;align-items:flex-end;gap:3px;height:16px}
.vpl.is-playing .vpl-eq{display:flex}
.vpl-eq b{width:3px;background:var(--gold);animation:vpleq .9s ease-in-out infinite;opacity:.8}
.vpl-eq b:nth-child(1){height:6px;animation-delay:0s}
.vpl-eq b:nth-child(2){height:14px;animation-delay:.15s}
.vpl-eq b:nth-child(3){height:9px;animation-delay:.3s}
.vpl-eq b:nth-child(4){height:12px;animation-delay:.45s}
.vpl.is-audio .vpl-big-ic{width:56px;height:56px}
.vpl.is-audio .vpl-safe{display:none}

/* 全屏 */
.vpl.is-fs{width:100%;height:100%;display:flex;align-items:center;justify-content:center;aspect-ratio:auto}
.vpl.is-fs video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}

/* 站外嵌入播放器 */
.vpl-embed{position:relative;aspect-ratio:16/9;background:#000}
.vpl-embed iframe{display:block;width:100%;height:100%;border:0}
.vpl-embed .tag{position:absolute;left:10px;bottom:10px;z-index:2;font-size:10px;letter-spacing:.08em;
  color:rgba(255,255,255,.72);background:rgba(8,14,20,.62);border:1px solid rgba(255,255,255,.16);
  padding:2px 8px;backdrop-filter:blur(4px);pointer-events:none}

/* 站外链接卡片（不跳走，新窗口打开） */
.vpl-ext{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;color:rgba(255,255,255,.66);font-size:13px;padding:26px;
  background:radial-gradient(600px 300px at 50% 16%,rgba(176,141,87,.16),transparent 70%),linear-gradient(160deg,#182a3c,#0a1420)}
.vpl-ext .ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05)}
.vpl-ext b{color:#fff;font-weight:500;font-size:14.5px;letter-spacing:.03em}
.vpl-ext .host{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.16);padding:2px 10px;border-radius:20px}
.vpl-ext .go{display:inline-flex;align-items:center;gap:6px;color:var(--on-gold);background:var(--gold-solid);
  padding:9px 22px;font-size:12.5px;letter-spacing:.06em;border:0;cursor:pointer;transition:.18s}
@media (hover:hover) and (pointer:fine){
.vpl-ext .go:hover{background:#c39d64}}

.vpl-ext small{font-size:11px;color:rgba(255,255,255,.35);line-height:1.8}
.vpl-ext .warn{font-size:11.5px;color:#e8c893;line-height:1.7;max-width:34em}

@media (max-width:640px){
  .vpl-safe{display:none}
  .vpl-bar{padding:20px 10px 8px}
  .vpl-big-ic{width:54px;height:54px}
  .vpl-big-ic:before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
  .vpl-time{font-size:10.5px}
  .vpl-vol-track{display:none}
  .vpl-wm span{font-size:9px}}

/* 播放器下方保护说明 */
.sfc-guard{display:flex;align-items:flex-start;gap:7px;margin-top:11px;font-size:11px;line-height:1.85;
  color:rgba(255,255,255,.36);letter-spacing:.02em}
.sfc-guard svg{flex:none;margin-top:3px;color:var(--gold)}

/* hidden 属性优先于 flex/grid 布局 */
.vpl-err[hidden],.vpl-load[hidden]{display:none!important}
.rd-wrap{max-width:1000px;margin:0 auto;padding:0 32px}
.rd-preview{background:var(--gold-solid);color:var(--on-gold);padding:9px 0;font-size:12.5px;text-align:center;letter-spacing:.04em}
.rd-preview a{color:inherit;border-bottom:1px solid rgba(12,23,34,.4)}

/* 阅读进度：贴在导航下沿 */
.rd-progress{position:fixed;left:0;right:0;top:74px;height:2px;z-index:59;pointer-events:none}
.rd-progress i{display:block;height:100%;width:0;background:var(--gold)}

/* ---- 标题区 ---- */
.rd-head{padding:52px 0 40px}
.rd-crumb{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#9aa4b0;letter-spacing:.05em}
.rd-crumb a{color:#8b96a3}
@media (hover:hover) and (pointer:fine){
.rd-crumb a:hover{color:var(--gold-deep)}}

.rd-crumb span{color:#cdd4dd}
.rd-crumb em{font-style:normal;color:#8b96a3}
.rd-head h1{
  font-family:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC",serif;
  font-weight:600;font-size:clamp(29px,3.5vw,43px);line-height:1.34;letter-spacing:.005em;
  color:#131d29;margin:20px 0 0;max-width:840px;text-wrap:balance;
}
.rd-lede{font-size:16.5px;line-height:1.95;color:#69747f;margin:20px 0 0;max-width:660px;letter-spacing:.008em}
.rd-meta{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:12.5px;color:#8d98a5;letter-spacing:.02em;flex-wrap:wrap}
.rd-meta time{font-variant-numeric:tabular-nums}
.rd-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Noto Serif SC","Songti SC",serif;font-size:15px;line-height:1;
  color:var(--gold-deep);background:var(--gold-soft);border:1px solid var(--gold-22);
}
.rd-name{font-size:13.5px;font-weight:500;color:#25313f;letter-spacing:.04em}
.rd-sep{display:inline-block;width:1px;height:11px;background:#dfe4ea;font-style:normal}

/* ---- 封面 ---- */
.rd-cover{margin:0}
.rd-cover img{display:block;width:100%;aspect-ratio:2.6/1;object-fit:cover;background:#eef0f2;filter:saturate(.92) contrast(1.02)}

/* ---- 正文 ---- */
.rd-body{padding:50px 0 96px}
.rd-grid{display:grid;grid-template-columns:minmax(0,680px) 200px;gap:56px;align-items:start}
.rd-grid.is-solo{grid-template-columns:minmax(0,680px)}
.rd-main{min-width:0}

.rd .sf-prose{
  font-family:"Noto Serif SC","Songti SC","STSong","Source Han Serif SC","SimSun",serif;
  font-size:17.5px;line-height:1.92;color:#28333f;letter-spacing:.012em;
}
.rd .sf-prose p{margin:0 0 1.15em}
/* 首段略大，作为进入正文的落点 */
.rd .sf-prose>p:first-child{font-size:18px;line-height:1.88;color:#1f2a36}
.rd .sf-prose>:first-child{margin-top:0}
.rd .sf-prose>:last-child{margin-bottom:0}
.rd .sf-prose strong,.rd .sf-prose b{color:#111b26;font-weight:600}
.rd .sf-prose h1,.rd .sf-prose h2,.rd .sf-prose h3,.rd .sf-prose h4{scroll-margin-top:96px}
.rd .sf-prose h2{
  font-size:23px;line-height:1.5;letter-spacing:.02em;font-weight:500;color:#111b26;
  margin:2.15em 0 .8em;padding:1.25em 0 0;border-top:1px solid #ece8df;
  position:static;
}
.rd .sf-prose h2:before{display:none}
.rd .sf-prose>h2:first-child,
.rd .sf-prose>h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.rd .sf-prose h3{font-size:18.5px;line-height:1.65;letter-spacing:.03em;color:#1b2634;margin:2em 0 .75em}
.rd .sf-prose blockquote{
  margin:2em 0;padding:2px 0 2px 24px;background:transparent;border-left:2px solid var(--gold);
  color:#495666;font-size:17.5px;line-height:1.95;letter-spacing:.01em;
}
.rd .sf-prose blockquote p:last-child{margin-bottom:0}
.rd .sf-prose ul,.rd .sf-prose ol{padding-left:1.35em;margin:0 0 1.2em}
.rd .sf-prose li{margin-bottom:.55em;padding-left:.15em}
.rd .sf-prose li::marker{color:var(--gold)}
.rd .sf-prose table{width:100%;border-collapse:collapse;margin:2em 0;font-size:15px;border:0}
.rd .sf-prose th{
  border:0;border-bottom:1.5px solid #1b2634;background:transparent;
  font-size:11.5px;letter-spacing:.1em;color:#5d6875;font-weight:500;padding:0 12px 10px;text-align:left;
}
.rd .sf-prose td{border:0;border-bottom:1px solid #eeeae1;padding:13px 12px;color:#2b3644}
.rd .sf-prose tr:last-child td{border-bottom:0}
.rd .sf-prose th:first-child,.rd .sf-prose td:first-child{padding-left:0}
.rd .sf-prose th:last-child,.rd .sf-prose td:last-child{padding-right:0}
.rd .sf-prose img{margin:2.2em 0}
.rd .sf-prose hr{border:0;border-top:1px solid #ece8df;margin:2.6em 0}

/* 专栏归属：一条安静的分隔线 */
.rd-series{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 40px;padding:14px 0;font-size:12.5px;color:#7d8896;
  border-top:1px solid #ece8df;border-bottom:1px solid #ece8df;
}
.rd-series .k{font-size:10.5px;letter-spacing:.18em;color:var(--gold-deep);padding-right:10px;border-right:1px solid #e3ded3}
.rd-series b{font-family:"Noto Serif SC",serif;font-size:13px;font-weight:500;color:#25313f;letter-spacing:.03em}
.rd-series .n{color:#a6afba;font-size:11.5px}
.rd-series .arrow{margin-left:auto;color:var(--gold);transition:transform .2s}
@media (hover:hover) and (pointer:fine){
.rd-series:hover b{color:var(--gold-deep)}
.rd-series:hover .arrow{transform:translateX(3px)}}


/* ---- 文末：作者 + 免责 + 延伸阅读 ---- */
.rd-foot{margin-top:64px;padding-top:34px;border-top:1px solid #ece8df}
.rd-byline{display:flex;align-items:center;gap:14px}
.rd-avatar.lg{width:46px;height:46px;font-size:19px}
.rd-byline .who{display:flex;flex-direction:column;gap:3px;min-width:0}
.rd-byline .lb{font-size:10.5px;letter-spacing:.2em;color:#a6afba}
.rd-byline b{font-family:"Noto Serif SC",serif;font-size:16px;font-weight:500;color:#1b2634;letter-spacing:.04em}
.rd-byline .org{font-size:11.5px;color:#8b96a3}
.rd-ask{
  margin-left:auto;flex:none;font-size:12.5px;color:var(--gold-deep);letter-spacing:.04em;
  padding-bottom:3px;border-bottom:1px solid var(--gold-22);
}
.rd-ask span{display:inline-block;transition:transform .2s}
@media (hover:hover) and (pointer:fine){
.rd-ask:hover span{transform:translateX(3px)}}

.rd-note{margin:22px 0 0;font-size:12px;line-height:1.9;color:#8b96a3;letter-spacing:.01em;max-width:620px}
.rd-note a{color:var(--gold-deep);border-bottom:1px solid var(--gold-22)}

.rd-rel{margin-top:58px}
.rd-rel-hd{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid #1b2634}
.rd-rel-hd h2{font-family:"Noto Serif SC",serif;font-size:14.5px;font-weight:500;letter-spacing:.16em;color:#1b2634;margin:0}
.rd-rel-hd span{font-size:9.5px;letter-spacing:.3em;color:#b6bec9}
.rd-rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.rd-rel-grid a{display:block;padding:18px 0;border-bottom:1px solid #efece5}
.rd-rel-grid .m{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:10.5px;letter-spacing:.1em;color:#a6afba}
.rd-rel-grid .m span{color:var(--gold)}
.rd-rel-grid h3{font-family:"Noto Serif SC",serif;font-size:16px;font-weight:500;line-height:1.65;color:#25313f;margin:0;letter-spacing:.01em;transition:color .2s}
@media (hover:hover) and (pointer:fine){
.rd-rel-grid a:hover h3{color:var(--gold-deep)}}


/* ---- 右栏目录 ---- */
.rd-rail{position:sticky;top:104px}
.rd-toc-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:10px;border-bottom:1px solid #ece8df;
  font-size:10.5px;letter-spacing:.2em;color:#25313f;
}
.rd-toc-hd span{font-size:9px;letter-spacing:.16em;color:#c3cbd5}
.rd-toc ol{list-style:none;margin:0;padding:12px 0 0}
.rd-toc li a{
  display:block;padding:6.5px 0 6.5px 12px;font-size:12.5px;line-height:1.7;color:#7f8b99;
  border-left:1px solid #ece8df;transition:color .18s,border-color .18s,background .18s;
}
.rd-toc li.lv2 a{padding-left:24px;font-size:12px;color:#a6afba}
@media (hover:hover) and (pointer:fine){
.rd-toc li a:hover{color:#25313f}}

.rd-toc li a.on{color:var(--gold-deep);border-left-color:var(--gold);background:linear-gradient(90deg,var(--gold-06),rgba(255,255,255,0) 72%)}
.rd-copy{
  display:flex;align-items:center;gap:7px;width:100%;margin-top:26px;padding:10px 0;
  background:none;border:0;border-top:1px solid #ece8df;
  font-family:inherit;font-size:11.5px;letter-spacing:.06em;color:#9aa4b0;cursor:pointer;transition:color .2s;
}
@media (hover:hover) and (pointer:fine){
.rd-copy:hover,.rd-copy.on{color:var(--gold-deep)}}


@media (max-width:1040px){
  .rd-grid,.rd-grid.is-solo{grid-template-columns:minmax(0,1fr);gap:0}
  .rd-cover img{aspect-ratio:16/9}
  .rd-rail{display:none}
  .rd-head h1{max-width:none}}
@media (max-width:760px){
  .rd-wrap{padding:0 20px}
  .rd-head{padding:32px 0 26px}
  .rd-head h1{font-size:26px;line-height:1.4;margin-top:14px;letter-spacing:0}
  .rd-lede{font-size:15px;line-height:1.85;margin-top:14px}
  .rd-meta{margin-top:22px;gap:9px;font-size:11.5px}
  .rd-avatar{width:30px;height:30px;font-size:13px}
  .rd-cover .rd-wrap{padding:0}
  .rd-cover img{aspect-ratio:4/3}
  .rd-body{padding:32px 0 62px}
  .rd .sf-prose{font-size:16.5px;line-height:1.92;letter-spacing:.008em}
  .rd .sf-prose h2{font-size:20px;margin-top:2.2em;padding-top:1.3em}
  .rd .sf-prose blockquote{font-size:16px;padding-left:18px}
  .rd-rel-grid{grid-template-columns:1fr;gap:0}
  .rd-foot{margin-top:46px}
  .rd-byline{flex-wrap:wrap;gap:12px}
  .rd-ask{margin-left:0}}

/* 付费墙在阅读页里的形态：与正文同为纸面，不用虚线框 */
.rd .sf-wall.light{
  aspect-ratio:auto;min-height:0;padding:56px 44px;margin:0;
  background:#f6f4ed;border:1px solid #e8e3d8;border-radius:0;box-shadow:none;
}
.rd .sf-wall.light h3{font-size:20px;letter-spacing:.04em;color:#1b2634}
.rd .sf-wall.light p{font-size:13px;line-height:1.9;color:#6b7684;max-width:440px}
.rd .sf-wall.light .lk{border-color:var(--gold-22);color:var(--gold-deep);background:#fff}
.rd .sf-wall.light .excerpt{max-width:520px;color:#93a0ae;border-top:1px solid #e8e3d8;padding-top:16px;margin-top:16px}
.rd .sf-wall.light .sf-btn.gold{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){
.rd .sf-wall.light .sf-btn.gold:hover{background:var(--ink-3)}}

.rd .sf-wall.light .sf-btn.out{border-color:#d8d3c6;color:#25313f}
@media (hover:hover) and (pointer:fine){
.rd .sf-wall.light .sf-btn.out:hover{background:#fff;border-color:#b9b3a4}}

@media (max-width:760px){
  .rd .sf-wall.light{padding:38px 22px}}

/* 登录方式切换：会员卡内双选 / 后台登录页顶部两个页签 */
.sf-seg{display:flex;margin:0 0 4px;border:1px solid rgba(18,32,46,.14);border-radius:3px;overflow:hidden}
.sf-seg button{flex:1;height:36px;border:0;background:#fff;font-size:12.5px;color:var(--s-meta);cursor:pointer;
  font-family:inherit;transition:.15s}
.sf-seg button + button{border-left:1px solid rgba(18,32,46,.1)}
.sf-seg button.on{background:var(--gold-06,#fbf6e8);color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- 基础 */
.site-body{
  background:var(--s-bg);color:var(--s-body);
  font-family:var(--s-font-sans);font-size:15px;line-height:1.85;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.site-body ::selection{background:var(--s-accent-soft);color:var(--s-ink)}
.sf-serif{font-family:var(--s-font-serif)}
/* 版心：全站唯一。超宽屏不再二次加宽——同一页在 1440、1920、2560 上版心一致，
   配图靠自身的宽高比撑开，行宽靠阅读列收口（见 :root 的 --sf-* 变量）。 */
.sf-wrap{max-width:var(--sf-max);margin:0 auto;padding:0 var(--sf-pad)}
.site-body h1,.site-body h2,.site-body h3,.site-body h4{color:var(--s-ink)}

/* ---------------------------------------------------------------- 顶部导航 */
.sf-nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--s-line);
  transition:background .3s,box-shadow .3s;
}
/* 导航与正文共用同一个 .sf-wrap（1240 − 40×2 = 1160），
   所以「品牌左边缘 = 正文左边缘 = 图片左边缘」，右侧 CTA 也必须收在 1160 内。
   2026-11 修：此前 9 个菜单项 + 品牌 + CTA 合计 1255px，超过内容区 95px，
   而压缩规则只写了 1181–1400，1440/1920 上 CTA 会顶到版心之外（截图里导航比正文宽）。
   现在默认值按 1160 预算：品牌 210 + 菜单 753 + CTA 125 + 两处 gap 48 = 1136，留 24px 余量。 */
.sf-nav .sf-wrap{display:flex;align-items:center;gap:24px;height:76px;min-width:0}
.sf-brand{display:flex;align-items:center;gap:12px;flex:none}
.sf-brand .seal{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--s-line);color:var(--s-accent-text);background:var(--s-paper);
  font-family:var(--s-font-serif);font-size:18px;letter-spacing:0;
}
.sf-brand b{
  display:block;color:var(--s-ink);font-family:var(--s-font-serif);
  font-size:17.5px;letter-spacing:.12em;line-height:1.25;font-weight:600;
}
.sf-brand span{display:block;color:var(--s-meta);font-size:9.5px;letter-spacing:.24em;margin-top:4px;text-transform:uppercase}
.sf-brand .brand-logo{max-height:42px;width:auto;display:block}

.sf-nav nav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0}
.sf-nav nav>a,.sf-nav .nav-drop>a{
  position:relative;padding:10px 12px;font-size:13.5px;color:#3f4a58;
  letter-spacing:.04em;white-space:nowrap;transition:color .2s;
}
.sf-nav nav>a:not(.mbr-link):after,.sf-nav .nav-drop>a:after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
  background:var(--s-accent);transform:scaleX(0);transform-origin:left;transition:transform .26s;
}
@media (hover:hover) and (pointer:fine){
.sf-nav nav>a:hover,.sf-nav .nav-drop>a:hover{color:var(--s-ink)}
.sf-nav nav>a:hover:after,.sf-nav .nav-drop>a:hover:after{transform:scaleX(1)}}

.sf-nav nav>a.on,.sf-nav .nav-drop>a.on{color:var(--s-ink);font-weight:600}
.sf-nav nav>a.on:after,.sf-nav .nav-drop>a.on:after{transform:scaleX(1)}

/* 登录 / 会员中心：导航里唯一的「次级按钮」。
   原来是一行 13px 灰字（#8b95a2），夹在 9 个导航项中间几乎看不见。
   现在做成暖纸底 + 深墨字的描边按钮：比正文重、比「预约咨询」轻，
   主次一眼分得清，也不会跟主 CTA 抢注意力。 */
.sf-nav nav .mbr-link{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 15px;margin-left:4px;
  border:1px solid #ddd8ce;border-radius:var(--s-r);background:var(--s-paper);
  color:var(--s-ink);font-size:12.5px;font-weight:500;letter-spacing:.06em;
  transition:border-color .2s,color .2s,background .2s;
}
@media (hover:hover) and (pointer:fine){
.sf-nav nav .mbr-link:hover{
  border-color:var(--s-accent);color:var(--s-accent-text);background:var(--s-accent-soft);
}}


.sf-nav .sf-cta{
  flex:none;margin-left:10px;height:40px;padding:0 18px;display:inline-flex;align-items:center;gap:7px;
  background:var(--s-accent-solid);color:var(--s-on-accent);border:1px solid var(--s-accent-solid);
  font-size:13px;letter-spacing:.08em;border-radius:var(--s-r);transition:.2s;
}
@media (hover:hover) and (pointer:fine){
.sf-nav .sf-cta:hover{background:var(--s-accent-hover);border-color:var(--s-accent-hover);color:var(--s-on-accent-hover)}}


/* 1181–1239：版心还在被视口压着（vw−80 < 1160），按桌面间距会顶出约 35px。
   这一段只压缩导航自身的间距，版心不动——左右边界永远由 .sf-wrap 说了算。
   （1240 以上视口时内容区满 1160，默认值已够，不再需要额外压缩。） */
@media(min-width:1181px) and (max-width:1239px){
  .sf-nav .sf-wrap{gap:16px}
  .sf-nav nav>a,.sf-nav .nav-drop>a{padding:9px 9px;font-size:13px}
  .sf-nav nav>a:after,.sf-nav .nav-drop>a:after{left:9px;right:9px}
  .sf-nav .sf-cta{padding:0 14px;margin-left:6px;font-size:12.5px}
}
.sf-burger{
  display:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--s-line);
  background:#fff;color:var(--s-ink);align-items:center;justify-content:center;
  gap:4px;flex-direction:column;cursor:pointer;border-radius:var(--s-r);
}
.sf-burger i{display:block;width:16px;height:1.5px;background:currentColor;transition:.2s}

/* 下拉菜单 */
.nav-drop{position:relative}
.nav-drop>.nav-drop-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--s-line);box-shadow:0 24px 50px -26px rgba(21,28,36,.3);
  padding:8px;min-width:190px;display:none;flex-direction:column;gap:1px;z-index:70;
  opacity:0;transition:.2s;border-radius:var(--s-r);
}
@media (hover:hover) and (pointer:fine){
.nav-drop:hover>.nav-drop-menu{display:flex;opacity:1;transform:translateX(-50%)}}

.nav-drop-menu a{
  padding:10px 14px;font-size:13.5px;color:#414c5a;display:block;transition:.15s;
  border-left:2px solid transparent;border-radius:1px;
}
@media (hover:hover) and (pointer:fine){
.nav-drop-menu a:hover{background:var(--s-paper);color:var(--s-ink);border-left-color:var(--s-accent)}}

.nav-drop-menu a.on{color:var(--s-accent-text);font-weight:600;background:var(--s-paper)}
.nav-drop .caret{font-size:8px;opacity:.45;margin-left:4px}

/* ---------------------------------------------------------------- 按钮 */
.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;
  font-size:14px;letter-spacing:.06em;border:1px solid transparent;transition:.22s;
  font-family:inherit;cursor:pointer;white-space:nowrap;background:transparent;
  -webkit-appearance:none;border-radius:var(--s-r);
}
.sf-btn.gold{background:var(--s-accent-solid);color:var(--s-on-accent);font-weight:600;border-color:var(--s-accent-solid)}
@media (hover:hover) and (pointer:fine){
.sf-btn.gold:hover{background:var(--s-accent-hover);border-color:var(--s-accent-hover);color:var(--s-on-accent-hover)}}

.sf-btn.ink{background:var(--s-accent-solid);color:var(--s-on-accent);border-color:var(--s-accent-solid);font-weight:600}
@media (hover:hover) and (pointer:fine){
.sf-btn.ink:hover{background:var(--s-accent-hover);border-color:var(--s-accent-hover);color:var(--s-on-accent-hover)}}

.sf-btn.line,.sf-btn.dark,.sf-btn.out{border-color:var(--s-line);color:var(--s-ink);background:#fff}
@media (hover:hover) and (pointer:fine){
.sf-btn.line:hover,.sf-btn.dark:hover,.sf-btn.out:hover{border-color:var(--s-ink);color:var(--s-ink);background:#fff}}

.sf-btn.line{background:transparent}
.sf-btn.sm{height:38px;padding:0 16px;font-size:12.5px}

/* ---------------------------------------------------------------- 首页首屏 */
.sf-hero{
  position:relative;background:var(--s-bg);color:var(--s-ink);overflow:hidden;
  display:flex;flex-direction:column;border-bottom:1px solid var(--s-line);
}
.sf-hero[data-bg]{background-image:var(--hero-bg);background-size:cover;background-position:center}
.sf-hero[data-bg]:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(104deg,#fff 0%,rgba(255,255,255,.985) 46%,rgba(255,255,255,.9) 100%);
}
.sf-hero .sf-wrap{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;width:100%}
.sf-hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:center;
  flex:1;padding:92px 0 78px;
}
.sf-eyebrow{
  display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;
  color:var(--s-accent-text);text-transform:uppercase;font-weight:600;
}
.sf-eyebrow:before{content:"";width:30px;height:1px;background:var(--s-accent);opacity:.9}
.sf-hero h1{
  font-family:var(--s-font-serif);font-weight:600;
  font-size:clamp(34px,4vw,52px);line-height:1.36;letter-spacing:.03em;
  margin:22px 0 24px;color:var(--s-ink);
}
.sf-hero h1 em{
  font-style:normal;color:var(--s-accent-text);white-space:nowrap;
  background:linear-gradient(180deg,transparent 64%,var(--s-accent-soft) 64%);
  padding:0 2px;
}
.sf-hero .lead{font-size:15.5px;line-height:2.05;color:var(--s-body);max-width:540px;margin:0}
.sf-hero-actions{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}

.sf-hero-art{
  position:relative;aspect-ratio:4/4.8;width:100%;max-width:600px;margin-left:auto;
  background:var(--s-paper);border:1px solid var(--s-line);
}
.sf-hero-art .frame{position:absolute;inset:0;border:0}
.sf-hero-art .frame:after{content:"";position:absolute;inset:14px;border:1px solid rgba(21,28,36,.06)}
.sf-hero-art img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.sf-hero-art .glyph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;z-index:1;
}
.sf-hero-art .glyph span{
  font-family:var(--s-font-serif);font-size:74px;line-height:1.14;color:var(--s-ink);letter-spacing:.04em;
}
.sf-hero-art .glyph span:last-child{color:var(--s-accent-text)}
.sf-hero-art .motto{
  position:absolute;right:-30px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-size:10.5px;letter-spacing:.34em;color:var(--s-meta);font-family:var(--s-font-serif);z-index:2;
}
.sf-hero-art .since{
  position:absolute;left:18px;bottom:-28px;font-size:10px;letter-spacing:.3em;color:var(--s-meta);
}
.sf-hero-art .dot{position:absolute;width:5px;height:5px;background:var(--s-accent);z-index:2}
.sf-hero-art .dot.a{left:-3px;top:-3px}.sf-hero-art .dot.b{right:-3px;top:-3px}
.sf-hero-art .dot.c{left:-3px;bottom:-3px}.sf-hero-art .dot.d{right:-3px;bottom:-3px}

/* 数字条 */
.sf-hero-stats{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--s-line);
}
/* 每格内容居中、左右各留 30px：36px 的衬线数字贴着一侧的分隔线会显得很挤（截图里
   第一格还在版心、后三格缩进，四列起点不齐）。居中后四列视觉重量一致，离两条线都远。 */
.sf-hero-stats>div{padding:28px 30px 30px;text-align:center;border-right:1px solid var(--s-line-soft)}
.sf-hero-stats>div:first-child{padding-left:30px}
.sf-hero-stats>div:last-child{border-right:0}
.sf-hero-stats .n{
  font-family:var(--s-font-serif);font-size:36px;line-height:1.1;color:var(--s-ink);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.sf-hero-stats .n small{font-size:14px;color:var(--s-accent-text);margin-left:3px;font-weight:500}
.sf-hero-stats .l{font-size:11.5px;color:var(--s-meta);letter-spacing:.16em;margin-top:8px}
@media(max-width:600px){
  /* 两个按钮并排时，第二个会被挤出屏幕（「了解专业领域」比「预约咨询」还宽） */
  .sf-hero-actions{flex-direction:column;align-items:stretch;gap:10px}
  .sf-hero-actions .sf-btn{justify-content:center;width:100%}
}

/* 手机上两列：奇数格（1、3）左边贴版心，偶数格与右侧留白 */
@media(max-width:760px){
  .sf-hero-stats{grid-template-columns:repeat(2,1fr)}
  .sf-hero-stats>div{padding:22px 20px 24px}
  .sf-hero-stats>div:nth-child(odd){padding-left:0}
  .sf-hero-stats>div:nth-child(2){border-right:0}
  .sf-hero-stats>div:nth-child(1),.sf-hero-stats>div:nth-child(2){border-bottom:1px solid var(--s-line-soft)}
}

/* ---------------------------------------------------------------- 区块 */
.sf-sec{padding:96px 0}
.sf-sec.sf-paper{background:var(--s-paper);border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.sf-sec.ink{background:var(--s-paper);color:var(--s-body);border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.sf-sec.tight{padding-top:0}
.sf-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:52px;flex-wrap:wrap}
.sf-hd .en{font-size:10.5px;letter-spacing:.3em;color:var(--s-accent-text);text-transform:uppercase;font-weight:600}
.sf-hd h2{
  font-family:var(--s-font-serif);font-weight:600;font-size:clamp(26px,2.8vw,34px);
  letter-spacing:.05em;margin:14px 0 0;line-height:1.4;color:var(--s-ink);
}
.sf-hd .sub{color:var(--s-meta);font-size:14px;margin:10px 0 0;line-height:1.85;max-width:var(--sf-read)}
.sf-sec.ink .sf-hd h2{color:var(--s-ink)}
.sf-sec.ink .sf-hd .sub{color:var(--s-meta)}
.sf-hd .more{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;
  color:var(--s-ink);padding-bottom:6px;border-bottom:1px solid var(--s-line);white-space:nowrap;transition:.2s;
}
@media (hover:hover) and (pointer:fine){
.sf-hd .more:hover{border-color:var(--s-ink);gap:12px}}

.sf-sec.ink .sf-hd .more{color:var(--s-ink)}

/* ---------------------------------------------------------------- 专业领域 */
.sf-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;border-top:1px solid var(--s-line)}
.sf-area{
  display:flex;gap:20px;padding:28px 6px;border-bottom:1px solid var(--s-line);
  transition:.22s;position:relative;color:inherit;
}
@media (hover:hover) and (pointer:fine){
.sf-area:hover{background:#fff;padding-left:14px;padding-right:14px;margin:0 -8px;border-bottom-color:var(--s-line)}
.sf-sec.sf-paper .sf-area:hover{background:#fdfcfa}}

.sf-area .no{
  font-family:var(--s-font-serif);font-size:12.5px;color:var(--s-accent-text);
  padding-top:5px;letter-spacing:.1em;flex:none;font-weight:600;
}
.sf-area h3{
  font-family:var(--s-font-serif);font-weight:600;font-size:19px;margin:0 0 8px;
  letter-spacing:.03em;color:var(--s-ink);
}
.sf-area p{font-size:13.5px;color:var(--s-meta);line-height:1.85;margin:0}
.sf-area .arw{
  margin-left:auto;align-self:center;color:var(--s-accent-text);opacity:0;
  transform:translateX(-8px);transition:.22s;flex:none;
}
@media (hover:hover) and (pointer:fine){
.sf-area:hover .arw{opacity:1;transform:none}}


/* ---------------------------------------------------------------- 关于 */
.sf-about{display:grid;grid-template-columns:.88fr 1.12fr;gap:72px;align-items:center}
.sf-about-visual{
  position:relative;aspect-ratio:4/4.4;background:var(--s-paper);
  border:1px solid var(--s-line);display:grid;place-items:center;overflow:hidden;
}
.sf-about-visual img{width:100%;height:100%;object-fit:cover}
.sf-about-visual .big{
  position:relative;font-family:var(--s-font-serif);font-size:92px;color:var(--s-ink);
  letter-spacing:.06em;line-height:1;
}
.sf-about-visual .cap{
  position:absolute;bottom:24px;left:24px;font-size:10px;letter-spacing:.3em;
  color:var(--s-meta);text-transform:uppercase;z-index:2;
}
.sf-about-visual .ln{position:absolute;top:24px;right:24px;width:44px;height:1px;background:var(--s-accent)}
.sf-about-visual .vslogan{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:var(--s-font-serif);font-size:10.5px;letter-spacing:.32em;color:var(--s-meta);z-index:2;
}
.sf-about h2{
  font-family:var(--s-font-serif);font-weight:600;font-size:clamp(24px,2.5vw,31px);
  letter-spacing:.04em;margin:14px 0 20px;line-height:1.5;
}
.sf-about p{font-size:15px;line-height:2.05;color:var(--s-body);margin:0 0 14px}
.sf-points{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--s-line)}
.sf-point{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--s-line-soft);align-items:flex-start}
.sf-point b{
  font-family:var(--s-font-serif);font-size:12px;color:var(--s-accent-text);
  letter-spacing:.08em;padding-top:4px;flex:none;font-weight:600;
}
.sf-point div{font-size:13.5px;color:var(--s-body);line-height:1.85}
.sf-point div strong{display:block;color:var(--s-ink);font-weight:600;font-size:14px;margin-bottom:3px}

/* ---------------------------------------------------------------- 律师团队 */
.sf-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sf-lawyer{
  display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--s-line);transition:.25s;overflow:hidden;
}
@media (hover:hover) and (pointer:fine){
.sf-lawyer:hover{border-color:var(--s-accent);transform:translateY(-4px);box-shadow:var(--s-shadow)}}

.sf-lawyer .ph{
  position:relative;aspect-ratio:1/1.06;background:var(--s-paper);
  display:grid;place-items:center;overflow:hidden;
}
.sf-lawyer .ph img{width:100%;height:100%;object-fit:cover}
.sf-lawyer .ph:after{content:"";position:absolute;inset:12px;border:1px solid rgba(21,28,36,.06);pointer-events:none}
.sf-lawyer .ph span{
  font-family:var(--s-font-serif);font-size:46px;color:#b9b2a4;letter-spacing:.04em;
}
.sf-lawyer .ph .tag{
  position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.18em;
  color:var(--s-accent-text);z-index:2;background:rgba(255,255,255,.9);padding:2px 7px;
}
.sf-lawyer .bd{padding:18px 18px 22px;flex:1;background:#fff}
.sf-lawyer h3{font-family:var(--s-font-serif);font-weight:600;font-size:17.5px;margin:0 0 5px;letter-spacing:.03em}
.sf-lawyer .t{font-size:12px;color:var(--s-accent-text);letter-spacing:.06em}
.sf-lawyer .f{font-size:12.5px;color:var(--s-meta);margin-top:10px;line-height:1.8}

/* ---------------------------------------------------------------- 洞察（杂志式） */
.sf-mag{display:grid;grid-template-columns:1.02fr .98fr;gap:0;border:1px solid var(--s-line);background:#fff}
.sf-mag-cover{
  position:relative;min-height:360px;background:var(--s-paper);
  display:flex;flex-direction:column;justify-content:space-between;padding:38px;overflow:hidden;
  border-right:1px solid var(--s-line);
}
.sf-mag-cover .cat{
  position:relative;font-size:10.5px;letter-spacing:.24em;color:var(--s-accent-text);
  text-transform:uppercase;font-weight:600;
}
.sf-mag-cover h3{
  position:relative;font-family:var(--s-font-serif);font-weight:600;font-size:25px;
  line-height:1.6;color:var(--s-ink);margin:0;letter-spacing:.02em;
}
.sf-mag-cover .meta{position:relative;font-size:12px;color:var(--s-meta);letter-spacing:.06em}
.sf-mag-side{padding:10px 32px 14px;display:flex;flex-direction:column;justify-content:center}
.sf-news-row{
  display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--s-line-soft);
  align-items:flex-start;transition:.18s;
}
.sf-news-row:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){
.sf-news-row:hover .tt{color:var(--s-accent-text)}}

.sf-news-row .dt{flex:none;text-align:center;width:46px;padding-top:2px}
.sf-news-row .dt b{display:block;font-family:var(--s-font-serif);font-size:19px;color:var(--s-ink);line-height:1.1;font-weight:600}
.sf-news-row .dt span{font-size:10.5px;color:var(--s-meta);letter-spacing:.06em}
.sf-news-row .tt{
  font-size:14.5px;font-weight:500;line-height:1.65;transition:.18s;color:var(--s-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sf-news-row .ex{font-size:12.5px;color:var(--s-meta);margin-top:6px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------------------------------- 文章列表 */
.sf-post-list{border-top:1px solid var(--s-line)}
.sf-post{display:flex;gap:26px;padding:30px 0;border-bottom:1px solid var(--s-line);transition:.2s}
@media (hover:hover) and (pointer:fine){
.sf-post:hover{background:var(--s-paper);padding-left:14px;padding-right:14px}}

.sf-post .dt{flex:none;width:72px;text-align:center;border-right:1px solid var(--s-line);padding-right:16px}
.sf-post .dt b{display:block;font-family:var(--s-font-serif);font-size:26px;font-weight:600;color:var(--s-ink);line-height:1.1}
.sf-post .dt span{font-size:11px;color:var(--s-meta);letter-spacing:.08em}
.sf-post h3{
  font-family:var(--s-font-serif);font-weight:600;font-size:18.5px;line-height:1.65;
  margin:8px 0 8px;letter-spacing:.01em;transition:.18s;color:var(--s-ink);
}
@media (hover:hover) and (pointer:fine){
.sf-post:hover h3{color:var(--s-accent-text)}}

.sf-post p{font-size:13.5px;color:var(--s-meta);line-height:1.85;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------------------------------- 案例 */
.sf-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sf-case{
  display:block;border:1px solid var(--s-line);background:#fff;padding:30px 30px 26px;
  transition:.22s;position:relative;
}
.sf-sec.ink .sf-case,.sf-sec.sf-paper .sf-case{background:#fff}
@media (hover:hover) and (pointer:fine){
.sf-case:hover{border-color:var(--s-accent);transform:translateY(-3px);box-shadow:var(--s-shadow)}}

.sf-case .tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sf-case .tags span{
  font-size:10.5px;letter-spacing:.1em;color:var(--s-accent-text);
  background:var(--s-accent-soft);border:1px solid var(--s-line);padding:3px 10px;
}
.sf-case h3{
  font-family:var(--s-font-serif);font-weight:600;font-size:18px;line-height:1.7;
  color:var(--s-ink);margin:0 0 12px;
}
.sf-case p{font-size:13px;color:var(--s-meta);line-height:1.9;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-case .ft{margin-top:18px;font-size:11.5px;color:var(--s-meta);letter-spacing:.04em}

/* 浅色案例卡（列表页，保持同名结构） */
.sf-case-l{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--s-line);
  padding:30px 30px 24px;transition:.22s;height:100%;
}
@media (hover:hover) and (pointer:fine){
.sf-case-l:hover{border-color:var(--s-accent);transform:translateY(-3px);box-shadow:var(--s-shadow)}}

.sf-case-l .tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.sf-case-l .tags span{
  font-size:10.5px;letter-spacing:.1em;color:var(--s-accent-text);
  background:var(--s-accent-soft);border:1px solid var(--s-line);padding:3px 10px;
}
.sf-case-l h3{font-family:var(--s-font-serif);font-weight:600;font-size:17px;line-height:1.75;margin:0 0 12px;color:var(--s-ink)}
.sf-case-l p{font-size:13px;color:var(--s-meta);line-height:1.9;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sf-case-l .ft{margin-top:auto;padding-top:18px;font-size:11.5px;color:var(--s-meta);letter-spacing:.04em}

/* ---------------------------------------------------------------- 视频 */
.sf-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sf-video{display:block;background:#fff;border:1px solid var(--s-line);overflow:hidden;transition:.22s}
@media (hover:hover) and (pointer:fine){
.sf-video:hover{border-color:var(--s-accent);transform:translateY(-3px);box-shadow:var(--s-shadow)}}

.sf-video .frame{position:relative;aspect-ratio:16/9;background:var(--s-paper-2);overflow:hidden}
.sf-video .frame img{width:100%;height:100%;object-fit:cover;transition:.3s}
@media (hover:hover) and (pointer:fine){
.sf-video:hover .frame img{transform:scale(1.03)}}

.sf-video .frame .play{position:absolute;inset:0;display:grid;place-items:center;color:var(--s-ink)}
.sf-video .frame .ph-fallback{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:0 16px 0;background:var(--s-paper-2);overflow:hidden;
}
.sf-video .frame .ph-fallback span{
  font-family:var(--s-font-serif);font-size:100px;color:rgba(21,28,36,.08);
  letter-spacing:.04em;line-height:.82;
}
.sf-video .frame .play i{
  width:46px;height:46px;border:1px solid rgba(255,255,255,.9);border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-style:normal;
  background:rgba(21,28,36,.28);backdrop-filter:blur(3px);color:#fff;
}
.sf-video .bd{padding:16px 18px 20px}
.sf-video h3{font-family:var(--s-font-serif);font-weight:600;font-size:15.5px;margin:0;line-height:1.65;color:var(--s-ink)}
.sf-video .d{font-size:12px;color:var(--s-meta);margin-top:7px}

/* ---------------------------------------------------------------- 到访律所（通栏地图）
   这一屏过去是「左边文字 + 右边一张室内照」，图既不说明律所在哪，又吃掉半屏，
   读者扫过去只记住了一把椅子。现在整块通栏铺成地图，纸卡浮在左侧：
   一张卡同时回答「你们是谁」和「你们在哪」。

   底图有两态（见 components/site-map.blade.php）：
     有腾讯地图 Key → 真实地图，画布淡入（.is-drawn），CSS 定位点让位给地图 marker；
     没有 Key       → .sf-mapbox-grid 的淡色路网 + 脉冲定位点，只做版面底子，不冒充地图。
   两种状态下，卡片的可读性靠「实色纸白 + 纸色渐隐」保证，不靠压暗整张底图。 */
.sf-visit{
  position:relative;overflow:hidden;
  min-height:clamp(500px,44vw,600px);
  display:flex;align-items:center;
  padding:clamp(36px,4vw,56px) 0;
  background:#efece6;border-top:1px solid var(--s-line);
}
.sf-visit .sf-wrap{position:relative;z-index:3;width:100%}

.sf-mapbox{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 底纹用一张内联 SVG 画城市路网，不用 CSS 重复渐变：
   渐变只能画出等距网格，横平竖直看着像坐标纸；真正的城市要「街区 + 主干道 + 次路」三层。
   SVG 里没有地名、没有行政边界、没有国界 —— 它明确是一张抽象底纹，不是地图，也不冒充地图。 */
.sf-mapbox-grid{
  position:absolute;inset:0;background-color:#f4f1ea;background-size:cover;background-position:center;
  background-image:
    radial-gradient(780px 480px at 76% 34%,rgba(176,141,87,.12),transparent 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Crect width='1600' height='900' fill='%23f4f1ea'/%3E%3Cg fill='%23eeeade'%3E%3Crect x='115' y='70' width='265' height='185'/%3E%3Crect x='870' y='110' width='225' height='165'/%3E%3Crect x='1150' y='590' width='310' height='230'/%3E%3Crect x='295' y='635' width='245' height='185'/%3E%3Crect x='560' y='90' width='180' height='120'/%3E%3Crect x='1180' y='120' width='150' height='110'/%3E%3C/g%3E%3Cg stroke='%23e6e0d2' stroke-width='1'%3E%3Cpath d='M0 180H1600M0 380H1600M0 560H1600M0 730H1600M0 860H1600'/%3E%3Cpath d='M120 0V900M360 0V900M660 0V900M920 0V900M1180 0V900M1440 0V900'/%3E%3C/g%3E%3Cg stroke='%23d5cdbb' stroke-width='2.4'%3E%3Cpath d='M0 300H1600M0 470H1600M0 660H1600M0 812H1600'/%3E%3Cpath d='M242 0V900M520 0V900M762 0V900M1042 0V900M1302 0V900'/%3E%3C/g%3E%3Cg fill='none'%3E%3Cpath d='M-120 530 L1720 292' stroke='%23d3cab7' stroke-width='28'/%3E%3Cpath d='M-120 530 L1720 292' stroke='%23fffefb' stroke-width='23'/%3E%3Cpath d='M1180 -110 L1078 1010' stroke='%23d3cab7' stroke-width='20'/%3E%3Cpath d='M1180 -110 L1078 1010' stroke='%23fffefb' stroke-width='15'/%3E%3C/g%3E%3C/svg%3E");
}
/* 腾讯底图是彩色高饱和的（绿地、河道、黄色主路），直接铺上来会把整站的纸白气质冲掉。
   这里做一次「纸化」：灰度 + 压对比 + 提亮，地图只剩路网与地名，颜色留给定位点。
   注意：版权水印那一行不要用 filter 藏掉，也不要用遮罩盖住 —— 地图数据必须带来源标注。 */
.sf-mapbox-canvas{
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
  filter:grayscale(1) contrast(.7) brightness(1.16);
}
.sf-mapbox.is-drawn .sf-mapbox-canvas{opacity:.82}
.sf-mapbox.is-live .sf-mapbox-canvas{
  left:36%;width:64%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 14%,#000 26%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 14%,#000 26%);
}
/* 再压一层纸色，让灰底偏暖，和 --s-paper 一个调子 */
.sf-mapbox.is-drawn .sf-mapbox-tint{background:linear-gradient(96deg,
  rgba(247,245,241,.97) 0%,rgba(247,245,241,.9) 26%,
  rgba(247,245,241,.56) 42%,rgba(247,245,241,.34) 58%,rgba(247,245,241,.26) 74%)}
/* 左浓右淡：左边压住底图保证卡片边缘干净，右侧几乎不打遮罩，
   让路网真的能看见 —— 上一版右侧压到 0 透明度以下，整块看着像一片灰布。 */
.sf-mapbox-tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(247,245,241,.96) 0%,rgba(247,245,241,.86) 26%,
    rgba(247,245,241,.4) 42%,rgba(247,245,241,.06) 58%,rgba(247,245,241,0) 72%);
}
.sf-mapbox-pin{position:absolute;left:68%;top:50%;z-index:2;width:0;height:0;transform:translate(-50%,-50%)}
.sf-mapbox-pin b{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--s-accent-solid);border:3px solid #fff;
  box-shadow:0 3px 14px rgba(21,28,36,.28);
}
.sf-mapbox-pin i{
  position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--s-accent);animation:sfPulse 3s ease-out infinite;
}
.sf-mapbox-pin i:nth-child(2){animation-delay:1.5s}
@keyframes sfPulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3);opacity:0}}

.sf-visit-card{
  max-width:600px;padding:clamp(30px,3.2vw,46px) clamp(26px,3.2vw,48px) clamp(28px,3vw,40px);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(230,226,218,.9);
  box-shadow:0 40px 90px -58px rgba(21,28,36,.5),0 2px 6px rgba(21,28,36,.04);
}
.sf-visit-card .en{
  font-size:10.5px;letter-spacing:.32em;color:var(--s-accent-text);text-transform:uppercase;
}
.sf-visit-card h2{
  font-family:var(--s-font-serif);font-weight:600;font-size:clamp(26px,2.8vw,36px);
  letter-spacing:.04em;line-height:1.42;margin:14px 0 18px;color:var(--s-ink);
}
.sf-visit-card p.lead{font-size:14.5px;line-height:2;color:var(--s-body);margin:0}
.sf-visit-points{margin-top:26px;border-top:1px solid var(--s-line)}
.sf-visit-points .pt{
  display:flex;gap:14px;padding:14px 0;align-items:flex-start;
  border-bottom:1px solid var(--s-line-soft);
}
.sf-visit-points b{
  font-family:var(--s-font-serif);font-size:11.5px;color:var(--s-accent-text);
  letter-spacing:.08em;flex:none;padding-top:3px;font-weight:600;
}
.sf-visit-points .pt div{font-size:13px;line-height:1.8;color:var(--s-meta)}
.sf-visit-points strong{display:block;color:var(--s-ink);font-size:13.5px;font-weight:600;margin-bottom:2px}
.sf-visit-addr{
  display:flex;gap:10px;align-items:flex-start;margin-top:22px;
  font-size:13px;line-height:1.75;color:var(--s-meta);letter-spacing:.02em;
}
.sf-visit-addr .pin{
  flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;
  background:var(--s-accent-solid);box-shadow:0 0 0 3px rgba(176,141,87,.18);
}
.sf-visit-acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---------------------------------------------------------------- CTA（底部转化）
   上一版是一张漂在白色页面中间的米色卡片：四面留白、块面很小，
   在 1440 的版心里像一张贴纸贴在墙上。现在改成**通栏深墨区块** ——
   整屏铺满、上下留 100px 呼吸，内容仍按版心对齐，
   与前面几屏的纸白形成一次干脆的节奏变化，把整页收住。

   深底上只留两处装饰：右下角的细圈、以及那片几乎看不见的暖光。
   别的都删掉了 —— 深色块里多加一根线都是脏。 */
.sf-cta{
  position:relative;overflow:hidden;
  background:#101821;color:#fff;
  padding:clamp(70px,8.5vw,104px) 0 clamp(74px,8.5vw,108px);
}
.sf-cta:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(780px 470px at 88% 118%,rgba(255,255,255,.075),transparent 64%),
    radial-gradient(520px 340px at 2% -28%,rgba(255,255,255,.05),transparent 62%);
}
.sf-cta:after{
  content:"";position:absolute;right:-110px;bottom:-170px;width:460px;height:460px;
  border:1px solid rgba(255,255,255,.1);border-radius:50%;pointer-events:none;
}
.sf-cta .sf-wrap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,6vw,88px);align-items:center;
}
/* 深底上的强调色不跟「金色」走：全站主题色是可换的（本站是品牌蓝），
   这里如果写死金色，就会和导航、按钮的蓝撞在一起。统一用白色分层 + 品牌色按钮，
   换主题时这块自动跟着变。 */
.sf-cta .sf-eyebrow{color:rgba(255,255,255,.6)}
.sf-cta .sf-eyebrow:before{background:currentColor;opacity:.6}
.sf-cta h2{
  font-family:var(--s-font-serif);font-weight:600;font-size:clamp(28px,3.4vw,42px);
  letter-spacing:.05em;line-height:1.44;margin:18px 0 20px;color:#fff;
}
.sf-cta p{color:rgba(255,255,255,.62);font-size:14.5px;line-height:2;margin:0;max-width:520px}
.sf-cta .right{
  display:flex;flex-direction:column;align-items:flex-end;gap:22px;text-align:right;
}
.sf-cta .tel{
  font-family:var(--s-font-serif);font-size:clamp(26px,2.6vw,34px);font-weight:600;
  color:#fff;letter-spacing:.03em;line-height:1.2;display:block;
}
.sf-cta .tel small{
  display:block;font-size:10.5px;letter-spacing:.26em;color:rgba(255,255,255,.5);
  margin-bottom:10px;font-family:var(--s-font-sans);font-weight:400;
}
.sf-cta .hours{display:block;font-size:13px;color:rgba(255,255,255,.55);letter-spacing:.04em;line-height:1.6}
.sf-cta .sf-btn.gold{height:54px;padding:0 38px;font-size:14.5px}

/* 通用栅格：主列吃满剩余宽度（= 阅读列），右栏固定 --sf-side。
   ≤1080px 收成单栏。 */
.sf-2col{display:grid;grid-template-columns:minmax(0,1fr) var(--sf-side);gap:var(--sf-gap);align-items:start}
.sf-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.sf-grid3>div{background:#fff;padding:28px 26px;border:1px solid var(--s-line);margin:-1px 0 0 -1px}
.sf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.sf-step{padding:28px 28px 28px 0;border-top:1px solid var(--s-line);position:relative}
.sf-step:before{content:"";position:absolute;top:-3px;left:0;width:6px;height:5px;background:var(--s-accent)}
.sf-step .no{font-family:var(--s-font-serif);font-size:30px;color:#8c8678;line-height:1;letter-spacing:.02em}
.sf-step h3{font-family:var(--s-font-serif);font-weight:600;font-size:18px;margin:16px 0 10px;letter-spacing:.03em;color:var(--s-ink)}
.sf-step p{font-size:13.5px;color:var(--s-meta);line-height:1.9;margin:0}

.sf-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sf-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sf-contact{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.sf-form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sf-profile-hd{display:grid;grid-template-columns:112px 1fr;gap:30px;align-items:center;margin-top:26px}

/* ---------------------------------------------------------------- 内页头 */
.sf-ph{
  position:relative;background:var(--s-paper);color:var(--s-ink);
  padding:76px 0 68px;overflow:hidden;border-bottom:1px solid var(--s-line);
}
.sf-ph .sf-wrap{position:relative;z-index:2}
.sf-ph .crumb{
  font-size:12px;color:var(--s-meta);letter-spacing:.06em;
  display:flex;gap:9px;align-items:center;
}
.sf-ph .crumb a{color:var(--s-meta);transition:.15s}
@media (hover:hover) and (pointer:fine){
.sf-ph .crumb a:hover{color:var(--s-accent-text)}}

.sf-ph .crumb i{font-style:normal;opacity:.5}
.sf-ph h1{
  font-family:var(--s-font-serif);font-weight:600;
  font-size:clamp(30px,3.6vw,44px);letter-spacing:.04em;
  margin:18px 0 16px;line-height:1.4;color:var(--s-ink);
}
.sf-ph p{color:var(--s-body);font-size:14.5px;line-height:1.95;max-width:var(--sf-read);margin:0}
.sf-ph .stats{display:flex;gap:44px;margin-top:32px;flex-wrap:wrap}
.sf-ph .stats b{font-family:var(--s-font-serif);font-size:26px;color:var(--s-accent-text);font-weight:600;display:block}
.sf-ph .stats span{font-size:11.5px;color:var(--s-meta);letter-spacing:.1em}

/* 带栏头图时：图片只占右侧一条，向左羽化融进纸面；左侧保持纯纸色放标题 */
.site-body[data-banner] .sf-ph{background:var(--s-paper)}
.site-body[data-banner] .sf-ph:before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:auto;width:46%;z-index:0;
  background-image:var(--sf-banner);background-size:cover;background-position:center 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 26%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 26%,#000 62%);
}
.site-body[data-banner] .sf-ph .sf-wrap{position:relative;z-index:2}

/* ---------------------------------------------------------------- 正文排版 */
.sf-prose{font-size:15.5px;line-height:2.05;color:#3a4553}
.sf-prose>:first-child{margin-top:0}
.sf-prose p{margin:0 0 1.35em}
.sf-prose h1,.sf-prose h2,.sf-prose h3,.sf-prose h4{
  font-family:var(--s-font-serif);font-weight:600;color:var(--s-ink);
  letter-spacing:.02em;margin:2em 0 .7em;line-height:1.5;
}
.sf-prose h2{font-size:22px;padding-left:14px;position:relative}
.sf-prose h2:before{content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;background:var(--s-accent)}
.sf-prose h3{font-size:18px}
.sf-prose img{max-width:100%;height:auto;display:block;margin:22px 0}
.sf-prose a{color:var(--s-accent-text);border-bottom:1px solid var(--s-line)}
.sf-prose blockquote{
  margin:22px 0;padding:16px 22px;background:var(--s-paper);
  border-left:2px solid var(--s-accent);color:#4f5b69;font-size:14.5px;
}
.sf-prose ul,.sf-prose ol{padding-left:1.4em;margin:0 0 1.35em}
.sf-prose li{margin-bottom:.4em}
.sf-prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:13.5px}
.sf-prose th,.sf-prose td{border:1px solid var(--s-line);padding:10px 12px;text-align:left}
.sf-prose th{background:var(--s-paper);font-weight:600}

/* 阅读版心 */
.sf-read{padding:56px 0 100px;background:var(--s-paper);border-bottom:1px solid var(--s-line)}
.sf-sheet{
  position:relative;max-width:var(--sf-read);margin:0 auto;background:#fff;
  border:1px solid var(--s-line);border-radius:var(--s-r);
  padding:clamp(32px,4.6vw,62px) clamp(24px,6.2vw,68px) clamp(34px,4vw,54px);
  box-shadow:0 1px 2px rgba(21,28,36,.03),0 24px 60px -40px rgba(21,28,36,.22);
}
.sf-sheet:before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--s-accent) 0%,var(--gold-22) 34%,rgba(21,28,36,0) 76%);
}
.sf-sheet .sf-prose{
  font-family:var(--s-font-serif);font-size:16.5px;line-height:2.08;
  color:#2a3441;letter-spacing:.015em;
}
.sf-sheet .sf-prose p{margin:0 0 1.1em}
.sf-sheet .sf-prose>:first-child{margin-top:0}
.sf-sheet .sf-prose>:last-child{margin-bottom:0}
.sf-sheet .sf-prose strong,.sf-sheet .sf-prose b{color:#16212d}
.sf-sheet .sf-prose h2{margin-top:1.85em;font-size:21px}
.sf-sheet .sf-prose h3{font-size:17.5px}
.sf-sheet .sf-prose blockquote{background:var(--s-paper);border-left:2px solid var(--s-accent);color:#4f5b69}
.sf-sheet .sf-prose th{background:var(--s-paper)}
.sf-sheet-note{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--s-line);
  font-size:12.5px;line-height:1.95;color:var(--s-meta);letter-spacing:.01em;
}
.sf-sheet-note a{color:var(--s-accent-text);border-bottom:1px solid var(--s-line)}
.sf-related{margin-top:40px;padding-top:24px;border-top:1px solid var(--s-line)}
.sf-related .hd{display:flex;align-items:baseline;gap:12px;margin-bottom:2px}
.sf-related .hd .en{font-size:10px;letter-spacing:.3em;color:var(--s-accent-text);text-transform:uppercase}
.sf-related .hd .cn{font-family:var(--s-font-serif);font-size:14px;color:var(--s-ink);letter-spacing:.06em}
.sf-related a{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--s-line-soft);transition:.18s;
}
.sf-related a:last-child{border-bottom:0;padding-bottom:0}
@media (hover:hover) and (pointer:fine){
.sf-related a:hover{padding-left:6px}
.sf-related a:hover b{color:var(--s-accent-text)}}

.sf-related a b{
  font-family:var(--s-font-serif);font-size:14.5px;font-weight:600;color:#26313e;
  line-height:1.65;transition:.18s;
}
.sf-related a span{flex:none;font-size:11.5px;color:var(--s-meta);font-variant-numeric:tabular-nums}
.sf-sheet .sf-series-bar{
  margin:-6px 0 26px;padding:11px 15px;background:var(--s-paper);
  border-left:2px solid var(--s-accent);border-radius:0 2px 2px 0;
}
.sf-sheet .sf-wall.light{border-radius:var(--s-r);background:var(--s-paper)}
.sf-sheet-wide{max-width:none;margin:0}
.sf-2col .sf-sheet{padding:clamp(26px,3.4vw,46px) clamp(20px,3.8vw,44px)}
.srs-read .sf-sheet{padding:clamp(24px,3vw,42px) clamp(20px,3.4vw,42px)}
.srs-article.sf-sheet .sf-prose{font-size:16.5px;line-height:2.08}
.sf-2col .sf-sheet .sf-sheet-note{margin-top:34px}
@media (max-width:760px){
  .sf-read{padding:30px 0 66px}
  .sf-sheet{padding:28px 20px 34px;border-left:0;border-right:0;
    box-shadow:0 1px 2px rgba(21,28,36,.04)}
  .sf-sheet .sf-prose{font-size:16px;line-height:2}
  .sf-related a{gap:14px}
  .sf-related a b{font-size:14px}
}

.sf-article-meta{
  display:flex;gap:16px;align-items:center;font-size:12px;color:var(--s-meta);
  padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid var(--s-line);flex-wrap:wrap;
}
.sf-article-meta .cat{
  color:var(--s-accent-text);border:1px solid var(--s-line);background:var(--s-accent-soft);
  padding:3px 11px;letter-spacing:.08em;font-size:11px;
}

/* 侧栏 / 表单 / 团队详情 / 分页 */
.sf-side{background:#fff;border:1px solid var(--s-line);padding:28px;border-radius:var(--s-r)}
.sf-side h3{
  font-family:var(--s-font-serif);font-weight:600;font-size:16px;margin:0 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--s-line);letter-spacing:.04em;color:var(--s-ink);
}
.sf-side .kv{display:grid;grid-template-columns:64px 1fr;gap:12px 0;font-size:13px;color:var(--s-body)}
.sf-side .kv dt{color:var(--s-meta);font-size:12.5px}
.sf-side .kv dd{margin:0}

.sf-form .field{margin-bottom:18px}
.sf-form label{display:block;font-size:12.5px;color:var(--s-meta);margin-bottom:7px;letter-spacing:.03em}
.sf-form input,.sf-form textarea,.sf-form select{
  width:100%;border:1px solid var(--s-line);background:#fff;padding:12px 14px;
  font-size:14px;font-family:inherit;color:var(--s-ink);transition:.18s;outline:none;
  border-radius:var(--s-r);
}
.sf-form input::placeholder,.sf-form textarea::placeholder{color:#b3bbc5}
.sf-form input:focus,.sf-form textarea:focus,.sf-form select:focus{
  border-color:var(--s-accent);box-shadow:0 0 0 3px var(--gold-06);
}
.sf-form textarea{min-height:160px;line-height:1.85;resize:vertical}

.sf-profile{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.sf-portrait{
  background:var(--s-paper);border:1px solid var(--s-line);aspect-ratio:3/3.7;
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.sf-portrait img{width:100%;height:100%;object-fit:cover}
.sf-portrait span{font-family:var(--s-font-serif);font-size:86px;color:#c3bcae}
.sf-portrait:after{content:"";position:absolute;inset:14px;border:1px solid rgba(21,28,36,.06)}

.sf-empty{padding:64px 0;text-align:center;color:var(--s-meta);font-size:14px}

.sf-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.sf-pager a,.sf-pager span{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--s-line);font-size:13.5px;color:var(--s-body);padding:0 13px;
  transition:.18s;background:#fff;border-radius:var(--s-r);
}
@media (hover:hover) and (pointer:fine){
.sf-pager a:hover{border-color:var(--s-accent);color:var(--s-accent-text)}}

.sf-pager .on{background:var(--s-ink);border-color:var(--s-ink);color:#fff}
.sf-pager .off{opacity:.4}

/* ---------------------------------------------------------------- 页脚 */
.sf-footer{
  background:var(--s-paper);color:var(--s-body);padding:72px 0 0;font-size:13px;
  border-top:1px solid var(--s-line);
}
.sf-foot-grid{
  display:grid;grid-template-columns:1.55fr 1fr 1fr 1.15fr;gap:48px;
  padding-bottom:52px;border-bottom:1px solid var(--s-line);
}
.sf-footer h4{
  font-size:11px;letter-spacing:.2em;color:var(--s-ink);margin:0 0 18px;
  font-weight:600;text-transform:uppercase;
}
.sf-footer a{display:block;padding:6px 0;color:var(--s-body);font-size:12.8px;transition:.15s}
@media (hover:hover) and (pointer:fine){
.sf-footer a:hover{color:var(--s-accent-text)}}

.sf-footer p{font-size:12.5px;line-height:1.95;color:var(--s-meta);margin:0}
.sf-foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sf-foot-brand .seal{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--s-line);
  color:var(--s-accent-text);font-family:var(--s-font-serif);font-size:17px;background:#fff;
}
.sf-foot-brand b{color:var(--s-ink);font-family:var(--s-font-serif);font-size:16px;letter-spacing:.08em;font-weight:600}
.sf-foot-brand .brand-logo{max-height:44px}
.sf-foot-bottom{
  display:flex;justify-content:space-between;gap:16px;padding:22px 0 26px;
  font-size:11.5px;color:var(--s-meta);flex-wrap:wrap;
}
.sf-foot-bottom a{display:inline;padding:0;color:var(--s-body)}
.sf-contact-line{display:flex;gap:10px;padding:5px 0;font-size:12.5px;color:var(--s-body);align-items:flex-start}
.sf-contact-line b{color:var(--s-meta);font-weight:400;flex:none}

/* ---------------------------------------------------------------- 动效 */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;transition:none}}

/* ============================================================================
   视频课程页（.sfc-*）：从深色机房改为纸白阅读式
   ========================================================================== */
.sfc-hero{background:var(--s-paper);color:var(--s-body);padding:30px 0 54px;position:relative;border-bottom:1px solid var(--s-line)}
.sfc-hero .sf-wrap{position:relative;z-index:2}
.sfc-hero .crumb{font-size:12px;color:var(--s-meta);letter-spacing:.04em;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sfc-hero .crumb a{color:var(--s-meta)}
@media (hover:hover) and (pointer:fine){
.sfc-hero .crumb a:hover{color:var(--s-accent-text)}}

.sfc-hero .crumb i{font-style:normal;opacity:.5}
.sfc-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:22px 0 28px;flex-wrap:wrap}
.sfc-hd h1{font-family:var(--s-font-serif);font-weight:600;font-size:clamp(24px,2.8vw,34px);letter-spacing:.03em;margin:10px 0 0;line-height:1.45;color:var(--s-ink)}
.sfc-hd .kicker{font-size:10.5px;letter-spacing:.2em;color:var(--s-accent-text);text-transform:uppercase}
.sfc-hd .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--s-meta)}
.sfc-hd .meta b{color:var(--s-ink);font-weight:600}
.sfc-free{font-size:10.5px;letter-spacing:.12em;color:var(--s-accent-text-deep);border:1px solid var(--s-line);background:var(--s-accent-soft);padding:3px 9px}
.sf-chip{display:inline-flex;align-items:center;font-size:11px;padding:3px 9px;border:1px solid var(--s-line);background:#fff;color:var(--s-body)}
.sfc-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--sf-side);gap:var(--sf-gap);align-items:start}
.sfc-player{background:#0d1117;border:1px solid var(--s-line);overflow:hidden;border-radius:var(--s-r)}
.sfc-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.sfc-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.sfc-toc{border:1px solid var(--s-line);background:#fff;border-radius:var(--s-r);overflow:hidden}
.sfc-toc .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--s-line);background:var(--s-paper)}
.sfc-toc .hd b{font-weight:600;color:var(--s-ink);font-size:13px}
.sfc-toc .hd span{font-size:11.5px;color:var(--s-meta)}
.sfc-toc .list{max-height:400px;overflow:auto;padding:8px}
.sfc-toc a{display:flex;align-items:center;gap:10px;padding:11px 12px;font-size:13px;color:var(--s-body);border-radius:2px}
@media (hover:hover) and (pointer:fine){
.sfc-toc a:hover{background:var(--s-paper);color:var(--s-ink)}}

.sfc-toc a.on{background:var(--s-accent-soft);color:var(--s-accent-text);font-weight:600}
.sfc-guard{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:11.5px;color:var(--s-meta);line-height:1.8}

/* 课程卡（列表） */
.sfc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sfc-card{
  display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--s-line);
  overflow:hidden;transition:.22s;
}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover{border-color:var(--s-accent);transform:translateY(-3px);box-shadow:var(--s-shadow)}}

.sfc-card .frame{position:relative;aspect-ratio:16/9;background:var(--s-paper-2);overflow:hidden}
.sfc-card .frame img{width:100%;height:100%;object-fit:cover;transition:.3s}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover .frame img{transform:scale(1.04)}}

.sfc-card .frame .ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--s-paper-2)}
.sfc-card .frame .ph span{font-family:var(--s-font-serif);font-size:64px;color:rgba(21,28,36,.1)}
.sfc-card .frame .play{position:absolute;inset:0;display:grid;place-items:center}
.sfc-card .frame .play i{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.9);
  display:grid;place-items:center;background:rgba(21,28,36,.68);color:#fff;font-style:normal;font-size:12px;
}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover .frame .play i{background:var(--s-accent);border-color:var(--s-accent)}}

/* 封面上的权限胶囊：四档（公开·免费 / 会员专享 / 委托人专享 / 内部培训）统一白底黑字，
   不按权限分色——照片本身已经够花，再压一块彩色上去整个列表就乱了。
   本类是全站唯一声明处（app.css 里的同名规则已删除），所以不需要任何「合写 / 加权重」的技巧。
   新加胶囊变体时，请只在这里加，不要再往 app.css 里写前台组件的样式。 */
.sfc-card .badge{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:600;letter-spacing:.06em;line-height:1;
  padding:5px 9px;border-radius:var(--s-r);
  background:#fff;color:var(--s-ink);border:1px solid rgba(16,24,34,.14);
  box-shadow:0 1px 3px rgba(16,24,34,.22);backdrop-filter:none;
}
.sfc-card .dur{
  position:absolute;right:10px;bottom:10px;z-index:2;
  font-size:10.5px;line-height:1;letter-spacing:.02em;
  padding:4px 8px;border-radius:var(--s-r);
  background:rgba(21,28,36,.78);color:#fff;
  font-variant-numeric:tabular-nums;
}
.sfc-card .bd{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.sfc-card h3{font-family:var(--s-font-serif);font-weight:600;font-size:15.5px;line-height:1.65;margin:0;color:var(--s-ink)}
@media (hover:hover) and (pointer:fine){
.sfc-card:hover h3{color:var(--s-accent-text)}}

.sfc-card .sub{font-size:12.5px;color:var(--s-meta);line-height:1.8;margin:7px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sfc-card .meta{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--s-meta);margin-top:auto;padding-top:14px}
.sfc-card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.sfc-card .tags span{font-size:10px;color:var(--s-accent-text-deep);background:var(--s-accent-soft);border:1px solid var(--s-line);padding:2px 8px}

/* ============================================================================
   会员墙（.sf-wall）：深色遮罩改纸面提示
   ========================================================================== */
.sf-wall{
  position:relative;width:100%;aspect-ratio:16/9;min-height:320px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center;
  background:var(--s-paper);border:1px solid var(--s-line);color:var(--s-body);
}
.sf-wall .lk{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--s-line);color:var(--s-accent-text);background:#fff;
}
.sf-wall h3{margin:0;font-family:var(--s-font-serif);font-size:20px;color:var(--s-ink);font-weight:600}
.sf-wall p{margin:0;max-width:480px;font-size:13.5px;line-height:1.95;color:var(--s-meta)}
.sf-wall p b{color:var(--s-accent-text);font-weight:600}
.sf-wall .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.sf-wall .hint{font-size:11.5px;color:var(--s-meta);letter-spacing:.04em}
.sf-wall.light{aspect-ratio:auto;min-height:0;background:var(--s-paper);border:1px solid var(--s-line)}
.sf-wall.light h3{color:var(--s-ink)}
.sf-wall.light p{color:var(--s-meta)}
.sf-wall .excerpt{margin-top:8px;max-width:560px;font-size:13px;line-height:1.95;color:var(--s-meta)}

/* ============================================================================
   响应式
   ========================================================================== */
@media(max-width:1080px){
  .sf-hero-inner{grid-template-columns:1fr;gap:44px;padding:64px 0 56px}
  .sf-hero-art{max-width:320px;margin:0}
  .sf-about{grid-template-columns:1fr;gap:40px}
  .sf-about-visual{aspect-ratio:16/9}
  .sf-cta .sf-wrap{grid-template-columns:1fr;gap:34px}
  .sf-cta .right{text-align:left;align-items:flex-start}
  /* 手机上不放通栏地图：390px 宽正好只剩两三条街，卡片还会被挤到半屏。
     直接让纸卡占满，地图只在桌面端出现 —— 手机用户要的是地址和按钮。 */
  .sf-visit{display:block;min-height:0;padding:0;background:var(--s-paper)}
  .sf-mapbox{display:none}
  .sf-visit .sf-wrap{padding-top:32px;padding-bottom:36px}
  .sf-visit-card{max-width:none;background:#fff;box-shadow:none;border-color:var(--s-line)}
  .sf-team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-mag{grid-template-columns:1fr}
  .sf-mag-cover{min-height:260px;border-right:0;border-bottom:1px solid var(--s-line)}
  .sf-profile{grid-template-columns:1fr;gap:28px}
  .sf-portrait{max-width:280px;aspect-ratio:1/1.05}
  .sf-foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .sf-2col{grid-template-columns:1fr;gap:36px}
  .sf-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-grid3{grid-template-columns:1fr}
  .sf-steps{grid-template-columns:1fr 1fr}
  .sf-grid-2,.sf-grid-3{grid-template-columns:1fr}
  .sf-contact{grid-template-columns:1fr;gap:36px}
  .sf-profile-hd{grid-template-columns:88px 1fr;gap:20px}
  .sfc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sfc-layout{grid-template-columns:1fr}
  .sfc-toc{order:2}
}
/* 导航收起：导航项一多，1024 笔记本上横排会顶到右边界（实测溢出 264px），
   所以断点与 .dp-cols 一样取 1180——低于它一律收成汉堡。 */
@media(max-width:1180px){
  .sf-nav .sf-wrap{height:66px;gap:16px}
  .sf-nav nav{display:none}
  .sf-nav nav.open{
    display:flex;position:absolute;top:66px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--s-line);
    /* 下拉是通栏的，但菜单文字要和版心左边缘对齐：宽屏时补上居中留白 */
    padding:10px max(var(--sf-pad), calc((100vw / var(--z,1) - var(--sf-max)) / 2 + var(--sf-pad))) 20px;
    box-shadow:0 20px 30px -24px rgba(21,28,36,.4);
  }
  .sf-nav nav.open>a,.sf-nav nav.open .nav-drop>a{
    padding:14px 4px;border-bottom:1px solid var(--s-line-soft);font-size:15px;
  }
  .sf-nav nav.open .nav-drop-menu{
    position:static;transform:none;opacity:1;display:flex;background:transparent;
    border:0;box-shadow:none;padding:0 0 8px 14px;
  }
  .sf-nav nav.open .nav-drop-menu a{color:var(--s-meta);border:0;padding:9px 0}
  .sf-burger{display:flex}
  .sf-nav .sf-cta{display:none}
}

@media(max-width:820px){
  :root{--sf-pad:20px}
  .sf-wrap{padding:0 var(--sf-pad)}
  .sf-sec{padding:66px 0}
  .sf-hd{margin-bottom:36px}
  .sf-hd h2{font-size:26px}
  .sf-areas{grid-template-columns:1fr;gap:0}
  .sf-hero-stats{grid-template-columns:repeat(2,1fr)}
  .sf-hero-stats>div:nth-child(2){border-right:0}
  .sf-hero-stats>div:nth-child(1),.sf-hero-stats>div:nth-child(2){border-bottom:1px solid var(--s-line-soft)}
  .sf-cases{grid-template-columns:1fr}
  .sf-team,.sf-videos{grid-template-columns:1fr}
  .sf-foot-grid{grid-template-columns:1fr}
  .sf-post{gap:16px}
  .sf-post .dt{width:56px;padding-right:12px}
  .sf-post .dt b{font-size:22px}
  .sf-article-meta{gap:10px}
  .sf-hero-art{display:none}
  .sf-ph{padding:54px 0 48px}
}
@media(max-width:560px){
  .sf-form-2{grid-template-columns:1fr}
  .sf-lawyer .ph{aspect-ratio:16/10}
  .sf-hero-actions .sf-btn{flex:1}
  .sf-mag-cover h3{font-size:21px}
  .sf-hd{flex-direction:column;align-items:flex-start;gap:14px}
  .sf-steps{grid-template-columns:1fr}
  .sfc-grid{grid-template-columns:1fr}
}

/* ============================================================================
   旧版补丁样式的覆盖（图片位 / 头像 / 缩略图）
   这些规则在 app.css 里带深色底或白色文字，这里是唯一需要提高优先级的地方
   ========================================================================== */
.site-body[data-banner] .sf-ph:after{display:none}
.sf-hero-art.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-hero-art.has-img .since{bottom:-28px}

.sf-about-visual.has-img{background:var(--s-paper)}
.sf-about-visual.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-about-visual.has-img:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(21,28,36,0) 46%,rgba(21,28,36,.5) 100%);
}
.sf-about-visual.has-img .vslogan{color:rgba(255,255,255,.82);z-index:2}
.sf-about-visual.has-img .cap{color:rgba(255,255,255,.94);z-index:2}
/* 白字压图：图可能是浅色的，加一层轻阴影兜底（纯色底上看不出来） */
.sf-about-visual.has-img .cap,
.sf-about-visual.has-img .vslogan{text-shadow:0 1px 3px rgba(0,0,0,.6)}

.sf-lawyer .ph img.ava{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-lawyer .ph:has(img.ava):after{inset:0;border:0;background:none}

.sf-ava{
  position:relative;width:112px;height:132px;border:1px solid var(--s-line);
  overflow:hidden;background:var(--s-paper);flex:none;
}
.sf-ava img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
.sf-ava.empty{display:grid;place-items:center;color:#c3bcae;font-family:var(--s-font-serif);font-size:46px}

.sf-post .th{background-color:var(--s-paper-2);filter:none;border:1px solid var(--s-line)}
@media (hover:hover) and (pointer:fine){
.sf-post:hover .th{filter:none;border-color:var(--s-accent)}}


/* 有头图时：文字限宽，避免落到羽化区；窄屏收起图片条 */
@media(min-width:821px){
  .site-body[data-banner] .sf-ph h1,
  .site-body[data-banner] .sf-ph p,
  .site-body[data-banner] .sf-ph .stats{max-width:620px}
}
@media(max-width:820px){
  .site-body[data-banner] .sf-ph:before{display:none}
}

/* 筛选胶囊（视频/团队/文章列表）：选中态用主题色，不用近黑 */
.sf-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.sf-chip{
  font-size:12.5px;color:#5f6b7a;padding:8px 17px;border:1px solid var(--s-line);
  background:#fff;transition:.18s;border-radius:var(--s-r);display:inline-flex;align-items:center;
}
@media (hover:hover) and (pointer:fine){
.sf-chip:hover{border-color:var(--s-accent);color:var(--s-accent-text)}}

.sf-chip.on{background:var(--s-accent-solid);color:var(--s-on-accent);border-color:var(--s-accent-solid);font-weight:500}

/* 播放器区域：只有真正的视频画面用黑底，其余状态（外链/空/会员墙）回到纸面 */
.sfc-player{background:var(--s-paper);border:1px solid var(--s-line)}
.vpl-ext,.vpl-empty{background:var(--s-paper)}
.vpl-ext .ic{border-color:var(--s-line);background:#fff;color:var(--s-accent-text)}
.vpl-ext b,.vpl-empty b{color:var(--s-ink)}
.vpl-ext .host,.vpl-ext small,.vpl-empty span{color:var(--s-meta)}
.vpl-ext .go{background:var(--s-accent-solid);color:var(--s-on-accent)}
@media (hover:hover) and (pointer:fine){
.vpl-ext .go:hover{background:var(--s-accent-hover);color:var(--s-on-accent-hover)}}

.vpl-ext .warn{color:var(--amber)}

/* 品牌标识：上传的 Logo 多为「白字透明底」（给深色导航做的），
   在纸白页头上会消失。这里统一压成单色墨稿，任何配色下都清晰且高级。 */
.sf-brand .brand-logo,
.sf-foot-brand .brand-logo{
  filter:brightness(0) saturate(100%);opacity:.88;
}
.sf-foot-brand .brand-logo{opacity:.8}

/* 分页当前页：主题色，不用近黑方块 */
.sf-pager .on{background:var(--s-accent-solid);border-color:var(--s-accent-solid);color:var(--s-on-accent)}

/* 文章阅读页（.rd-*）与新系统对齐：底色、进度条、强调色 */
.rd{background:var(--s-bg)}
.rd-progress i{background:var(--s-accent)}
@media (hover:hover) and (pointer:fine){
.rd-crumb a:hover{color:var(--s-accent-text)}}


/* 首页洞察封面：图片上压一层由左向右的纸白蒙版，保证深色标题始终可读 */
.sf-mag-cover{position:relative;isolation:isolate;background-color:var(--s-paper)}
.sf-mag-cover:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:none;
}
.sf-mag-cover>*{position:relative;z-index:1}

/* ============================================================================
   详情页 v3（2026-11）：文章 / 视频课时 / 专栏章节
   ----------------------------------------------------------------------------
   用户诉求：不要「窄卡片杂志感」，要像主流新闻门户与常规官网的详情页——
   通栏面包屑 → 大标题 + 摘要 → 作者/时间/阅读/字号工具条 → 通栏大图 →
   双栏正文（正文 820 + 右栏 340）→ 标签/分享/上下篇/作者卡/相关阅读。
   独立命名空间 .dp-*，不继承也不覆盖旧的 .rd-* / .sfc-* 规则。
   ========================================================================== */
.dp{background:var(--s-bg);padding-bottom:80px}
.dp-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;pointer-events:none}
.dp-progress i{display:block;height:100%;width:0;background:var(--s-accent)}

/* ---------- 面包屑条 ---------- */
.dp-crumb{background:var(--s-paper);border-bottom:1px solid var(--s-line)}
.dp-crumb .in{display:flex;align-items:center;gap:10px;height:48px;font-size:12.5px;color:var(--s-meta);overflow:hidden;white-space:nowrap}
.dp-crumb a{color:var(--s-meta)}
@media (hover:hover) and (pointer:fine){
.dp-crumb a:hover{color:var(--s-accent-text)}}

.dp-crumb i{font-style:normal;color:#ccd3db}
.dp-crumb .cur{color:var(--s-ink);overflow:hidden;text-overflow:ellipsis}
/* 末尾若是可点链接（课程名/专栏名）且很长，窄屏下也要省略号，不能硬切 */
.dp-crumb .in>a:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- 头部 ---------- */
.dp-head{padding:46px 0 0}
.dp-kicker{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.18em;color:var(--s-accent-text)}
.dp-kicker:before{content:"";width:26px;height:1px;background:var(--s-accent);flex:none}
.dp-head h1{
  font-family:var(--s-font-serif);font-weight:600;color:var(--s-ink);
  font-size:clamp(27px,3.1vw,42px);line-height:1.36;letter-spacing:.01em;
  margin:18px 0 0;max-width:var(--sf-read);
}
.dp-lede{
  margin:20px 0 0;max-width:var(--sf-read);font-size:16px;line-height:1.95;color:var(--s-body);
  padding-left:16px;border-left:2px solid var(--s-line);
}
.dp-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding:15px 0;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);
  font-size:13px;color:var(--s-meta);
}
.dp-ava{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:var(--s-paper);border:1px solid var(--s-line);color:var(--s-accent-text);
  font-family:var(--s-font-serif);font-size:15px;line-height:1;
}
.dp-meta .who b{display:block;font-size:13.5px;color:var(--s-ink);font-weight:600;line-height:1.5}
.dp-meta .who span{display:block;font-size:11.5px;color:var(--s-meta);line-height:1.45}
.dp-dot{width:1px;height:12px;background:var(--s-line);flex:none}
.dp-tools{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--s-meta)}
.dp-tools .lb{letter-spacing:.06em}
.dp-tools button{
  font:inherit;font-size:12px;color:var(--s-body);background:#fff;border:1px solid var(--s-line);
  height:28px;min-width:30px;padding:0 9px;cursor:pointer;transition:border-color .18s,color .18s,background .18s;
}
@media (hover:hover) and (pointer:fine){
.dp-tools button:hover{border-color:var(--s-accent);color:var(--s-accent-text)}}

.dp-tools button.on{background:var(--s-accent-soft);border-color:var(--s-accent);color:var(--s-accent-text)}
.dp-tools .split{width:1px;height:16px;background:var(--s-line);margin:0 4px}

/* ---------- 封面 ---------- */
.dp-cover{margin:0;padding-top:34px}
.dp-cover img{display:block;width:100%;max-height:520px;object-fit:cover;background:var(--s-paper-2)}
.dp-cover figcaption{margin-top:10px;font-size:12px;color:var(--s-meta);text-align:center}

/* ---------- 双栏 ---------- */
/* 头部、封面、正文左边缘与列表页对齐；正文 760 ＋ 间距 60 ＋ 右栏 340 正好填满 1160。
   .dp-shell 不再自带宽度，直接吃 .sf-wrap 的版心。 */
.dp-shell{max-width:none;margin:0 auto}
.dp-cols{
  display:grid;grid-template-columns:minmax(0,1fr) var(--sf-side);
  gap:var(--sf-gap);padding-top:44px;align-items:start;
}
.dp-main{min-width:0}

/* 专栏章节页：左目录常驻 + 右正文。
   **已停用**：先是第四十三章改成 `.dp--read--rail`（目录左、正文右的镜像版），
   2026-11 再改回 `.dp--read`（正文在左、目录进右栏卡片），所以这一条现在没有任何
   页面在用。保留是因为 .dp-catalog（课程页目录组件）仍带着 is-rail 的样式，删了会
   连带出错。 */
/* 章节阅读：左侧目录常驻 + 右侧正文。
   直接复用站点自己的栅格 token：340 + 60 + 760 = 1160，正好填满版心，
   所以目录左边缘与导航、页脚、其它页正文同在一条线上（1440 下 140px）。
   2026-11 修：上一版用 280 + 48 + 760 = 1088 居中，左右各内缩 36px，
   全站只有这一页的左边缘是 176，看起来「正文比别的页窄一截」。 */
.dp-cols--study{grid-template-columns:var(--sf-side) minmax(0,var(--sf-read));gap:var(--sf-gap);padding-top:34px}
.dp-cols--study .dp-head{padding-top:0}
.dp-rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---------- 正文 ---------- */
.dp-prose{font-size:17.5px;line-height:2.05;color:#3b4552;word-break:break-word}
.dp-prose.fs-s{font-size:16px}
.dp-prose.fs-l{font-size:19.5px}
.dp-prose p{margin:0 0 1.5em}
.dp-prose>:first-child{margin-top:0}
.dp-prose>:last-child{margin-bottom:0}
.dp-prose h2{
  font-family:var(--s-font-serif);font-size:23px;font-weight:600;line-height:1.6;
  color:var(--s-ink);margin:2.1em 0 .85em;padding-left:14px;border-left:3px solid var(--s-accent);
}
.dp-prose h3{font-family:var(--s-font-serif);font-size:19px;font-weight:600;color:var(--s-ink);margin:1.9em 0 .7em}
.dp-prose h4{font-size:16.5px;font-weight:600;color:var(--s-ink);margin:1.6em 0 .6em}
.dp-prose a{color:var(--s-accent-text);border-bottom:1px solid var(--s-line)}
@media (hover:hover) and (pointer:fine){
.dp-prose a:hover{border-bottom-color:var(--s-accent)}}

.dp-prose strong,.dp-prose b{color:var(--s-ink);font-weight:600}
.dp-prose ul,.dp-prose ol{padding-left:1.45em;margin:0 0 1.5em}
.dp-prose li{margin:.4em 0}
.dp-prose blockquote{
  margin:1.8em 0;padding:20px 24px;background:var(--s-paper);
  border-left:3px solid var(--s-accent);color:var(--s-body);font-size:16.5px;
}
.dp-prose blockquote p:last-child{margin-bottom:0}
.dp-prose img{max-width:100%;height:auto;display:block;margin:26px 0;border:1px solid var(--s-line-soft)}
.dp-prose figure{margin:26px 0}
.dp-prose figcaption{font-size:12.5px;color:var(--s-meta);text-align:center;margin-top:8px}
.dp-prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.dp-prose th,.dp-prose td{border:1px solid var(--s-line);padding:10px 12px;text-align:left}
.dp-prose th{background:var(--s-paper);color:var(--s-ink);font-weight:600}
.dp-prose hr{border:0;border-top:1px solid var(--s-line);margin:2.4em 0}

/* ---------- 标签 / 分享 / 上下篇 ---------- */
.dp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;padding-top:24px;border-top:1px solid var(--s-line)}
.dp-tags a{font-size:12.5px;color:var(--s-body);border:1px solid var(--s-line);padding:5px 12px;background:#fff;transition:.18s}
@media (hover:hover) and (pointer:fine){
.dp-tags a:hover{border-color:var(--s-accent);color:var(--s-accent-text)}}

.dp-share{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:12.5px;color:var(--s-meta)}
.dp-share .lb{letter-spacing:.06em}
.dp-share button,.dp-share a{
  font:inherit;font-size:12.5px;color:var(--s-body);background:#fff;border:1px solid var(--s-line);
  height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:.18s;
}
@media (hover:hover) and (pointer:fine){
.dp-share button:hover,.dp-share a:hover{border-color:var(--s-accent);color:var(--s-accent-text)}}

.dp-share button.on{background:var(--s-accent-soft);border-color:var(--s-accent);color:var(--s-accent-text)}
.dp-pager{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border:1px solid var(--s-line)}
.dp-pager a{padding:18px 22px;display:block;min-width:0;transition:background .18s}
.dp-pager a+a{border-left:1px solid var(--s-line)}
@media (hover:hover) and (pointer:fine){
.dp-pager a:hover{background:var(--s-paper)}}

.dp-pager span{display:block;font-size:11.5px;color:var(--s-meta);letter-spacing:.06em}
.dp-pager b{display:block;margin-top:6px;font-size:14.5px;color:var(--s-ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-pager .next{text-align:right}
.dp-pager .placeholder{background:var(--s-paper);opacity:.55}

/* ---------- 作者卡 ---------- */
.dp-byline{display:flex;align-items:center;gap:16px;margin-top:36px;padding:24px;background:var(--s-paper);border:1px solid var(--s-line)}
.dp-byline .dp-ava{width:52px;height:52px;font-size:20px;background:#fff}
.dp-byline .who{flex:1;min-width:0}
.dp-byline .who span{display:block;font-size:11px;letter-spacing:.12em;color:var(--s-meta)}
.dp-byline .who b{display:block;font-size:16.5px;color:var(--s-ink);font-family:var(--s-font-serif);margin:4px 0 3px}
.dp-byline .who i{font-style:normal;font-size:12.5px;color:var(--s-body)}
.dp-note{margin:16px 0 0;font-size:12px;line-height:1.95;color:var(--s-meta)}
.dp-note a{color:var(--s-accent-text)}

/* ---------- 相关阅读 ---------- */
.dp-rel{margin-top:52px}
.dp-rel-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid var(--s-ink);padding-bottom:12px}
.dp-rel-hd h2{font-family:var(--s-font-serif);font-size:20px;margin:0;font-weight:600;color:var(--s-ink)}
.dp-rel-hd span{font-size:10.5px;letter-spacing:.2em;color:var(--s-meta)}
.dp-rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.dp-rel-grid a{display:block;padding:16px 0;border-bottom:1px solid var(--s-line-soft);min-width:0}
@media (hover:hover) and (pointer:fine){
.dp-rel-grid a:hover b{color:var(--s-accent-text)}}

.dp-rel-grid .m{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--s-meta)}
.dp-rel-grid b{display:block;margin-top:6px;font-size:14.5px;line-height:1.7;color:var(--s-ink);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 右栏 ---------- */
.dp-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px}
.dp-card{border:1px solid var(--s-line);background:#fff}
.dp-card>.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--s-line)}
.dp-card>.hd b{font-size:13.5px;color:var(--s-ink);font-weight:600}
.dp-card>.hd span{font-size:10.5px;letter-spacing:.14em;color:var(--s-meta)}
.dp-toc ol{list-style:none;margin:0;padding:8px 8px 12px}
.dp-toc a{display:block;padding:8px 10px;font-size:13px;line-height:1.7;color:var(--s-body);border-left:2px solid transparent}
@media (hover:hover) and (pointer:fine){
.dp-toc a:hover{background:var(--s-paper);color:var(--s-ink)}}

.dp-toc a.on{color:var(--s-accent-text);border-left-color:var(--s-accent);background:var(--s-accent-soft);font-weight:600}
.dp-toc li.lv2 a{padding-left:24px;font-size:12.5px;color:var(--s-meta)}
.dp-hot ol{list-style:none;margin:0;padding:6px 16px 12px}
.dp-hot li{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--s-line-soft)}
.dp-hot li:last-child{border-bottom:0}
.dp-hot .n{flex:none;width:16px;font-family:var(--s-font-serif);font-size:14px;color:#c7ced8;line-height:1.7}
.dp-hot li:nth-child(-n+3) .n{color:var(--s-accent-text);font-weight:600}
.dp-hot a{font-size:13px;line-height:1.75;color:var(--s-body)}
@media (hover:hover) and (pointer:fine){
.dp-hot a:hover{color:var(--s-accent-text)}}

.dp-cta{padding:22px;background:var(--s-paper);border:1px solid var(--s-line)}
.dp-cta b{display:block;font-family:var(--s-font-serif);font-size:16px;color:var(--s-ink)}
.dp-cta p{margin:8px 0 16px;font-size:12.5px;line-height:1.9;color:var(--s-body)}
.dp-cta .sf-btn{width:100%;justify-content:center}

/* ============================================================================
   阅读页 v4（2026-11）：正文 + 一列注脚（文章 / 图文专栏 / 专栏章节共用）
   ----------------------------------------------------------------------------
   v3 的病根不是排版，是「框太多」：标题上下两道线、1160×520 的通栏大图、
   两个方框装的上下篇、灰底作者卡配大按钮、底部两列的相关阅读、右栏两张描边
   卡片，再加上导航 / 作者卡 / 右栏三个实心主色按钮 —— 一屏能数出十来个方框，
   正文被夹在中间，读者第一眼看的是框，不是字。

   v4 只留两层：
     · 正文，页面唯一的主体。标题、导语、署名行、封面、正文、文末都在一条
       800 的竖列里，除了一条署名线，没有任何边框；
     · 注脚。目录 / 咨询 / 热门，宽度收到 300，粘在边上跟着读。目录是三块里唯一
       带框的（.dp-sbox：纸底 + 发丝框 + 顶部 2px 主色），其余只用小字标签 + 细线。

   三页共用同一套类，正文一律在左：
     .dp--read              文章详情      正文 800 ＋ 右侧目录卡 / 咨询 / 热门
     .dp--read              专栏详情      同上（章节目录进右栏卡片）
     .dp--read .dp--read--cat 专栏章节    同上；窄屏时目录卡提到正文上方
   2026-11 再改：章节页原来做的是镜像版（目录在左），现在改回正文在左 ——
   同一站里「目录都在右手边」，读者不用每换一种页面就重新找一次位置。
   ========================================================================== */
.dp--read{background:#fff}
/* 左 800 ＝ 1160 − 300 − 30 − 30：正文右边 30px 留白 + 一条分隔线 + 30px，才是注脚栏。
   分隔线画在正文这一侧（而不是注脚栏上）——注脚栏是 sticky 的，它有多高线就只有多高，
   短注脚（专栏详情只有三章）会在页脚上方露出半截线，像没画完。 */
.dp--read .dp-cols{grid-template-columns:minmax(0,1fr) 300px;column-gap:30px;padding-top:40px}
.dp--read .dp-main{border-right:1px solid var(--s-line);padding-right:30px}
/* 三页都把正文放在左边：文章详情、专栏详情、专栏章节。目录一律进右栏的目录卡，
   不再有「章节页目录在左、正文在右」的镜像版——同一站里同一件事换边，读起来要
   重新找一次位置。窄屏（≤1180）时 .dp--read--cat 才把目录提到正文上方。 */

/* ---- 标题区：去掉上下双线，只留署名线 ---- */
.dp--read .dp-head{padding-top:8px}
.dp--read .dp-head h1{max-width:none;font-size:clamp(28px,3vw,40px);line-height:1.42;margin-top:16px}
/* 导语不再用左侧竖线：它和正文 h2 的竖线撞在一起，两条线离得近，看着像错位 */
.dp--read .dp-lede{
    max-width:36em;margin-top:16px;padding-left:0;border-left:0;
    font-size:16.5px;line-height:1.95;color:var(--s-meta);
}
.dp--read .dp-meta{margin-top:24px;padding:14px 0 15px;border-top:0}
.dp--read .dp-facts{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
@media(max-width:820px){
  .dp--read .dp-facts{gap:10px}
}

/* ---- 封面：收进正文列 ---- */
.dp--read .dp-cover{padding-top:30px}
.dp--read .dp-cover img{max-height:420px}
/* 正文第一段是标题时（专栏章节多是这样），2.1em 的上间距被 :first-child 抹平，
   标题会贴着署名线；补回一段呼吸，和正文里其它 h2 的节奏一致 */
.dp--read .dp-prose>h2:first-child,
.dp--read .dp-prose>h3:first-child{margin-top:30px}
/* 专栏封面比文章封面再低一档：它是这本书的「封面照」，不是正文配图，
   800×420 会把首屏吃掉一半，读者滚一屏才看到专栏介绍 */
.dp--series .dp-cover img{max-height:320px}

/* ---- 文末：标签与分享一行、作者一段、上下篇一行 ---- */
.dp--read .dp-foot{margin-top:46px}
.dp--read .dp-foot-acts{
    display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;
    padding-top:22px;border-top:1px solid var(--s-line);
}
.dp--read .dp-tags{margin:0;padding:0;border-top:0}
.dp--read .dp-share{margin-top:0}

/* ---- 文末作者：一块纸色名片 ----
   上一版是三行叠字（小编标签 / 姓名 / 所名），头像 44，整块 76 高却没有重点：
   读者扫过去只看到三行灰色小字。现在改成「头像 + 姓名（大字）+ 出处（一行）」
   的两行结构，按钮做成描边小胶囊收在右端——姓名是这块的主角，其余都退到后面。 */
.dp--read .dp-sign{
    display:flex;align-items:center;gap:16px;
    margin-top:34px;padding:20px 22px;
    background:var(--s-paper);border:1px solid var(--s-line);border-radius:var(--s-r);
}
.dp--read .dp-sign .dp-ava{
    width:48px;height:48px;border-radius:50%;font-size:18px;
    background:var(--s-accent-soft);border-color:transparent;
}
.dp--read .dp-sign .who{flex:1;min-width:0}
.dp--read .dp-sign .who b{
    display:block;font-family:var(--s-font-serif);font-size:18px;line-height:1.4;
    letter-spacing:.02em;color:var(--s-ink);
}
.dp--read .dp-sign .who i{
    display:block;margin-top:6px;font-style:normal;font-size:12px;line-height:1.7;color:var(--s-meta);
}
.dp--read .dp-sign .who .nb{white-space:nowrap}
.dp--read .dp-sign-go{
    flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:34px;padding:0 15px;background:#fff;border:1px solid var(--s-line);
    border-radius:var(--s-r);font-size:12.5px;color:var(--s-accent-text);
    transition:border-color .18s,background .18s,color .18s;
}
.dp--read .dp-sign-go span{font-size:11px}
@media (hover:hover) and (pointer:fine){
.dp--read .dp-sign-go:hover{border-color:var(--s-accent);background:var(--s-accent-soft)}}
.dp--read .dp-note{margin-top:14px}

/* 上一篇 / 下一篇（章节页是「上一章 / 下一章」）：同一行，左一条右一条。
   原来两行叠着放，各占一整行、各带一条底线，读完要往下滚两屏才看到底。
   现在并排：标题单行截断，中间一根细线分左右；只剩一边时，那一边直接靠右，
   不再留半块空白。 */
.dp--read .dp-pp{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:34px;padding-top:22px;border-top:1px solid var(--s-line);
}
.dp--read .dp-pp a{display:block;min-width:0;padding:0;border:0}
.dp--read .dp-pp .k{display:block;font-size:11.5px;letter-spacing:.04em;color:var(--s-meta)}
.dp--read .dp-pp b{
    display:block;margin-top:7px;font-size:14px;font-weight:500;color:var(--s-ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dp--read .dp-pp .nx{grid-column:2;text-align:right;padding-left:26px;border-left:1px solid var(--s-line-soft)}
.dp--read .dp-pp .pv{padding-right:26px}
.dp--read .dp-pp a:only-child{border-left:0}
@media (hover:hover) and (pointer:fine){
.dp--read .dp-pp a:hover b{color:var(--s-accent-text)}}

/* ---- 右栏：没有卡片，只有标签与细线 ---- */
/* 目录 + 相关 + 热门 + 咨询 加在一起比一屏高的时候，sticky 会把最下面的咨询卡
   永远钉在视口外——给一个「超出才出现」的内滚动，够不着的内容才够得着。 */
.dp--read .dp-side{
    display:block;position:sticky;top:92px;
    max-height:calc(100vh / var(--z,1) - 116px);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:#dbe1e8 transparent;
}
.dp--read .dp-side::-webkit-scrollbar{width:4px}
.dp--read .dp-side::-webkit-scrollbar-thumb{background:#dfe4ea;border-radius:2px}
.dp-sblock+.dp-sblock,
.dp-cta+.dp-sblock{margin-top:22px;padding-top:18px;border-top:1px solid var(--s-line-soft)}
/* 分组标题：小字标签 + 一条延伸到底的细线。
   原来右侧还有 RELATED / POPULAR 的英文小标，300 宽的注脚栏里挤两个标签，
   最后一个字母几乎贴着版心边缘，看着像没排完；去掉，线本身就把分组讲清楚了。 */
.dp-sblock .lb{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.dp-sblock .lb b{flex:none;font-size:12.5px;font-weight:600;color:var(--s-ink);letter-spacing:.06em}
.dp-sblock .lb:after{content:"";flex:1;height:1px;background:var(--s-line-soft)}

.dp-slist{list-style:none;margin:0;padding:0}
.dp-slist li{padding:0}
.dp-slist li+li{border-top:1px solid var(--s-line-soft)}
.dp-slist a{display:block;padding:9px 0;min-width:0}
.dp-slist b{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:13px;font-weight:400;line-height:1.68;color:var(--s-body);word-break:break-word;
}
.dp-slist i{display:block;margin-top:3px;font-style:normal;font-size:10.5px;line-height:1.5;color:var(--s-meta)}
@media (hover:hover) and (pointer:fine){
.dp-slist a:hover b{color:var(--s-accent-text)}}

/* 热门：序号 + 标题，比「相关阅读」更紧一档（不要日期，省一行） */
.dp-slist.is-hot li{display:flex;gap:9px;padding:8px 0}
.dp-slist.is-hot li+li{border-top:1px solid var(--s-line-soft)}
.dp-slist.is-hot .n{
    flex:none;width:14px;font-family:var(--s-font-serif);font-size:12.5px;line-height:1.75;color:#c3cad3;
}
.dp-slist.is-hot li:nth-child(-n+3) .n{color:var(--s-accent-text);font-weight:600}
.dp-slist.is-hot a{flex:1;min-width:0;padding:0}
.dp-slist.is-hot b{font-size:12.5px;line-height:1.7}

/* 目录：左侧一根细线，选中项把线染成主色，不再有底色块 */
.dp--read .dp-toc ol{list-style:none;margin:0;padding:0}
.dp--read .dp-toc a{
    display:block;padding:6px 0 6px 12px;font-size:12.5px;line-height:1.62;color:var(--s-body);
    border-left:1px solid var(--s-line);
}
@media (hover:hover) and (pointer:fine){
.dp--read .dp-toc a:hover{background:none;color:var(--s-ink)}}
.dp--read .dp-toc a.on{
    background:none;border-left-color:var(--s-accent);color:var(--s-accent-text);font-weight:600;
}
.dp--read .dp-toc li.lv2 a{padding-left:24px;font-size:12px;color:var(--s-meta)}

/* ============================================================================
   目录卡（.dp-sbox）：右栏唯一带框的块
   ----------------------------------------------------------------------------
   之前目录和「热门阅读」长一个样——小字标签 + 一条细线，读者扫一眼分不出哪一块
   是「这页怎么读」，而目录恰恰是长文里最该被看见的东西。现在给它一块暖纸底、
   一圈发丝框、顶边 2px 主色：注脚栏里只有它是「一块」，其余仍是标签。
   三处共用：文章页「本文目录」、专栏详情「章节目录」、专栏章节「章节目录」。
   ========================================================================== */
.dp--read .dp-sbox{
    padding:15px 15px 12px;
    background:var(--s-paper);border:1px solid var(--s-line);
    border-top:2px solid var(--s-accent);border-radius:var(--s-r);
}
/* 卡里的标题行：主色小方块 + 标题，下面一条线把它和条目分开 */
.dp--read .dp-sbox .lb{gap:9px;margin-bottom:0;padding-bottom:11px;border-bottom:1px solid var(--s-line)}
.dp--read .dp-sbox .lb:before{content:"";flex:none;width:3px;height:12px;background:var(--s-accent)}
.dp--read .dp-sbox .lb:after{display:none}
.dp--read .dp-sbox .lb b{font-size:13px}
.dp--read .dp-sbox .dp-catq>summary{
    gap:9px;font-size:13px;padding-bottom:11px;border-bottom:1px solid var(--s-line);
}
.dp--read .dp-sbox .dp-catq>summary:before{content:"";flex:none;width:3px;height:12px;background:var(--s-accent)}
.dp--read .dp-sbox .dp-catq>summary:after{display:none}
.dp--read .dp-sbox .dp-catq .ft{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--s-line-soft)}
/* 收起状态（窄屏默认收起）：标题下面那条分隔线不该留着 ——
   线后面什么都没有，看起来像卡片没画完 */
.dp--read .dp-sbox .dp-catq:not([open])>summary{padding-bottom:2px;border-bottom:0}
.dp--read .dp-sbox .dp-toc ol,
.dp--read .dp-sbox .dp-chap{margin-top:7px}
/* 条目：选中项整条底色 + 左侧主色线，比「只染一根线」更容易在 300 宽里被认出来 */
.dp--read .dp-sbox .dp-toc a,
.dp--read .dp-sbox .dp-chap a{
    padding:7px 8px 7px 10px;margin-left:-1px;
    border-left:1px solid var(--s-line);border-radius:0 2px 2px 0;
}
.dp--read .dp-sbox .dp-toc a.on,
.dp--read .dp-sbox .dp-chap a.on{
    background:var(--s-accent-soft);border-left-color:var(--s-accent);
    color:var(--s-accent-text);font-weight:600;
}
@media (hover:hover) and (pointer:fine){
.dp--read .dp-sbox .dp-toc a:hover,
.dp--read .dp-sbox .dp-chap a:hover{background:rgba(21,28,36,.045);color:var(--s-ink)}
.dp--read .dp-sbox .dp-toc a.on:hover,
.dp--read .dp-sbox .dp-chap a.on:hover{background:var(--s-accent-soft);color:var(--s-accent-text)}}

/* 咨询卡：整体白色 + 一圈发丝线。
   原来是 --s-paper-2（#f1eee8），比「章节目录」卡的纸色（--s-paper #f7f5f1）还深，
   两块在右栏里并排时，读者第一眼看到的是咨询卡，目录反而沉下去了 ——
   目录才是长文里最该被找到的东西，所以咨询卡退成白底，只留一条边。 */
.dp--read .dp-cta{margin-top:22px;padding:20px;border:1px solid var(--s-line-soft);background:#fff}
.dp--read .dp-cta b{font-size:15px}
.dp--read .dp-cta p{margin:7px 0 14px;font-size:12px;line-height:1.85;color:var(--s-meta)}
.dp--read .dp-cta .sf-btn{height:38px;font-size:12.5px}

/* 头部动作条：专栏详情页的「开始阅读 / 先看目录」，文章页没有这一条 */
.dp--read .dp-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.dp--read .dp-acts .sf-btn{height:42px;padding:0 20px;font-size:13px}

/* ---- 静版章节目录（专栏详情 / 专栏章节的右栏卡片里）----
   与文章页「本文目录」同一套观感：标签 + 细线，条目左侧一根线，当前章把线染成
   主色（卡片里再加一条底色，见上面的 .dp-sbox）。不用 x-catalog 那套卡片，
   是因为这里的目录本身就在卡片里，再套一层框会变成「框里的框」。 */
.dp-catq{display:block}
.dp-catq>summary{
    position:relative;display:flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;color:var(--s-ink);letter-spacing:.06em;
    cursor:pointer;list-style:none;
}
.dp-catq>summary::-webkit-details-marker{display:none}
.dp-catq>summary::marker{content:""}
.dp-catq>summary span{font-weight:400;font-size:10.5px;color:var(--s-meta);letter-spacing:0}
.dp-catq>summary:after{content:"";flex:1;height:1px;background:var(--s-line-soft)}
.dp-catq .car{display:none}

.dp-chap{list-style:none;margin:2px 0 0;padding:0}
.dp-chap a{
    display:flex;align-items:baseline;gap:8px;
    padding:7px 0 7px 12px;border-left:1px solid var(--s-line);
    font-size:12.5px;line-height:1.62;color:var(--s-body);
}
.dp-chap a.on{border-left-color:var(--s-accent);color:var(--s-accent-text);font-weight:600}
.dp-chap .n{flex:none;width:17px;font-size:11px;color:#bfc6ce;font-variant-numeric:tabular-nums}
.dp-chap a.on .n{color:var(--s-accent-text)}
.dp-chap .t{flex:1;min-width:0}
@media (hover:hover) and (pointer:fine){
.dp-chap a:hover{color:var(--s-ink)}}
.dp-catq .ft{margin:10px 0 0;font-size:11px;line-height:1.75;color:var(--s-meta)}

@media(max-width:1180px){
  /* 落成单栏：注脚到正文下方，竖线换成上方的横线。
     整列收到 760 居中 —— 不收的话 1120 的笔记本上正文会拉成 1040 宽、一行六十多字，
     眼睛找不到下一行的开头。与专栏章节页的窄屏处理保持一致。 */
  .dp--read .dp-cols{grid-template-columns:minmax(0,1fr);max-width:var(--sf-read);margin:0 auto;row-gap:0}
  .dp--read .dp-main{border:0;padding:0}
  .dp--read .dp-side{
      position:static;margin-top:44px;padding:26px 0 0;
      border-left:0;border-top:1px solid var(--s-line);
  }
  .dp--read .dp-cta{max-width:420px}
  /* 单栏时目录卡是 760 宽，一章一行会拉出很长的空白（标题 200 字宽，右边空 500）。
     并成两列：短标题并排，长标题仍然按行高走，卡片的宽度才不浪费。 */
  .dp--read .dp-chap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}

  /* 章节页：目录在手机上折到正文上方（收起状态只有一行）——先看结构，再读正文。
     它在 DOM 里排在正文之后（桌面要它在右），所以用 order:-1 提上来；
     margin / padding 归零：卡片自带边框，不需要额外那条横线。 */
  .dp--read--cat .dp-side{order:-1;margin:0 0 28px;padding:0;border:0}
  /* 咨询卡跟着目录一起上来会变成「两张卡顶在正文前面」，窄屏先收起（页脚有联系方式） */
  .dp--read--cat .dp-cta{display:none}
  /* 窄屏才给折叠箭头：桌面目录常驻展开，画个箭头等于问人家「要不要收起」 */
  .dp-catq>summary{padding-right:16px}
  .dp-catq .car{
      display:block;position:absolute;right:0;top:50%;width:6px;height:6px;
      border-right:1.5px solid var(--s-meta);border-bottom:1.5px solid var(--s-meta);
      transform:translateY(-70%) rotate(45deg);transition:transform .2s;
  }
  .dp-catq[open] .car{transform:translateY(-30%) rotate(-135deg)}
}
@media(max-width:820px){
  .dp--read .dp-head{padding-top:0}
  .dp--read .dp-head h1{font-size:25px}
  .dp--read .dp-lede{font-size:15.5px;line-height:1.9}
  .dp--read .dp-cover{padding-top:22px}
  .dp--read .dp-cover img{max-height:300px}
  .dp--read .dp-foot{margin-top:34px}
  /* 作者名片：头像与文字一行，按钮落到下一行整宽（34 高的按钮手指才好按） */
  .dp--read .dp-sign{flex-wrap:wrap;gap:12px 14px;padding:16px}
  .dp--read .dp-sign .who b{font-size:16.5px}
  .dp--read .dp-sign-go{width:100%}
  /* 上下篇仍然一行，只是把间距收小、字号收一档 */
  .dp--read .dp-pp{margin-top:28px;padding-top:18px}
  .dp--read .dp-pp .pv{padding-right:16px}
  .dp--read .dp-pp .nx{padding-left:16px}
  .dp--read .dp-pp b{font-size:13px}
  /* 手机上一列：两列 165px 连「婚姻家庭编：夫妻财产与债务」都放不下 */
  .dp--read .dp-chap{grid-template-columns:minmax(0,1fr);column-gap:0}
}

/* ============================================================================
   视频课时页：播放器在上、标题与操作条在下，右栏课程卡 + 目录
   ========================================================================== */
/* 播放区：视频是主角，左列吃满剩余（1160 − 260 − 40 = 860 → 16:9 得 484 高），
   首屏还能露出标题与「第 N 讲 / 共 M 讲」。右栏只放课程速览与咨询，
   比阅读页窄 80px，把宽度让给播放器。 */
.dp-vgrid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start;padding-top:26px}
.dp-player{background:#0d1117;border:1px solid var(--s-line);position:relative;overflow:hidden}
.dp-player video,.dp-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
.dp-vtitle{font-family:var(--s-font-serif);font-size:clamp(21px,2.3vw,29px);line-height:1.45;margin:22px 0 0;color:var(--s-ink);font-weight:600}
.dp-vmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--s-meta)}
.dp-vmeta b{color:var(--s-ink);font-weight:600}
.dp-vmeta .dp-dot{height:11px}
.dp-vbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:14px 0;border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.dp-vbar .spacer{margin-left:auto}
.dp-vbar .sf-btn{padding:7px 14px;font-size:12.5px}
.dp-vbody{padding-top:34px}
.dp-vh2{display:flex;align-items:center;gap:10px;font-family:var(--s-font-serif);font-size:20px;color:var(--s-ink);margin:0 0 18px;font-weight:600}
.dp-vh2:before{content:"";width:3px;height:17px;background:var(--s-accent);flex:none}
.dp-vsec+.dp-vsec{margin-top:40px;padding-top:34px;border-top:1px solid var(--s-line-soft)}
.dp-vside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px}
.dp-course{border:1px solid var(--s-line);background:#fff}
.dp-course .thumb{position:relative;aspect-ratio:16/9;background:var(--s-paper-2);overflow:hidden;display:block}
.dp-course .thumb img{width:100%;height:100%;object-fit:cover}
.dp-course .thumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--s-font-serif);font-size:52px;color:rgba(21,28,36,.12)}
.dp-course .bd{padding:16px 18px 18px}
.dp-course .bd h3{font-family:var(--s-font-serif);font-size:15.5px;line-height:1.6;margin:0;color:var(--s-ink);font-weight:600}
.dp-course .kv{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--s-meta)}
/* ---------- 目录：课程课时 / 专栏章节 ----------
   2026-11 第二轮：上一版为了省纵向空间排成双列，实际读起来是
   1 2 / 3 4 / 5 6 —— 眼睛先横后竖，跟「一章接一章」的直觉相反，
   找第 7 讲要来回扫两遍。目录是学习路线图，**顺序本身就是信息**，
   所以改回竖排单列：序号从上到下单调递增，扫读路径只有一条。

   两种形态共用一套行样式：
     .dp-catalog            流内（课程页播放器下方、专栏总览页）
     .dp-catalog.is-rail    左栏 sticky（专栏章节页），窄版 + 可折叠 */
.dp-catalog{margin:0 0 34px;border:1px solid var(--s-line);background:var(--s-paper)}
.dp-catalog .hd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 34px 15px 20px;border-bottom:1px solid var(--s-line)}
.dp-catalog .hd h2{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--s-font-serif);font-size:16.5px;color:var(--s-ink);font-weight:600}
.dp-catalog .hd h2:before{content:"";flex:none;width:3px;height:15px;background:var(--s-accent)}
.dp-catalog .hd>span{font-size:12px;color:var(--s-meta);font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-catalog .rows{display:block;margin:0;padding:0}
.dp-catalog a{position:relative;display:flex;align-items:center;gap:14px;padding:12px 20px;min-width:0;
  border-bottom:1px solid var(--s-line-soft);font-size:14.5px;line-height:1.55;color:var(--s-body);
  transition:background .16s,color .16s}
.dp-catalog a:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){
.dp-catalog a:hover{background:#fff;color:var(--s-ink)}}

/* 当前项：浅主色底 + 3px 主色左线 + 深墨加粗。
   注意别用 --s-accent-text 压浅主色底——实测只有 4.16:1（低于 4.5），
   而 --s-accent-text 是按纸底算的。深墨字对浅底最稳，也最像「我在这」。 */
.dp-catalog a.on{background:var(--s-accent-soft);color:var(--s-ink);font-weight:600}
.dp-catalog a.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--s-accent)}
.dp-catalog .n{flex:none;width:26px;font-family:var(--s-font-serif);font-size:15px;color:var(--s-meta);font-variant-numeric:tabular-nums}
.dp-catalog a.on .n{color:var(--s-ink)}
/* 标题：流内版单行省略（760 宽下一行能放 50 字，几乎不会截）；
   注意别用 display:-webkit-box + -webkit-line-clamp 做多行截断——
   新版 Chromium 已把它解析成 flow-root，clamp 静默失效，既不换行也不出省略号。 */
.dp-catalog .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-catalog .d{flex:none;font-size:12px;color:var(--s-meta);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
.dp-catalog a:hover .d{color:var(--s-body)}}

.dp-catalog a.on .d{color:var(--s-body);font-weight:500}
.dp-catalog .ft{margin:0;padding:12px 20px;background:#fff;border-top:1px solid var(--s-line);font-size:12px;line-height:1.8;color:var(--s-meta)}

/* 左栏版：专栏章节页的「随身目录」。白底更沉，窄一档，长目录内滚（不顶走正文） */
.dp-catalog.is-rail{margin:0;background:#fff;border-color:var(--s-line)}
.dp-catalog.is-rail .hd{padding:13px 32px 13px 16px}
.dp-catalog.is-rail .hd h2{font-size:14.5px;gap:8px}
.dp-catalog.is-rail .hd h2:before{height:13px}
.dp-catalog.is-rail .hd>span{font-size:11px}
.dp-catalog.is-rail .rows{max-height:calc(100vh / var(--z,1) - 300px);overflow-y:auto;overscroll-behavior:contain}
.dp-catalog.is-rail .rows::-webkit-scrollbar{width:5px}
.dp-catalog.is-rail .rows::-webkit-scrollbar-thumb{background:#d8dee6}
.dp-catalog.is-rail a{padding:9px 14px;gap:10px;font-size:13.5px;line-height:1.55}
.dp-catalog.is-rail .n{width:20px;font-size:13px}
/* 280 窄栏：强行单行会把「违约金调整」这类尾巴截掉，允许自然换到第二行 */
.dp-catalog.is-rail .t{white-space:normal;overflow-wrap:anywhere;line-height:1.45;padding-top:1px}
.dp-catalog.is-rail .ft{padding:10px 14px;font-size:11.5px}

/* 可折叠（<details>）：手机上目录默认收起，只留「目录 · 第 3 章 / 共 12 章」一条，
   不占正文首屏；桌面上 JS 会强制展开，箭头隐藏（它永远开着，箭头是噪声） */
.dp-catalog summary{list-style:none;cursor:pointer}
.dp-catalog summary::-webkit-details-marker{display:none}
.dp-catalog summary.hd{position:relative}
.dp-catalog summary.hd:after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;
  border-right:1.5px solid var(--s-meta);border-bottom:1.5px solid var(--s-meta);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;pointer-events:none}
.dp-catalog[open] summary.hd:after{transform:translateY(-30%) rotate(-135deg)}

/* 专栏作者卡（右栏） */
.dp-author .bd{display:flex;align-items:center;gap:14px;padding:18px}
.dp-author .ava{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--s-accent-soft);color:var(--s-accent-text);font-family:var(--s-font-serif);font-size:19px}
.dp-author b{display:block;font-family:var(--s-font-serif);font-size:16px;color:var(--s-ink);font-weight:600}
.dp-author span{display:block;margin-top:4px;font-size:12px;color:var(--s-meta)}

@media(max-width:820px){
  .dp-catalog{margin-bottom:26px}
  .dp-catalog .hd{padding:13px 32px 13px 15px}
  .dp-catalog .hd h2{font-size:15.5px}
  .dp-catalog a{padding:12px 15px;font-size:14.5px;gap:12px}
  /* 手机一行只放得下 14 个字，「第 1 讲·招聘录用与入职审查的风…」等于没写，
     允许折到第二行，标题必须读全 */
  .dp-catalog .t{white-space:normal;overflow-wrap:anywhere;line-height:1.45;padding-top:1px}
  .dp-catalog .n{width:24px;font-size:14.5px}
  .dp-catalog .ft{padding:11px 15px}
  /* 手机屏幕小，目录一展开就该看全，禁止内滚（内滚在触屏上很难用） */
  .dp-catalog.is-rail{margin-bottom:0}
  .dp-catalog.is-rail .rows{max-height:none;overflow:visible}
}

@media(max-width:1180px){
  .dp-cols{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .dp-side{position:static;order:2}
  .dp-vgrid{grid-template-columns:minmax(0,1fr)}
  .dp-vside{position:static}
  .dp-cols--study{grid-template-columns:minmax(0,1fr);gap:0;max-width:var(--sf-read);margin:0 auto}
  .dp-cols--study .dp-head{padding-top:26px}
  /* 窄屏：目录落在标题上方，收起成一条导航；预约卡收起来，别夹在标题前挡路 */
  .dp-rail{position:static;gap:0;margin-bottom:0}
  .dp-rail .dp-cta{display:none}
}
@media(max-width:820px){
  .dp-head{padding-top:30px}
  .dp-head h1{margin-top:14px}
  .dp-lede{margin-top:16px;font-size:15px;padding-left:12px}
  /* 窄屏换行后竖分隔线会落在行首/行尾，像多出来的字符，直接收起 */
  .dp-meta,.dp-vmeta{gap:4px 12px}
  .dp-meta .dp-dot,.dp-vmeta .dp-dot{display:none}
  .dp-meta{gap:10px;margin-top:20px}
  .dp-tools{margin-left:0;width:100%;padding-top:4px}
  .dp-cover{padding-top:24px}
  .dp-cover img{max-height:340px}
  .dp-cols{padding-top:30px}
  .dp-prose{font-size:16.5px;line-height:2}
  .dp-prose h2{font-size:20.5px}
  .dp-pager{grid-template-columns:1fr}
  .dp-pager a+a{border-left:0;border-top:1px solid var(--s-line)}
  .dp-pager .next{text-align:left}
  .dp-rel-grid{grid-template-columns:1fr;gap:0}
  .dp-byline{flex-wrap:wrap;padding:18px}
  .dp-byline .sf-btn{width:100%;justify-content:center}
  .dp-vgrid{padding-top:18px}
  .dp-vtitle{margin-top:16px}
}

/* ============================================================================
   宽屏细节（2026-11 版心加宽到 1440 之后的收口）
   版心变宽后最怕「一行字太长」——给列表正文与摘要设上限，图版同步放大，
   让宽屏看起来是有意排布的，而不是被拉长的窄版。
   ========================================================================== */
@media(min-width:1240px){
  .sf-post{gap:38px;padding:32px 0;align-items:center}
  .sf-post .dt{width:84px;padding-right:20px}
  .sf-post .dt b{font-size:29px}
  .sf-post h3{font-size:19.5px;max-width:860px}
  .sf-post p{max-width:800px}
  .sf-post .th{width:240px;height:140px}
}

/* ============================================================================
   咨询中心（2026-11）
   ----------------------------------------------------------------------------
   取代原来「一张表单等人回复」的留言板。三条通道按即时性排序：
   微信客服 → 电话 → 留言表单。命名空间 .cf-*，与本文件其它区块共用令牌。
   ========================================================================== */

/* ---- 页头在线状态 ---- */
.cf-live{
    display:inline-flex;align-items:center;gap:8px;margin-top:22px;
    font-size:12.5px;color:var(--s-body);letter-spacing:.02em;
    border:1px solid var(--s-line);background:#fff;padding:7px 14px;border-radius:999px;
}
.cf-live i{width:6px;height:6px;border-radius:50%;background:#b9c0c8;flex:none}
.cf-live.on i{background:#2f9e5f;box-shadow:0 0 0 4px rgba(47,158,95,.12)}
.cf-live.off{color:var(--s-meta)}
.cf-live span{color:var(--s-meta);padding-left:9px;border-left:1px solid var(--s-line);margin-left:1px}

/* ---- 三通道 ---- */
.cf-chans{display:grid;gap:16px;margin-bottom:34px}
.cf-chans.has3{grid-template-columns:repeat(3,1fr)}
.cf-chans.has2{grid-template-columns:repeat(2,1fr)}

.cf-chan{
    position:relative;display:flex;flex-direction:column;align-items:flex-start;
    text-align:left;width:100%;font-family:inherit;cursor:pointer;
    border:1px solid var(--s-line);background:#fff;padding:26px 24px 22px;
    border-radius:var(--s-r);transition:border-color .18s,box-shadow .18s,transform .18s;
    color:var(--s-body);text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
.cf-chan:hover{border-color:var(--s-accent);box-shadow:var(--s-shadow);transform:translateY(-2px)}}

.cf-chan-ic{
    width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--s-paper-2);color:var(--s-ink);margin-bottom:14px;flex:none;
}
.cf-chan b{
    font-family:var(--s-font-serif);font-size:17px;font-weight:600;color:var(--s-ink);
    letter-spacing:.04em;display:block;
}
.cf-chan p{font-size:12.5px;color:var(--s-body);line-height:1.85;margin:8px 0 18px;flex:1}
.cf-chan-act{
    font-size:12.5px;color:var(--s-accent-text-deep);font-weight:500;letter-spacing:.02em;
    display:inline-flex;align-items:center;gap:6px;
}
.cf-chan-act span{transition:transform .18s}
@media (hover:hover) and (pointer:fine){
.cf-chan:hover .cf-chan-act span{transform:translateX(3px)}}

.cf-chan-tag{
    position:absolute;top:18px;right:18px;font-size:10.5px;letter-spacing:.08em;
    color:var(--s-accent-text-deep);background:var(--s-accent-soft);
    padding:3px 9px;border-radius:999px;
}

/* 微信：主推通道，用主题色底做视觉第一层 */
.cf-chan-wx{background:var(--s-accent-soft);border-color:rgba(180,140,60,.28)}
.cf-chan-wx .cf-chan-ic{background:#fff;color:#1aad19}
@media (hover:hover) and (pointer:fine){
.cf-chan-wx:hover{border-color:var(--s-accent)}}

.cf-chan-tel .cf-chan-ic{background:var(--s-paper-2)}
.cf-tel-no{
    font-family:var(--s-font-serif);font-size:21px!important;color:var(--s-ink)!important;
    letter-spacing:.03em;margin:6px 0 16px!important;font-weight:500;
}

/* ---- 两栏 ---- */
.cf-main{display:grid;grid-template-columns:minmax(0,1fr) var(--sf-side);gap:var(--sf-gap);align-items:start}

.cf-form-col{
    background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);
    padding:38px 36px 32px;scroll-margin-top:96px;
}
.cf-form-head h2{
    font-family:var(--s-font-serif);font-weight:600;font-size:22px;color:var(--s-ink);
    letter-spacing:.05em;margin:0 0 10px;
}
.cf-form-head p{font-size:13px;color:var(--s-meta);line-height:1.9;margin:0 0 28px}
.sf-form label em{font-style:normal;color:#c0392b;font-size:12px;margin-left:2px}
.sf-form label .opt{
    font-style:normal;color:var(--s-meta);font-size:11px;letter-spacing:.04em;
    border:1px solid var(--s-line);padding:1px 5px;border-radius:2px;margin-left:5px;
}
.cf-alert{padding:13px 16px;font-size:13px;margin-bottom:22px;border-radius:var(--s-r);line-height:1.8}
.cf-alert.err{background:#fdf3f2;border-left:2px solid #c0392b;color:#96281b}

.cf-check{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--s-body);cursor:pointer;margin:-4px 0 18px}
.cf-check input{width:auto;margin-top:3px;accent-color:var(--s-accent)}

.cf-form-note{font-size:11.5px;color:var(--s-meta);line-height:1.9;margin-bottom:22px}
.cf-form-note b{color:var(--s-accent-text);font-weight:500}

.cf-submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-submit-hint{font-size:12px;color:var(--s-meta)}

/* ---- 提交成功 ---- */
.cf-done{padding:6px 2px}
.cf-done-mark{
    width:52px;height:52px;border-radius:50%;background:#eef7f1;color:#2f9e5f;
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.cf-done h2{
    font-family:var(--s-font-serif);font-weight:600;font-size:24px;color:var(--s-ink);
    letter-spacing:.04em;margin:0 0 12px;
}
.cf-done-lead{font-size:13.5px;color:var(--s-body);line-height:2;margin:0 0 26px}
.cf-done-lead b{font-family:var(--s-font-serif);color:var(--s-ink);letter-spacing:.06em}

.cf-done-steps{display:flex;flex-direction:column;gap:2px;margin-bottom:24px}
.cf-step{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--s-line-soft)}
.cf-step i{
    flex:none;width:22px;height:22px;border-radius:50%;background:var(--s-paper-2);
    color:var(--s-meta);font-style:normal;font-size:11.5px;
    display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.cf-step b{display:block;font-size:13.5px;color:var(--s-ink);font-weight:600;margin-bottom:4px}
.cf-step span{font-size:12.5px;color:var(--s-meta);line-height:1.85;display:block}

.cf-mini-btn{
    display:inline-flex;align-items:center;justify-content:center;
    margin-top:9px;height:30px;padding:0 14px;
    border:1px solid var(--s-accent-solid);background:var(--s-accent-solid);color:var(--s-on-accent);
    font-size:12px;letter-spacing:.03em;border-radius:var(--s-r);
    cursor:pointer;font-family:inherit;transition:.16s;text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
.cf-mini-btn:hover{background:var(--s-accent-hover);border-color:var(--s-accent-hover);color:var(--s-on-accent-hover)}}

.cf-mini-btn.ghost{background:#fff;color:var(--s-body);border-color:var(--s-line)}
@media (hover:hover) and (pointer:fine){
.cf-mini-btn.ghost:hover{border-color:var(--s-ink);color:var(--s-ink)}}


.cf-done-foot{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding-top:20px;border-top:1px solid var(--s-line);
}
.cf-done-sms{font-size:12px;color:#1e7a45;display:inline-flex;align-items:center;gap:7px}
.cf-done-sms:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.cf-done-sms.off{color:var(--s-meta)}

/* ---- 侧栏 ---- */
.cf-side{display:flex;flex-direction:column;gap:16px}

.cf-qr-card{
    background:var(--s-paper);border:1px solid var(--s-line);border-radius:var(--s-r);
    padding:24px 24px 22px;text-align:center;
}
.cf-qr-hd{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px}
.cf-qr-hd b{font-family:var(--s-font-serif);font-size:16px;font-weight:600;color:var(--s-ink);letter-spacing:.05em}
.cf-qr-live{font-size:10.5px;letter-spacing:.06em;color:var(--s-meta);border:1px solid var(--s-line);background:#fff;padding:1px 8px;border-radius:999px}
.cf-qr-live.on{color:#1e7a45;border-color:rgba(47,158,95,.3);background:#f2faf5}
.cf-qr-box{
    width:184px;height:184px;margin:0 auto;background:#fff;border:1px solid var(--s-line);
    display:flex;align-items:center;justify-content:center;padding:8px;
}
.cf-qr-box img,.cf-modal-qr img{width:100%;height:100%;object-fit:contain;display:block}
.cf-qr-gen{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.cf-qr-gen img,.cf-qr-gen canvas{width:100%!important;height:100%!important;display:block}
.cf-qr-tip{font-size:11.5px;color:var(--s-meta);line-height:1.85;margin:14px 0 0}
.cf-qr-open{
    display:block;margin-top:12px;font-size:12px;color:var(--s-accent-text-deep);
    border-top:1px solid var(--s-line);padding-top:12px;
}

.cf-side .sf-side{
    background:var(--s-paper);border:1px solid var(--s-line);border-radius:var(--s-r);
    padding:24px 24px 20px;
}
.cf-side .sf-side h3{
    font-family:var(--s-font-serif);font-size:15px;font-weight:600;color:var(--s-ink);
    letter-spacing:.06em;margin:0 0 14px;
}
.cf-side .sf-side .kv{display:grid;gap:9px 0;font-size:12.5px}
.cf-side .sf-side .kv dt{color:var(--s-meta)}
.cf-side .sf-side .kv dd{margin:0;color:var(--s-body);line-height:1.75}

.cf-visit{
    position:relative;overflow:hidden;background:var(--s-paper);border:1px solid var(--s-line);
    border-radius:var(--s-r);padding:24px 24px 22px;
}
.cf-visit-t{font-family:var(--s-font-serif);font-size:15px;color:var(--s-ink);letter-spacing:.06em;margin-bottom:10px}
.cf-visit-b{font-size:12.5px;color:var(--s-body);line-height:1.95;position:relative;z-index:1}
.cf-visit-wm{
    position:absolute;right:-14px;bottom:-26px;font-family:var(--s-font-serif);
    font-size:92px;color:rgba(21,28,36,.045);line-height:1;pointer-events:none;
}

.cf-urgent{
    border:1px solid var(--s-line);border-left:2px solid var(--s-accent);
    padding:15px 18px;font-size:12px;color:var(--s-meta);line-height:1.85;border-radius:var(--s-r);
}
.cf-urgent b{color:var(--s-ink);font-weight:600;display:block;margin-bottom:4px;font-size:12.5px}

/* ---- 微信二维码浮层 ---- */
.cf-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:24px}
.cf-modal.open{display:flex}
.cf-modal-mask{position:absolute;inset:0;background:rgba(21,28,36,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cf-modal-box{
    position:relative;background:#fff;width:344px;max-width:100%;padding:30px 30px 26px;
    text-align:center;border-radius:var(--s-r);box-shadow:0 24px 70px -30px rgba(21,28,36,.6);
    animation:cfPop .22s ease-out;
}
@keyframes cfPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.cf-modal-x{
    position:absolute;top:10px;right:12px;width:28px;height:28px;border:0;background:none;
    font-size:20px;line-height:1;color:var(--s-meta);cursor:pointer;font-family:inherit;
}
@media (hover:hover) and (pointer:fine){
.cf-modal-x:hover{color:var(--s-ink)}}

.cf-modal-box > b{font-family:var(--s-font-serif);font-size:17px;font-weight:600;color:var(--s-ink);letter-spacing:.05em;display:block}
.cf-modal-box > p{font-size:12px;color:var(--s-meta);margin:8px 0 20px;line-height:1.8}
.cf-modal-qr{
    width:200px;height:200px;margin:0 auto 20px;border:1px solid var(--s-line);padding:9px;background:#fff;
    display:flex;align-items:center;justify-content:center;
}
.cf-modal-hint{display:block;font-size:11px;color:var(--s-meta);margin-top:14px}

/* ---- 响应式 ---- */
@media (max-width:1180px){
    .cf-main{grid-template-columns:minmax(0,1fr) 300px;gap:28px}
}
@media (max-width:980px){
    .cf-chans.has3,.cf-chans.has2{grid-template-columns:1fr}
    .cf-main{grid-template-columns:1fr;gap:26px}
    .cf-side{flex-direction:row;flex-wrap:wrap}
    .cf-side > *{flex:1 1 260px}
    .cf-qr-card{flex:1 1 260px}
}
@media (max-width:720px){
    .cf-chans{gap:12px;margin-bottom:24px}
    .cf-chan{padding:22px 20px 20px}
    .cf-tel-no{font-size:19px!important}
    .cf-form-col{padding:28px 22px 24px}
    .cf-side{flex-direction:column}
    .cf-side > *{flex:1 1 auto}
    .cf-done-foot{flex-direction:column;align-items:flex-start;gap:12px}
    .cf-modal-box{width:100%;padding:26px 22px 22px}
    .cf-modal-qr{width:176px;height:176px}
}

/* ============================================================================
   全站悬浮咨询条（.cf-fab）
   ----------------------------------------------------------------------------
   桌面：右下角竖排，hover 出文字；移动端：底部固定横条，拇指可达。
   之所以不用「一个悬浮的圆圈客服图标」，是因为律所的三个通道语义不同：
   微信=即时聊、电话=最直接、留言=要写清楚，平铺比藏进二级菜单更容易点。
   ========================================================================== */
.cf-fab{
    position:fixed;right:26px;bottom:34px;z-index:8000;
    display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.cf-fab-btn{
    display:flex;align-items:center;gap:0;
    height:42px;padding:0 12px;border:1px solid var(--s-line);background:#fff;
    color:var(--s-ink);border-radius:999px;cursor:pointer;font-family:inherit;
    box-shadow:0 2px 6px rgba(21,28,36,.05),0 14px 30px -20px rgba(21,28,36,.4);
    transition:gap .18s, padding .18s, border-color .18s, background .18s, color .18s, box-shadow .18s;
    text-decoration:none;overflow:hidden;white-space:nowrap;
}
.cf-fab-btn svg{flex:none}
.cf-fab-t{
    max-width:0;opacity:0;font-size:12.5px;letter-spacing:.04em;
    transition:max-width .2s, opacity .16s, margin .2s;
}
@media (hover:hover) and (pointer:fine){
.cf-fab-btn:hover{gap:8px;padding:0 16px 0 13px;border-color:var(--s-accent);box-shadow:0 6px 18px -6px rgba(21,28,36,.22)}
.cf-fab-btn:hover .cf-fab-t{max-width:90px;opacity:1}}

.cf-fab-btn.wx{background:#1aad19;border-color:#1aad19;color:#fff}
@media (hover:hover) and (pointer:fine){
.cf-fab-btn.wx:hover{background:#149014;border-color:#149014}}

.cf-fab-btn.tel{color:var(--s-accent-text)}
.cf-fab-btn.msg{color:var(--s-body)}
.cf-fab-btn:active{transform:scale(.97)}

/* 移动端：底部横条 */
@media (max-width:720px){
    .cf-fab{
        right:0;left:0;bottom:0;flex-direction:row;gap:0;align-items:stretch;
        border-top:1px solid var(--s-line);background:rgba(255,255,255,.97);
        -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
        padding:6px 8px calc(6px + env(safe-area-inset-bottom));
        box-shadow:0 -6px 22px -18px rgba(21,28,36,.5);
    }
    .cf-fab-btn{
        flex:1;height:44px;justify-content:center;gap:0;border:0;background:none;
        box-shadow:none;border-radius:var(--s-r);padding:0;
    }
    .cf-fab-btn:hover{box-shadow:none;padding:0}
    .cf-fab-btn .cf-fab-t{
        max-width:none;opacity:1;margin-left:7px;font-size:12px;
    }
    .cf-fab-btn.wx{background:none;border:0;color:#1aad19}
    .cf-fab-btn.wx:hover{background:none;color:#149014}
    .cf-fab-btn + .cf-fab-btn{border-left:1px solid var(--s-line-soft)}
    /* 底部条会盖住页脚最后一行，补一段留白 */
    .site-body{padding-bottom:64px}
}

/* 成功页的「先准备什么」清单：填完表单后客户还坐在屏幕前，这段最有用 */
.cf-done-qs{border-top:1px solid var(--s-line);padding-top:22px;margin-bottom:22px}
.cf-done-qs > b{
    display:block;font-family:var(--s-font-serif);font-size:14px;font-weight:600;
    color:var(--s-ink);letter-spacing:.04em;margin-bottom:14px;
}
.cf-done-qs ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cf-done-qs li{font-size:12.5px;color:var(--s-meta);line-height:1.8;display:flex;gap:10px;align-items:baseline}
.cf-done-qs li span{
    flex:none;width:50px;font-size:11.5px;color:var(--s-accent-text);
    border-right:1px solid var(--s-line);padding-right:10px;text-align:right;
    white-space:nowrap;
}
.cf-done-qs em{
    display:block;font-style:normal;font-size:12px;color:var(--s-meta);
    margin-top:14px;padding-top:12px;border-top:1px dashed var(--s-line);
}
@media (max-width:720px){
    .cf-done-qs li{font-size:12px}
    .cf-done-qs li span{width:46px;padding-right:8px}
}

/* ================= 移动端：触摸目标 · 输入 · 安全区（2026-11） =================
   三条原则（改这里的任何数值前先读）：
   1) 真控件（按钮/分页/开关/输入框）的可点区域不小于 44×44，iOS HIG 44pt 与
      Material 48dp 取交集。
   2) 行内文字链接（面包屑、页脚底部、侧栏键值）不改排版，用伪元素扩热区 ——
      WCAG 2.5.5 对「句子中的行内链接」本身就有豁免，但热区可以白送。
   3) 底部固定元素要让开 iPhone 的 Home 指示条与 Safari 工具栏。
   这一整块放在文件最末，靠「同优先级后出现者胜」覆盖上面各断点里的尺寸，
   所以新增断点规则请写在它前面，否则会被这里压掉。 */

@media (max-width:820px){
    /* —— 真控件：放大到 44 —— */
    .sf-burger{width:44px;height:44px}
    .sf-brand{min-height:44px;display:inline-flex;align-items:center}
    .sf-nav .sf-cta{height:44px}
    .sf-pager a{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
    .sf-btn.sm{min-height:44px}
    .sf-foot-grid a{min-height:44px;display:flex;align-items:center}
    .cf-qr-open{min-height:44px;display:flex;align-items:center}
    .cf-check{min-height:44px;align-items:center;margin:-2px 0 18px}
    .cf-check input{width:18px;height:18px;margin-top:0}

    /* —— 输入框：16px 是 iOS 不自动放大页面的分界线，低于它一点就zoom —— */
    .site-body input:not([type=checkbox]):not([type=radio]):not([type=submit]),
    .site-body select,
    .site-body textarea{font-size:16px}
    .sf-form input,.sf-form select{min-height:46px}
    .sf-form select{padding-right:34px}

    /* —— 行内链接：不占位的热区扩张 —— */
    .crumb a,.sf-foot-bottom a,.sf-side .kv a{position:relative}
    .crumb a:after,.sf-foot-bottom a:after,.sf-side .kv a:after{
        content:"";position:absolute;inset:-10px -6px;
    }
    .more{position:relative;min-height:32px;display:inline-flex;align-items:center}
    .more:after{content:"";position:absolute;inset:-8px -10px}
}
/* 注意：底部咨询条在 ≤720 会从「悬浮按钮」切成「通栏横条」，安全区由它自己的
   padding-bottom:calc(6px + env(safe-area-inset-bottom)) 处理，**不要**在这里再
   给 .cf-fab 写 right/bottom，否则会把横条顶起来。 */


/* —— 字号调节（2026-11）：官网访客里的老年当事人 ——
   放在右下角悬浮组（.cf-fab）里，与微信 / 电话 / 留言同一列、同一种胶囊按钮。
   早先是导航右侧一个「A」方框，1440 宽下十来个菜单项加它就装不下，「登录」被压到
   控件底下（实测重叠 29px，两个都点不准）；挪进悬浮组后导航彻底不受影响。
   HTML 在 site/_consult-fab.blade.php，加减档逻辑在 js/zoom.js（与后台同一份）。 */
.cf-font{flex:none}
.cf-font>summary{list-style:none}
.cf-font>summary::-webkit-details-marker{display:none}
.cf-fab-a{width:18px;flex:none;text-align:center;font-size:15px;font-weight:700;line-height:1}
/* 三档面板朝上展开，锚在**整个悬浮组**上（.cf-fab 是 fixed，即定位上下文），
   不锚 details 本身：鼠标停在「A」上时按钮会展开「字号」两字、宽度变 40px，
   若锚 details，面板会跟着左右跳。锚在组上则右边缘恒定，面板不动。
   字号是最后一项，right:0 就是组的右边缘，向左延伸 158px 不会出屏。 */
.cf-font-pop{position:absolute;right:0;bottom:calc(100% + 12px);z-index:20;width:186px;padding:6px;
  background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);
  box-shadow:0 12px 34px -12px rgba(21,28,36,.28)}
.cf-font-pop b{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:4px 9px 6px;font-size:11.5px;font-weight:400;
  color:var(--s-meta);letter-spacing:.08em}
/* 当前档位实时显示：点了「放大」数字就变，用户才知道自己点到哪一档了 */
.cf-font-pop b span{font-size:12.5px;font-weight:600;color:var(--s-accent-text);letter-spacing:0}
.cf-font-tip{display:block;margin-top:5px;padding:6px 9px 3px;border-top:1px solid var(--s-line);
  font-size:11px;line-height:1.6;color:var(--s-meta)}
.cf-font-pop button{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:9px 10px;border:0;background:none;border-radius:6px;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--s-ink);text-align:left}
.cf-font-pop button:hover{background:var(--s-accent-soft);color:var(--s-accent-text)}
.cf-font-pop button s{text-decoration:none;font-size:12px;color:var(--s-meta)}
.cf-font-pop button[disabled]{opacity:.35;cursor:default;background:none;color:var(--s-meta)}
.cf-font[open]>summary{border-color:var(--s-accent);color:var(--s-accent-text)}

@media(max-width:720px){
  /* 手机端底部横条：字号是第四格，和另外三格等分 */
  .cf-font{flex:1;border-left:1px solid var(--s-line-soft)}
  .cf-font>summary{width:100%;border-radius:var(--s-r)}
  /* 横条是全宽的，right:0 会贴到屏幕右边缘；内缩一格与横条自身的 8px 内边距对齐 */
  .cf-font-pop{bottom:calc(100% + 10px);right:8px}
  /* 咨询页、会员登录/注册/找密码：三个咨询键整组不显示（会挡二维码、压提交按钮），
     只剩字号。此时不能铺整条横条，收成右下角一个圆按钮。 */
  .cf-fab.solo{left:auto;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));
    padding:0;background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .cf-fab.solo .cf-font{flex:none;border-left:0}
  .cf-fab.solo .cf-font>summary{width:44px;height:44px;padding:0;gap:0;
    border:1px solid var(--s-line);background:#fff;border-radius:999px;
    box-shadow:0 2px 6px rgba(21,28,36,.05),0 14px 30px -20px rgba(21,28,36,.4)}
  .cf-fab.solo .cf-fab-t{display:none}
}

@media print{.cf-font{display:none!important}}

/* —— 放大字号时的导航降级 ——
   CSS zoom 不会改变媒体查询的视口宽度（1440 放大到 130%，媒体查询仍按 1440 判断），
   所以「窄屏换汉堡」那套断点永远不触发，而实际可用宽度又只剩 1068，导航就挤爆、
   「登录」被压到字号按钮底下。这里用 js/zoom.js 打的 html[data-zlg] 主动降级：
   导航项收进汉堡，品牌、预约咨询、字号键留在栏上——这套本来就是手机端在用的，
   展开样式照搬过来即可。 */
html[data-zlg] .sf-nav nav{display:none}
html[data-zlg] .sf-nav .sf-burger{display:flex}
html[data-zlg] .sf-nav nav.open{display:flex;position:absolute;top:66px;left:0;right:0;z-index:65;
  margin-left:0;flex-direction:column;align-items:stretch;gap:0;
  background:#fff;border-bottom:1px solid var(--s-line);box-shadow:0 18px 40px rgba(20,30,45,.10);
  padding:10px 24px 20px}
html[data-zlg] .sf-nav nav.open>a,
html[data-zlg] .sf-nav nav.open .nav-drop>a{padding:14px 4px;font-size:15px;
  border-bottom:1px solid var(--s-line-soft);color:var(--s-ink)}
html[data-zlg] .sf-nav nav.open>a:after,
html[data-zlg] .sf-nav nav.open .nav-drop>a:after{display:none}
html[data-zlg] .sf-nav nav.open .nav-drop-menu{position:static;transform:none;opacity:1;display:flex;
  background:transparent;border:0;box-shadow:none;padding:0 0 8px 14px}
html[data-zlg] .sf-nav nav.open .nav-drop-menu a{color:var(--s-meta);border:0;padding:9px 0;font-size:14px}
html[data-zlg] .sf-nav nav.open .mbr-link{margin:12px 0 0;align-self:flex-start}

/* 放大态汉堡菜单可能比视口还高：150% 下十项就 877px，加上顶栏 66px 会顶出 43px，
   而 nav.open 是 absolute，不会自己滚 —— 底部的「登录」就被切在屏幕外。
   给一个按 zoom 折算的上限（vh 不参与 zoom，必须除以 --z），超出时面板内部滚动。 */
html[data-zlg] .sf-nav nav.open{max-height:calc(100vh / var(--z,1) - 92px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}