/* ===== 博万官网 · 共享样式 /assets/site.css ===== */

:root{
  --ink-950:#040B14;
  --ink-900:#071426;
  --ink-800:#0C2038;
  --line-700:#17324F;
  --blue-500:#2D7DFF;
  --blue-700:#0B3FA8;
  --amber-500:#FF9E2C;
  --amber-700:#B85C00;
  --paper-100:#E9F0F8;
  --steel-400:#8FA6C2;

  --rail-w:232px;
  --header-h:64px;
  --gutter:24px;
  --max-w:1440px;

  --font-display:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",SFMono-Regular,Consolas,monospace;

  --ease:.18s ease;
}

/* ===== reset ===== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  padding-left:var(--rail-w);
  background:var(--ink-950);
  color:var(--paper-100);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;background:none;}
button{font:inherit;color:inherit;}
main{display:block;}
table{border-collapse:collapse;}

:focus-visible{outline:2px solid var(--amber-500);outline-offset:2px;}

/* ===== 中文排版与工具类 ===== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.06;
}
p{letter-spacing:.005em;}
.mono{
  font-family:var(--font-mono);
  font-weight:500;
  letter-spacing:.02em;
}
.label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.4;
  color:var(--steel-400);
}
.prose{max-width:720px;}
.prose p + p{margin-top:1em;}

.container{
  width:100%;
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px);
}
.grid{
  display:grid;
  gap:clamp(20px,3vw,32px);
}
.grid--auto{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* ===== skip link ===== */
.skip-link{
  position:fixed;
  top:-120px;
  left:16px;
  z-index:200;
  padding:10px 18px;
  background:var(--amber-500);
  color:var(--ink-950);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration:none;
  border-radius:2px;
  transition:top var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible{top:12px;}

/* ===== 头部：侧边轨道 ===== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--rail-w);
  z-index:80;
  display:flex;
  flex-direction:column;
  background-color:var(--ink-950);
  background-image:repeating-linear-gradient(
    0deg,
    rgba(143,166,194,.05) 0 1px,
    transparent 1px 7px
  );
  border-right:1px solid var(--line-700);
  color:var(--paper-100);
}

.brand-block{
  position:relative;
  flex:0 0 auto;
  padding:22px 20px 18px;
  border-bottom:1px solid var(--line-700);
}
.brand-block::after{
  content:"";
  position:absolute;
  left:20px;
  bottom:-1px;
  width:34px;
  height:2px;
  background:var(--amber-500);
}
.brand{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  text-decoration:none;
}
.brand__mark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:21px;
  letter-spacing:.06em;
  color:#fff;
}
.brand__latin{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.26em;
  color:var(--steel-400);
}
.brand__line{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.5;
  color:var(--steel-400);
}

/* 移动端抽屉按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:8px 12px;
  background:var(--ink-900);
  border:1px solid var(--line-700);
  border-radius:2px;
  color:var(--paper-100);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  cursor:pointer;
  transition:border-color var(--ease),background-color var(--ease);
}
.nav-toggle:hover{border-color:var(--amber-500);}
.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:16px;
}
.nav-toggle__bars span{
  display:block;
  height:1px;
  width:100%;
  background:var(--paper-100);
  transition:transform .2s ease,background-color .2s ease;
}
.site-header[data-open] .nav-toggle__bars span:first-child{
  transform:translateY(2.5px) rotate(45deg);
  background:var(--amber-500);
}
.site-header[data-open] .nav-toggle__bars span:last-child{
  transform:translateY(-2.5px) rotate(-45deg);
  background:var(--amber-500);
}
.nav-toggle__text{line-height:1;}

/* 轨道本体 */
.rail{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line-700) transparent;
}
.rail__nav{
  flex:1 1 auto;
  padding:14px 0 10px;
}
.nav-list{
  display:flex;
  flex-direction:column;
}
.nav-link{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:10px;
  align-items:start;
  padding:11px 18px 11px 18px;
  border-left:2px solid transparent;
  color:var(--steel-400);
  font-size:13px;
  line-height:1.45;
  text-decoration:none;
  transition:color var(--ease),background-color var(--ease),border-color var(--ease);
}
.nav-link__idx{
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--steel-400);
  transition:color var(--ease);
}
.nav-link__label{display:block;}
.nav-link:hover{
  color:#fff;
  background:var(--ink-900);
  border-left-color:var(--amber-500);
}
.nav-link:hover .nav-link__idx{color:var(--amber-500);}
.nav-link:focus-visible{
  outline:2px solid var(--amber-500);
  outline-offset:-2px;
  color:#fff;
  background:var(--ink-900);
}
.nav-link[aria-current="page"]{
  color:#fff;
  border-left-color:var(--blue-500);
  background:linear-gradient(90deg,rgba(45,125,255,.20),rgba(45,125,255,0) 74%);
}
.nav-link[aria-current="page"] .nav-link__idx{color:var(--amber-500);}

