/* ============================================================
   创想时代开发组 · 官网样式表
   视觉语言：终末地风格 —— 浅底、细线、黑黄高亮、工业排版
   颜色全部走 assets/css/theme.css 里的变量，浅色 / 深色自动适配
   ============================================================ */

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性必须真的生效。
   有些组件设了 display: flex / grid，会盖掉浏览器默认的
   [hidden] { display: none }，导致「本该隐藏」的区块照样显示
   （例如视频工具还没转换时，结果区就露出一个空播放器）。 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  background-color: var(--bg);
  /* 极淡的工程网格 + 右上角一抹黄，构成终末地的“图纸”底子 */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(760px 420px at 92% -6%, var(--hero-wash), transparent 62%);
  background-size: 64px 64px, 64px 64px, auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
a:hover { border-bottom-color: var(--gold); color: var(--text); }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
li::marker { color: var(--text-mute); }

::selection { background: var(--gold); color: #1a1c20; }

code {
  font-family: var(--mono);
  font-size: .86em;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--gold-dk);
  outline-offset: 2px;
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -70px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--ink-fg);
  font-weight: 700;
  border: 0;
  border-radius: var(--radius);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- 容器 ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 68px 0; }
.section--tight { padding: 42px 0; }

/* ---------- 区块标题：左侧一段黄标记 + 等宽编号 ---------- */
.section-head {
  position: relative;
  margin-bottom: 30px;
  padding-left: 16px;
  border-left: 3px solid var(--gold);
}

.section-head .kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}

.section-head h2 {
  font-size: 27px;
  margin: 0 0 8px;
  letter-spacing: -.015em;
}

.section-head p {
  color: var(--text-dim);
  margin: 0;
  max-width: 70ch;
  font-size: 14.5px;
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--header-border);
}

.site-header .bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 66px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  border-bottom: 0;
  flex-shrink: 0;
}
.brand:hover { border-bottom: 0; }

/* 品牌标记：工作室 logo 的火炬图标 */
.brand-mark {
  width: 30px;
  height: 34px;
  flex-shrink: 0;
  object-fit: contain;
  /* 像素图缩放时保持硬边，不要糊成一团 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.brand-text strong {
  display: block;
  font-size: 16.5px;
  letter-spacing: .01em;
  line-height: 1.3;
}

.brand-text span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
  flex-wrap: nowrap;
}

/* 导航项：平时只有文字，不做底色块，避免右上角看起来一堆按钮 */
.nav a {
  position: relative;
  padding: 9px 13px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  transition: color .15s ease;
}

/* 悬停：文字加深 + 一条细灰线预告，不放底色块 */
.nav a::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  background: var(--line-strong);
  opacity: 0;
  transition: opacity .15s ease;
}

.nav a:hover {
  color: var(--text);
  background: transparent;
  border-bottom: 0;
}

.nav a:hover::before { opacity: 1; }

/* 当前页：黑字 + 底部黄条 */
.nav a.is-active {
  color: var(--text);
  font-weight: 700;
  background: transparent;
}

.nav a.is-active::before { opacity: 0; }

.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 3px;
  background: var(--gold);
}

/* 导航与右侧控件之间加一条竖细线，分区更清楚 */
.nav + .theme-toggle { margin-left: 14px; }

.header-cta { flex-shrink: 0; margin-left: 10px; }

/* ---------- 主题切换按钮 ----------
   收成方形图标按钮，右上角只留一个小色块，不抢视线。 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  font-family: var(--mono);
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--bg-2);
}

.theme-toggle .ico {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

/* 桌面端不显示「主题」二字，靠 title 与 aria-label 说明；
   手机侧栏里另有完整文案 */
.theme-toggle [data-theme-label] { display: none; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  text-decoration: none;
  transition: transform .1s ease, opacity .15s ease, background-color .15s ease;
}

.btn:hover { opacity: .86; border-bottom-color: var(--btn-border); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  color: var(--btn-ghost-fg);
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover { background: var(--bg-2); opacity: 1; }

.btn--gold {
  color: var(--btn-gold-fg);
  background: var(--btn-gold-bg);
  border-color: var(--btn-gold-border);
}

.btn--sm { padding: 8px 15px; font-size: 13.5px; }
.btn--block { width: 100%; }

.btn.is-disabled,
.btn[aria-disabled="true"] {
  color: var(--text-mute);
  background: var(--bg-2);
  border-color: var(--line-2);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* flex 容器会忽略 hidden 属性，这里补回来 */
.btn-row > [hidden],
.btn-row > [hidden] + * {
  display: none !important;
}

/* ---------- 面板 / 卡片 ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
}

.panel h3 { font-size: 17px; }

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* 卡片：细边框盒子，顶部一道黄标记，悬停时边框转黑 */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 3px;
  background: var(--gold);
  transition: width .2s ease;
}

.card--diamond::before  { background: var(--diamond); }
.card--gold::before     { background: var(--gold); }
.card--lapis::before    { background: var(--lapis); }
.card--redstone::before { background: var(--redstone); }

.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}
.card:hover::before { width: 100%; }

.card h3 {
  font-size: 16.5px;
  margin: 4px 0 8px;
}

.card p {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
}

.card .icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

/* ---------- 标签 ---------- */
.tag {
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  white-space: nowrap;
}

