/* ===========================================================
   法鸮 LAWOWL · 设计系统
   -----------------------------------------------------------
   设计取向：暖白纸感 + 樱粉。通篇无深色底、无冷色块。
   大面积留白，粉与暖金只做点缀。
   标识仅作角标使用（导航 / 页脚），正文区域不再出现大幅图形。
   =========================================================== */

:root{
  /* 底色：月白（品牌规范「底纸」#FFFDF5） */
  --paper:#FFFDF5;
  --paper-2:#F7F4E9;
  --blush:#F2EADA;
  --white:#FFFFFF;

  /* 文字：夜空深蓝 */
  --ink:#15233A;
  --ink-2:#4E5D75;
  --ink-3:#7E8CA0;

  /* 主色：夜空深蓝 #15233A（品牌规范主色，旧名沿用以免牵动全站引用） */
  --navy:#15233A;
  --navy-2:#24344E;
  --rose:#24344E;
  --rose-dp:#15233A;
  --rose-lt:#C5A25A;

  /* 点睛：琥珀金 #c5a25a（品牌规范点睛色） */
  --gold:#C5A25A;
  --gold-lt:#DFC795;

  /* 点缀：柔粉 #FFAFCC —— 仅作荧光与柔和光晕，占比 ≤10% */
  --pink:#FFAFCC;

  --line:rgba(21,35,58,.10);
  --line-2:rgba(21,35,58,.06);
  --shadow:rgba(21,35,58,.10);

  --wrap:1160px;
  /* 全站左右留白基准。此前 .wrap 是 40px、.nav-inner 是 28px，
     导航与正文左边界差 12px，肉眼可见"没对齐"。统一由此变量控制。 */
  --gutter:40px;
  --gutter-sm:20px;   /* ≤900px 时的收窄留白 */
  --r-card:14px;
  --r-sect:20px;
  --nav-h:64px;

  /* ============ 二级页面页头排版规范 ============
     内页（栏目页 / 业务页 / 关于 / 联系）与文章页过去是两套独立数值，
     同一个元素在不同页面字号、间距、留白都不一样。统一到此处，
     home.css 的 .hm-page-head 与 article.css 的 .cs-head 都引用这些变量，
     改一处即全站生效。 */
  --ph-pad-y:72px;                        /* 页头底部留白 */
  --ph-crumb-gap:26px;                    /* 面包屑 → 栏目标签 */
  --ph-crumb-size:14px;                   /* 面包屑字号 */
  --ph-kicker-size:16px;                  /* 页头栏目标签字号（与 46px 主标题相配） */
  --ph-kicker-ls:var(--ls-caps);                   /* 栏目标签字距 */
  --ph-kicker-rule:48px;                  /* 标签上方金色短线长度 */
  --ph-kicker-gap:16px;                   /* 短线与标签文字间距 */
  --ph-h1-size:clamp(32px,4.4vw,46px);    /* 页头主标题字号 */
  --ph-h1-lh:var(--lh-h1);                        /* 主标题行高 */
  --ph-h1-mt:24px;                        /* 标签 → 主标题 */
  --ph-h1-max:24em;                       /* 主标题最大行宽 */
  --ph-lead-size:var(--fs-lead);          /* 页头导语字号（同全站导语档） */
  --ph-lead-lh:var(--lh-body);                      /* 导语行高 */
  --ph-lead-mt:24px;                      /* 主标题 → 导语 */
  --ph-lead-max:38em;                     /* 导语最大行宽 */

  /* ============ 全站字阶（唯一来源） ============
     此前三个样式表各自硬编码，同类元素字号漂移严重：
     卡片标题有 18/18.5/19/19.5/20/21/23/24px 八种，正文有五种，小字有六种。
     现全部收编为以下九档，各样式表一律用 var() 引用。
     调整全站字号只改这里。 */
  --fs-hero:clamp(34px,5.2vw,58px);       /* 首页 Hero 主标题 */
  --fs-lead:18px;                         /* 导语（页头/Hero/CTA 引导句） */
  --fs-h3:clamp(18px,2vw,22px);          /* 卡片/步骤/服务条目标题（与正文拉开对比） */
  --fs-h4:18px;                           /* 文章小节标题、FAQ 问题、相关阅读 */
  --fs-body:16px;                         /* 正文段落 */
  --fs-sub:15px;                          /* 卡片副文、列表条目、说明文字 */
  --fs-ui:14px;                           /* 导航、按钮、UI 控件 */

  /* ---------- 行高节奏：同类文字统一行距，避免同字号松紧不一 ---------- */
  --lh-hero:1.34;                         /* Hero 主标题 58px（最大号最紧） */
  --lh-h1:1.36;                           /* 页头主标题 46px */
  --lh-h2:1.45;                           /* 板块标题 32px */
  --lh-h3:1.42;                           /* 卡片/条目标题 22px（短句） */
  --lh-h4:1.45;                           /* 次级标题 18px（短句） */
  --lh-quote:1.60;                        /* 长句式标题（问题列表、FAQ 问句） */
  --lh-body:1.85;                         /* 正文段落：16 / 15 / 13px 一律此值 */
  --lh-small:1.90;                        /* 12px 微字号 */
  --lh-tight:1.35;                        /* 紧凑 UI（签名、编号） */
  --lh-crumb:1.70;                        /* 面包屑 */

  /* ── 字距体系（第三套排版变量）：字号越小，字距越宽 ── */
  --ls-title:.01em;                       /* 标题与大字号：h1/h2/h3/h4、Hero、页头 */
  --ls-text:.04em;                        /* 正文与 UI 控件：段落、导航、按钮、法条 */
  --ls-label:.08em;                       /* 小号标签与元信息：分类、日期、meta、面包屑 */
  --ls-caps:.16em;                        /* 装饰性宽字距：栏目 kicker、英文串、编号、签名副标 */
  --ls-brand-cn:.14em;                    /* 品牌中文字「法鸮」专用，勿复用 */
  --ls-brand-en:.34em;                    /* 品牌英文字「LAWOWL」专用，勿复用 */

  --fs-small:13px;                        /* 注释、元信息、表单 */
  --fs-micro:12px;                        /* 角标、微标签、状态 */

  /* ============ 二级页面正文区层级 ============
     栏目小标题与其上方标签，同样在两套系统里各写一套。
     内页原为 44px 上限（大标题风格），文章页仅 28px（偏小），
     视觉上文章页比内页"缩一号"。此处统一取内页的层级感。 */
  --sec-h2-size:clamp(26px,2.6vw,32px);   /* 栏目小标题字号 */
  --sec-h2-lh:var(--lh-h2);                        /* 小标题行高 */
  --sec-h2-mt:18px;                        /* 标签 → 小标题 */
  --sec-label-mb:16px;                     /* 金线 → 标签文字 */
  --sec-label-size:14px;                   /* 正文区小节标签字号（版面金线标签，含文章章节标记）；页头更大用 --ph-kicker-size */

  /* 字体系统：思源宋体标题 / 思源黑体正文 / Inter 英文
     三款均自托管于 assets/fonts/（Google Fonts 分片本地化），不依赖外部 CDN。
     标题字重以 500–600 为主，全站不使用 800/900 超粗字重。 */
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-en:"Inter","Noto Sans",system-ui,-apple-system,sans-serif;
  /* 中英混排：拉丁走 Inter，汉字走宋体 / 黑体。用于品牌署名、页脚标语等 */
  --serif-mix:"Inter","Noto Sans","Noto Serif SC","Source Han Serif SC",serif;
  --sans-mix:"Inter","Noto Sans","Noto Sans SC","Source Han Sans SC",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:var(--lh-h3)}
