/* ==========================================================================
   文昌星界 · Space —— 视觉系统
   视觉基准：SpaceX 实测值（黑底 #000 / 近白 #F0F0FA / 细描边 4px 圆角小按钮）
   信息架构：银河航天（模块带「查看更多」入口、首页多段位摘要）
   所有自定义类一律 ws- 前缀；不依赖任何第三方主题类名。
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  /* 让表单控件、滚动条、系统 UI 跟随纯黑主题（各客户端表现更一致） */
  color-scheme: dark;
  --ws-bg: #000;
  --ws-fg: #f0f0fa;
  --ws-fg-dim: rgba(240, 240, 250, 0.62);
  --ws-fg-faint: rgba(240, 240, 250, 0.38);
  --ws-line: rgba(240, 240, 250, 0.22);
  --ws-line-strong: rgba(240, 240, 250, 0.35);
  --ws-panel: #0b0b0f;
  --ws-max: 1180px;
  --ws-wide: 1440px;
  --ws-gutter: clamp(20px, 4vw, 56px);
  --ws-header-h: 76px;
  --ws-space: clamp(56px, 7vw, 96px);
  --ws-font-display: "Oswald", "Archivo Narrow", "Arial Narrow", Impact, sans-serif;
  --ws-font-body: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC",
    "Helvetica Neue", Arial, sans-serif;
  --ws-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  /* 登录状态下 WordPress 管理工具栏会占位，固定页头必须让开 */
  --ws-adminbar: 0px;
}
body.admin-bar {
  --ws-adminbar: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    --ws-adminbar: 46px;
  }
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 只给 body 设了背景色时，html 仍是透明的：iOS / macOS Safari 的橡皮筋回弹、
     Android Chrome 的下拉刷新会露出画布底色（透明回落为白），
     表现为顶部/底部闪过一条白带。根元素也要设成黑。 */
  background-color: #000;
}
body {
  margin: 0;
  background: var(--ws-bg);
  color: var(--ws-fg);
  font-family: var(--ws-font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
/* 中和区块引擎注入的默认外间距（用 :where 压低特异度，不覆盖本文件后续的显式规则） */
:where(.wp-site-blocks) > * {
  margin-block: 0;
}
:where(.is-layout-flow) > *,
:where(.is-layout-constrained) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---------- 布局原语 ---------- */
.ws-main {
  display: block;
}
.ws-section {
  padding: var(--ws-space) 0;
}
.ws-wrap {
  max-width: var(--ws-max);
  margin-inline: auto;
  padding-inline: var(--ws-gutter);
}
.ws-wrap--wide {
  max-width: var(--ws-wide);
}
.ws-eyebrow {
  font-family: var(--ws-font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* 2026-09-17：原为 var(--ws-fg-faint)（38% 白），用户反馈「眉标太暗」→ 改满值白。
     改前已核对：全站底色是纯黑（--ws-bg:#000），眉标每一处都压在暗底上，
     不存在「浅底白字看不见」的风险。若日后新增浅底区块用到本类，需为那处另配一档。
     **--ws-fg-faint 本身不动** —— 另有 12 处在用（分隔线、卡片元信息、页脚等），
     改 token 会连带把它们一起提亮，那不是本意。 */
  color: var(--ws-fg);
  margin: 0 0 18px;
}
/* 中文站的 eyebrow 只剩中文，而上面那条是为「拉丁大写 + 宽字距」调的：
   0.28em 的字距套在中文上偏散；--ws-font-display 里也没有中文字形，
   会一路回落到 sans-serif（不是正文用的 --ws-font-body 中文栈）。
   只对 body.lang-zh 生效，英文站的 eyebrow 保持原样。 */
body.lang-zh .ws-eyebrow {
  font-family: var(--ws-font-body);
  letter-spacing: 0.16em;
}
.ws-h1 {
  font-family: var(--ws-font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.ws-h2 {
  font-family: var(--ws-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.ws-h3 {
  font-family: var(--ws-font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  margin: 0;
}
.ws-lead {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.9;
  color: var(--ws-fg-dim);
  max-width: 46em;
  margin: 20px 0 0;
}
.ws-meta {
  font-family: var(--ws-font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-fg-faint);
  margin: 0;
}
.ws-hr {
  border: 0;
  border-top: 1px solid var(--ws-line);
  margin: 0;
}

/* ---------- 按钮（对齐 SpaceX：细描边 + 4px 圆角 + 小字号大写） ----------
   重要：区块按钮的 DOM 是两层 ——
     外层 <div class="wp-block-button ws-btn">
     内层 <a class="wp-block-button__link">
   **视觉属性只能落在其中一层。** 两层都写 border/background/padding 就会叠成
   「两个筐」（实测外层 136×46 套内层 94×44，两层各带 1px 描边）。
   本文件的约定：**外层只负责布局，视觉全部在内层**。 */
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* 区块按钮的类名落在外层 div，视觉由下面的内层规则承担 */
.wp-block-button.ws-btn .wp-block-button__link,
.wp-block-button.ws-btn--solid .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ws-line-strong);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--ws-fg);
  font-family: var(--ws-font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s var(--ws-ease), border-color 0.25s var(--ws-ease),
    color 0.25s var(--ws-ease);
}
.wp-block-button.ws-btn .wp-block-button__link:hover {
  background: var(--ws-fg);
  color: #000;
  border-color: var(--ws-fg);
}
.wp-block-button.ws-btn--solid .wp-block-button__link {
  background: var(--ws-fg);
  color: #000;
  border-color: var(--ws-fg);
}
.wp-block-button.ws-btn--solid .wp-block-button__link:hover {
  background: transparent;
  color: var(--ws-fg);
}

/* ---------- 搜索表单（wp:search 块）----------
   独立命名空间，不蹭按钮的类（蹭了会在按钮规则变更时失去样式）。
   同时显式去掉内层 wrapper 的边框，避免又出现「两个筐」。 */
.ws-search {
  max-width: 520px;
  margin-top: 26px;
}
.ws-search .wp-block-search__inside-wrapper {
  display: flex;
  gap: 10px;
  border: 0;
  padding: 0;
}
.ws-search .wp-block-search__input {
  flex: 1;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ws-fg);
  font-family: var(--ws-font-body);
  font-size: 14px;
}
.ws-search .wp-block-search__button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ws-fg);
  border-radius: 4px;
  background: var(--ws-fg);
  color: var(--ws-bg);
  font-family: var(--ws-font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.ws-more {
  font-family: var(--ws-font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-fg-dim);
  border-bottom: 1px solid var(--ws-line);
  padding-bottom: 4px;
  margin: 0;
  white-space: nowrap;
}
.ws-more a {
  color: inherit;
}
.ws-more:hover {
  color: var(--ws-fg);
  border-color: var(--ws-fg);
}

/* ---------- 页头 ---------- */
.ws-header {
  position: fixed;
  inset: 0 0 auto 0;
  top: var(--ws-adminbar);
  z-index: 100;
  height: var(--ws-header-h);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  transition: background 0.3s var(--ws-ease);
}
.ws-header.is-solid {
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ws-line);
}
.ws-header-inner {
  max-width: var(--ws-wide);
  margin-inline: auto;
  padding-inline: var(--ws-gutter);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ws-brand {
  display: flex;
  align-items: center; /* 原来是 baseline（给文字用的）；换成图之后居中更稳 */
  gap: 12px;
  margin: 0;
}
/* 品牌标识改为矢量图（原来是 wp:site-title 的文字）。
   为什么高度定 44px：这个锁合是「符号在上、ASTRAFORGE 字标在下」的竖式构图，
   字标只占整体高度的约五分之一 —— 实测 24/28px 时字标糊成一团、32px 勉强、
   40px 起才能辨认、48px 清楚。页头高 64px，取 44px 留出上下呼吸。
   宽度由 SVG 的 1256:825 比例自动得出（≈67px）。 */
.ws-brand__logo {
  display: inline-flex;
  align-items: center;
}
.ws-brand__logo img {
  display: block;
  height: 54px;
  width: auto;
}
/* 短代码输出会被 wpautop 包一层 <p>（因为输出以行内元素 <a> 开头；
   [ws_nav] 以 <details> 开头所以没有这个问题）。
   那层 <p> 会把 inline-flex 的 <a> 放进一个行盒里，行盒下缘带 ~10px 的
   基线留白 —— 实测品牌区高 54px 而图只有 44px，导致 logo 在页头里被顶高 5px。
   把 <p> 本身变成 flex 容器即可消掉行盒，高度回到正好 44px、垂直居中。 */
.ws-brand p {
  margin: 0;
  display: flex;
  align-items: center;
}
/* 注意：这里原先有三大段「窄屏自动收紧公司名字号」的规则（clamp + 901~1100px
   单独一档），是为了让 10 个汉字的公司名一行放得下。换成矢量图后品牌宽度从
   122~180px 降到约 67px，那些规则已全部失去作用对象，故删除。
   如果以后有人把 wp:site-title 文字加回页头，需要一并把那些规则找回来
   （git 历史里有一次提交专门调过它们）。 */
/* ---------- 导航（无 JS：用 details/summary 折叠，脚本失败也能导航） ----------
   背景：原先用 wp:navigation 区块，窄屏下 7 个导航项被收进 overlay，
   而展开动作由 Interactivity API 的 JS 驱动。该脚本一旦加载失败（境内网络、
   旧内核、被拦截），手机访客将完全无法在站内导航。
   <details>/<summary> 是纯 HTML 交互，零 JS 依赖。 */
.ws-nav-wrap {
  position: relative;
}
.ws-nav-toggle {
  display: none; /* 桌面不显示汉堡 */
}
.ws-nav {
  /* 这里刻意不写 display —— 见下方两段媒体查询。
     若在此处写 display:flex，作者样式会盖过浏览器对「未展开 details 的内容」
     的隐藏规则（老引擎用 display:none 隐藏），导致窄屏下菜单永远处于展开态。 */
  gap: clamp(14px, 2vw, 30px);
  align-items: center;
}
.ws-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* 触控目标 ≥44px */
  padding: 0 2px;
  font-family: var(--ws-font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ws-fg-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.ws-nav a:hover,
.ws-nav a[aria-current="page"] {
  color: var(--ws-fg);
}

/* 菜单化之后 wp_nav_menu() 会多输出一层 <ul>，它才是要横排的那一行。
   注意：flex 写在 <ul> 上而不是 .ws-nav 上 —— .ws-nav 是 <details> 的子元素，
   在它上面写 display 会盖过浏览器对「未展开 details」的隐藏（见上方注释）。 */
.ws-nav > .ws-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ws-nav .ws-menu > li {
  position: relative; /* 二级菜单的定位基准 */
}

/* 二级菜单：桌面靠 hover / focus-within 弹出，零 JS。
   focus-within 是键盘可达性的关键 —— 只用 hover 的话键盘用户进不去。 */
.ws-nav .ws-menu > li > .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: rgba(0, 0, 0, 0.97);
  border: 1px solid var(--ws-line);
}
.ws-nav .ws-menu > li:hover > .sub-menu,
.ws-nav .ws-menu > li:focus-within > .sub-menu {
  display: block;
}
.ws-nav .sub-menu a {
  padding: 10px 18px;
  font-size: 11px;
}
/* 当前页的上级也要亮起来，否则进了子页面就不知道自己属于哪一节 */
.ws-nav .current-menu-ancestor > a,
.ws-nav .current-menu-parent > a {
  color: var(--ws-fg);
}

/* 桌面：details 处于未展开状态也必须显示导航。
   新引擎（Chrome 120+）用 ::details-content 的 content-visibility 隐藏内容，
   老引擎用 display:none 隐藏 —— 两条都要覆盖，缺一不可。 */
@media (min-width: 901px) {
  .ws-nav-wrap {
    display: block;
  }
  .ws-nav-wrap::details-content {
    content-visibility: visible;
  }
  .ws-nav-wrap > .ws-nav {
    display: flex !important;
  }
}

/* 窄屏：折叠为汉堡 + 下拉面板 */
@media (max-width: 900px) {
  .ws-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    cursor: pointer;
    list-style: none;
  }
  .ws-nav-toggle::-webkit-details-marker {
    display: none;
  }
  .ws-nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ws-fg);
  }
  /* 折叠时显式隐藏、展开时显式显示 —— 不依赖各引擎对 details 的隐藏实现 */
  .ws-nav {
    display: none;
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    min-width: 210px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(0, 0, 0, 0.97);
    border: 1px solid var(--ws-line);
    padding: 6px 0;
  }
  .ws-nav-wrap[open] .ws-nav {
    display: flex;
  }
  .ws-nav a {
    padding: 12px 20px;
    font-size: 15px;
  }
  .ws-nav > .ws-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* 触屏没有 hover，二级菜单不能靠悬停 —— 直接展开并用左侧竖线表示层级 */
  .ws-nav .ws-menu > li > .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    margin: 0 0 0 20px;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid var(--ws-line);
  }
  .ws-nav .sub-menu a {
    padding: 10px 20px;
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   绝对定位的满幅图层必须 margin 归零 —— 否则会被 WordPress 的区块间距推下去。
   根因：WP 注入
     :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap) }
   默认 block-gap = 24px，该规则特异度 (0,1,0)。
   用 :where(...) 写中和规则只有 (0,0,0)，**打不过它且静默失败**。
   实测后果：.ws-hero__scrim 被推下 24px，首屏最上面 24px 没有遮罩，
   在 logo（y=19–45px）处形成一条贯穿整宽的亮度硬边（y=23→24 突降 11.3）。
   这里用 (0,2,0) 的子选择器，稳定胜出。新增满幅图层时请一并加进这条规则。
   --------------------------------------------------------------------------- */
.ws-hero > .ws-hero__media,
.ws-hero > .ws-hero__scrim,
.ws-feature > .ws-feature__media,
.ws-feature > .ws-feature__scrim,
.ws-feature > .ws-feature__body {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---------- 首屏 ---------- */
.ws-hero {
  position: relative;
  /* 回退：Safari <15.4 / Chrome <108 / 旧微信内核不认识 svh，整条声明会被丢弃 */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--ws-header-h) + var(--ws-adminbar));
  overflow: hidden;
  background: #000;
}
.ws-hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
}
.ws-hero__media img,
.ws-hero__media figure,
.ws-hero__media figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.ws-hero__media img {
  opacity: 0.72;
}
.ws-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.45) 42%,
    rgba(0, 0, 0, 0.15) 70%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