.tag--green    { color: var(--ok-fg);     background: var(--ok-bg);   border-color: var(--ok-line); }
.tag--gold     { color: #6b5300;           background: var(--gold-soft); border-color: var(--gold-dk); }
.tag--diamond  { color: var(--diamond);    background: var(--bg-2);    border-color: var(--diamond); }
.tag--redstone { color: var(--err-fg);     background: var(--err-bg);  border-color: var(--err-line); }

html[data-theme="dark"] .tag--gold,
html[data-theme="dark"] .tag--diamond { color: var(--gold); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .tag--gold { color: var(--gold); }
  html:not([data-theme="light"]) .tag--diamond { color: var(--diamond); }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative;
  padding: 88px 0 68px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* 右侧渐隐的工程网格，做出终末地的“图纸”层次 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(760px 420px at 78% 24%, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(760px 420px at 78% 24%, #000 12%, transparent 76%);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

/* Hero 分栏：左文右图；没有图时（#hero-figure 被 JS 收起来）自动变成单列 */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}

.hero-figure {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}
.hero-figure[hidden] { display: none; }

.hero-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* 左下角黄角标，终末地那种"标记"感 */
.hero-figure::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  background: var(--gold);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 13px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero h1 {
  font-size: clamp(31px, 5vw, 50px);
  margin: 0 0 18px;
  letter-spacing: -.025em;
  line-height: 1.22;
}

.hero h1 em {
  font-style: normal;
  position: relative;
  color: var(--text);
  background: linear-gradient(transparent 62%, var(--gold) 62%, var(--gold) 92%, transparent 92%);
  padding: 0 2px;
}

.hero .lead {
  font-size: 16.5px;
  color: var(--text-dim);
  max-width: 64ch;
  margin: 0 0 30px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.stat {
  padding: 18px 20px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat b {
  display: block;
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
}

/* 数字下的一小段黄条，对应终末地的标尺感 */
.stat b::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-top: 7px;
  background: var(--gold);
}

.stat span {
  font-size: 12.5px;
  color: var(--text-mute);
}

/* ---------- 特征行 ---------- */
.feature {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .16s ease;
}

.feature:hover { border-color: var(--line-strong); }

.feature .icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

.feature h3 { font-size: 15.5px; margin: 0 0 5px; }
.feature p { margin: 0; font-size: 13.5px; color: var(--text-dim); }

/* ---------- 作品展示 ---------- */
.showcase {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.work {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.work:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.work-media {
  position: relative;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.work:hover .work-media img { transform: scale(1.03); }

.work-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.work-body h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.work-body p {
  color: var(--text-dim);
  font-size: 13.5px;
  margin: 0 0 14px;
  flex: 1;
}

.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-mute);
}

/* ---------- 部门列表（审核条例页） ---------- */
.dept-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

/* 放在页面顶部（不在窄面板里）时用两列，别把每行拉成一整条。
   阈值取 420px：常见宽度下稳定两列，技术部那种长文本也不会被挤成三行。 */
.dept-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-content: start;
}

.dept {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.dept b {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--text);
}

.dept span {
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ---------- 关于我们页的 logo 展示 ---------- */
.logo-plate {
  display: grid;
  place-items: center;
  padding: 30px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.logo-plate img {
  width: 100%;
  max-width: 420px;
  height: auto;
}

.logo-plate figcaption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* 首页作品展示：加大标题与留白，放在最亮的位置 */
.showcase--lead {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 24px;
}

.showcase--lead .work-body h3 { font-size: 18px; }

/* 代投横幅：浅黄底 + 左侧黄条，一眼能认出来 */
.invest-band {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 30px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-dk);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}

.invest-facts {
  background: var(--panel);
  border-color: var(--line-2);
}

.invest-facts dd { font-size: 12.5px; }

/* ---------- 核心管理局名单 ---------- */
.officer-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

.officer {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .16s ease;
}

.officer:hover { border-color: var(--line-strong); }

/* 主席那一张用黄条突出 */
.officer--lead {
  border-left-color: var(--gold);
  background: var(--gold-soft);
}

.officer b {
  font-size: 17px;
  letter-spacing: .01em;
  color: var(--text);
}

.officer-role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-dim);
}

.officer-note {
  font-size: 12.5px;
  color: var(--text-mute);
  margin-top: 3px;
}

/* 有头像的负责人：左侧头像，右侧姓名与职务 */
.officer--avatar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.officer-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  display: block;
}

/* 头像右侧的文字：占满剩余宽度，长职务才会正常换行而不是挤成一窄条 */
.officer-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

/* ---------- 作品详情页 ---------- */
.work-hero {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
}

.work-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

/* 头图左下角黄角标 */
.work-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--gold);
}

.crumb {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--text-mute);
}

.crumb a { color: var(--text-mute); border-bottom-color: transparent; }
.crumb a:hover { color: var(--text); border-bottom-color: var(--gold); }

.work-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.work-intro p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 1.1em;
}

/* 首段稍微放大一点，做出层次 */
.work-intro p:first-child {
  font-size: 16.5px;
  color: var(--text);
}

.work-intro p:last-child { margin-bottom: 0; }

/* 作品介绍里的长海报：竖长图，按容器宽度等比铺开，不裁剪 */
.work-poster {
  margin: 0 0 24px;
}

.work-poster img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}

/* 海报后面还有正文时，补一点间距 */
.work-intro .work-poster + p { margin-top: 4px; }

