/* Suviano Law, P.C. — design tokens & layout
   字体：Archivo（标题/界面）+ Source Serif 4（英文正文）+ Noto Serif/Sans SC（中文）
   配色：石墨墨色 + 纸白 + 单一朱砂暗红（用量控制在 2% 面积） */

:root{
  --ink:#1D2126; --ink-2:#4E545B; --ink-3:#808790; --ink-4:#AEB3B8;
  --paper:#F6F6F3; --paper-2:#EDEDE8; --white:#fff;
  --seal:#85372C; --seal-hi:#A34A3A;
  --rule:#E0E0DA; --rule-ink:#3A4046;

  --f-display:'Archivo','Noto Sans SC',system-ui,sans-serif;
  --f-ui:'Archivo','Noto Sans SC',system-ui,sans-serif;
  --f-read:'Source Serif 4','Noto Serif SC',Georgia,serif;

  --t-display:clamp(2.3rem,1.25rem + 4.1vw,4.75rem);
  --t-h2:clamp(1.75rem,1.18rem + 1.9vw,2.7rem);
  --t-h3:clamp(1.15rem,1.02rem + .45vw,1.35rem);
  --t-lede:clamp(1.08rem,1rem + .45vw,1.32rem);
  --t-body:1.0625rem; --t-meta:.8125rem; --t-label:.75rem;

  --gut:clamp(1.25rem,4vw,4rem);
  --wrap:1400px;
  --band-y:clamp(3.5rem,7vw,7rem);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::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(--f-read);
  font-size:var(--t-body);line-height:1.75;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:1px}

/* ---------- 断行控制（中英文都适用） ----------
   balance  = 标题各行长度尽量均匀，不会最后一行只剩一两个字
   pretty   = 正文避免孤字孤行
   strict   = 中文禁则：标点不出现在行首
   .nb      = 保护词组，整体不断开（build.py 自动加，也可手写） */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:500;line-height:1.14;
  letter-spacing:-.02em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
.nb{white-space:nowrap}
:lang(zh){line-break:strict;word-break:normal;overflow-wrap:normal}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{letter-spacing:0;line-height:1.3}
:lang(zh) body,:lang(zh) p{line-height:1.9}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--band-y)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--tint{background:var(--paper-2)}

.label{font-family:var(--f-ui);font-size:var(--t-label);font-weight:500;letter-spacing:.02em;
  color:var(--ink-3);display:flex;align-items:center;gap:.6rem;margin:0 0 1.4rem}
.label::before{content:"";width:6px;height:6px;background:var(--seal);flex:none}
.band--ink .label{color:var(--ink-4)}
.meta{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-3);line-height:1.55}
.lede{font-size:var(--t-lede);line-height:1.6;color:var(--ink-2)}
.prose{max-width:62ch}
.prose p+p{margin-top:1.15em}

.tlink{font-family:var(--f-ui);font-size:.9375rem;font-weight:500;text-decoration:none;
  display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--ink-4);
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.tlink:hover{color:var(--seal);border-bottom-color:var(--seal)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease)}
.hdr[data-stuck="1"]{border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:76px}
.mark{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;flex:none}
.mark__name{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;font-stretch:118%;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mark__sub{font-family:var(--f-ui);font-size:.6875rem;color:var(--ink-3);letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-family:var(--f-ui);font-size:.9375rem;font-weight:500;text-decoration:none;color:var(--ink-2);
  padding-bottom:3px;border-bottom:1px solid transparent;white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--seal)}
.tools{display:flex;align-items:center;gap:1.25rem}
.lang{display:flex;align-items:center;gap:.5rem;font-family:var(--f-ui);font-size:var(--t-meta)}
.lang button{background:none;border:0;padding:.15rem .1rem;cursor:pointer;font:inherit;color:var(--ink-4);
  border-bottom:1px solid transparent;transition:color .18s var(--ease)}
