@charset "utf-8";
/* =========================================================
   宗耀律师 · 单页静态站   V6
   ---------------------------------------------------------
   本版只动样式，页面上的文字一个字未改。
   相对 V5（带 6 套主题切换器）的变化：
     1. 只保留一套浅色配色（纸与墨 + 单一朱砂），删除全部金色与主题切换器。
     2. 字号梯度拉开（姓名 40~64 / 区块 26 / 正文 16），行高收到 1.8。
     3. 删除中文的宽字距（V5 用了 0.05em ~ 0.26em）。
     4. 装饰语言只留一种：极细的线。删掉照片错位框、金色方块与金短线。
     5. 版心 860 → 940，区块间距 64 → 96。
     6. 标题拆成两行（姓名大 / 方向小），<h1> 内为三个 span。
   2026-10-14 追加（题记排版整理，文字依旧一字未动）：
   7. 「我们承诺」题记四行由 19/16/14/19 三个字号 + 衬线/黑体混排 + 段间距 0/10/22/10 不等，
      收敛为**四行同字号（19px）/ 同字体（衬线）/ 同行高 / 零段间距**，行与行间距完全一致；
      「案如己案」单独加粗（衬线子集带 400–700 粗体轴，非浏览器伪加粗）。
   ========================================================= */

/* ---------------------------------------------------------
   自托管字体（思源宋体 / 思源黑体子集，SIL OFL 1.1）
   ---------------------------------------------------------
   为什么要自托管：Windows 上 'Songti SC'/'STSong'/'Noto Serif SC' 都不存在，
   字体栈会落到 SimSun（宋体）；宋体在 40–64px 下笔画极细，撑不起标题。
   这里用 Noto Serif SC / Noto Sans SC 的可变字体抽出本页用到的字，
   共 240 KB，随站分发（不是 CDN，不产生外部请求）。

   字体族名就叫 'Noto Serif SC' / 'Noto Sans SC'，与设计稿的字体栈完全一致——
   这样 --serif / --sans 一个字都不用改，浏览器会优先用这两个 @font-face。
   --------------------------------------------------------- */
@font-face{
  font-family:'Noto Serif SC';
  font-style:normal;
  font-weight:400 700;               /* 可变字体：正文 400 / 「案如己案」加粗 700 都走这一份 */
  font-display:swap;                 /* 字没到先用本地字体渲染，不阻塞首屏 */
  src:url('fonts/noto-serif-sc-subset.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Sans SC';
  font-style:normal;
  font-weight:400 700;               /* 可变字体：正文 400 / 区块标题 600 都走这一份 */
  font-display:swap;
  src:url('fonts/noto-sans-sc-subset.woff2') format('woff2');
}

:root{
  /* ---------- 配色：纸与墨，一个强调色 ---------- */
  --ink:#FAF8F3;         /* 页面底色 */
  --edge:#E2DCD1;        /* 边框 */
  --hairline:#EAE5DC;    /* 细线 */
  --paper:#1C1A17;       /* 主文字 */
  --silver:#4A4744;      /* 正文、列表 */
  --muted:#7C766D;       /* 标签、次级信息 */
  --faint:#A8A29A;       /* 备案号等极弱信息 */
  --accent:#8E1B1B;      /* 朱砂 —— 全站唯一的彩色 */
  --photo-edge:#DDD7CC;
  --logo-bg:#FFFFFF;

  /* ---------- 字体 ---------- */
  /* 前两项由上面的 @font-face 自托管供应（fonts/*.woff2），
     其后是系统回退；字没加载完时也不会跳版（font-display:swap）。 */
  --serif:'Source Han Serif SC','Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --sans:'Source Han Sans SC','Noto Sans SC','PingFang SC','Microsoft YaHei','Hiragino Sans GB',Arial,sans-serif;

  /* ---------- 字号阶梯：全站仅此 6 档 ---------- */
  --fs-cap:12px;
  --fs-s:14px;
  --fs-b:16px;
  --fs-m:19px;
  --fs-l:26px;
  --fs-xl:clamp(40px,5.6vw,64px);

  /* ---------- 行高阶梯：仅此 3 档 ---------- */
  --lh-1:1.35;
  --lh-2:1.75;
  --lh-3:1.8;

  /* ---------- 节奏 ---------- */
  --pad-x:48px;
  --gap-block:96px;
  --measure:940px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 var(--fs-b)/var(--lh-3) var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 页顶一道强调线 */
body::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  background:var(--accent);
  z-index:60;
}

.sheet{
  max-width:var(--measure);
  margin:0 auto;
  padding:88px var(--pad-x) 64px;
}

.k{color:var(--muted)}

/* ---------------- 抬头 ---------------- */
.head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 272px;
  gap:68px;
  align-items:start;
  padding-bottom:64px;
}
.head h1{
  margin:0 0 34px;
  font:400 var(--fs-xl)/1.22 var(--serif);
  letter-spacing:.01em;
  color:var(--paper);
  text-wrap:balance;
}