/* 截图栅格 */
.shot-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.shot { margin: 0; }

.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.shot-btn:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.shot-btn img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.shot-btn:hover img { transform: scale(1.02); }

.shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* 作品卡片上的「查看详情」 */
.work-more {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--text);
  border-bottom: 1px solid var(--gold);
  white-space: nowrap;
}

.work-more:hover { border-bottom-color: var(--line-strong); }

/* 截图放大层 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: rgba(10, 12, 15, .88);
  backdrop-filter: blur(3px);
}

.lightbox[hidden] { display: none; }

.lightbox-inner {
  margin: 0;
  max-width: min(1400px, 100%);
  display: grid;
  gap: 14px;
  justify-items: center;
}

.lightbox-inner img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
}

.lightbox-inner figcaption {
  font-size: 13.5px;
  line-height: 1.7;
  color: #dfe3e8;
  text-align: center;
  max-width: 70ch;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: #eef1f5;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 2px;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255, 255, 255, .2); }

/* ---------- 工具箱 ---------- */
.tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.tool-col { min-width: 0; }

/* 拖放区 */
.dropzone {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 30px 20px;
  text-align: center;
  background: var(--bg-2);
  border: 2px dashed var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.dropzone:hover,
.dropzone.is-over {
  border-color: var(--gold-dk);
  background: var(--gold-soft);
}

.dropzone-icon { font-size: 26px; line-height: 1; }
.dropzone b { font-size: 15px; }
.dropzone span { font-size: 12.5px; color: var(--text-mute); }
.dropzone.is-over b { color: var(--text); }

/* 已选文件列表 */
.file-list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
}

.file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-mute);
  white-space: nowrap;
}

.file-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--text-mute);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
}

.file-del:hover { color: var(--err-fg); border-color: var(--err-line); background: var(--err-bg); }

/* 预设小按钮 */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s ease;
}

.chip:hover { color: var(--text); border-color: var(--line-strong); }

.chip.is-active {
  color: var(--ink-fg);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 700;
}

/* 宽高输入 */
.size-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
  margin-top: 16px;
}

.swap-btn {
  width: 38px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
}

.swap-btn:hover { color: var(--text); border-color: var(--line-strong); }

.note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}

.note b { color: var(--text); }

input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 10px 0;
  appearance: none;
  background: var(--line-2);
  border-radius: 2px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line-2);
  cursor: pointer;
}

/* 预览 */
.preview-empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-mute);
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}

.preview-empty span { font-size: 30px; line-height: 1; }
.preview-empty p { margin: 0; font-size: 13.5px; max-width: 34ch; }

.preview-wrap { display: flex; flex-direction: column; gap: 16px; }

.preview-box {
  display: grid;
  place-items: center;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 380px;
  overflow: auto;
}

.preview-box img {
  max-width: 100%;
  max-height: 340px;
  width: auto;
  height: auto;
  border: 1px solid var(--line-2);
}