.lang button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--seal)}
.lang span{color:var(--ink-4)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(500px,84svh,840px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,23,27,.80) 0%,rgba(20,23,27,.62) 42%,rgba(20,23,27,.30) 78%,rgba(20,23,27,.42) 100%)}
.hero__in{position:relative;width:100%;padding-block:clamp(3rem,7vw,6rem)}
.hero__eyebrow{font-family:var(--f-ui);font-size:var(--t-meta);color:rgba(246,246,243,.62);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.6rem}
.hero h1{font-size:var(--t-display);font-stretch:94%;letter-spacing:-.028em;max-width:17ch;color:var(--paper)}
:lang(zh) .hero h1{max-width:15ch;font-size:clamp(2rem,1.1rem + 3.4vw,3.9rem)}
.hero__lede{margin-top:1.6rem;max-width:46ch;color:rgba(246,246,243,.82);font-size:var(--t-lede);line-height:1.65}
.hero__acts{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:2rem}
.hero__acts .tlink{color:var(--paper);border-bottom-color:rgba(246,246,243,.35)}
.hero__acts .tlink:hover{color:var(--white);border-bottom-color:var(--seal-hi)}

/* ---------- 生命周期图 ---------- */
.life__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34ch);gap:2rem 3rem;
  align-items:end;margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.life__head h2{font-size:var(--t-h2);max-width:20ch}
.life__head p{color:var(--ink-4);font-size:.9375rem;line-height:1.7;font-family:var(--f-ui)}
.rail{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-ink)}
.stop{position:relative;padding:1.5rem 1.75rem 0 0}
.stop::before{content:"";position:absolute;left:0;top:0;width:1px;height:.95rem;background:var(--ink-4);
  transition:background-color .2s var(--ease),height .2s var(--ease)}
.stop::after{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;background:var(--seal);
  opacity:0;transition:opacity .2s var(--ease)}
.stop:hover::before,.stop:focus-within::before{background:var(--seal-hi);height:1.3rem}
.stop:hover::after,.stop:focus-within::after{opacity:1}
.stop a{text-decoration:none;display:block}
.stop__n{font-family:var(--f-ui);font-size:.6875rem;color:var(--ink-4);letter-spacing:.14em;display:block;margin-bottom:.45rem}
.stop__t{font-family:var(--f-display);font-size:1.0625rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--paper);display:block;margin-bottom:.5rem}
:lang(zh) .stop__t{letter-spacing:.04em;text-transform:none}
.stop__d{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-4);line-height:1.7;display:block}
.spans{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:.6rem}
.span{display:flex;align-items:center;gap:1rem;border:1px solid var(--rule-ink);
  border-left:2px solid var(--seal);padding:.8rem 1.1rem;text-decoration:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.span:hover{background:rgba(163,74,58,.10);border-color:var(--seal)}
.span__t{font-family:var(--f-ui);font-size:.9375rem;font-weight:500;color:var(--paper)}
.span__d{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-4);margin-left:auto;text-align:right}

/* ---------- editorial ---------- */
.ed{display:grid;grid-template-columns:minmax(0,18ch) minmax(0,1fr);gap:clamp(1.5rem,6vw,6rem)}
.ed h2{font-size:var(--t-h2);max-width:18ch;margin-bottom:1.6rem}
.ed__body{max-width:62ch;color:var(--ink-2)}
.ed__body p+p{margin-top:1.2em}

/* ---------- 列表行（业务领域 / 洞察） ---------- */
.rows{border-top:1px solid var(--rule);margin-top:clamp(2rem,4vw,3.25rem)}
.row{display:grid;grid-template-columns:minmax(0,16ch) minmax(0,1fr) 2.5rem;gap:clamp(1rem,4vw,3rem);
  align-items:baseline;border-bottom:1px solid var(--rule);padding:1.8rem .25rem;text-decoration:none;
  transition:padding-left .25s var(--ease),background-color .25s var(--ease)}
.row:hover{padding-left:1rem;background:rgba(133,55,44,.035)}
.row__when{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--seal)}
.row h3{font-size:var(--t-h3);margin-bottom:.5rem;max-width:40ch}
.row p{font-family:var(--f-ui);font-size:.9375rem;line-height:1.7;color:var(--ink-3);max-width:56ch}
.row__arw{justify-self:end;color:var(--ink-4);transition:color .25s var(--ease),transform .25s var(--ease)}
.row:hover .row__arw{color:var(--seal);transform:translateX(4px)}

.feed{border-top:1px solid var(--rule);margin-top:clamp(2rem,4vw,3.25rem)}
.post{display:block;border-bottom:1px solid var(--rule);padding:1.9rem .25rem;text-decoration:none;
  transition:padding-left .25s var(--ease),background-color .25s var(--ease)}