p{margin:0}
ul{margin:0;padding:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:12px;top:12px;z-index:999;background:var(--rose-dp);color:#fff;padding:8px 14px;border-radius:8px}

/* ============ 导航 ============ */
.site-nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:120;
  background:rgba(255,253,245,.86);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.owl-logo{display:block;height:34px;width:auto}
.logo-txt{display:flex;flex-direction:column;line-height:1.15}
.logo-txt b{font-size:16px;letter-spacing:var(--ls-brand-cn);font-weight:600}
.logo-txt span{font-size:9px;letter-spacing:var(--ls-brand-en);color:var(--ink-3);margin-top:2px}

.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-item > a{
  display:flex;align-items:center;gap:5px;padding:8px 13px;border-radius:8px;
  font-size:var(--fs-ui);color:var(--ink-2);transition:color .18s,background .18s;
}
.nav-item > a:hover{color:var(--ink);background:rgba(21,35,58,.055)}
.arrow-icon{width:13px;height:13px;opacity:.5;transition:transform .2s}
.nav-item:hover .arrow-icon{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:270px;background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:7px;box-shadow:0 18px 44px var(--shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
/* 透明桥梁：填满导航项与下拉之间的空隙，鼠标移向面板时不会中途失去 hover */
.dropdown::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.dropdown.active,
.dropdown.sticky-open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
/* 宽版下拉：法律知识（5 项，带字数提示） */
.dropdown-wide{min-width:352px}

.dropdown a{display:block;padding:10px 13px;border-radius:8px;font-size:var(--fs-ui);color:var(--ink);transition:background .16s}
.dropdown a:hover{background:var(--paper-2)}
.dropdown small{display:block;font-size:var(--fs-micro);color:var(--ink-3);margin-top:2px}

/* 仅供读屏使用的说明文本 */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.nav-cta{
  margin-left:10px;padding:8px 18px;border-radius:980px;
  background:var(--rose-dp);color:#fff;font-size:var(--fs-ui);letter-spacing:var(--ls-text);
  transition:background .18s,transform .18s;
}
.nav-cta:hover{background:var(--rose);transform:translateY(-1px)}

.menu-toggle{
  display:none;margin-left:auto;width:40px;height:40px;background:none;border:none;
  cursor:pointer;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.menu-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);transition:transform .26s,opacity .2s}
.menu-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:980px;
  font-size:var(--fs-ui);letter-spacing:var(--ls-text);
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;
}
.btn-primary{background:var(--rose-dp);color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(21,35,58,.22)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--rose);color:var(--rose-dp);transform:translateY(-2px)}
.todo{color:var(--ink-3);font-size:var(--fs-ui);border-bottom:1px dashed var(--ink-3)}