.stat-list {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-list > div {
  display: grid;
  /* 标签列固定 76px 是为了让各行的数值左对齐；
     但必须用 minmax(0, 76px)，否则窄屏时它拒绝收缩，
     会把数值列挤到只剩二十几像素 —— 数字就会一个一行。 */
  grid-template-columns: minmax(0, 76px) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 13px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.stat-list > div:last-child { border-bottom: 0; }

.stat-list dt {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.stat-list dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  /* 只在真的放不下时才断词。
     用 word-break: break-all 会把「1234567890」这种数字
     在任何字符处硬断，窄屏上就变成一行一个数字。 */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 进度条（视频转换用） */
.progress {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.progress[hidden] { display: none; }

.progress-bar {
  height: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  transition: width .2s linear;
}

.progress span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

/* 诊断结论里的通过 / 不通过颜色 */
.stat-list dd.t-ok { color: var(--ok-fg); }
.stat-list dd.t-danger { color: var(--err-fg); }

/* ---------- 正文里的超链接 ----------
   要让人一眼看出可以点：加下划线 + 一点底色，悬停时底色变黄、
   外链后面跟一个 ↗ 表示会跳走。
   注意必须把导航（.nav / .mnav-links）排除掉 ——
   导航本来就有自己的一套样式，套上这块会变成一排黄杠，很难看。 */
.wrap a:not(.btn):not(.brand):not(.work-more):not(.skip-link):not(.module-card):not(.nav a):not(.mnav-links a):not(.footer-grid a),
.callout a,
.notice-body a,
.stat-list a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold-dk);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: linear-gradient(transparent 62%, var(--gold-soft) 62%);
  padding: 0 1px;
  border-bottom: 0;
  border-radius: 2px;
  transition: background-color .15s ease;
}

/* 导航与模块卡片保持原样：不加下划线、不加底色高亮。
   注意这里只重置「外观」，绝不能写 padding: revert ——
   那会把导航项的内边距一并抹成 0，右上角就挤成一排没有间隔的字。 */
.nav a,
.mnav-links a,
.module-card {
  text-decoration: none !important;
  background-image: none !important;
}

/* 页脚链接用更轻的样式：只加下划线，不要正文那种黄底高亮 */
.footer-grid a {
  text-decoration: none;
  background: none;
  font-weight: inherit;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.footer-grid a:hover {
  color: var(--text);
  border-bottom-color: var(--gold-dk);
}

.wrap a:not(.btn):not(.brand):not(.work-more):not(.skip-link):not(.module-card):hover,
.callout a:hover,
.notice-body a:hover,
.stat-list a:hover {
  background: var(--gold);
  text-decoration-color: var(--text);
}

/* 跳到站外的链接尾巴上加个箭头。
   .doc-row 自己已经用网格排了箭头，不能再被这条规则追加一个（会多出一行）。 */
.wrap a[target="_blank"]:not(.btn):not(.doc-row)::after,
.callout a[target="_blank"]::after,
.footer-grid a[target="_blank"]::after,
.stat-list a[target="_blank"]::after {
  content: " ↗";
  font-size: .85em;
  opacity: .7;
}

/* ---------- 手机端：汉堡按钮 + 可收起侧栏 ----------
   纯 CSS：隐藏的 checkbox 记录开关状态，label 负责切换。
   抽屉与遮罩默认 display:none，只有 :checked 时才显示。 */
.mnav { display: none; }

@media (max-width: 800px) {
  .mnav { display: block; }

  /* 真正的开关：藏起来但保留可访问性 */
  .mnav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* 汉堡按钮：固定右上角，不占文档流 */
  .mnav-btn {
    position: fixed;
    top: 13px;
    right: 14px;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  .mnav-bars { display: grid; gap: 3px; }
  .mnav-bars i {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--text);
  }

  /* 默认都藏起来 */
  .mnav-overlay,
  .mnav-drawer { display: none; }

  /* 打开时才出现 */
  .mnav-toggle:checked ~ .mnav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10, 12, 15, .55);
    cursor: pointer;
  }

  .mnav-toggle:checked ~ .mnav-drawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    width: min(84vw, 320px);
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 24px;
    background: var(--panel);
    border-left: 1px solid var(--line);
    box-shadow: -14px 0 40px rgba(0, 0, 0, .28);
    overflow-y: auto;
    animation: mnav-in .22s ease-out;
  }

  /* 打开后把汉堡藏掉，避免和抽屉里的关闭按钮打架 */
  .mnav-toggle:checked ~ .mnav-btn { visibility: hidden; }

  @keyframes mnav-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  .mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--line);
  }

  .mnav-title {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute);
  }

  .mnav-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    color: var(--text-dim);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    cursor: pointer;
  }
  .mnav-close:hover { color: var(--text); border-color: var(--line-strong); }

  .mnav-links {
    display: grid;
    gap: 2px;
    margin: 0;
  }

  .mnav-links a {
    padding: 13px 12px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text);
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    background: transparent;
  }

  .mnav-links a:hover {
    background: var(--bg-2);
    border-left-color: var(--line-2);
  }

  /* 当前页在侧栏里高亮 */
  .mnav-links a.is-active {
    background: var(--gold-soft);
    border-left-color: var(--gold);
  }

  .mnav-cta { margin-top: 14px; }

  /* 手机端把桌面导航整条藏起来，页眉只剩品牌 + 主题按钮 */
  .site-header .nav { display: none; }
  .site-header .header-cta { display: none; }
  .site-header .bar { flex-wrap: nowrap; min-height: 60px; }
}

/* ---------- 工具箱入口：模块卡片 ---------- */
.module-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.module-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 24px 22px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.module-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* 每张卡一个主题色，和作品卡片的做法一致 */
.module-card--img   { border-top-color: var(--gold); }
.module-card--video { border-top-color: var(--lapis); }
.module-card--ext   { border-top-color: var(--diamond); }

.module-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.module-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}

.module-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
}

.module-go {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.module-card:hover .module-go { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 特性网格（matoga 页）----------
   类名用 tool-feature*，不要用 .feature ——
   那个名字已经被首页「我们做什么」的横向特征行占用了（display:flex），
   重名会把标题挤成竖排。 */
.tool-feature-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.tool-feature {
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tool-feature > b {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text);
}

.tool-feature > p {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.tool-feature ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.tool-feature li { margin-bottom: 5px; }

.tool-feature code,
.code-block code,
.note code {
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 1px 5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
}

/* 安装命令块 */
.code-block {
  margin: 0 0 10px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.8;
}

.code-block code {
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}

/* 单张界面截图（matoga 页） */
.shot-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
}

.shot-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* ---------- 公告列表 ---------- */
.notice-list { display: grid; gap: 14px; }

.notice {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.notice:hover { box-shadow: var(--shadow-sm); }

.notice--green    { border-left-color: var(--green); }
.notice--gold     { border-left-color: var(--gold); }
.notice--diamond  { border-left-color: var(--diamond); }
.notice--redstone { border-left-color: var(--redstone); }

/* 日期用等宽大字，像终末地的数据栏 */
.notice-date {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-mute);
  padding-top: 4px;
  border-right: 1px solid var(--line);
}

.notice-date b {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -.02em;
}

.notice-body h3 {
  font-size: 17px;
  margin: 0 0 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.notice-body > p {
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0 0 10px;
}

.notice-body ul { color: var(--text-dim); font-size: 14.5px; margin-bottom: 10px; }

.notice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

/* 列表只给标题和摘要，全文在 article.html 里 */
.notice-body h3 a {
  color: inherit;
  text-decoration: none !important;
  background-image: none !important;
  transition: color .2s ease;
}

.notice-body h3 a:hover { color: var(--gold-dk); }

.notice-excerpt {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.8;
  margin: 0;
}

.notice-more {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--text-dim);
  text-decoration: none !important;
  background-image: none !important;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.notice-more:hover {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* ---------- 公告详情页 ---------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-mute);
}

.article-body {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--text-dim);
}

.article-body p { margin: 0 0 1.1em; }
.article-body p:last-child { margin-bottom: 0; }
.article-body b,
.article-body strong { color: var(--text); }
.article-body ul,
.article-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.article-body li { margin-bottom: .5em; }
.article-body a { color: var(--text); }

/* 公告正文里的配图 */
.article-body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1.3em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}