/* 标题分两行：姓名大、方向小。文字未改，只是拆了三个 span 便于分行。 */
.h1-name{display:block;font-size:clamp(40px,5.6vw,64px);line-height:1.1}
.h1-sep{display:none}
.h1-sub{
  display:block;
  margin-top:14px;
  font-size:clamp(17px,1.9vw,23px);
  line-height:1.4;
  letter-spacing:.04em;
  color:var(--muted);
}

/* 开篇题记：去掉底色块，只留一道朱砂细线（带底色的方框接近"提示框"语言） */
.promise{
  margin:0 0 44px;
  padding:2px 0 2px 24px;
  border-left:2px solid var(--accent);
  background:none;
  letter-spacing:.02em;   /* 字距只在块上写一次，四行统一继承 */
}
/* 四行题记：四行**同字号、同字体、同行高、同行间距**（用户要求「字号一样、行间距也一样」）。
   改前是 19/16/14/19 三个字号 + 四字诀单独换黑体 + 段间距 0/10/22/10 不等，所以显得乱。
   现在：
     · 字号 —— 四行统一 --fs-m（19px）；
     · 字体 —— 四行统一衬线；
     · 颜色 —— 四行统一主色 --paper；
     · 行间距 —— 四行 margin-top 全为 0，行与行之间只剩 line-height，
       所以相邻两行（含长句折行后的行）的间距**完全一致**；这是唯一能让间距真正相等
       的做法——只要给某一段留 margin，那一段上下的间距就会比别人大。
   唯一保留的强调：「案如己案」加粗（.promise-em，走字体的 700 粗体轴）。 */
.promise-h,
.promise-vow,
.promise-sub,
.promise-line{
  margin:0;
  font:400 var(--fs-m)/var(--lh-2) var(--serif);
  color:var(--paper);
}
.promise-vow{text-wrap:pretty}
.promise-h,.promise-sub,.promise-line{text-wrap:balance}
.promise-em{font-weight:700}

.lead{
  margin:0 0 34px;
  max-width:34em;
  font-size:var(--fs-b);
  line-height:var(--lh-3);
  color:var(--silver);
}

.contact{
  margin:0;padding:0;list-style:none;
  font-size:var(--fs-b);
  line-height:var(--lh-2);
  color:var(--silver);
}
.contact li{
  display:grid;
  grid-template-columns:4.4em minmax(0,1fr);
  gap:0 4px;
  align-items:baseline;
}
.contact li + li{margin-top:4px}

.wx-label{
  margin:32px 0 12px;
  font-size:var(--fs-b);
  color:var(--silver);
}
.qr-link{display:inline-block;line-height:0;text-decoration:none}
.qr{
  display:block;
  width:124px;
  max-width:100%;
  height:auto;
  border:1px solid var(--hairline);
}

/* 照片：一条细线收边，无任何错位装饰框 */
.head-photo{position:relative;margin:0}
.head-photo img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--photo-edge);
}

