/* =========================================================
   博万服务 · /assets/site.css
   共享外壳：变量、重置、排版、头部、页脚、基础组件
   ========================================================= */

:root{
  --clay:#B84A24;
  --clay-soft:#E7A07E;
  --lake:#16697A;
  --lake-soft:#8FC7CF;
  --gold:#D99A2B;
  --alert:#B3261E;
  --ok:#2D6A4F;
  --bone:#F7F2E8;
  --paper:#FFFFFF;
  --ink:#1E2328;
  --line:#D8D2C4;
  --ink-70:rgba(30,35,40,.7);
  --ink-55:rgba(30,35,40,.55);
  --ink-40:rgba(30,35,40,.4);
  --bone-72:rgba(247,242,232,.72);
  --bone-52:rgba(247,242,232,.52);
  --bone-38:rgba(247,242,232,.38);
  --font-display:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:"Noto Serif SC","Songti SC","Source Han Serif SC","SimSun",Georgia,serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(18px,4vw,48px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body,h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
hr{border:0;border-top:1px solid var(--line)}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.14;
  color:var(--ink);
}

h1{font-size:clamp(2rem,3.6vw,3.2rem)}
h2{font-size:clamp(1.4rem,2.2vw,2rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.28rem);letter-spacing:-.01em}
h4{font-size:1rem;font-weight:700;letter-spacing:0}

p{max-width:72ch}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

::selection{background:var(--clay-soft);color:var(--ink)}

/* ---------- 工具 ---------- */

.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.mono{
  font-family:var(--font-mono);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-80px;
  z-index:999;
  display:inline-block;
  padding:.62rem 1.05rem;
  background:var(--ink);
  color:var(--bone);
  border:2px solid var(--gold);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.12em;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:12px}

/* =========================================================
   头部
   ========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bone);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 10px 26px -22px rgba(30,35,40,.7);
}

/* 状态轨 */
.status-rail{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.09em;
}
.status-rail__inner{
  display:flex;
  align-items:center;
  gap:.9rem 1.4rem;
  flex-wrap:wrap;
  min-height:34px;
  padding-block:.28rem;
}
.status-rail__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--bone);
  max-width:none;
}
.status-dot{
  width:7px;
  height:7px;
  flex:none;
  background:var(--ok);
  box-shadow:0 0 0 2px rgba(45,106,79,.32);
}
.status-rail__text{
  color:var(--bone-52);
  max-width:none;
}
.status-rail__link{
  margin-left:auto;
  color:var(--bone);
  border-bottom:1px solid var(--gold);
  padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.status-rail__link:hover{color:var(--gold);border-color:var(--clay-soft)}

/* 命令栏 */
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  min-height:78px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex:0 0 auto;
  padding-block:.6rem;
  color:var(--ink);
}
.brand__mark{
  width:44px;
  height:44px;
  flex:none;
  display:grid;
  place-items:center;
  background:var(--clay);
  color:#fff;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.22rem;
  line-height:1;
  transition:background .2s var(--ease);
}
.brand__text{display:flex;flex-direction:column;gap:.08rem}
.brand__name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.16rem;
  line-height:1.2;
  letter-spacing:.01em;
}
.brand__line{
  font-family:var(--font-sans);
  font-size:.66rem;
  line-height:1.3;
  letter-spacing:.13em;
  color:var(--lake);
}
.brand__ver{
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.16em;
  color:var(--clay);
  background:var(--paper);
  border:1px solid var(--line);
  padding:.16rem .42rem;
  white-space:nowrap;
}
.brand:hover .brand__mark{background:var(--lake)}

/* 桌面导航 */
.nav{display:flex;align-items:center}
.nav__list{
  display:flex;
  align-items:center;
  gap:.1rem;
}
.nav__item{display:block}
.nav__link{
  position:relative;
  display:flex;
  align-items:center;
  padding:.7rem .74rem;
  font-family:var(--font-sans);
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink);
  border:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.nav__link::before{display:none}
.nav__link::after{
  content:"";
  position:absolute;
  left:.74rem;
  right:.74rem;
  bottom:0;
  height:2px;
  background:var(--clay);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s var(--ease),background .2s var(--ease);
}
.nav__link:hover{
  color:var(--lake);
  border-color:var(--lake-soft);
}
.nav__link:hover::after{transform:scaleX(1);background:var(--lake)}
.nav__link[aria-current="page"]{color:var(--clay)}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--clay)}

.nav__note{
  display:none;
  margin-top:1rem;
  padding-top:.9rem;
  border-top:1px dashed var(--line);
  font-family:var(--font-sans);
  font-size:.74rem;
  line-height:1.65;
  color:var(--ink-55);
  max-width:none;
}