/* ---------- 标签页 ---------- */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--line);
  max-width: 100%;
  overflow-x: auto;
}

.tab {
  position: relative;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-mute);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}

.tab:hover { color: var(--text); }

.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--gold);
  background: transparent;
}

.tab-panel[hidden] { display: none; }

/* ---------- 联系方式 ---------- */
.contact-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.contact-item:last-child { border-bottom: 0; }
.contact-item[hidden] { display: none; }

.contact-item .icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

.contact-item .info { min-width: 0; flex: 1; }

.contact-item .info span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.contact-item .info b {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: .01em;
  word-break: break-all;
  color: var(--text);
}

/* 长网址（如 GitHub 仓库地址）在窄栏里降一档字号，断行好看些 */
.contact-item .info b.is-long { font-size: 13px; line-height: 1.5; }

.copy-btn {
  flex-shrink: 0;
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-dim);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s ease;
}

.copy-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel); }
.copy-btn.is-done { color: var(--ok-fg); border-color: var(--ok-line); background: var(--ok-bg); }

/* ---------- 步骤 ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 18px 20px 18px 72px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 14.5px;
  margin: 0;
}

.steps li:last-child { border-bottom: 0; }

/* 编号：等宽 + 黄条，终末地式的“工序号” */
.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 20px;
  top: 19px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 3px;
  border-bottom: 3px solid var(--gold);
}

.steps li b { color: var(--text); }

/* ---------- 提示条 ---------- */
.callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  font-size: 14px;
  color: var(--text-dim);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  margin: 20px 0;
}

.callout .icon { flex-shrink: 0; align-self: start; font-size: 17px; color: var(--gold-dk); }
.callout b { color: var(--text); }

/* ---------- 表格 ---------- */
.table-scroll { overflow-x: auto; margin: 0 0 1em; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 460px;
}

th, td {
  padding: 11px 14px;
  text-align: left;
  border: 1px solid var(--line);
}

th {
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

td { color: var(--text-dim); background: var(--panel); }
td code { white-space: nowrap; }

/* ---------- 页脚 ---------- */
.site-footer {
  margin-top: 40px;
  padding: 48px 0 28px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 14px;
  color: var(--text-dim);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 32px;
  margin-bottom: 30px;
}

.footer-grid h4 {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--text-dim); border-bottom-color: transparent; }
.footer-grid a:hover { color: var(--text); border-bottom-color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-mute);
}

/* ============================================================
   视觉改版：往终末地首页那种「档案 / 工程」感推
   ① 区块标题编号化   — 01  作品展示 ······· SHOWCASE
   ② 超大英文展示字   实心 + 描边
   ③ 右下切角
   ④ 统计块数字加大、标签等宽
   ============================================================ */

/* ---------- ① 区块标题编号化 ---------- */
main { counter-reset: sec; }

.section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 9px;
  margin-bottom: 34px;
  padding: 24px 0 3px 16px;
  border-left: 3px solid var(--gold);
  counter-increment: sec;
}

/* 标题上方一条贯穿细线，档案分隔的感觉 */
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line);
}

.section-head::before {
  content: "— " counter(sec, decimal-leading-zero);
  grid-row: 1;
  grid-column: 1;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold-dk);
  white-space: nowrap;
}

.section-head h2 {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  font-size: 31px;
  letter-spacing: -.02em;
}

/* kicker 从标题上方挪到同一行的最右侧 */
.section-head .kicker {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .26em;
  color: var(--text-mute);
}

.section-head p {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* ---------- ② 超大英文展示字 ---------- */
.hero-display {
  margin: 0 0 34px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 70px);
  line-height: .87;
  letter-spacing: -.035em;
  text-transform: uppercase;
  /* 长单词宁可缩字号也别溢出 */
  overflow-wrap: break-word;
}

.hero-display span { display: block; }

/* 第二行描边：不填色，只留轮廓 */
.hero-display .hd-out {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--text);
}

/* 个别浏览器不支持描边时退回灰字，别变成看不见 */
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .hero-display .hd-out { color: var(--text-mute); }
}

/* 英文展示字接管了视觉重心，中文标题降为副标题 */
.hero .hero-title {
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.5;
  margin: 0 0 16px;
  letter-spacing: -.01em;
}