.ws-hero__body {
  position: relative;
  width: 100%;
  max-width: var(--ws-wide);
  margin-inline: auto;
  padding: 0 var(--ws-gutter) clamp(96px, 10vh, 140px);
}
.ws-hero__title {
  margin: 0;
  color: var(--ws-fg);
}
.ws-hero__sub {
  margin: 22px 0 0;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.06em;
  color: var(--ws-fg-dim);
  max-width: 38em;
}
.ws-hero__cta {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ws-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--ws-font-display);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ws-fg-faint);
}
.ws-scroll i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--ws-fg-faint), transparent);
  animation: ws-pulse 2.2s infinite;
}
@keyframes ws-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ---------- 内页小 banner ---------- */
.ws-pagehead {
  padding: calc(var(--ws-header-h) + var(--ws-adminbar) + clamp(56px, 8vw, 110px)) 0
    clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--ws-line);
}

/* ---------- 模块标题行（左标题 + 右「查看更多」） ---------- */
.ws-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 38px;
  border-bottom: 1px solid var(--ws-line);
  flex-wrap: wrap;
}
.ws-head .ws-eyebrow {
  margin: 0 0 14px;
}
.ws-head > .wp-block-group,
.ws-head > div {
  margin: 0;
}

/* ---------- 网格与卡片 ---------- */
.ws-grid {
  display: grid;
  gap: 22px;
}
.ws-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.ws-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.ws-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.ws-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ws-line);
  border-radius: 2px;
  background: var(--ws-panel);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.ws-card__media {
  /* 4:5 竖版：源图里有两张是 0.37–0.40 的竖版长海报，竖版框能保住主体（卫星在上部） */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
}
.ws-card__media figure,
.ws-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
}
.ws-card__media img {
  object-fit: cover;
  /* 顶对齐：竖版海报的卫星在上部，居中裁会裁到下方空白区 */
  object-position: center top;
  transition: transform 0.8s var(--ws-ease);
}
.ws-card:hover .ws-card__media img {
  transform: scale(1.04);
}
.ws-card__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin: 0;
}
.ws-card__meta {
  font-family: var(--ws-font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ws-fg-faint);
  margin: 0;
}
.ws-card__title {
  font-family: var(--ws-font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.ws-card__title a {
  color: inherit;
}
.ws-card__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--ws-fg-dim);
  margin: 0;
  flex: 1;
}

