/* ============================================================
   万博游艺 · /assets/site.css
   共享外壳：reset / 变量 / 排版 / 头部 / 页脚 / 通用组件
   ============================================================ */

:root{
  --c-sand:#F3E7D3;
  --c-paper:#FBF6EC;
  --c-ink:#17352B;
  --c-copper:#B06A3B;
  --c-copper-lt:#D9A066;
  --c-vermilion:#C53A2E;
  --c-ink-soft:#3E5A4E;
  --c-print:#E6D2AE;
  --c-night:#0E1F1A;
  --c-leaf:#6F8A78;

  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","Sarasa Mono SC",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --wrap:1220px;
  --radius-paper:18px;
  --shadow-lift:0 22px 44px -32px rgba(14,31,26,.72);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  padding-top:clamp(94px,9vw,114px);
  background:var(--c-sand);
  color:var(--c-ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--c-vermilion);outline-offset:3px;border-radius:4px}

/* ---------- skip link ---------- */
.wb-skip{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:10px 18px;border-radius:999px;
  background:var(--c-night);color:var(--c-paper);
  font-size:14px;text-decoration:none;
  transform:translateY(-180%);
  transition:transform .22s var(--ease);
}
.wb-skip:focus,.wb-skip:focus-visible{transform:translateY(0)}

/* ============================================================
   头部：悬浮胶囊浮岛
   ============================================================ */
.wb-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:clamp(10px,1.4vw,18px) clamp(12px,3vw,34px) 0;
  pointer-events:none;
}
.wb-header__inner{
  position:relative;
  pointer-events:auto;
  max-width:var(--wrap);
  margin:0 auto;
  display:flex;align-items:center;
  gap:clamp(10px,1.6vw,20px);
  padding:8px 10px 8px 12px;
  background:rgba(251,246,236,.84);
  border:1px solid rgba(230,210,174,.95);
  border-radius:999px;
  box-shadow:0 16px 36px -24px rgba(14,31,26,.7),inset 0 1px 0 rgba(255,255,255,.68);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
  transition:background .28s var(--ease),box-shadow .28s var(--ease);
}
.wb-header.is-stuck .wb-header__inner{
  background:rgba(251,246,236,.975);
  box-shadow:0 22px 46px -26px rgba(14,31,26,.85),inset 0 1px 0 rgba(255,255,255,.72);
}

/* 品牌浮岛 */
.wb-brand{
  display:inline-flex;align-items:center;gap:10px;
  flex:none;text-decoration:none;color:var(--c-ink);
  transition:opacity .2s var(--ease);
}
.wb-brand:hover{opacity:.82}
.wb-brand__mark{
  display:grid;place-items:center;
  width:40px;height:40px;flex:none;
  border-radius:13px;
  background:linear-gradient(155deg,#C88250,var(--c-copper) 48%,#8A4E27);
  color:var(--c-paper);
  font-family:var(--font-serif);font-size:20px;font-weight:700;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(251,246,236,.3),0 6px 14px -8px rgba(176,106,59,.95);
}
.wb-brand__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.wb-brand__name{
  font-family:var(--font-serif);font-weight:700;
  font-size:19px;line-height:1.25;letter-spacing:.06em;
  white-space:nowrap;
}
.wb-brand__tag{
  font-size:11px;line-height:1.25;letter-spacing:.06em;
  color:var(--c-ink-soft);white-space:nowrap;
}

/* 移动端按钮 */
.wb-nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;margin-left:auto;
  border-radius:50%;
  border:1px solid var(--c-print);
  background:var(--c-paper);
  cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.wb-nav-toggle:hover{border-color:var(--c-copper)}
.wb-nav-toggle__bars,
.wb-nav-toggle__bars::before,
.wb-nav-toggle__bars::after{
  display:block;width:17px;height:1.8px;border-radius:2px;
  background:var(--c-ink);
  transition:transform .22s var(--ease),opacity .18s var(--ease),background-color .18s var(--ease);
}
.wb-nav-toggle__bars{position:relative}
.wb-nav-toggle__bars::before,
.wb-nav-toggle__bars::after{content:"";position:absolute;left:0}
.wb-nav-toggle__bars::before{top:-6px}
.wb-nav-toggle__bars::after{top:6px}
.wb-nav-toggle[aria-expanded="true"] .wb-nav-toggle__bars{background:transparent}
.wb-nav-toggle[aria-expanded="true"] .wb-nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.wb-nav-toggle[aria-expanded="true"] .wb-nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

/* 导航 */
.wb-nav{
  display:flex;align-items:center;
  gap:clamp(8px,1.2vw,16px);
  margin-left:auto;min-width:0;
}
.wb-nav__list{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.wb-nav__link{
  display:inline-block;
  padding:9px 12px;border-radius:999px;
  font-size:14px;line-height:1.35;letter-spacing:.01em;
  color:var(--c-ink-soft);text-decoration:none;white-space:nowrap;
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.wb-nav__link:hover{color:var(--c-copper);background:rgba(217,160,102,.16)}
.wb-nav__link[aria-current="page"]{
  color:var(--c-copper);
  background:rgba(217,160,102,.2);
  font-weight:500;
}
.wb-header__aside{display:flex;align-items:center;gap:10px;margin-left:4px}

/* 状态灯 */
.wb-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;
  background:rgba(111,138,120,.14);
  border:1px solid rgba(111,138,120,.3);
  font-family:var(--font-mono);font-size:11.5px;line-height:1.5;
  letter-spacing:.02em;color:var(--c-ink-soft);white-space:nowrap;
}
.wb-status__dot{
  width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--c-leaf);
  animation:wb-pulse 2.8s ease-in-out infinite;
}
@keyframes wb-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(111,138,120,.45)}
  70%{box-shadow:0 0 0 6px rgba(111,138,120,0)}
}