/* ---------------- 区块 ---------------- */
.block{padding:var(--gap-block) 0}
.block:last-of-type{padding-bottom:0}

/* 区块标题：左标题 + 右延伸线（线更浅、标题更重） */
.block h2{
  display:flex;
  align-items:center;
  gap:24px;
  margin:0 0 32px;
  font:600 var(--fs-l)/var(--lh-1) var(--sans);
  letter-spacing:.02em;
  color:var(--paper);
}
.block h2::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--hairline);
}

/* 专业领域：一道朱砂短线开场 */
.block-field{padding-top:84px}
.block-field::before{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-bottom:28px;
  background:var(--accent);
}
.field{
  margin:0;
  max-width:40em;
  font:400 var(--fs-m)/var(--lh-2) var(--serif);
  letter-spacing:.01em;
  color:var(--silver);
  text-wrap:pretty;
}

/* ---------------- 列表 ---------------- */
.list{margin:0;padding:0;list-style:none}
.list li{
  padding:14px 0;
  font-size:var(--fs-b);
  line-height:var(--lh-2);
  color:var(--silver);
  border-bottom:1px solid var(--hairline);
  text-wrap:pretty;
}
.list li:first-child{padding-top:0}
.list li:last-child{padding-bottom:0;border-bottom:0}

/* ---------------- 案件分组小标题 ---------------- */
.block h3{
  display:flex;
  align-items:center;
  gap:12px;
  margin:52px 0 18px;
  font:600 var(--fs-m)/var(--lh-1) var(--sans);
  letter-spacing:.01em;
  color:var(--paper);
}
.block h3::before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:2px;
  background:var(--accent);
}
.block h2 + h3{margin-top:0}

/* ---------------- 页脚 ---------------- */
.foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:96px 0 8px;
}
.foot img{
  display:block;
  width:168px;
  height:auto;
  padding:10px 14px;
  background:var(--logo-bg);
  border:1px solid var(--hairline);
}
.icp{
  margin:0;
  font-size:var(--fs-cap);
  letter-spacing:.04em;
  color:var(--faint);
}
.icp a{color:inherit;text-decoration:none}
.icp a:hover{color:var(--muted)}

/* ---------------- 入场 ---------------- */
@keyframes rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .block{animation:rise .6s cubic-bezier(.22,.61,.36,1) both}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .block{animation-timeline:view();animation-range:entry 0% entry 50%}
  }
}

/* ---------------- 移动端 ---------------- */
@media (max-width:820px){
  :root{--pad-x:24px;--gap-block:64px;--fs-l:22px}
  /* 指令第六节：移动端姓名字号降到 clamp(30px,7vw,40px)。
     .h1-name 自带 font-size，必须在这里单独覆盖，否则它不会跟随 --fs-xl 变小。 */
  .h1-name{font-size:clamp(30px,7vw,40px)}
  body::before{height:2px}
  .sheet{padding:56px var(--pad-x) 72px}
  .head{grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:48px}
  .head-photo{order:-1;width:200px}
  .promise{padding-left:18px;margin-bottom:36px}
  /* 四行仍同字号：窄屏按视口流体缩放，保证最长的结句「以极致专业，守护自由、财产与尊严！」
     不断行——390px 机型可用宽 324px，4.5vw≈17.6px 时整行约 304px；
     视口 ≥ 422px 时封顶回 19px，与桌面端一致。 */
  .promise-h,.promise-vow,.promise-sub,.promise-line{font-size:clamp(14px,4.5vw,19px)}
  .block h2{gap:16px;margin-bottom:26px}
  .block-field{padding-top:64px}
  /* 二维码不随断点缩小：指令要求放大到 124px，理由是"88px 在手机上不好扫" */
  .foot{padding:72px 0 8px}
}

@media (max-width:560px){
  .contact li{display:block}
}

@media (max-width:420px){
  .head-photo{width:172px}
}

@media print{
  body::before{display:none}
  .block{animation:none;opacity:1;transform:none}
}