.post:hover{padding-left:1rem;background:rgba(133,55,44,.035)}
.post__meta{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-3);margin-bottom:.7rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.post__cat{color:var(--seal)}
.post__dot{color:var(--ink-4)}
.post h3{font-size:var(--t-h3);line-height:1.35;max-width:48ch;margin-bottom:.6rem;transition:color .2s var(--ease)}
.post:hover h3{color:var(--seal)}
.post__ex{font-family:var(--f-ui);font-size:.9375rem;line-height:1.7;color:var(--ink-3);max-width:64ch}

/* ---------- 内页页头 ---------- */
.phead{padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.phead h1{font-size:var(--t-h2);max-width:22ch;margin-bottom:1.1rem}
.crumb{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-3);margin-bottom:1.25rem}
.crumb a{text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--seal);border-bottom-color:var(--seal)}

/* ---------- 业务领域详情 ---------- */
.detail{display:grid;grid-template-columns:minmax(0,20ch) minmax(0,1fr);gap:clamp(1.5rem,6vw,6rem);
  padding-block:clamp(2.75rem,5vw,4.5rem)}
.detail__num{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--seal);letter-spacing:.14em}
.detail__when{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-3);margin-top:.5rem}
.detail h2{font-size:var(--t-h2);max-width:20ch;margin-bottom:1.25rem}
.scope{list-style:none;margin:2.25rem 0 0;padding:0;border-top:1px solid var(--rule)}
.scope li{border-bottom:1px solid var(--rule);padding:1rem 0 1rem 1.6rem;position:relative;
  font-family:var(--f-ui);font-size:.9375rem;line-height:1.75;color:var(--ink-2);max-width:70ch}
.scope li::before{content:"";position:absolute;left:0;top:1.45rem;width:6px;height:1px;background:var(--seal)}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;
  border-top:1px solid var(--rule);padding-block:2rem;margin-top:1rem}

/* ---------- 人员 ---------- */
.person{display:grid;grid-template-columns:minmax(240px,32%) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:start;padding-block:clamp(2.75rem,5vw,4.5rem)}
.person__fig{margin:0;position:sticky;top:100px}
.person__fig img{width:100%;height:auto;filter:saturate(.78) contrast(1.03)}
.person__fig figcaption{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-3);
  margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.person h2{font-size:var(--t-h2);margin-bottom:.35rem}
.person__role{font-family:var(--f-ui);font-size:1rem;color:var(--seal);margin-bottom:1.75rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem 2.5rem;
  margin-top:2.25rem;border-top:1px solid var(--rule);padding-top:1.6rem}
.facts dt{font-family:var(--f-ui);font-size:var(--t-label);color:var(--ink-3);margin-bottom:.45rem}
.facts dd{margin:0;font-family:var(--f-ui);font-size:.9375rem;line-height:1.75}
.pcontact{margin-top:2.25rem;border-top:1px solid var(--rule);padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:1.75rem}

/* ---------- 文章 ---------- */
.article{padding-block:clamp(2.5rem,5vw,4rem);max-width:66ch;margin-inline:auto}
.article .lede{margin-bottom:2rem}
.article h2{font-size:var(--t-h3);margin:2.25rem 0 .85rem}
.article p+p{margin-top:1.15em}