.rail__actions{
  flex:0 0 auto;
  display:grid;
  gap:8px;
  padding:16px 20px 12px;
  border-top:1px solid var(--line-700);
}
.rail__note{
  flex:0 0 auto;
  padding:0 20px 20px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--steel-400);
}

/* 阅读进度 */
.progress{
  position:fixed;
  top:0;
  left:var(--rail-w);
  right:0;
  height:2px;
  z-index:90;
  background:rgba(23,50,79,.55);
  pointer-events:none;
}
.progress__bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--blue-500),var(--amber-500));
  transition:width .1s linear;
}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--ease),border-color var(--ease),color var(--ease);
}
.btn--primary{
  background:var(--blue-500);
  color:#fff;
}
.btn--primary:hover{background:var(--blue-700);}
.btn--primary:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);}
.btn--ghost{
  background:transparent;
  color:var(--paper-100);
  border-color:var(--line-700);
}
.btn--ghost:hover{
  border-color:var(--amber-500);
  color:#fff;
}
.btn--ghost:active{box-shadow:inset 0 0 0 1px var(--amber-500);}
.btn--block{width:100%;}

/* ===== 面包屑 ===== */
.breadcrumb{padding-block:20px 0;}
.breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--steel-400);
}
.breadcrumb__item{display:inline-flex;align-items:center;gap:8px;}
.breadcrumb__link{
  color:var(--steel-400);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible{
  color:var(--paper-100);
  border-bottom-color:var(--amber-500);
}
.breadcrumb__sep{color:var(--line-700);}
.breadcrumb__item[aria-current="page"]{color:var(--paper-100);}

/* ===== 图片容器基础 ===== */
.img-frame{
  position:relative;
  overflow:hidden;
  background:var(--ink-800);
  border:1px solid var(--line-700);
  border-radius:2px;
  aspect-ratio:16 / 9;
}
.img-frame > img,
.img-frame > picture,
.img-frame > picture > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.img-frame > img,
.img-frame > picture > img{
  filter:saturate(.72) contrast(1.06) brightness(.94);
}
.img-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(4,11,20,0) 42%,rgba(4,11,20,.62) 100%),
    repeating-linear-gradient(0deg,rgba(233,240,248,.05) 0 1px,transparent 1px 4px);
}
.img-frame--wide{aspect-ratio:21 / 9;}
.img-frame--tall{aspect-ratio:4 / 5;}
.img-frame--square{aspect-ratio:1 / 1;}
.img-frame__caption{
  position:absolute;
  left:14px;
  bottom:12px;
  z-index:2;
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--paper-100);
}