/* ---------- 头条大图 ---------- */
.ws-feature {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ws-line);
  aspect-ratio: 16 / 7;
  /* 注意：这里不能设 min-height。min-height 与 aspect-ratio 同时命中时，
     浏览器会按比例反向把宽度撑开（曾导致 375px 视口下出现 532px 宽的横向溢出）。 */
  width: 100%;
}
.ws-feature__media,
.ws-feature__media figure,
.ws-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.ws-feature__media img {
  object-fit: cover;
  opacity: 0.8;
}
.ws-feature__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.1) 60%);
}
.ws-feature__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(24px, 3vw, 44px);
}
.ws-feature__date {
  font-family: var(--ws-font-display);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ws-fg-faint);
  margin: 0 0 12px;
}
.ws-feature__title {
  font-family: var(--ws-font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  color: var(--ws-fg);
}

/* ---------- 全宽 slogan 带 ---------- */
.ws-band {
  padding: clamp(64px, 9vw, 132px) 0;
  border-block: 1px solid var(--ws-line);
  background: radial-gradient(120% 140% at 80% 0%, rgba(240, 240, 250, 0.06), transparent 60%);
}
.ws-band__text {
  font-family: var(--ws-font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---------- 数据条 ---------- */
.ws-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ws-line);
  border: 1px solid var(--ws-line);
}
.ws-stat {
  background: var(--ws-bg);
  padding: 26px 24px;
  margin: 0;
}
.ws-stat__v {
  font-family: var(--ws-font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  line-height: 1;
  margin: 0;
}
.ws-stat__l {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ws-fg-faint);
  margin: 8px 0 0;
}

/* ---------- 荣誉 / 合作伙伴 logo 墙 ---------- */
.ws-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--ws-line);
  border: 1px solid var(--ws-line);
}
.ws-logos > * {
  background: var(--ws-bg);
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  margin: 0;
}
.ws-logos img {
  filter: grayscale(1);
  opacity: 0.7;
}
.ws-logos p {
  font-family: var(--ws-font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ws-fg-faint);
  margin: 0;
  text-align: center;
}

