/* ==========================================================================
   博王CN · /assets/site.css
   共享外壳：品牌轨道 / 叠加导航 / 页脚 / 通用组件
   ========================================================================== */

/* ---------- 1. 变量 ---------- */
:root{
  --signal:#FF6A00;
  --signal-dark:#E85F00;
  --ink:#0B1F3A;
  --paper:#F6F1E7;
  --rock:#D8D2C6;
  --clay:#C4552E;
  --moss:#5C7A52;
  --teal:#0E7C6B;
  --magenta:#C2185B;
  --yellow:#FFC400;
  --graphite:#14181F;
  --mist:#5A6270;
  --white:#FFFFFF;

  --font-display:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono","Courier New",monospace;

  --rail-w:88px;
  --bar-h:64px;
  --content-max:1180px;
  --gap:22px;
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;

  --tone:var(--mist);
}

[data-tone="signal"]{--tone:var(--signal);}
[data-tone="moss"]{--tone:var(--moss);}
[data-tone="teal"]{--tone:var(--teal);}
[data-tone="magenta"]{--tone:var(--magenta);}
[data-tone="clay"]{--tone:var(--clay);}
[data-tone="yellow"]{--tone:var(--yellow);}
[data-tone="ink"]{--tone:var(--ink);}

/* ---------- 2. Reset 与中文排版 ---------- */
*,
*::before,
*::after{box-sizing:border-box;}

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

body{
  margin:0;
  padding-left:var(--rail-w);
  padding-top:var(--bar-h);
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.8;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{
  margin:0 0 .6em;
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.22;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(40px,6vw,72px);line-height:1.08;}
h2{font-size:clamp(28px,3.6vw,40px);}
h3{font-size:24px;font-weight:800;}
h4{font-size:19px;font-weight:800;}

p{margin:0 0 1em;}
a{color:inherit;}
img,svg,video{max-width:100%;display:block;}
hr{border:0;border-top:1px solid var(--rock);margin:36px 0;}

::selection{background:var(--signal);color:#fff;}

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:2px;
  border-radius:4px;
}

.mono{font-family:var(--font-mono);font-size:.94em;letter-spacing:.02em;}

/* ---------- 3. 通用容器与工具类 ---------- */
.container{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 28px;
}

.prose{
  max-width:68ch;
  font-size:17px;
  line-height:1.85;
}
.prose > *:last-child{margin-bottom:0;}
.prose h2{margin:1.9em 0 .6em;font-size:clamp(26px,3.2vw,36px);}
.prose h3{margin:1.7em 0 .5em;}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.35em;}
.prose li{margin:.42em 0;}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;}
.prose a:hover{color:var(--signal);}
.prose blockquote{
  margin:1.4em 0;
  padding:14px 22px;
  border-left:4px solid var(--signal);
  background:rgba(11,31,58,.045);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
}
.prose code{
  font-family:var(--font-mono);
  font-size:.9em;
  background:rgba(11,31,58,.07);
  padding:2px 6px;
  border-radius:4px;
}

.band{padding:56px 0;}
.band--ink{background:var(--ink);color:rgba(255,255,255,.86);}
.band--ink h2,.band--ink h3,.band--ink h4{color:#fff;}
.band--rock{background:var(--rock);}
.band--paper{background:var(--paper);}

.eyebrow{
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--clay);
}
.lede{font-size:19px;line-height:1.75;color:var(--mist);max-width:62ch;}

.statbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
  padding:18px 24px;
  margin:28px 0;
  background:rgba(11,31,58,.05);
  border-left:4px solid var(--signal);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  font-family:var(--font-mono);
}
.statbar__value{
  font-size:clamp(28px,4vw,44px);
  font-weight:700;
  line-height:1.1;
  color:var(--ink);
  letter-spacing:-.02em;
}
.statbar__arrow{color:var(--signal);font-size:22px;line-height:1;}

.panel-glass{
  background:rgba(11,31,58,.12);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-l);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

/* ---------- 4. 跳过链接 ---------- */
.skip-link{
  position:fixed;
  top:-70px;
  left:calc(var(--rail-w) + 12px);
  z-index:200;
  padding:10px 18px;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  text-decoration:none;
  border-radius:0 0 var(--radius-s) var(--radius-s);
  transition:top .16s ease;
}
.skip-link:focus{top:0;}

#main-content:focus{outline:none;}

/* ---------- 5. 头部：侧边品牌轨道 ---------- */
.site-header{position:relative;}

.rail{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:70;
  width:var(--rail-w);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  padding:20px 0 22px;
  background:var(--ink);
  color:#fff;
}

.rail__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
}
.rail__beacon{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 6px rgba(255,106,0,.18);
}
.rail__brand-text{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
  letter-spacing:.18em;
  color:#fff;
}