/* ===== 页脚 ===== */
.site-footer{
  position:relative;
  margin-top:0;
  padding:56px clamp(20px,4vw,64px) 26px;
  background:var(--ink-900);
  border-top:1px solid var(--line-700);
  color:var(--steel-400);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:120px;
  height:2px;
  background:var(--amber-500);
}
.footer__inner{
  max-width:var(--max-w);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.7fr .8fr .8fr .8fr 1.4fr;
  gap:36px 24px;
  align-items:start;
}
.footer__brand{padding-right:16px;}
.footer__mark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:.06em;
  color:#fff;
  line-height:1.2;
}
.footer__line{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--steel-400);
}
.footer__summary{
  margin-top:14px;
  max-width:34ch;
  font-size:13px;
  line-height:1.75;
  color:var(--steel-400);
}
.footer__version{
  display:inline-block;
  margin-top:16px;
  padding:4px 9px;
  border:1px solid var(--line-700);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--paper-100);
}
.footer__col{display:block;}
.footer__title{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.4;
  color:var(--amber-500);
}
.footer__list{display:grid;gap:9px;}
.footer__link{
  color:var(--paper-100);
  font-size:14px;
  line-height:1.5;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--ease),border-color var(--ease);
}
.footer__link:hover,
.footer__link:focus-visible{
  color:#fff;
  border-bottom-color:var(--amber-500);
}
.footer__contact-list{display:grid;gap:12px;}
.footer__contact-item{display:grid;gap:3px;}
.footer__contact-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--steel-400);
}
.footer__contact-value{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.01em;
  line-height:1.6;
  color:var(--paper-100);
  overflow-wrap:anywhere;
}
.footer__contact-value--body{
  font-family:var(--font-body);
  font-size:13px;
  line-height:1.65;
}
.footer__base{
  max-width:var(--max-w);
  margin:40px auto 0;
  padding-top:18px;
  border-top:1px solid var(--line-700);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  font-size:12px;
}
.footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.footer__legal .footer__link{font-size:12.5px;}
.footer__copyright{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--steel-400);
}
.footer__meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--steel-400);
}

/* ===== 入场显现 ===== */
[data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .24s ease,transform .24s ease;
}
[data-reveal][data-revealed]{
  opacity:1;
  transform:none;
}

/* ===== 平板 ===== */
@media (max-width:1180px){
  .footer__inner{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px 24px;
  }
  .footer__brand{grid-column:1 / -1;padding-right:0;}
  .footer__brand .footer__summary{max-width:52ch;}
  .footer__contact{grid-column:1 / -1;}
  .footer__contact-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px 24px;
  }
}

/* ===== 移动端：轨道收为抽屉 ===== */
@media (max-width:960px){
  :root{--rail-w:0px;}

  body{
    padding-left:0;
    padding-top:var(--header-h);
  }

  .site-header{
    top:0;
    left:0;
    right:0;
    bottom:auto;
    width:auto;
    height:var(--header-h);
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 12px 0 0;
    border-right:0;
    border-bottom:1px solid var(--line-700);
    background-image:none;
  }
  .brand-block{
    padding:0 14px;
    border-bottom:0;
  }
  .brand-block::after{
    left:14px;
    bottom:2px;
    width:22px;
  }
  .brand__line{display:none;}
  .nav-toggle{display:inline-flex;}

  .rail{
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;
    bottom:0;
    width:auto;
    z-index:75;
    background:var(--ink-950);
    border-top:1px solid var(--line-700);
    padding-bottom:28px;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .site-header[data-open] .rail{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .rail__nav{padding:10px 0 6px;}
  .nav-link{
    padding:14px 20px;
    font-size:15px;
    grid-template-columns:28px 1fr;
  }
  .rail__actions{padding:16px 20px 12px;}
  .rail__note{padding-bottom:8px;}

  .progress{
    top:var(--header-h);
    height:2px;
  }
}

/* ===== 手机 ===== */
@media (max-width:640px){
  body{font-size:15.5px;}
  .site-footer{padding:44px 20px 24px;}
  .footer__inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 20px;
  }
  .footer__brand,
  .footer__contact{grid-column:1 / -1;}
  .footer__contact-list{grid-template-columns:1fr;}
  .footer__base{
    flex-direction:column;
    align-items:flex-start;
    margin-top:30px;
  }
  .breadcrumb__list{font-size:11px;}
}

/* ===== 减少动态偏好 ===== */
@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-behavior:auto !important;
  }
  [data-reveal]{
    opacity:1;
    transform:none;
  }
}