/* ---------- 文章正文 ---------- */
.ws-article {
  padding: calc(var(--ws-header-h) + var(--ws-adminbar) + clamp(48px, 6vw, 96px)) 0 var(--ws-space);
}
.ws-article .ws-h1 {
  margin-bottom: 18px;
}
.ws-prose {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(240, 240, 250, 0.82);
}
.ws-prose > * + * {
  margin-top: 1.4em;
}
.ws-prose h2,
.ws-prose h3 {
  color: var(--ws-fg);
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.ws-prose a {
  border-bottom: 1px solid var(--ws-line-strong);
}
.ws-prose a:hover {
  border-color: var(--ws-fg);
}
.ws-prose img {
  margin-inline: auto;
}
.ws-prose blockquote {
  margin: 2em 0;
  padding-left: 22px;
  border-left: 2px solid var(--ws-line-strong);
  color: var(--ws-fg-dim);
}

/* ---------- 页脚 ---------- */
.ws-footer {
  border-top: 1px solid var(--ws-line);
  /* 2026-09-23 排版收紧：原 clamp(48px,6vw,80px) 0 34px，
     配合地址行 line-height:2 会把四条短行撑得很开，整块显得空旷。 */
  padding: clamp(40px, 5vw, 64px) 0 28px;
  margin-top: 0;
}
.ws-footer-inner {
  max-width: var(--ws-wide);
  margin-inline: auto;
  padding-inline: var(--ws-gutter);
  display: grid;
  /* 2026-09-23（第二次改版）：整块改为**居中单列**。
     原先是「左栏公司信息 ｜ 右栏版权备案」两栏，两块之间隔着约 550px 空白，
     读起来像两座孤岛；现在公司名+地址+邮箱合并成一行居中，版权与备案接在下面。 */
  grid-template-columns: 1fr;
  gap: 14px;
  text-align: center;
}
.ws-footer-block {
  margin: 0;
}
.ws-footer-line {
  /* 2026-09-23（第二次改版）：公司名 + 地址 + 邮箱**合并为一行**居中。
     原先是独立两段（.ws-footer-brand / .ws-footer-meta），整行统一用正文中文栈：
     一行混排里再切字体只会显乱，公司名改用 <strong> 加粗区分，不再单独用显示字体。
     行高 1.9 让中文小字不挤。 */
  font-family: var(--ws-font-body);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ws-fg);
  margin: 0;
}