/* ---------- ③ 右下切角 ---------- */
.panel,
.card,
.module-card,
.officer,
.dept,
.tool-feature,
.hero-figure {
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* 图片卡片：切它的媒体框，别切到下面的文字 */
.work-media,
.shot-btn img {
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* 按钮小，切角也小 */
.btn {
  --cut: 8px;
  position: relative;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* 切角本身在白底上是看不出来的，沿斜边补一条 1px 线让它显形。
   起点锚在右端点上、整体落在框内，否则会被父级的 overflow:hidden 裁掉。
   .hero-figure 的 ::after 已被黄角标占用，这里改用 ::before。 */
.panel::after,
.card::after,
.module-card::after,
.officer::after,
.dept::after,
.tool-feature::after,
.work-media::after,
.hero-stats::after,
.btn::after,
.hero-figure::before {
  content: "";
  position: absolute;
  right: 0;
  top: calc(100% - var(--cut));
  width: calc(var(--cut) * 1.4142);
  height: 1px;
  background: var(--line-2);
  transform-origin: 100% 50%;
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 3;
}

/* ---------- ④ 统计块 ---------- */
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
  margin-bottom: 9px;
}

.stat span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--text-mute);
}

/* 统计条整体也切个角 */
.hero-stats {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* ---------- ⑤ 首页：整幅大图 hero ---------- */
.hero--banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(86vh, 780px);
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.hero--banner .hero-figure {
  position: absolute;
  /* 比 hero 大一圈，给视差位移留余量，平移时不会露出边缘 */
  inset: -4%;
  z-index: 0;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: none;
  will-change: transform;
}

/* 当背景用时不要右下切角，也不要那条黄角标 */
.hero--banner .hero-figure::before,
.hero--banner .hero-figure::after {
  content: none;
  display: none;
}

.hero--banner .hero-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  display: block;
  opacity: 0;
  /* 轮换只用交叉淡入，不做位移，避免糊 */
  transition: opacity 1.2s ease;
}

/* 每张图轮到时缓慢推近一点，画面不死板（14 秒走完，和 6 秒换图错开） */
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.hero--banner .hero-figure img.is-active {
  opacity: 1;
  animation: hero-drift 14s cubic-bezier(.25, .1, .25, 1) forwards;
}

/* 渐隐遮罩：左侧接近纯色，保证深色文字读得清；右侧露出照片。
   颜色全部由 var(--bg) 混合得出，深浅主题自动跟着变，不另加色值变量。 */
.hero--banner .hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 54%, var(--bg) 100%),
    linear-gradient(to right,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 95%, transparent) 32%,
      color-mix(in srgb, var(--bg) 64%, transparent) 52%,
      color-mix(in srgb, var(--bg) 20%, transparent) 74%,
      transparent 100%);
}

.hero--banner .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 92px;
  padding-bottom: 56px;
}

/* 正文不跟着照片铺满整幅，给右侧留出画面 */
.hero-copy { max-width: 660px; }

/* ---------- ⑥ 页面切换动效 ----------
   进场是一条长缓出的位移 + 轻微模糊；离场只做很短的收缩，不让人等。
   main 里没有 position:fixed 的元素（灯箱、手机侧栏都在 main 外），
   所以这里的 transform / filter 不会破坏它们的定位。 */
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes page-out {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(4px);
  }
}

main {
  animation: page-in .58s cubic-bezier(.16, 1, .3, 1) both;
}

/* 离场直接换成另一条动画：进场那条带 fill: both 会一直持有 opacity:1，
   用 transition 改不动它，只有替换 animation 才生效。 */
body.is-leaving main {
  animation: page-out .2s ease forwards;
}

/* ---------- ⑦ 交互动效：按钮与卡片的平滑反馈 ----------
   统一用同一条缓出曲线，时长按元素大小区分：按钮最快，卡片稍慢。 */
.btn {
  transition:
    transform .22s cubic-bezier(.16, 1, .3, 1),
    box-shadow .3s cubic-bezier(.16, 1, .3, 1),
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    opacity .2s ease;
}

.btn:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 22, 26, .16);
}

/* 按下时回落一点点，给一个"被按住"的实感 */
.btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 6px rgba(20, 22, 26, .12);
  transition-duration: .08s;
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* 作品卡片：悬停微抬，封面缓慢推近 */
.work {
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}

.work:hover { transform: translateY(-4px); }

.work-media { overflow: hidden; }

.work-media img {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

.work:hover .work-media img { transform: scale(1.045); }

/* 工具箱模块卡片同样处理 */
.module-card {
  transition:
    transform .34s cubic-bezier(.16, 1, .3, 1),
    border-color .2s ease,
    background-color .2s ease;
}

.module-card:hover { transform: translateY(-4px); }

/* ---------- ⑧ 子页面「档案」页头 ----------
   对应参考图的结构：小标签 → 标题 → 超大描边英文 → 细框描述块 → 数字带 → INDEX 行式索引 */
.hero--page {
  padding: 44px 0 0;
  border-bottom: 1px solid var(--line);
}

/* 有了超大编号压阵，中文标题也要跟上份量 */
.hero--page h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}

/* 中文标题下面压一层描边英文，和首页的超大展示字呼应 */
.page-head__code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.page-head__code span { color: var(--line-2); }
.page-head__code b { color: var(--gold-dk); font-weight: 700; }

/* 超大描边编号：参考图里那个压在标题上方的 01 */
.page-head__num {
  margin: 0 0 .04em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(88px, 13.5vw, 184px);
  line-height: .78;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--line-2);
  user-select: none;
}

@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
  .page-head__num { color: var(--line-2); }
}

/* 顶部导航：中文下面一行小英文 */
.nav a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.15;
}

.nav a small {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color .2s ease;
}

.nav a:hover small,
.nav a.is-active small { color: var(--gold-dk); }