/* 阅读进度 */
.wb-progress{
  max-width:var(--wrap);
  margin:7px auto 0;
  height:2px;border-radius:999px;
  background:rgba(23,53,43,.09);
  overflow:hidden;pointer-events:none;
}
.wb-progress__bar{
  display:block;width:0;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--c-copper),var(--c-vermilion));
  transition:width .14s linear;
}

/* ============================================================
   通用按钮
   ============================================================ */
.wb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:999px;
  border:1px solid transparent;
  font-family:var(--font-sans);font-size:14px;font-weight:500;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.wb-btn--solid{
  background:var(--c-vermilion);color:var(--c-paper);
  box-shadow:0 10px 20px -12px rgba(197,58,46,.95);
}
.wb-btn--solid:hover{background:#A92E24;transform:translateY(-1px)}
.wb-btn--ghost{
  background:transparent;color:var(--c-ink);
  border-color:var(--c-print);
}
.wb-btn--ghost:hover{color:var(--c-copper);border-color:var(--c-copper);transform:translateY(-1px)}
.wb-btn--copper{
  background:var(--c-copper);color:var(--c-paper);
  box-shadow:0 10px 20px -12px rgba(176,106,59,.95);
}
.wb-btn--copper:hover{background:#965830;transform:translateY(-1px)}
.wb-header__cta{flex:none}

@media (min-width:1121px) and (max-width:1279px){
  .wb-status{display:none}
}

/* ============================================================
   页脚：木柜台
   ============================================================ */
.wb-footer{
  position:relative;
  margin-top:clamp(64px,9vw,120px);
  background:var(--c-ink);
  color:#D7E2DA;
  overflow:hidden;
}
.wb-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,
    var(--c-copper) 0 32%,
    var(--c-copper-lt) 32% 50%,
    var(--c-vermilion) 50% 60%,
    var(--c-print) 60% 100%);
}
.wb-footer::after{
  content:"";position:absolute;top:-46%;right:-10%;
  width:54%;height:160%;
  background:radial-gradient(closest-side,rgba(217,160,102,.16),rgba(217,160,102,0) 72%);
  pointer-events:none;
}
.wb-footer__inner{
  position:relative;z-index:1;
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(46px,5vw,78px) clamp(18px,4vw,40px) 0;
}
.wb-footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.15fr) minmax(0,.95fr);
  gap:clamp(26px,4.4vw,64px);
  padding-bottom:clamp(30px,4vw,54px);
}
.wb-footer__brand{min-width:0}
.wb-brand--footer{color:var(--c-paper)}
.wb-brand--footer .wb-brand__mark{
  background:linear-gradient(155deg,var(--c-copper-lt),var(--c-copper) 60%,#8A4E27);
  box-shadow:inset 0 0 0 1px rgba(251,246,236,.24);
}
.wb-brand--footer .wb-brand__tag{color:#9FB3A6}
.wb-footer__summary{
  margin-top:18px;max-width:34ch;
  font-size:14.5px;line-height:1.9;color:#C9D7CD;
}
.wb-footer__note{
  margin-top:12px;max-width:40ch;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.85;color:#7E9589;
}
.wb-footer__cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,34px);
  min-width:0;
}
.wb-footer__col{min-width:0}
.wb-footer__col-title{
  margin-bottom:14px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;color:var(--c-copper-lt);
}
.wb-footer__list{display:flex;flex-direction:column;gap:1px}
.wb-footer__link{
  display:inline-block;padding:5px 0;
  font-size:14.5px;line-height:1.6;color:#C9D7CD;text-decoration:none;
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.wb-footer__link:hover{color:var(--c-copper-lt);padding-left:4px}
.wb-footer__contact{min-width:0}
.wb-footer__contact-title{
  margin-bottom:14px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;color:var(--c-copper-lt);
}
.wb-footer__contact-item{display:flex;flex-direction:column;gap:11px}
.wb-footer__contact-row{
  display:grid;grid-template-columns:42px minmax(0,1fr);
  gap:10px;align-items:start;
  font-size:13.5px;line-height:1.65;
}
.wb-footer__contact-key{
  padding-top:2px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#7E9589;
}
.wb-footer__contact-val{color:#D7E2DA;word-break:break-word}
.wb-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;
  padding:18px 0 clamp(22px,3vw,34px);
  border-top:1px solid rgba(217,160,102,.22);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:#8AA094;
}
.wb-footer__legal{margin:0}
.wb-footer__copy{margin:0}

/* ============================================================
   页面通用：容器 / 章节 / 文本
   ============================================================ */
.wb-container{
  width:min(1120px,100% - 2 * clamp(18px,4vw,48px));
  margin-inline:auto;
}
.wb-section{padding:clamp(38px,6vw,82px) 0}
.wb-section__head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,4vw,56px);
  align-items:end;
  margin-bottom:clamp(22px,3.4vw,44px);
}
.wb-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.18em;color:var(--c-copper);
}
.wb-eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:currentColor;
}
.wb-num{
  display:block;
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(26px,4vw,46px);line-height:1;letter-spacing:-.02em;
  color:rgba(176,106,59,.36);
}
.wb-title{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(25px,3.4vw,42px);line-height:1.28;letter-spacing:.01em;
  color:var(--c-ink);
}
.wb-lede{
  max-width:40ch;
  font-size:clamp(15px,1.1vw,17px);line-height:1.95;color:var(--c-ink-soft);
}
.wb-rule{
  height:1px;border:0;
  margin:clamp(18px,3vw,30px) 0;
  background:linear-gradient(90deg,var(--c-copper),rgba(176,106,59,0));
}