/* 移动按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:.55rem;
  padding:.5rem .68rem;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.nav-toggle:hover{border-color:var(--lake);color:var(--lake)}
.nav-toggle__bars{
  width:20px;
  height:14px;
  flex:none;
  background-image:linear-gradient(var(--ink),var(--ink)),
                   linear-gradient(var(--ink),var(--ink)),
                   linear-gradient(var(--ink),var(--ink));
  background-size:100% 2px;
  background-position:0 0,0 6px,0 12px;
  background-repeat:no-repeat;
}
.site-header[data-open] .nav-toggle{border-color:var(--clay);color:var(--clay)}
.site-header[data-open] .nav-toggle__bars{
  background-image:linear-gradient(var(--clay),var(--clay)),
                   linear-gradient(var(--clay),var(--clay)),
                   linear-gradient(var(--clay),var(--clay));
}

/* 滚动刻度 */
.scroll-meter{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  z-index:3;
  pointer-events:none;
  background:transparent;
}
.scroll-meter span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,var(--clay),var(--gold));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .12s linear;
}

/* =========================================================
   页脚
   ========================================================= */

.site-footer{
  margin-top:clamp(3rem,7vw,6rem);
  background:var(--ink);
  color:var(--bone);
}

.footer-rule{
  display:flex;
  align-items:flex-end;
  height:8px;
  background:var(--ink);
}
.footer-rule span{flex:1 1 0}
.footer-rule span:nth-child(1){height:3px;background:var(--clay)}
.footer-rule span:nth-child(2){height:8px;background:var(--gold)}
.footer-rule span:nth-child(3){height:5px;background:var(--lake)}
.footer-rule span:nth-child(4){height:8px;background:var(--clay)}
.footer-rule span:nth-child(5){height:2px;background:var(--lake-soft)}
.footer-rule span:nth-child(6){height:6px;background:var(--gold)}

.footer-top{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.72fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,3vw,3.2rem);
  padding-block:clamp(2.4rem,5vw,4rem);
}

.footer-brand__name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.55rem,2.6vw,2.15rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--bone);
  max-width:none;
}
.footer-brand__line{
  margin-top:.45rem;
  font-family:var(--font-sans);
  font-size:.9rem;
  line-height:1.6;
  color:var(--bone-72);
  max-width:24ch;
}
.footer-brand__meta{
  margin-top:.9rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--bone-52);
  max-width:none;
}
.footer-brand__cta{margin-top:1.3rem}

.footer-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.2em;
  color:var(--bone-52);
  line-height:1.4;
}
.footer-title::before{
  content:"";
  width:16px;
  height:2px;
  flex:none;
  background:var(--clay);
}

.footer-index,.footer-support,.footer-contact{min-width:0}

.footer-index__list{display:grid;gap:.2rem;margin-top:1.05rem}
.footer-index__item{
  --i:0;
  display:flex;
  align-items:baseline;
  gap:.62rem;
  padding-left:calc(var(--i) * 6px);
}
.footer-index__item:nth-child(1){--i:0}
.footer-index__item:nth-child(2){--i:1}
.footer-index__item:nth-child(3){--i:2}
.footer-index__item:nth-child(4){--i:3}
.footer-index__item:nth-child(5){--i:4}
.footer-index__item:nth-child(6){--i:5}
.footer-index__num{
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.14em;
  color:var(--gold);
  flex:none;
}

.footer-list{display:grid;gap:.62rem;margin-top:1.05rem}
.footer-list--contact{gap:.9rem}

.footer-link{
  position:relative;
  display:inline-block;
  font-family:var(--font-sans);
  font-size:.9rem;
  line-height:1.5;
  color:var(--bone);
  transition:color .2s var(--ease);
}
.footer-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s var(--ease);
}
.footer-link:hover{color:var(--gold)}
.footer-link:hover::after{transform:scaleX(1)}

.footer-list--contact li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem .55rem;
}
.footer-k{
  flex:0 0 100%;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.16em;
  color:var(--bone-38);
}
.footer-v{
  font-family:var(--font-sans);
  font-size:.86rem;
  line-height:1.6;
  color:var(--bone);
  word-break:break-word;
}

.copy-btn{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  padding:.16rem .46rem;
  background:transparent;
  border:1px solid var(--bone-38);
  color:var(--bone-52);
  cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.copy-btn:hover{border-color:var(--gold);color:var(--gold)}
.copy-btn.is-copied{
  border-color:var(--ok);
  color:var(--bone);
  background:var(--ok);
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem 2.4rem;
  flex-wrap:wrap;
  border-top:1px solid rgba(247,242,232,.16);
  padding-block:1.2rem 1.7rem;
}
.footer-legal{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--bone-72);
  max-width:none;
}
.footer-note{
  font-family:var(--font-sans);
  font-size:.75rem;
  line-height:1.7;
  letter-spacing:.01em;
  color:var(--bone-52);
  max-width:58ch;
}

