/* ================= Button System ================= */
:root{--btn-h:40px;--btn-radius:12px;--btn-font:14px;}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:system-ui;background:#0f0c08;color:#f2f2f2}
.wrap{max-width:960px;margin:auto;padding:20px}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;height:auto;display:block}
video{width:100%;border-radius:14px}

.card{  background:rgba(255,255,255,.06);
  padding:14px;      /* 原 16 */
  border-radius:14px;
  margin:8px 0;      /* 原 10 */}
.card-cover{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:10px;
  background:rgba(0,0,0,.25);
}

.card h2{
  margin:6px 0 4px;   /* 原本很大，这里收紧 */
  line-height:1.3;
}

.card small{
  display:block;
  margin-top:2px;
  line-height:1.4;
  opacity:.85;
}

@media (max-width:768px){
  .card-cover{height:150px;}
}

.card:not(:has(.card-cover)){
  padding-top:12px;
  padding-bottom:12px;
}
.btn{height:var(--btn-h);padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:var(--btn-font);font-weight:600;line-height:1;border-radius:var(--btn-radius);
  background:#dcb361;color:#000;border:none;cursor:pointer;white-space:nowrap}

/* Topbar */
.site-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.brand-left{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:100px;height:100px;border-radius:8px;object-fit:contain;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25)}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-name{font-weight:800;letter-spacing:.08em}
.brand-sub{font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}

.nav-center{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.nav-center a{height:var(--btn-h);padding:0 16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--btn-font);line-height:1;white-space:nowrap;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);opacity:.95}
.nav-center a.active{border-color:rgba(220,179,97,.45);background:rgba(220,179,97,.12)}
.social-right{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap}
.icon-btn{height:var(--btn-h);padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:var(--btn-font);line-height:1;white-space:nowrap;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);opacity:.95}

/* Hamburger animation */
.hamburger{height:var(--btn-h);width:var(--btn-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.hamburger span{width:20px;height:2px;background:#fff;transition:.3s ease;display:block}
#nav-toggle:checked + .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-toggle:checked + .hamburger span:nth-child(2){opacity:0}
#nav-toggle:checked + .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sections */
.section{margin-top:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:780px){.kv{grid-template-columns:1fr}}
.profile{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.profile img{width:140px;height:140px;border-radius:18px;object-fit:cover}
.site-footer{margin-top:20px;
  padding:16px 20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;}


/* ===== 单图 Slider（稳定版：不跳、不拉满） ===== */
.slider-single .slide-stage{
  position:relative;
  margin-top:12px;

  /* 不让边框拉满整行 */
  max-width: 820px;
  margin-left:auto;
  margin-right:auto;

  /* 防止每张内容不同导致高度跳动 */
  min-height: 430px;
}

@media (max-width:768px){
  .slider-single .slide-stage{
    min-height: 360px;
    max-width: 100%;
  }
}

.slider-single .slide-track{
  position:relative;
}

/* ✅ slide 永远 absolute，避免跳动 */
.slider-single .slide{
  position:absolute;
  inset:0;

  display:block; /* a 标签 */
  width:100%;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition: opacity .5s ease;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:14px;
  text-align:center;
}

/* ✅ 只切换可见性，不切 position */
.slider-single .slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.slider-single .slide img{
  width:100%;
  height:220px;
  object-fit:contain;
  background: rgba(0,0,0,.25);
  border-radius:12px;
  margin-bottom:12px;
}

@media (max-width:768px){
  .slider-single .slide img{
    height:180px;
  }
}

/* 拖动时（你 JS 会加 dragging class） */
.slider-single .slide-track.dragging{
  transition:none;
  cursor: grabbing;
}


/* ===== Slider dots ===== */
.slider-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:1px;
}

.slider-dots .dot{
  width:10px;height:10px;border-radius:50%;
  border:none;
  background:rgba(255,255,255,.35);
  cursor:pointer;
}

.slider-dots .dot.active{
  background:#dcb361;
}



/* Responsive navbar: mobile + tablet */
@media (max-width:1024px){
  .site-topbar{grid-template-columns:1fr auto;align-items:start}
  .hamburger{justify-self:end;z-index:10;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);border-radius:10px}
  .nav-center,.social-right{display:none;grid-column:1 / -1;margin-top:12px;flex-direction:column;align-items:center;gap:10px}
  #nav-toggle:checked ~ .nav-center,#nav-toggle:checked ~ .social-right{display:flex}
  .social-right{justify-content:center;flex-wrap:wrap}
}
@media (min-width:1025px){.hamburger{display:none}}


/* ===== Footer Social ===== */

.footer-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.footer-copy{
  font-size:13px;
  opacity:.85;
}

.footer-logo{
  width:80px;
  height:80px;
  object-fit:contain;
  border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
}


/* ===== Row2: hero header  ===== */
.hero{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:48px 16px;
}

.hero-inner{
  max-width:720px;   /* 控制内容宽度，避免太散 */
  margin:0 auto;
}