/* 标签 */
.wb-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:rgba(217,160,102,.22);color:#7A4522;
  font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:.06em;
}
.wb-chip--leaf{background:rgba(111,138,120,.18);color:#33503F}
.wb-chip--ink{background:var(--c-ink);color:var(--c-paper)}

/* 纸张面板 */
.wb-panel{
  background:var(--c-paper);
  border:1px solid var(--c-print);
  border-radius:var(--radius-paper);
  padding:clamp(18px,2.6vw,30px);
  box-shadow:var(--shadow-lift);
}
.wb-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px dashed var(--c-print);
}
.wb-panel__title{
  font-family:var(--font-serif);font-size:18px;font-weight:600;
  line-height:1.4;letter-spacing:.02em;
}
.wb-panel__meta{
  font-family:var(--font-mono);font-size:11px;line-height:1.6;
  letter-spacing:.06em;color:var(--c-ink-soft);
}

/* 网格 */
.wb-grid{display:grid;gap:clamp(16px,2.4vw,30px)}
.wb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 图片容器基础规则 */
.wb-media{
  position:relative;display:block;overflow:hidden;
  border-radius:16px;
  background:linear-gradient(150deg,var(--c-print),var(--c-sand) 56%,#EFE0C8);
  border:1px solid rgba(176,106,59,.24);
  box-shadow:var(--shadow-lift);
}
.wb-media__img{display:block;width:100%;height:100%;object-fit:cover}
.wb-media--wide{aspect-ratio:16 / 9}
.wb-media--band{aspect-ratio:21 / 9}
.wb-media--square{aspect-ratio:1 / 1}
.wb-media--tall{aspect-ratio:3 / 4}
.wb-media__caption{
  position:absolute;left:0;bottom:0;max-width:88%;
  padding:7px 12px;border-radius:0 14px 0 0;
  background:rgba(14,31,26,.78);
  color:var(--c-paper);
  font-family:var(--font-mono);font-size:11px;line-height:1.55;letter-spacing:.03em;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* 面包屑 */
.wb-breadcrumb{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;
  color:var(--c-ink-soft);
}
.wb-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wb-breadcrumb__item{display:inline-flex;align-items:center;gap:8px}
.wb-breadcrumb__item + .wb-breadcrumb__item::before{
  content:"／";color:var(--c-copper);opacity:.7;
}
.wb-breadcrumb__item a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.wb-breadcrumb__item a:hover{color:var(--c-copper);border-bottom-color:currentColor}
.wb-breadcrumb__item [aria-current="page"]{color:var(--c-ink)}

/* 正文 */
.wb-prose{
  max-width:38em;
  font-size:clamp(15.5px,1.06vw,17.5px);line-height:1.95;color:var(--c-ink);
}
.wb-prose > * + *{margin-top:1.05em}
.wb-prose h2{
  font-family:var(--font-serif);font-size:clamp(20px,2.2vw,26px);
  line-height:1.42;margin-top:1.9em;
}
.wb-prose h3{
  font-family:var(--font-serif);font-size:clamp(17px,1.7vw,20px);
  line-height:1.5;margin-top:1.6em;
}
.wb-prose ul li{position:relative;padding-left:1.1em}
.wb-prose ul li::before{
  content:"◆";position:absolute;left:0;top:.55em;
  font-size:.6em;color:var(--c-copper);
}
.wb-prose a{
  color:var(--c-copper);
  text-decoration:none;
  border-bottom:1px solid rgba(176,106,59,.45);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.wb-prose a:hover{color:var(--c-vermilion);border-bottom-color:currentColor}
.wb-prose strong{color:var(--c-ink);font-weight:600}

/* 主题筛选 */
.wb-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wb-filter__btn{
  appearance:none;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--c-print);
  background:var(--c-paper);color:var(--c-ink-soft);
  font-size:13.5px;line-height:1.25;cursor:pointer;
  transition:color .2s var(--ease),background-color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease);
}
.wb-filter__btn:hover{color:var(--c-copper);border-color:var(--c-copper);transform:translateY(-1px)}
.wb-filter__btn[aria-pressed="true"]{
  background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper);
}
.wb-filter__count{
  margin-left:auto;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--c-ink-soft);
}
[data-filter-item][hidden]{display:none}