/* =========================================================
   通用内容组件
   ========================================================= */

.section{padding-block:clamp(2.5rem,5vw,4.5rem)}
.section--tight{padding-block:clamp(1.4rem,3vw,2.4rem)}

.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem 1.6rem;
  flex-wrap:wrap;
  padding-bottom:.85rem;
  margin-bottom:clamp(1.2rem,2.4vw,2rem);
  border-bottom:1px solid var(--line);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--lake);
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:18px;
  height:2px;
  flex:none;
  background:var(--clay);
}

.lede{
  font-family:var(--font-serif);
  font-size:clamp(1.02rem,1.4vw,1.2rem);
  line-height:1.85;
  color:var(--ink-70);
  max-width:62ch;
}

.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
  padding-block:1rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.12em;
  color:var(--ink-40);
}
.crumbs a{
  color:var(--lake);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease);
}
.crumbs a:hover{border-bottom-color:var(--lake)}
.crumbs span[aria-current]{color:var(--ink-70)}

.prose{
  font-family:var(--font-serif);
  max-width:68ch;
}
.prose h2,
.prose h3{margin-top:2rem;margin-bottom:.7rem}
.prose p + p{margin-top:.95rem}
.prose ul,
.prose ol{margin-top:.85rem;display:grid;gap:.4rem}
.prose ul li{padding-left:1.1rem;position:relative}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:2px;
  background:var(--clay);
}
.prose ol{counter-reset:prose}
.prose ol li{padding-left:1.7rem;position:relative;counter-increment:prose}
.prose ol li::before{
  content:counter(prose,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.15em;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--lake);
}

.split{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.5rem,3.5vw,3.4rem);
  align-items:start;
}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}

.grid-2,
.grid-3,
.grid-6{
  display:grid;
  gap:clamp(.9rem,1.8vw,1.5rem);
}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}

.grid-6 > *{
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(1rem,2vw,1.5rem);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.grid-6 > *:hover{border-color:var(--lake)}
.grid-6 > :nth-child(3),
.grid-6 > :nth-child(5){
  margin-block-start:clamp(0px,2.2vw,26px);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1.12rem;
  font-family:var(--font-sans);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.3;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn--primary{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
}
.btn--primary:hover{background:var(--ink);border-color:var(--ink)}
.btn--line{
  background:var(--paper);
  border-color:var(--line);
  color:var(--ink);
}
.btn--line:hover{border-color:var(--lake);color:var(--lake)}
.btn--ghost{
  background:transparent;
  border-color:var(--bone-38);
  color:var(--bone);
}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .55rem;
  background:var(--lake-soft);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  line-height:1.5;
}
.tag--clay{background:var(--clay-soft)}
.tag--gold{background:rgba(217,154,43,.3)}

.state{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.85rem 1rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-left-width:4px;
  font-family:var(--font-sans);
  font-size:.87rem;
  line-height:1.6;
}
.state__icon{
  flex:none;
  width:20px;
  height:20px;
  margin-top:.14rem;
  display:grid;
  place-items:center;
  background:var(--lake);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  line-height:1;
}
.state--info{border-left-color:var(--lake)}
.state--info .state__icon{background:var(--lake)}
.state--alert{border-left-color:var(--alert)}
.state--alert .state__icon{background:var(--alert)}
.state--ok{border-left-color:var(--ok)}
.state--ok .state__icon{background:var(--ok)}
.state p{max-width:none}

.table{
  width:100%;
  background:var(--paper);
  font-family:var(--font-sans);
  font-size:.88rem;
  line-height:1.6;
}
.table caption{
  caption-side:bottom;
  padding-top:.6rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  color:var(--ink-55);
  text-align:left;
}
.table th,
.table td{
  text-align:left;
  vertical-align:top;
  padding:.72rem .85rem;
  border:1px solid var(--line);
}
.table thead th{
  background:var(--lake-soft);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ink);
}
.table tbody tr{transition:background .18s var(--ease)}
.table tbody tr:hover{background:rgba(143,199,207,.18)}

.accordion{
  background:var(--paper);
  border:1px solid var(--line);
}
.accordion + .accordion{border-top:0}
.accordion__summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.95rem 1.05rem;
  font-family:var(--font-sans);
  font-size:.92rem;
  font-weight:700;
  line-height:1.5;
  cursor:pointer;
  list-style:none;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.accordion__summary::-webkit-details-marker{display:none}
