/* ===========================================================
   山海关安全团队 · 全站共享样式（site.css）
   替代原模板的 10 个 CSS 文件（basic/layout/animate/fontawesome/
   swiper/magnific-popup/jarallax/brands/solid + Roboto @font-face 表）
   =========================================================== */

/* ---------------- 设计令牌 ---------------- */
:root{
  --bg:#08090c;
  --bg-soft:#0e1015;
  --bg-card:rgba(255,255,255,.028);
  --bg-card-hover:rgba(75,255,165,.05);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --fg:#e9edf2;
  --fg-dim:#9aa3b0;
  --fg-faint:#5d6673;
  --accent:#4bffa5;
  --accent-2:#22c47c;
  --accent-soft:rgba(75,255,165,.14);
  --accent-line:rgba(75,255,165,.32);
  --header-h:76px;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-sans:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Roboto,Helvetica,Arial,sans-serif; --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 720px at 50% 4%,rgba(75,255,165,.10),transparent 62%),
    radial-gradient(900px 640px at 82% 96%,rgba(64,140,255,.09),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 32%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 38%,#000 32%,transparent 100%);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 14px}
::selection{background:var(--accent);color:#04120b}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------------- WebGL 背景层（不拦截点击、中心挖空杜绝遮挡） ---------------- */
#bg-canvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  opacity:0;
  /* 背景是空闲异步加载的，淡入只作为"浮现"提示，不宜过慢 */
  transition:opacity .5s var(--ease);
  /* 关城背景横向铺满，中心保持清晰，四周柔和淡出融入底色 */
  -webkit-mask-image:radial-gradient(ellipse 96% 90% at 50% 48%,#000 0%,#000 60%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.3) 100%);
  mask-image:radial-gradient(ellipse 96% 90% at 50% 48%,#000 0%,#000 60%,rgba(0,0,0,.72) 84%,rgba(0,0,0,.3) 100%);
}
#bg-canvas.is-ready{opacity:1}

/* ==== 内容可读性遮罩 ====
   关城背景是写实灰调，与正文存在对比度重叠。
   这里在背景之上、内容之下铺一层"局部压暗"：
   画面中心（标题与正文所在）柔和压暗，顶栏与页脚各再压一道；
   四角与建筑轮廓不压，关城细节仍可见。 */
.bg-scrim{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    /* 关城在左、文案在右：左侧只轻压以保留建筑细节，右侧逐步压暗保证文字对比 */
    linear-gradient(90deg,rgba(6,8,11,.14) 0%,rgba(6,8,11,.18) 30%,rgba(6,8,11,.42) 50%,rgba(6,8,11,.62) 74%,rgba(6,8,11,.68) 100%),
    linear-gradient(180deg,rgba(6,8,11,.8) 0%,rgba(6,8,11,.34) 8%,rgba(6,8,11,0) 19%),
    linear-gradient(0deg,rgba(6,8,11,.64) 0%,rgba(6,8,11,.22) 9%,rgba(6,8,11,0) 20%);
}
/* 窄高窗口（宽高比 <1.15）会退回居中版式，关城位于文字正下方，
   此时左右渐变失效，改用中心径向压暗覆盖标题与正文区 */
@media (max-aspect-ratio:1.149){
  .bg-scrim{
    background:
      radial-gradient(ellipse 82% 48% at 50% 44%,rgba(6,8,11,.84) 0%,rgba(6,8,11,.62) 50%,rgba(6,8,11,.24) 78%,rgba(6,8,11,0) 96%),
      linear-gradient(180deg,rgba(6,8,11,.8) 0%,rgba(6,8,11,.34) 8%,rgba(6,8,11,0) 19%),
      linear-gradient(0deg,rgba(6,8,11,.64) 0%,rgba(6,8,11,.22) 9%,rgba(6,8,11,0) 20%);
  }
}
/* 文字阴影：进一步保证在任意背景亮度下都清晰 */
.hero h1,.page-title,.section-title,.lede,.page-sub,.crumbs,.typed-row{
  text-shadow:0 2px 16px rgba(4,6,9,.92),0 1px 3px rgba(4,6,9,.85);
}
/* 背景是写实灰调，正文灰阶需要提亮一档才够对比 */
.lede,.page-sub{color:#c3cddb}
/* 卡片本身带底色，但在亮背景上仍偏薄，补一层模糊底 */
.card{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------------- 骨架 ---------------- */
.shell{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:100%;max-width:100%;min-height:100vh;
}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.wrap-narrow{max-width:860px}

/* ---------------- 顶栏 ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:0 clamp(18px,4vw,54px);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(8,9,12,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
}
.brand{position:relative;display:inline-block;font-weight:700;font-size:clamp(15px,1.5vw,18px);letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.brand-text{overflow:hidden;display:block;position:relative}
.brand .brand-a,.brand .brand-b{display:block;transition:transform .5s var(--ease),opacity .35s var(--ease)}
.brand .brand-b{position:absolute;inset:0;color:var(--accent);opacity:0;transform:translateY(105%)}
.brand:hover .brand-a{opacity:0;transform:translateY(-105%)}
.brand:hover .brand-b{opacity:1;transform:translateY(0)}
.brand-text::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.brand:hover .brand-text::after{transform:scaleX(1)}

.nav{display:flex;align-items:center;gap:4px}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;
  font-size:14.5px;
  color:var(--fg-dim);
  border-radius:8px;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.nav-link:hover,.nav-link:focus-visible{color:var(--fg);background:rgba(255,255,255,.045)}
.nav-link[aria-current="page"]{color:var(--fg)}
.nav-link[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:var(--accent);border-radius:2px;
}
.caret{width:9px;height:9px;flex:none;transition:transform .3s var(--ease)}
.has-sub{position:relative}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
.sub-nav{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translate(-50%,8px);
  min-width:216px;padding:7px;
  background:rgba(14,16,21,.94);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.has-sub:hover .sub-nav,.has-sub:focus-within .sub-nav{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub-nav a{display:block;padding:9px 12px;font-size:14px;color:var(--fg-dim);border-radius:8px;transition:color .2s var(--ease),background .2s var(--ease)}
.sub-nav a:hover{color:var(--accent);background:var(--accent-soft)}
/* 当前页落在下拉里时：
   · 父项只上色，提示"当前页在这个分区内"，**不再冒用 aria-current**
     （踩过的坑：ctfteam / developteam 的父项写着 aria-current="page"，可它指的是
      about.html —— 人在 ctfteam，却告诉辅助技术"当前页是关于"；redteam 则父项子项都没标，
      导航里完全看不出人在哪）；
   · 真正的高亮落到下拉中对应的那一条上。 */
.has-sub.is-current > .nav-link{color:var(--fg)}
.sub-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}

.menu-toggle{
  display:none;width:42px;height:42px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:10px;
}
.menu-toggle span{display:block;width:18px;height:1.5px;background:var(--fg);position:relative;transition:background .2s}
.menu-toggle span::before,.menu-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--fg);
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.menu-toggle span::before{top:-5.5px}
.menu-toggle span::after{top:5.5px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------------- 页面主区 ---------------- */
.page{flex:1;padding-top:var(--header-h)}

/* 页面标题区 */
.page-hero{
  position:relative;
  padding:clamp(48px,7vw,92px) 0 clamp(30px,4vw,48px);
  border-bottom:1px solid var(--line);
}
.crumbs{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-faint);
}
.crumbs a{color:var(--fg-dim);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--fg-faint);opacity:.55}
.crumbs .cur{color:var(--accent)}
.page-title{
  margin:0 0 14px;
  font-size:clamp(30px,4.2vw,66px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
  overflow-wrap:break-word;
}
.page-sub{
  margin:0;max-width:720px;
  font-size:clamp(15px,1.6vw,17.5px);
  color:var(--fg-dim);
  overflow-wrap:break-word;
}
.page-hero .accent-bar{
  width:54px;height:3px;margin:20px 0 0;
  background:linear-gradient(90deg,var(--accent),transparent);
  border-radius:3px;
}

/* 内容区块 */
.section{padding:clamp(38px,5vw,68px) 0;border-bottom:1px solid rgba(255,255,255,.045)}
.section:last-of-type{border-bottom:0}

/* ==== 荣誉成果页：分区卡片 ====
   原来 .section 只有一条下边框、.award-list--flat 平时没有任何容器，
   条目直接铺在 3D 背景上，整页看起来都在悬浮、读不出区域。
   这里建立三级层次：
     大赛区（反网络犯罪／漏洞报送／…）→ 一张卡片
     年份                              → 卡片内的左侧固定列
     该年份的条目                      → 右侧一个浅底容器                    */
.section--panel{
  border-bottom:0;
  padding:clamp(10px,1.4vw,18px) 0;
}
.section--panel .wrap{
  /* 上下给足卡片内边距，左右沿用 .wrap 的视口边距并再内缩一档 */
  padding:clamp(22px,2.8vw,36px) clamp(20px,4.4vw,44px);
  /* 与全站内容卡片 .card 用同一档：同样的 --bg-card 底色、blur(6px)、16px 圆角。
     不另起一套虚化强度，否则和其他页面的观感对不上 */
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:16px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease);
}
.section--panel .wrap:hover{border-color:var(--accent-line)}
.section--panel .section-head{margin-bottom:clamp(16px,2.2vw,26px)}

/* 年份在左、条目在右 */
.section--panel .year-group{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:0 20px;
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
}
.section--panel .year-group:first-of-type{margin-top:0;padding-top:0;border-top:0}
.section--panel .year-label{
  margin:0;
  padding:12px 0 0;
  font-size:13px;
  letter-spacing:.08em;
}
/* 年份已独占一列，不再需要那根小竖条 */
.section--panel .year-label::before{display:none}

/* 同一年的条目收进一个浅底容器，与背景明确分开 */
.section--panel .award-list{
  gap:0;
  padding:5px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.05);
  border-radius:13px;
}
.section--panel .award-list li{padding:10px 13px}
.section--panel .award-list li + li{box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}

/* 窄屏：年份改为条目上方一行，不再占左侧列 */
@media (max-width:860px){
  .section--panel .year-group{grid-template-columns:minmax(0,1fr);gap:9px}
  .section--panel .year-label{padding-top:0}
}
.section-head{margin-bottom:clamp(20px,3vw,34px)}
.section-title{
  display:flex;align-items:center;gap:12px;
  margin:0 0 8px;
  font-size:clamp(20px,2vw,32px);
  font-weight:700;letter-spacing:-.01em;
}
.section-title::before{
  content:"";flex:none;
  width:5px;height:20px;border-radius:3px;
  background:var(--accent);
  box-shadow:0 0 14px rgba(75,255,165,.55);
}
.section-desc{margin:0;color:var(--fg-dim);font-size:15px}

/* ---------------- 富文本 ---------------- */
.prose{max-width:none;color:var(--fg-dim);font-size:15.5px}
.prose p{margin:0 0 16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-line);transition:border-color .2s var(--ease),color .2s var(--ease)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose em{color:var(--fg);font-style:normal;font-weight:600}

/* ---------------- 卡片 ---------------- */
.card{
  position:relative;
  padding:clamp(18px,2.4vw,26px);
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
  min-width:0;
}
.card:hover{border-color:var(--accent-line);background:var(--bg-card-hover);transform:translateY(-3px)}
a.card{display:block;color:inherit;text-decoration:none}
/* 倾斜跟随指针时用短过渡，否则会拖尾；JS 在 pointerleave 时移除该类 */
.card.is-tilting{transition:border-color .3s var(--ease),background .3s var(--ease),transform .1s linear}

/* ---------------- 滚动进度条 ---------------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:50;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),#7df4ff);
  pointer-events:none;
}

/* 格言（固定中文，不参与语言切换） */
.motto-quote{
  margin:0;text-align:center;
  font-size:clamp(16.5px,2.3vw,20px);
  line-height:2;letter-spacing:.08em;
  color:var(--fg-dim);
}
.card-title{margin:0 0 10px;font-size:17px;font-weight:650;color:var(--fg)}
.card-text{margin:0;font-size:14.8px;color:var(--fg-dim)}
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:14px;
  border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
}
.card-icon svg{width:21px;height:21px;display:block}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* 团队/成员牌 */
.member{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
  min-width:0;
}
.member:hover{border-color:var(--accent-line);background:var(--bg-card-hover);transform:translateY(-3px)}
.avatar{
  flex:none;width:64px;height:64px;border-radius:50%;
  object-fit:cover;
  border:2px solid var(--line-strong);
  background:var(--bg-soft);
  transition:border-color .3s var(--ease);
}
.member:hover .avatar{border-color:var(--accent)}
.member-body{min-width:0;flex:1}
.member-name{margin:0 0 3px;font-size:16.5px;font-weight:650;color:var(--fg);overflow-wrap:break-word}
.member-role{
  display:inline-block;margin:0 0 8px;
  font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}