.ws-footer-line strong {
  font-weight: 600;
}
.ws-footer-copy {
  /* 2026-09-23（第二次改版）：版权与备案接在合并行的**下面**，居中。
     原「右栏」定位（grid-column:2 / align-self:end / text-align:right）随两栏设计一起作废。
     版权行与备案行之间仍用 <br> 分行，读起来是一个法务小块。 */
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ws-fg);
}
.ws-footer-copy a {
  /* 2026-09-23：备案号是法定的、必须可点的信息。
     页脚是纯黑底、正文与链接同为 --ws-fg，若链接只靠 hover 变色等于没有可点提示，
     也不满足 WCAG 1.4.1「不能只靠颜色区分」。故给常显下划线。 */
  color: var(--ws-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ws-footer-copy a:hover {
  text-decoration-thickness: 2px;
}
.ws-beian-icon {
  /* 公安备案徽章：随 12px 正文行内排列。
     **必须显式改回 inline-block** —— 上面的全局 `img { display: block }`
     是为通栏大图服务的，会把行内徽章甩到自己一行（实测表现为备案行多出一个空行）。
     另：全局 `height: auto` 会压掉 HTML 的 height 属性，所以尺寸要在这里写。
     源图 62×67，按 16×17 显示 ≈ 3.9 倍密度。 */
  display: inline-block;
  width: 16px;
  height: 17px;
  vertical-align: -3px;
  margin-right: 4px;
}

/* ---------- 标签组（银河式能力标签） ---------- */
.ws-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.ws-tags p,
.ws-tag {
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  font-family: var(--ws-font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-fg-dim);
  white-space: nowrap;
}

/* ---------- 步骤条（STEP 01/02/03） ---------- */
.ws-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ws-line);
  border: 1px solid var(--ws-line);
}
.ws-step {
  background: #000;
  padding: clamp(24px, 3vw, 38px);
}
.ws-step p.ws-step__n {
  font-family: var(--ws-font-display);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--ws-fg-faint);
  margin: 0 0 16px;
}
.ws-step .ws-step__t {
  font-family: var(--ws-font-display);
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-fg);
  margin: 0 0 6px;
}
.ws-step .ws-step__d {
  margin: 0;
  font-size: 14px;
  color: var(--ws-fg-dim);
}