.accordion__summary::after{
  content:"+";
  flex:none;
  font-family:var(--font-mono);
  font-size:.95rem;
  color:var(--lake);
}
.accordion[open] .accordion__summary{background:rgba(143,199,207,.2);color:var(--ink)}
.accordion[open] .accordion__summary::after{content:"–";color:var(--clay)}
.accordion__body{
  padding:.15rem 1.05rem 1.05rem;
  font-family:var(--font-serif);
  font-size:.94rem;
  line-height:1.8;
  color:var(--ink-70);
}
.accordion__body p{max-width:64ch}

.steps{
  display:grid;
  gap:0;
  margin-left:.45rem;
  border-left:2px solid var(--line);
  padding-top:.4rem;
}
.step{
  position:relative;
  padding:0 0 1.45rem 1.5rem;
}
.step::before{
  content:"";
  position:absolute;
  left:-7px;
  top:.42rem;
  width:12px;
  height:12px;
  background:var(--paper);
  border:2px solid var(--clay);
}
.step__num{
  display:block;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:.2rem;
}
.step p{max-width:60ch;font-family:var(--font-sans);font-size:.9rem;line-height:1.7;color:var(--ink-70)}

.media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--paper);
  border:1px solid var(--line);
}
.media::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(22,105,122,.11) 22px 23px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(184,74,36,.09) 22px 23px);
  pointer-events:none;
}
.media--wide{aspect-ratio:21/9}
.media--tall{aspect-ratio:4/5}
.media__img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
}
.media__tag{
  position:absolute;
  left:0;
  bottom:0;
  padding:.3rem .62rem;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.14em;
}
.media__caption{
  margin-top:.55rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--ink-55);
}

/* =========================================================
   响应式
   ========================================================= */

@media (max-width:1080px){
  .nav__link{padding-inline:.55rem;font-size:.8rem}
  .nav__link::after{left:.55rem;right:.55rem}
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .brand__ver{display:none}

  .nav-toggle{display:inline-flex}

  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:4;
    display:block;
    background:var(--paper);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 32px -26px rgba(30,35,40,.6);
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    padding-bottom:.9rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  .site-header[data-open] .nav{
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .nav__list{display:block}
  .nav__item{border-bottom:1px solid var(--line)}
  .nav__item:last-child{border-bottom:0}

  .nav__link{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.95rem var(--gutter);
    font-size:.94rem;
    border:0;
    background:transparent;
  }
  .nav__link::before{
    content:attr(data-index);
    display:inline-block;
    width:2.1em;
    flex:none;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.14em;
    color:var(--lake);
  }
  .nav__link::after{display:none}
  .nav__link[aria-current="page"]{
    color:var(--clay);
    background:rgba(184,74,36,.07);
  }
  .nav__link[aria-current="page"]::before{color:var(--clay)}

  .nav__item:nth-child(1) .nav__link{padding-left:var(--gutter)}
  .nav__item:nth-child(2) .nav__link{padding-left:calc(var(--gutter) + 6px)}
  .nav__item:nth-child(3) .nav__link{padding-left:calc(var(--gutter) + 12px)}
  .nav__item:nth-child(4) .nav__link{padding-left:calc(var(--gutter) + 18px)}
  .nav__item:nth-child(5) .nav__link{padding-left:calc(var(--gutter) + 24px)}
  .nav__item:nth-child(6) .nav__link{padding-left:calc(var(--gutter) + 30px)}

  .nav__note{display:block;margin:1rem var(--gutter) 0;padding:0;border-top:1px dashed var(--line);padding-top:.9rem}

  .split,
  .split--rev{grid-template-columns:minmax(0,1fr)}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-6 > :nth-child(3),
  .grid-6 > :nth-child(5){margin-block-start:0}
}

@media (max-width:760px){
  .status-rail__text{display:none}
  .header-bar{min-height:70px}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:2rem}
  .footer-bottom{flex-direction:column;gap:.75rem}
  .footer-brand__line{max-width:none}
}

@media (max-width:600px){
  .brand__line{display:none}
  .brand__mark{width:38px;height:38px;font-size:1.05rem}
  .brand__name{font-size:1.05rem}
  .grid-2,
  .grid-3,
  .grid-6{grid-template-columns:minmax(0,1fr)}
  .media{aspect-ratio:4/3}
  .media--wide{aspect-ratio:16/9}
}

/* =========================================================
   动效偏好
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .scroll-meter span{transition:none}
  .nav{transition:none}
}