/* 细框描述块：参考图里那段带边框的介绍 */
.page-note {
  max-width: 64ch;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%
  );
}

.page-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-dim);
}

.page-note p + p { margin-top: .85em; }

/* 细框块同样补一条斜边线，切角才看得出来 */
.page-note { position: relative; }

.page-note::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(100% - 12px);
  width: calc(12px * 1.4142);
  height: 1px;
  background: var(--line-2);
  transform-origin: 100% 50%;
  transform: rotate(-45deg);
  pointer-events: none;
}

/* INDEX 行式索引：编号 + 标题 + 英文 + 箭头，点击跳到对应区块 */
.page-index {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

.page-index[hidden] { display: none; }

.page-index__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line-2);
}

.page-index__row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none !important;
  background-image: none !important;
  transition:
    background-color .2s ease,
    padding-left .28s cubic-bezier(.16, 1, .3, 1);
}

.page-index__row:last-child { border-bottom: 0; }

.page-index__row:hover {
  background: var(--bg-2);
  padding-left: 20px;
}

.page-index__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold-dk);
}

.page-index__t {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.page-index__en {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.page-index__go {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mute);
  text-align: right;
  transition: color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.page-index__row:hover .page-index__go {
  color: var(--text);
  transform: translateY(2px);
}

/* ---------- ⑨ 条例与文件清单 ---------- */
.doc-list {
  border-top: 1px solid var(--line-2);
}

.doc-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none !important;
  background-image: none !important;
  transition:
    background-color .2s ease,
    padding-left .28s cubic-bezier(.16, 1, .3, 1);
}

.doc-row:hover {
  background: var(--bg-2);
  padding-left: 20px;
}

.doc-row__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold-dk);
}

.doc-row__t {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.doc-row__go {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-mute);
  text-align: right;
  transition: color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.doc-row:hover .doc-row__go {
  color: var(--text);
  transform: translate(2px, -2px);
}

/* ============================================================
   ⑩ 毛玻璃
   只用在「浮在内容或图片之上」的那几层：页眉、首页 hero 的徽章与统计、
   标签页条、手机侧栏、截图灯箱。内容块本身不加，否则整页会发灰。
   ============================================================ */

/* 顶部页眉：更通透的磨砂 */
.site-header {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: saturate(190%) blur(18px);
  backdrop-filter: saturate(190%) blur(18px);
}

/* 首页 hero 上的小徽章 */
.hero--banner .hero-badge {
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-color: color-mix(in srgb, var(--line-2) 70%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

/* 首页 hero 的统计条：透出底图 */
.hero--banner .stat {
  background: color-mix(in srgb, var(--bg) 54%, transparent);
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* 标签页条：压住下面滚动的卡片 */
.tabs {
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 手机侧栏：抽屉与遮罩都做磨砂 */
.mnav-toggle:checked ~ .mnav-drawer {
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}

.mnav-toggle:checked ~ .mnav-overlay {
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 截图灯箱：背景磨砂，图本身保持锐利 */
.lightbox {
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* 筛选 chip：轻玻璃，仅在有底色的背景上看得出来 */
.chip {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 浏览器不支持 backdrop-filter 时退回不透明底，别让文字压在图片上看不清 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg); }
  .hero--banner .hero-badge { background: var(--bg); }
  .hero--banner .stat { background: var(--panel); }
  .tabs { background: var(--bg); }
  .chip { background: var(--bg-2); }
  .mnav-toggle:checked ~ .mnav-drawer { background: var(--panel); }
  .mnav-toggle:checked ~ .mnav-overlay { background: rgba(10, 12, 15, .55); }
  .lightbox { background: rgba(10, 12, 15, .88); }
}

/* ---------- ⑪ 页脚：灰斜纹底 ----------
   原来是页面级方格网，页脚改成一条条从右上往左下的细斜纹。
   颜色由 var(--text) 混出来，深浅主题都跟着变。 */
.site-footer {
  background-color: var(--panel-2);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--text) 6%, transparent) 7px 8px
  );
}

/* ---------- ⑫ 三处补充玻璃 ---------- */

/* 导航悬停：磨砂胶囊 */
.nav a:hover {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}

/* 作品卡片悬停：封面盖一层玻璃 */
.work { position: relative; }

.work-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 12%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  backdrop-filter: blur(3px) saturate(130%);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1);
}

.work:hover .work-media::before { opacity: 1; }

/* 页面切走：一层玻璃渐变遮罩，盖住整屏再跳转 */
body.is-leaving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 34%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  animation: veil-in .2s ease forwards;
}

@keyframes veil-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav a:hover { background: var(--bg-2); }
  .work-media::before { display: none; }
  body.is-leaving::after { display: none; }
}

/* 作品列表为空时的提示 */
.works-empty {
  grid-column: 1 / -1;
  padding: 28px 22px;
  color: var(--text-dim);
  font-size: 14.5px;
  background: var(--panel);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  text-align: center;
}

/* 负责人卡片轻轻抬起 */
.officer {
  transition:
    transform .28s cubic-bezier(.16, 1, .3, 1),
    border-color .2s ease,
    background-color .2s ease;
}

.officer:hover { transform: translateY(-2px); }

/* 筛选 chip 与标签页：颜色平滑过渡，按下有回弹 */
.chip,
.tab {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .18s cubic-bezier(.16, 1, .3, 1);
}

.chip:active,
.tab:active { transform: scale(.97); }