/* ============ 页脚结构（配色与内边距由 home.css 的 .hm-footer 决定） ============ */
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid rgba(21,35,58,.10)}
.f-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.f-logo .owl-logo{height:30px}
.f-logo b{display:block;font-size:16px;letter-spacing:var(--ls-brand-cn);color:var(--ink);font-weight:600}
.f-logo span span{display:block;font-size:9px;letter-spacing:var(--ls-brand-en);color:var(--ink-3);margin-top:2px}
.f-desc{font-size:var(--fs-small);line-height:var(--lh-body);max-width:34em}
footer h4{font-family:var(--serif);font-size:var(--fs-ui);letter-spacing:var(--ls-caps);color:var(--ink);margin-bottom:16px;font-weight:500}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul a{font-size:var(--fs-small);transition:color .18s}
footer ul a:hover{color:var(--rose-dp)}
.f-bottom{padding-top:26px;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small)}
.line-2{font-size:var(--fs-micro);line-height:var(--lh-body);letter-spacing:var(--ls-text);color:rgba(21,35,58,.55)}

/* ============ 出现动画 ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ 版式精度：留白节奏与层级 ============ */
body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-text)}
.wrap,.narrow{padding:0 var(--gutter)}

/* 导航容器与 .wrap 同用 --gutter，避免 Logo 与正文左边界错位 */
.nav-inner{gap:28px}
.logo-txt b{letter-spacing:var(--ls-brand-cn)}
.nav-item > a{font-size:var(--fs-ui);letter-spacing:var(--ls-text)}
.btn{padding:14px 30px;letter-spacing:var(--ls-text)}
@media (max-width:1000px){
  .f-top{grid-template-columns:1fr;gap:34px}
}

@media (max-width:900px){
  .menu-toggle{display:flex}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;height:calc(100dvh - var(--nav-h));
    background:var(--paper);flex-direction:column;align-items:stretch;
    gap:0;padding:18px 22px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-item > a{padding:15px 4px;font-size:16px;border-bottom:1px solid var(--line-2);border-radius:0}
  .nav-cta{margin:20px 4px 0;text-align:center;padding:14px}
  .dropdown,.nav-item:hover .dropdown,.nav-item:focus-within .dropdown,.dropdown.active{
    position:static;transform:none;box-shadow:none;border:none;background:transparent;
    padding:0 0 8px;max-height:0;overflow:hidden;opacity:1;visibility:visible;pointer-events:auto;
    transition:max-height .28s ease;min-width:0;
  }
  .dropdown.active{max-height:640px}
  .dropdown a{padding:11px 4px;font-size:var(--fs-ui);color:var(--ink-2);border-radius:0}
  .dropdown a:hover{background:transparent}
  .dropdown a small{font-size:var(--fs-micro)}
  /* 移动端为静态流内折叠，透明桥梁不再需要，否则会撑出空隙 */
  .dropdown.sticky-open,.dropdown::before{display:none}

  .wrap,.narrow{padding:0 var(--gutter-sm)}
}