/* ---------- 岗位列表 ---------- */
/* ---------------------------------------------------------------------------
 * 在招岗位
 * 2026-09-23：岗位改由自定义类型 ws_job 提供（后台可增删），两种呈现：
 *   .ws-jobs-board —— 招聘页：左侧职位列表 + 右侧岗位要求（点击/键盘切换）
 *   .ws-jobs       —— 首页：紧凑列表 + 「查看全部岗位」
 * 面板的显示/隐藏由 JS 加上的 [data-ws-jobs-ready] 开关控制：没有 JS 时
 * 所有面板都是显示的（见 assets/js/site.js 的契约），左侧列表此时隐藏。
 * --------------------------------------------------------------------------- */

.ws-jobs {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--ws-line);
  max-width: 760px;
}
.ws-jobs__item {
  margin: 0;
  border-bottom: 1px solid var(--ws-line);
}
.ws-jobs__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 2px;
  color: var(--ws-fg);
  text-decoration: none;
  font-size: clamp(15px, 1.4vw, 18px);
}
.ws-jobs__link:hover .ws-jobs__title,
.ws-jobs__link:focus-visible .ws-jobs__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ws-jobs__meta {
  flex: none;
  font-size: 13px;
  color: var(--ws-fg);
  opacity: .7;
}
.ws-jobs__more {
  margin: 18px 0 0;
}
.ws-jobs__more a {
  font-size: 15px;
}