/* 显现 */
.wb-reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.wb-reveal.is-in{opacity:1;transform:none}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:960px){
  .wb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wb-footer__brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .wb-section__head{grid-template-columns:1fr;align-items:start}
}
@media (max-width:1120px){
  .wb-nav-toggle{display:inline-flex}
  .wb-nav{
    position:absolute;top:calc(100% + 12px);left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;
    gap:14px;margin-left:0;
    padding:14px;
    background:var(--c-paper);
    border:1px solid var(--c-print);
    border-radius:22px;
    box-shadow:0 26px 50px -30px rgba(14,31,26,.85);
  }
  .wb-nav[data-open]{display:flex}
  .wb-nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .wb-nav__link{display:block;padding:12px 14px;font-size:15px;border-radius:12px}
  .wb-header__aside{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;
    margin-left:0;padding-top:12px;
    border-top:1px solid var(--c-print);
  }
  .wb-status{display:inline-flex;align-self:flex-start;white-space:normal}
  .wb-header__cta{width:100%}
  .wb-brand__tag{display:none}
}
@media (max-width:720px){
  .wb-grid--2,.wb-grid--3{grid-template-columns:1fr}
  .wb-footer__top{grid-template-columns:1fr}
  .wb-footer__cols{gap:22px}
  .wb-footer__bottom{justify-content:flex-start}
}
@media (max-width:520px){
  .wb-brand__name{font-size:17px}
  .wb-brand__mark{width:36px;height:36px;border-radius:11px;font-size:18px}
  .wb-filter__count{margin-left:0;width:100%}
}

/* 打印 */
@media print{
  .wb-header,.wb-progress,.wb-skip,.wb-nav-toggle,.wb-filter{display:none !important}
  body{padding-top:0;background:#fff;color:#000}
  .wb-footer{background:#fff;color:#000;border-top:1px solid #999}
  .wb-footer__link,.wb-footer__summary,.wb-footer__contact-val{color:#000}
}

/* 减少动态 */
@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;
  }
  .wb-reveal{opacity:1 !important;transform:none !important}
  .wb-status__dot{animation:none;box-shadow:0 0 0 3px rgba(111,138,120,.2)}
}