/* ---------- 联系 / 表单 ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.cta h2{font-size:var(--t-h2);max-width:18ch;margin-bottom:1.4rem}
.mail{font-family:var(--f-display);font-size:clamp(1.1rem,1rem + 1.1vw,1.7rem);font-weight:500;
  letter-spacing:-.015em;text-decoration:none;border-bottom:1px solid var(--ink-4);padding-bottom:.25rem;
  display:inline-block;word-break:break-all;transition:border-color .18s var(--ease),color .18s var(--ease)}
.mail:hover{color:var(--seal);border-bottom-color:var(--seal)}
.where{margin-top:2rem;font-family:var(--f-ui);font-size:.9375rem;line-height:1.8;color:var(--ink-2)}
.where strong{font-weight:500;color:var(--ink);display:block}

.form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.f-wide{grid-column:1/-1}
.field{display:block}
.field > span{display:block;font-family:var(--f-ui);font-size:var(--t-label);color:var(--ink-3);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--f-ui);font-size:.9375rem;
  color:var(--ink);background:transparent;border:1px solid var(--ink-4);border-radius:2px;
  padding:.72rem .85rem;transition:border-color .18s var(--ease)}
.field textarea{resize:vertical;min-height:9rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--seal)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--seal)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;font-family:var(--f-ui);
  font-size:var(--t-meta);line-height:1.7;color:var(--ink-2)}
.check input{margin:.25rem 0 0;accent-color:var(--seal);width:1rem;height:1rem;flex:none}
.check a{color:var(--seal)}
.submit{grid-column:1/-1;justify-self:start;font-family:var(--f-ui);font-size:.875rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:var(--ink);
  border:1px solid var(--ink);border-radius:2px;padding:.85rem 2.5rem;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.submit:hover{background:var(--seal);border-color:var(--seal)}
.submit[disabled]{opacity:.55;cursor:progress}
:lang(zh) .submit{letter-spacing:.12em;text-transform:none}
.disc{grid-column:1/-1;font-family:var(--f-ui);font-size:var(--t-meta);line-height:1.7;color:var(--ink-3);
  border-top:1px solid var(--rule);padding-top:1rem;margin-top:.25rem}
.formmsg{grid-column:1/-1;font-family:var(--f-ui);font-size:.9375rem;line-height:1.7;
  border-left:2px solid var(--seal);padding:.85rem 1.1rem;background:rgba(133,55,44,.05)}
.done{border-left:2px solid var(--seal);padding:1.5rem 1.6rem;background:rgba(133,55,44,.05)}
.done h3{font-size:var(--t-h3);margin-bottom:.7rem}
.done p{font-family:var(--f-ui);font-size:.9375rem;line-height:1.8;color:var(--ink-2)}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:var(--ink-4);font-family:var(--f-ui);font-size:.9375rem}
.ft a{text-decoration:none;transition:color .18s var(--ease)}
.ft a:hover{color:var(--paper)}
.ft__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem);padding-block:clamp(2.75rem,5vw,4.5rem)}
.ft h4{font-family:var(--f-ui);font-size:var(--t-label);font-weight:500;color:var(--paper);margin:0 0 1.1rem}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ft__bot{border-top:1px solid var(--rule-ink);padding-block:1.6rem;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,52ch);gap:2rem;font-size:var(--t-meta);line-height:1.7}
.ft__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}
.icp{margin-top:.6rem;color:var(--ink-3)}
.icp a{color:inherit}

/* ---------- 双语切换 ---------- */
.zh{display:none}
[lang="zh"] .en{display:none}
[lang="zh"] .zh{display:revert}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .nav{gap:1.4rem}
  .life__head,.cta,.ft__bot{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr 1fr}
  .stop{padding-right:1.1rem}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:flex-start;gap:0;
    padding:.5rem var(--gut) 1.25rem}
  .nav[data-open="1"]{display:flex}
  .nav a{padding:.7rem 0;width:100%}
  .ed,.detail,.person{grid-template-columns:1fr;gap:1.5rem}
  .person__fig{position:static;max-width:360px}
  .row{grid-template-columns:1fr 2rem;gap:.55rem 1rem}
  .row__when{grid-column:1/-1}
  .span{flex-wrap:wrap;gap:.35rem}
  .span__d{margin-left:0;text-align:left;width:100%}
  .form{grid-template-columns:1fr}
  .mark__sub{display:none}
  .rail{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--rule-ink);padding-left:1.6rem}
  .stop{padding:0 0 1.9rem}
  .stop:last-child{padding-bottom:0}
  .stop::before{left:-1.6rem;top:.55rem;width:1.05rem;height:1px}
  .stop::after{left:-1.8rem;top:.3rem}
  .stop:hover::before{height:1px;width:1.35rem}
}
@media (max-width:620px){ .ft__top{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important} }

/* ---------- 法律文本页 ---------- */
.legal h2{font-size:1.0625rem;font-weight:600;margin:2.5rem 0 .75rem;letter-spacing:0}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-2)}
.legal ul.scope{margin:1rem 0 0}
.legal ul.scope li{font-family:var(--f-read);font-size:1rem}
.legal__foot{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--rule);
  font-family:var(--f-ui);font-size:var(--t-meta);color:var(--ink-3)}
.legal__foot a{color:var(--seal)}