.ws-jobs-board {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: 32px;
  align-items: start;
}
.ws-jobs-board__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ws-line);
}
.ws-jobs-board__tab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 15px 12px 15px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ws-line);
  font: inherit;
  color: var(--ws-fg);
  opacity: .62;                 /* 未选中压暗；悬停与选中回满值（与眉标/页脚提亮同一口径） */
  cursor: pointer;
  transition: opacity .15s ease;
}
.ws-jobs-board__tab:hover,
.ws-jobs-board__tab:focus-visible {
  opacity: 1;
}
.ws-jobs-board__tab[aria-selected="true"] {
  opacity: 1;
}
.ws-jobs-board__tab[aria-selected="true"] .ws-jobs-board__title::before {
  content: "／";
  margin-right: 10px;
  color: var(--ws-fg-faint);
}
.ws-jobs-board__title {
  font-size: clamp(15px, 1.4vw, 18px);
}
.ws-jobs-board__meta,
.ws-jobs-board__panel-meta {
  font-size: 13px;
  color: var(--ws-fg);
  opacity: .7;
}
.ws-jobs-board__panel-title {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
}
.ws-jobs-board__panel-meta {
  margin: 0 0 18px;
}
.ws-jobs-board__body > *:first-child {
  margin-top: 0;
}
/* 只有 JS 就绪后才隐藏未选中的面板；否则全部显示（渐进增强的兜底） */
[data-ws-jobs-ready] .ws-jobs-board__panel {
  display: none;
}
[data-ws-jobs-ready] .ws-jobs-board__panel.is-active {
  display: block;
}
[data-ws-jobs-ready] .ws-jobs-board__list {
  display: flex;
}
.ws-jobs-board__list {
  display: none;   /* 无 JS 时不需要这排按钮：每个面板自带职位名标题 */
}