/* 复制按钮与主题开关也统一一下 */
.copy-btn,
.theme-toggle {
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .18s cubic-bezier(.16, 1, .3, 1);
}

.copy-btn:active,
.theme-toggle:active { transform: scale(.94); }

/* ---------- 改版的手机端适配 ---------- */
@media (max-width: 800px) {
  :root { --cut: 10px; }

  /* 手机上宽度不够：编号 + 标题两列，kicker 让位 */
  .section-head {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
  }

  .section-head .kicker { display: none; }

  .hero-display {
    font-size: clamp(26px, 7.4vw, 42px);
    margin-bottom: 14px;
  }

  .hero .hero-title { font-size: clamp(18px, 4.6vw, 22px); }

  .btn { --cut: 7px; }

  /* 整幅 hero 在手机上改成「上面一条图 + 下面正文」，文字不压在照片上 */
  .hero--banner {
    display: block;
    min-height: 0;
  }

  .hero--banner .hero-figure { inset: 0 0 auto 0; height: 46vh; }

  .hero--banner .hero-veil {
    inset: 0 0 auto 0;
    height: 46vh;
    background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
  }

  .hero--banner .wrap {
    padding-top: calc(46vh + 18px);
    padding-bottom: 34px;
  }

  .hero-copy { max-width: none; }
}

/* ---------- ⑬ 子页面整幅头图 ----------
   和首页同一套：背景图 + 渐隐遮罩 + 内容压在图上。
   这里只覆盖高度与内边距，图与遮罩的样式复用 .hero--banner。 */
.hero--page.hero--banner {
  padding: 0;
  min-height: min(74vh, 700px);
  border-bottom: 1px solid var(--line);
}

.hero--page.hero--banner .wrap {
  padding-top: 70px;
  padding-bottom: 46px;
}

/* 子页面内容比首页多（编号行 + 大字 + 标题 + 描述块 + 索引），
   遮罩只压左侧三分之一保文字可读，右侧露出照片。 */
.hero--page.hero--banner .hero-veil {
  background:
    linear-gradient(to bottom, transparent 64%, var(--bg) 100%),
    linear-gradient(to right,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 94%, transparent) 30%,
      color-mix(in srgb, var(--bg) 58%, transparent) 50%,
      color-mix(in srgb, var(--bg) 14%, transparent) 76%,
      transparent 100%);
}

/* 子页面 hero 常比视口高，照片按 cover 缩放后重心会掉到折叠线以下，
   看到的多半是天空。把裁切位置往上提，让画面主体留在首屏。 */
.hero--page.hero--banner .hero-figure img {
  object-position: 50% 28%;
}

/* 索引块压在照片上，右侧标签会糊，垫一层玻璃 */
.hero--page.hero--banner .page-index {
  margin-top: 22px;
  padding: 4px 12px;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

@media (max-width: 800px) {
  .hero--page.hero--banner {
    min-height: 0;
  }

  .hero--page.hero--banner .wrap {
    padding-top: calc(42vh + 18px);
    padding-bottom: 30px;
  }

  .hero--page.hero--banner .hero-figure,
  .hero--page.hero--banner .hero-veil {
    height: 42vh;
  }

  .hero--page.hero--banner .hero-veil {
    background: linear-gradient(to bottom, transparent 34%, var(--bg) 100%);
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 800px) {
  body { font-size: 14.5px; }

  .site-header .bar {
    flex-wrap: wrap;
    padding: 10px 0;
    min-height: 0;
    gap: 10px;
  }

  .brand-text span { display: none; }

  .theme-toggle { margin-left: auto; margin-right: 92px; }

  .hero { padding: 56px 0 46px; }
  .hero-stats { margin-top: 34px; }

  /* Hero 收起为单列，图放到文字下面 */
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }

  .work-layout { grid-template-columns: 1fr; gap: 26px; }

  /* 工具箱：两栏收成一栏。
     不收的话每栏只剩一百多像素，数值、群号这类较长文字
     会被挤成一字一行。 */
  .tool { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* 数值列在窄屏至少留出能放下一串数字的宽度 */
  .stat-list > div { grid-template-columns: minmax(0, 68px) minmax(0, 1fr); gap: 10px; }
  .stat-list dd { font-size: 12.5px; }

  .invest-band { grid-template-columns: 1fr; gap: 22px; padding: 22px; }

  .work-hero img { aspect-ratio: 4 / 3; }

  .shot-btn img { aspect-ratio: 4 / 3; }

  .lightbox { padding: 20px 14px; }
  .lightbox-close { top: 10px; right: 12px; }

  .section { padding: 48px 0; }
  .section--tight { padding: 32px 0; }

  .notice { grid-template-columns: 1fr; gap: 12px; padding: 18px 18px; }

  .notice-date {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .notice-date b { font-size: 17px; }

  .steps li { padding: 15px 16px 15px 60px; }
  .steps li::before { left: 16px; top: 16px; }

  .contact-item { padding: 13px 14px; gap: 12px; }
  .contact-item .info b { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- 打印 ---------- */
@media print {
  body { background: #fff; color: #000; background-image: none; }
  .site-header, .site-footer, .btn, .tabs, .theme-toggle, .copy-btn { display: none; }
  .panel, .card, .notice, .contact-item, .steps li { border-color: #bbb; background: #fff; }
  a { border-bottom: 0; }
}