.rail__index{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.rail__index-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.rail__index-item{display:flex;justify-content:center;}

.rail__dot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  text-decoration:none;
  transition:background-color .16s ease;
}
.rail__dot:hover{background:rgba(255,255,255,.1);}
.rail__dot-mark{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--tone);
  transition:transform .16s ease;
}
.rail__dot:hover .rail__dot-mark{transform:scale(1.3);}
.rail__dot[aria-current="page"] .rail__dot-mark{
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
}
.rail__dot-name{
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:5px 11px;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
.rail__dot:hover .rail__dot-name,
.rail__dot:focus-visible .rail__dot-name{opacity:1;}

.rail__meta{
  margin:0;
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.04em;
  line-height:1.4;
  color:rgba(255,255,255,.45);
  text-align:center;
}

/* ---------- 6. 头部：叠加导航条 ---------- */
.topbar{
  position:fixed;
  top:0;
  left:var(--rail-w);
  right:0;
  height:var(--bar-h);
  z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .24s ease,border-color .24s ease;
}
.site-header.is-scrolled .topbar{
  background:rgba(246,241,231,.96);
  border-bottom-color:var(--rock);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.topbar__inner{
  max-width:var(--content-max);
  height:100%;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:14px;
}

.topbar__brand{
  display:none;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:17px;
  color:var(--ink);
  text-decoration:none;
}
.topbar__beacon{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 4px rgba(255,106,0,.16);
}

.nav{min-width:0;}
.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:4px;
}
.nav__item{display:flex;}

.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  transition:background-color .16s ease,color .16s ease;
}
.nav__link:hover{background:rgba(11,31,58,.07);}
.nav__dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tone);
}
.nav__link[aria-current="page"]{color:var(--signal);}
.nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:3px;
  height:2px;
  border-radius:2px;
  background:var(--signal);
}

.topbar__cta{
  margin-left:auto;
  flex:none;
  padding:10px 20px;
  font-size:14.5px;
}

.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  margin-left:auto;
  padding:8px 14px;
  background:transparent;
  border:1px solid var(--rock);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}
.nav-toggle:hover{border-color:var(--ink);}
.nav-toggle__bars{
  position:relative;
  display:block;
  width:16px;
  height:12px;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .16s ease,opacity .16s ease;
}
.nav-toggle__bars::before{content:"";top:0;}
.nav-toggle__bars span{top:5px;}
.nav-toggle__bars::after{content:"";top:10px;}
.site-header[data-open] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg);}
.site-header[data-open] .nav-toggle__bars span{opacity:0;}
.site-header[data-open] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg);}

.progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  pointer-events:none;
}
.progress__bar{
  display:block;
  width:0;
  height:100%;
  background:var(--signal);
}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  margin-top:80px;
  padding:64px 0 0;
  background:var(--ink);
  color:rgba(255,255,255,.78);
}
.footer__inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 28px;
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:40px 32px;
}
.footer__col{min-width:0;}
.footer__col-title{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
}
.footer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer__list--plain{gap:8px;}
.footer__list--plain li{
  font-size:14.5px;
  line-height:1.7;
  color:rgba(255,255,255,.7);
}
.footer__link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  color:rgba(255,255,255,.84);
  text-decoration:none;
  transition:color .16s ease;
}
.footer__link:hover{color:#fff;}
.footer__meta{
  margin:14px 0 0;
  font-size:13.5px;
  line-height:1.8;
  color:rgba(255,255,255,.58);
}
.footer__signature{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:56px;
  padding:22px 0 30px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer__wordmark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:20px;
  letter-spacing:.02em;
  color:#fff;
}
.footer__trail{
  flex:1 1 120px;
  min-width:120px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--signal),rgba(255,106,0,0));
}
.footer__copy{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.55);
}

/* ---------- 8. 按钮 / 标签 / 面包屑 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn--signal{background:var(--signal);color:#fff;}
.btn--signal:hover{background:var(--signal-dark);transform:translateY(-2px);}
.btn--ghost{border-color:var(--ink);color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;}
.btn--outline{border-color:var(--clay);color:var(--clay);}
.btn--outline:hover{background:var(--clay);color:#fff;}

.tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border:1px solid transparent;
  border-radius:999px;
  background:rgba(11,31,58,.06);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
  transition:background-color .16s ease,transform .16s ease;
}
.tag:hover{background:rgba(11,31,58,.12);transform:translateY(-2px);}
.tag__dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--tone);
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  list-style:none;
  margin:0 0 22px;
  padding:0;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--mist);
}
.breadcrumb li{display:flex;align-items:center;}
.breadcrumb li + li::before{
  content:"/";
  margin:0 9px;
  color:var(--rock);
}
.breadcrumb a{
  color:var(--mist);
  text-decoration:none;
  transition:color .16s ease;
}
.breadcrumb a:hover{color:var(--signal);}
.breadcrumb [aria-current="page"]{color:var(--ink);}

/* ---------- 9. 网格 / 卡片 / 筛选 ---------- */
.grid{display:grid;gap:var(--gap);}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

.card{
  background:var(--white);
  border:1px solid var(--rock);
  border-radius:var(--radius-m);
  padding:22px;
}

.filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
}
.filter{
  padding:7px 15px;
  background:transparent;
  border:1px solid var(--rock);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease;
}
.filter:hover{border-color:var(--ink);}
.filter[aria-pressed="true"]{
  border-color:var(--signal);
  color:var(--signal);
  background:rgba(255,106,0,.08);
}

[data-filter-item]{
  transition:opacity .16s ease;
}
[data-filter-item].is-filtered{
  animation:bowang-filter-in .16s ease-out both;
}
@keyframes bowang-filter-in{
  from{opacity:.35;}
  to{opacity:1;}
}

/* ---------- 10. 图片容器 ---------- */
.media{display:block;margin:0;}
.media__frame{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border:1px solid var(--rock);
  border-radius:var(--radius-m);
  background:
    repeating-linear-gradient(135deg,rgba(11,31,58,.05) 0 12px,rgba(11,31,58,0) 12px 24px),
    var(--rock);
}
.media__frame--16x9{aspect-ratio:16 / 9;}
.media__frame--4x3{aspect-ratio:4 / 3;}
.media__frame--1x1{aspect-ratio:1 / 1;}
.media__frame--phone{
  aspect-ratio:9 / 19;
  width:100%;
  max-width:260px;
  margin:0 auto;
  border:8px solid var(--ink);
  border-radius:26px;
  background:var(--white);
}
.media__frame img,
.media__frame svg,
.media__frame video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.media__badge{
  position:absolute;
  top:10px;
  right:10px;
  padding:3px 9px;
  border-radius:6px;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.media__caption{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--mist);
}

/* ---------- 11. 显现动画 ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* ---------- 12. 响应式 ---------- */
@media (max-width:1079px){
  :root{--rail-w:0px;}

  .rail{display:none;}
  .topbar{left:0;}
  .topbar__brand{display:inline-flex;}
  .topbar__inner{padding:0 20px;gap:10px;}

  .nav-toggle{display:inline-flex;}

  .nav{
    position:fixed;
    top:var(--bar-h);
    left:0;
    right:0;
    z-index:59;
    display:none;
    padding:10px 14px 16px;
    background:var(--paper);
    border-bottom:1px solid var(--rock);
    box-shadow:0 14px 24px -18px rgba(11,31,58,.5);
    max-height:calc(100vh - var(--bar-h));
    overflow-y:auto;
  }
  .site-header[data-open] .nav{display:block;}

  .nav__list{flex-direction:column;align-items:stretch;gap:2px;}
  .nav__link{padding:13px 14px;border-radius:var(--radius-s);font-size:16px;}
  .nav__link[aria-current="page"]::after{left:14px;right:auto;width:20px;bottom:8px;}

  .topbar__cta{margin-left:auto;padding:9px 16px;font-size:14px;}
}

@media (max-width:1000px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:860px){
  .grid--2,
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:720px){
  :root{--bar-h:56px;}

  body{font-size:16px;}

  .container{padding:0 18px;}
  .footer__inner{padding:0 18px;}
  .topbar__inner{padding:0 16px;}

  .nav-toggle{display:none;}

  .nav,
  .site-header[data-open] .nav{
    position:fixed;
    top:auto;
    bottom:0;
    left:0;
    right:0;
    display:block;
    padding:8px 0;
    background:rgba(246,241,231,.98);
    border-bottom:0;
    border-top:1px solid var(--rock);
    box-shadow:0 -12px 22px -18px rgba(11,31,58,.5);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    max-height:none;
    overflow:visible;
  }
  .nav__list{
    flex-direction:row;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding:0 12px;
    -webkit-overflow-scrolling:touch;
  }
  .nav__list::-webkit-scrollbar{height:0;}
  .nav__item{flex:none;scroll-snap-align:center;}
  .nav__link{
    padding:9px 13px;
    font-size:14px;
    white-space:nowrap;
    border-radius:999px;
  }
  .nav__link[aria-current="page"]{background:rgba(255,106,0,.1);}
  .nav__link[aria-current="page"]::after{display:none;}

  .topbar__cta{padding:8px 14px;font-size:13.5px;}

  .site-footer{margin-top:56px;padding-bottom:84px;}
  .footer__grid{grid-template-columns:1fr;gap:28px;}
  .footer__signature{margin-top:40px;}

  .band{padding:44px 0;}
  .statbar{padding:16px 18px;}
}

@media (max-width:560px){
  .grid--2,
  .grid--3,
  .grid--4{grid-template-columns:1fr;}
  .lede{font-size:17.5px;}
}

/* ---------- 13. 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}

  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  [data-filter-item].is-filtered{animation:none;}
  .progress__bar{transition:none;}
  .btn:hover,
  .tag:hover{transform:none;}
  .rail__dot:hover .rail__dot-mark{transform:none;}
  .site-header[data-open] .nav-toggle__bars::before,
  .site-header[data-open] .nav-toggle__bars::after{transform:none;}
}