@media (max-width: 900px) {
  /* 窄屏折成单列：职位列表在上、要求在下 */
  .ws-jobs-board {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---------- 图注 ---------- */
.ws-caption,
.ws-note {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ws-fg-faint);
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .ws-grid--4,
  .ws-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .ws-steps {
    grid-template-columns: 1fr;
  }
  .ws-footer-inner {
    grid-template-columns: 1fr;
  }
  .ws-feature {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 620px) {
  :root {
    --ws-header-h: 68px;
  }
  .ws-grid--2,
  .ws-grid--3,
  .ws-grid--4 {
    grid-template-columns: 1fr;
  }
  .ws-stats {
    grid-template-columns: 1fr;
  }
  .ws-hero {
    min-height: 88vh;   /* svh 回退，见首屏那段说明 */
    min-height: 88svh;
  }
  /* 手机端竖版卡片会拉出过长页面，回到横版 */
  .ws-card__media {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- 可访问性 ---------- */
:focus-visible {
  outline: 2px solid var(--ws-fg);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 打印 ---------- */
@media print {
  .ws-header,
  .ws-footer,
  .ws-scroll {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ---------------------------------------------------------------------------
   双语导航与语言切换器
   ---------------------------------------------------------------------------
   区块主题的模板部件（parts/header.html）是**跨语言共享**的 —— Polylang 只解决
   「切到哪个语言」，换不掉导航里那一套链接。所以两套导航同时渲染，按 body 上的
   语言类切换：零 JS、零 PHP 判断，和本站既有的 <details> 零 JS 导航一致。

   为什么必须这么写：
   上面的 ≥901px 媒体查询里 `.ws-nav-wrap > .ws-nav` 已经带了 !important，
   而我们要隐藏的正是另一语言那一套 —— 选择器特异度 (0,2,1) 高于它的 (0,2,0)，
   再配 !important 才能稳定压住。**不要改成 :where() 降特异度**（本站已有同类教训）。
   --------------------------------------------------------------------------- */
body.lang-zh .ws-i18n-en,
body.lang-en .ws-i18n-zh {
  display: none !important;
}

/* 页脚/404/搜索/归档等模板部件是跨语言共享的，里面的双语文案同样用 .ws-i18n-*
   标记成对渲染，上一条规则负责切换。注意：只写"隐藏另一种语言"这一条，
   不要给"当前语言"那条写 display —— 否则会盖掉元素各自的 display 自有值
   （例如语言切换器 .ws-lang 的 flex）。 */

.ws-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
  font-family: var(--ws-font-display, inherit);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* 中文字距收紧：0.18em/0.16em 这类宽字距本是给拉丁大写调的，套在中文上
   会显瘦、显小、也显散 —— 同一条教训在眉标与品牌名上已经踩过两次。
   收紧后同样是 14px，中文的视觉重量明显更足，而整行宽度不增反降。 */
body.lang-zh .ws-nav a {
  letter-spacing: 0.08em;
}
body.lang-zh .ws-lang {
  letter-spacing: 0.06em;
}

.ws-lang__cur {
  color: var(--ws-fg);
}

.ws-lang__alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32×32：仍高于 WCAG 2.5.8 的硬底线 24×24，但不再在 11px 文字的页头里
     成为一个比周围都大的方块（原 44×44 是按 Apple HIG 建议值定的，
     用户明确要求改小，属于对建议值的知情取舍 —— 不要顺手改回 44）。 */
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  color: var(--ws-fg-dim);
  text-decoration: none;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
}

.ws-lang__alt:hover,
.ws-lang__alt:focus-visible {
  color: var(--ws-fg);
  border-color: var(--ws-fg);
}

/* 窄屏把语言切换提到汉堡按钮之前。
   默认 DOM 顺序是「品牌 → 汉堡 → 语言」，于是汉堡被挤在行中间、最右边缘
   被语言切换占着，观感别扭。这里只用 CSS order 调**视觉**顺序，不改 DOM、
   不改 PHP：视觉变成「品牌 → 语言 → 汉堡」，汉堡回到最右边缘。
   顺带效果：汉堡回到右边缘后，相对它 right:0 向左延伸的折叠面板也跟着
   回到视口内（修掉 320px 下面板左边缘到 −26px 的既有 bug）。

   已知取舍：order 只改视觉顺序，DOM/焦点顺序仍是「品牌 → 汉堡 → 语言」。
   页头只有 3 个元素、都是简单链接，实际影响很小；这是经过确认的知情接受，
   不要再"顺手修"成 DOM 调序（用户明确不要挪进折叠面板）。 */
@media (max-width: 900px) {
  .ws-lang {
    order: 2;
    margin-left: 0; /* 间距统一交给 .ws-header-inner 的 gap，否则 18+24=42px 不对称 */
  }
  .ws-nav-wrap {
    order: 3;
  }
}