.member-text{margin:0;font-size:14.2px;color:var(--fg-dim)}

/* 标签 */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.06em;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:999px;
  white-space:nowrap;
}
.tag-plain{color:var(--fg-dim);background:rgba(255,255,255,.05);border-color:var(--line)}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}

/* 信息列表（label: value） */
.info-list{display:grid;gap:2px;margin:0}
.info-list li{
  display:flex;gap:14px;flex-wrap:wrap;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:14.8px;
}
.info-list li:last-child{border-bottom:0}
.info-list .k{
  flex:none;min-width:104px;
  font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-faint);
  padding-top:2px;
}
.info-list .v{color:var(--fg);min-width:0;overflow-wrap:break-word}

/* 荣誉/奖项列表 */
.award-list{display:grid;gap:1px}
.award-list li{
  display:flex;gap:14px;align-items:baseline;
  padding:10px 12px;
  border-radius:9px;
  font-size:14.8px;
  color:var(--fg-dim);
  transition:background .22s var(--ease),color .22s var(--ease);
}
.award-list li:hover{background:rgba(255,255,255,.035);color:var(--fg)}
.award-list .date{
  flex:none;width:74px;
  font-family:var(--font-mono);font-size:12.5px;
  color:var(--accent);
  letter-spacing:.02em;
}
.award-list .what{min-width:0;overflow-wrap:break-word}
.award-list a{color:var(--fg);border-bottom:1px solid var(--accent-line);transition:border-color .2s var(--ease)}
.award-list a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.rank{
  flex:none;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  padding:2px 8px;border-radius:6px;
  background:rgba(255,255,255,.06);color:var(--fg-dim);
}
.rank-1{background:rgba(255,196,0,.16);color:#ffd25e}
.rank-2{background:rgba(200,210,225,.16);color:#cfd8e6}
.rank-3{background:rgba(255,140,80,.16);color:#ffa96b}

/* 按年份分组 */
.year-group{margin-top:26px}
.year-group:first-child{margin-top:0}
.year-label{
  position:relative;
  margin:0 0 6px;
  padding-left:12px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
}
.year-label::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:13px;margin-top:-6.5px;border-radius:2px;
  background:var(--accent);
}
.award-list--flat li{gap:12px}
.award-list--flat .what{flex:1}

/* ---------------- 语言切换 ---------------- */
.lang-toggle{
  display:inline-flex;align-items:center;gap:0;
  height:34px;padding:0 11px;margin-left:8px;
  border:1px solid var(--line);border-radius:9px;
  background:none;color:var(--fg-faint);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  cursor:pointer;flex:none;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.lang-toggle:hover{border-color:var(--accent-line);background:rgba(255,255,255,.035)}
.lang-toggle span[data-lang-slot]{transition:color .2s var(--ease)}
.lang-toggle span[data-lang-slot].on{color:var(--accent)}
.lang-toggle .sep{opacity:.35;margin:0 5px}

@media (max-width:860px){
  .lang-toggle{margin-left:auto;margin-right:10px}
}

/* ---------------- 证书内嵌预览（iframe 模态框） ---------------- */
.viewer{
  position:fixed;inset:0;z-index:220;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,3vw,36px);
}
.viewer[hidden]{display:none}
.viewer-mask{
  position:absolute;inset:0;
  background:rgba(4,5,8,.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:viewerFade .2s var(--ease);
}
.viewer-panel{
  position:relative;
  display:flex;flex-direction:column;
  width:min(1080px,100%);height:min(88vh,100%);
  background:var(--bg-soft);
  border:1px solid var(--line-strong);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  animation:viewerIn .26s var(--ease);
}
.viewer-bar{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:9px 10px 9px 16px;
  border-bottom:1px solid var(--line);
}
.viewer-title{
  flex:1;min-width:0;
  font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--fg-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewer-actions{display:flex;align-items:center;gap:8px;flex:none}
.viewer-open{
  padding:6px 12px;border-radius:8px;
  font-size:13px;color:var(--fg-dim);
  border:1px solid var(--line);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.viewer-open:hover{color:var(--accent);border-color:var(--accent-line)}
.viewer-close{
  width:32px;height:32px;flex:none;
  display:grid;place-items:center;
  border-radius:8px;border:1px solid var(--line);
  background:none;color:var(--fg-dim);
  font-size:14px;line-height:1;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.viewer-close:hover{color:var(--fg);border-color:var(--accent-line);background:rgba(255,255,255,.05)}
.viewer-close:focus-visible,.viewer-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.viewer-body{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;       /* 只允许上下滚动，杜绝左右滚动条 */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#0b0d11;
}
.viewer-stage{
  flex:1 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:100%;min-width:0;
}
.viewer-img{
  display:block;
  max-width:100%;height:auto;             /* 宽度自适应，永不横向溢出 */
  margin:0 auto;
}
.viewer-frame{
  display:block;
  flex:1 0 auto;
  width:100%;height:100%;min-height:100%;
  border:0;background:#fff;
}
.viewer-spin{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:var(--bg-soft);
  color:var(--fg-faint);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
}
.viewer.is-ready .viewer-spin{display:none}
@keyframes viewerFade{from{opacity:0}to{opacity:1}}
@keyframes viewerIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .viewer{padding:0}
  .viewer-panel{width:100%;height:100%;border:0;border-radius:0}
  .viewer-open{display:none}
}
@media (prefers-reduced-motion:reduce){
  .viewer-mask,.viewer-panel{animation:none}
}

/* 图片卡 */
.figure{
  margin:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-soft);
  align-self:start;              /* 不被 grid 拉伸到与相邻文本等高，避免图片下方出现空隙 */
}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{padding:11px 15px;font-size:13px;color:var(--fg-faint);border-top:1px solid var(--line)}

/* 二维码 */
.qr{width:150px;height:150px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:6px}

/* ---------------- 按钮 ---------------- */
.actions{display:flex;gap:13px;flex-wrap:wrap;max-width:100%;min-width:0}
.actions-center{justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 23px;
  font-size:15px;font-weight:600;
  white-space:nowrap;
  border-radius:11px;
  border:1px solid transparent;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--accent);color:#04120b}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(75,255,165,.26)}
.btn-ghost{border-color:var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-2px)}

/* ---------------- 首页 Hero ---------------- */
.hero-stage{
  flex:1;
  min-height:calc(100vh - var(--header-h) - 88px);
  min-height:calc(100svh - var(--header-h) - 88px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,6vw,60px) clamp(18px,5vw,54px);
}
.hero{width:100%;max-width:1080px;min-width:0;text-align:center}

/* 窄高窗口下关城居于画面中部，文案若也居中就会压在建物上。
   把文案提到顶部、关城留在下方，两者错开。 */
@media (max-aspect-ratio:1.149){
  .hero-stage{align-items:flex-start;padding-top:clamp(24px,5vh,64px)}
  .hero{margin-top:0}
}

/* ==== 文案与主体分离 ====
   关城背景位于画面左侧。首页主文案靠右但留出右侧呼吸空间，
   与背景主体各占一侧，避免文字压在建物上（参考图3的左右分栏思路）。
   尺寸全部走 clamp()/vw，视口与缩放变化时比例同步。 */
/* 分栏需要同时满足"够宽"与"够扁"：断点与 JS 里的机位判断（宽高比 ≥1.15）保持一致，
   否则窄高的窗口会出现"文案已右移、但机位仍居中"的错配 */
@media (min-width:861px) and (min-aspect-ratio:1.15){
  .hero-stage{justify-content:flex-end;padding-right:clamp(36px,6.5vw,170px)}
  /* 文案块随视口缩放（不写死上限），超宽屏下才不会缩成一条窄柱 */
  .hero{max-width:clamp(440px,31vw,780px);text-align:left}
  .lede{margin:0 0 30px;max-width:100%}
  /* 子页面标题区同样右移并留边，保持与首页一致的视觉重心 */
  .page-hero .crumbs,
  .page-hero .page-title,
  .page-hero .page-sub,
  .page-hero .accent-bar{
    max-width:clamp(440px,30vw,760px);
    margin-left:auto;
    margin-right:clamp(0px,3.5vw,110px);
  }
  .page-hero .crumbs{display:flex;justify-content:flex-start}
}
.hero h1{
  margin:0 0 22px;
  font-size:clamp(24px,4.4vw,70px);
  line-height:1.16;font-weight:700;letter-spacing:-.02em;
  overflow-wrap:break-word;
}
/* 强调词：纯色扁平，不用背景渐变裁切。
   渐变（亮→暗）会在字面形成明暗过渡，看起来像 3D 浮雕，故改为单色；
   字体沿用主标题的无衬线，只靠颜色区分主次。 */
.hero h1 .hl{ color:#e9c887; }
.hero .lede{
  margin:0 auto 30px;max-width:760px;
  font-size:clamp(15px,1.6vw,18px);
  color:var(--fg-dim);
  overflow-wrap:break-word;
}
.typed-row{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  min-height:38px;margin-bottom:38px;
  font-family:var(--font-mono);
  font-size:clamp(14px,1.7vw,19px);
}
.typed-prefix{color:var(--fg-faint)}
#typed{color:var(--accent);font-weight:600}
.caret-blink{
  display:inline-block;width:9px;height:1.05em;
  background:var(--accent);vertical-align:-2px;
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ---------------- 页脚 ---------------- */
.site-footer{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  min-width:0;
  padding:22px clamp(18px,4vw,54px);
  border-top:1px solid var(--line);
  background:rgba(8,9,12,.5);
  font-size:13.5px;
  color:var(--fg-faint);
}
.site-footer .copy{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;min-width:0}
.socials{display:flex;align-items:center;gap:9px}
.socials .label{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin-right:3px}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;
  color:var(--fg-dim);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);
}
.social:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-3px)}
.social svg{width:18px;height:18px;display:block}
.social img{width:17px;height:17px;display:block;border-radius:3px}

/* ---------------- 入场动画（默认可见，动画仅作增强，超时兜底） ---------------- */
.reveal{opacity:1;transform:none}
html.anim .reveal{opacity:0;transform:translateY(20px)}
html.anim .reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------------- 响应式 ---------------- */
@media (max-width:860px){
  :root{--header-h:66px}
  .menu-toggle{display:inline-flex}
  .nav{
    position:fixed;
    top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:12px;
    background:rgba(10,11,15,.97);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    transform:translateY(-12px);
    opacity:0;visibility:hidden;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-link{padding:13px 14px;font-size:16px;border-radius:10px}
  .has-sub{width:100%}
  .sub-nav{
    position:static;transform:none;
    opacity:1;visibility:visible;
    box-shadow:none;
    background:rgba(255,255,255,.03);
    border-color:transparent;
    margin:2px 0 4px;
    display:none;
  }
  .has-sub.is-expanded .sub-nav{display:block}
  .nav-link[aria-current="page"]::after{display:none}
  .site-footer{justify-content:center;text-align:center}
  .member{flex-direction:column;align-items:center;text-align:center}
  .info-list .k{min-width:0}
  .award-list .date{width:66px}
}
@media (max-width:560px){
  /* minmax(0,1fr)：避免内容宽度撑开某一列导致按钮宽度不一致 */
  .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:420px;margin:0 auto}
  .actions .btn{width:100%;justify-content:center;padding:12px 14px;font-size:14.5px}
  .actions .btn:first-child{grid-column:1 / -1}
  .award-list li{flex-wrap:wrap;gap:4px 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1 !important;transform:none !important}
}