/* ==========================================================================
   设计系统：所有颜色、间距、圆角都是 CSS 变量。换品牌色只改 :root 里的 --brand-*。
   深色模式跟随系统（prefers-color-scheme），只换变量，不换组件。
   手机优先：先写 375px 的样式，再用 min-width 往大屏幕加。
   ========================================================================== */

/* 本站自带字体（assets/fonts/，OFL 授权）。只含拉丁字符；中文、缅文照样回落到系统字体。 */
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* 品牌色：边境森林绿 + 金盏花黄（东南亚寺庙花环、救援物资的颜色）+ 水蓝 */
  --brand-50: #eaf2ee;
  --brand-100: #cfe2d9;
  --brand-500: #3f8f74;
  --brand-600: #2a6b56;
  --brand-700: #1d4a3e;
  --brand-800: #12322a;
  --marigold: #e9a23b;        /* 只用在深绿底上、或做色块 */
  --marigold-ink: #8a560a;    /* 浅底上的金色文字，对比度 ≥ 4.5:1 */
  --water: #2b6f80;
  --font-display: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-2: #eaf0ed;
  --text: #13221e;
  --muted: #4b5c56;          /* 在 --bg 和 --surface 上对比度都 ≥ 4.5:1 */
  --line: #d6e0dc;
  --line-strong: #b9c9c2;
  --primary: var(--brand-700);
  --primary-hover: var(--brand-800);
  --on-primary: #ffffff;
  --link: var(--brand-700);
  --ring: 0 0 0 3px rgb(233 162 59 / 0.6);

  --success-bg: #ecfdf5; --success-text: #065f46; --success-line: #a7f3d0;
  --error-bg: #fef2f2;   --error-text: #991b1b;   --error-line: #fecaca;
  --info-bg: #eff6ff;    --info-text: #1e40af;    --info-line: #bfdbfe;
  --danger: #b91c1c;     --danger-hover: #991b1b;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 16px rgb(15 23 42 / 0.06);
  --space: 1rem;
  --container: 1120px;
  --header-h: 60px;

  /* 系统字体，不加载网络字体（缅甸网速慢）。缅文字体放在中文之后作为后备。 */
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
          "Myanmar Text", "Noto Sans Myanmar", Padauk, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --leading: 1.6;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1916;
    --surface: #14231f;
    --surface-2: #1a2d28;
    --text: #e3ece8;
    --muted: #a0b3ac;
    --line: #253a34;
    --line-strong: #36524a;
    --primary: #8fd0b4;
    --primary-hover: #b3e2cd;
    --on-primary: #0b1a16;
    --link: #9fd8bf;
    --marigold-ink: #f0b85c;
    --success-bg: #052e22; --success-text: #a7f3d0; --success-line: #065f46;
    --error-bg: #3b0d0d;   --error-text: #fecaca;   --error-line: #7f1d1d;
    --info-bg: #0c1a3d;    --info-text: #bfdbfe;    --info-line: #1e3a8a;
    --danger: #ef4444;     --danger-hover: #f87171;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
    color-scheme: dark;
  }
}

/* 缅文字形高、上下都有附加符号：行距至少 2.0，标题和按钮也要放宽，
   否则上一行的下标会压住下一行的上标。缅文也不能加字距（会拆散叠字）。 */
html[lang="my"] { --leading: 2; }
html[lang="my"] :is(h1, h2, h3, .btn, .badge, .menu > summary) { line-height: 1.8; }
html[lang="my"] :is(.table th, .nav-group-title) { letter-spacing: normal; text-transform: none; }

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  line-height: var(--leading);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;          /* 长邮箱、长缅文词不撑破布局 */
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }
pre { overflow: auto; background: var(--surface-2); padding: 0.75rem; border-radius: var(--radius-sm); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.skip-link { position: absolute; left: -999px; top: 0.5rem; background: var(--surface); padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { left: 0.5rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.inline { display: inline; margin: 0; }
.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; }

/* ---------- 布局 ---------- */
.container { width: min(var(--container), 100% - 2rem); margin-inline: auto; }
.main { flex: 1; padding-block: 1.5rem 3rem; }
.narrow { max-width: 440px; margin-inline: auto; }
.stack { display: grid; gap: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: 1fr; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }

/* ---------- 头部导航 ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.header-row { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; margin-right: auto; }
.site-nav { display: none; width: 100%; flex-direction: column; gap: 0.25rem; padding-bottom: 1rem; }
.site-nav.is-open { display: flex; }
.site-nav a, .site-nav .link-button { color: var(--text); text-decoration: none; padding: 0.5rem 0.25rem; }
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.site-nav .btn { color: var(--on-primary); text-align: center; }
.nav-spacer { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text); cursor: pointer;
}
.burger, .burger::before, .burger::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; flex-direction: row; align-items: center; width: auto; flex: 1; padding: 0; gap: 0.5rem; }
  .nav-spacer { display: block; flex: 1; }
  .brand { margin-right: 1rem; }
}

/* 下拉菜单（用 <details>，不需要 JS 也能用） */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; padding: 0.5rem 0.25rem; color: var(--text); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: " ▾"; color: var(--muted); }
.menu-panel {
  display: flex; flex-direction: column; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 0.35rem;
}
.menu-panel a { padding: 0.45rem 0.75rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.menu-panel a:hover, .menu-panel a[aria-current="true"] { background: var(--surface-2); }
@media (min-width: 900px) {
  .menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; }
}

.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--muted); font-size: 0.9rem; }

/* ---------- 手机底部导航栏（partials/tab-bar.php） ----------
   固定在屏幕底部，避开 iPhone 底部的横条（safe-area，需要 head 里的 viewport-fit=cover）。
   body 底部留出同样的高度，最后一行内容不会被挡住。≥900px 隐藏，用顶部导航。 */
:root { --tab-bar-h: 60px; }
html[lang="my"] { --tab-bar-h: 68px; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
body.has-tab-bar { padding-bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom)); }
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  min-height: calc(var(--tab-bar-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tab-bar a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tab-bar-h); padding: 4px 2px;
  color: var(--muted); text-decoration: none; font-size: 0.75rem; line-height: 1.3;
}
.tab-bar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="my"] .tab-bar a { line-height: 1.8; }
.tab-bar svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-bar a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.tab-bar a[aria-current="page"] svg { stroke-width: 2.2; }
@media (min-width: 900px) {
  .tab-bar { display: none; }
  body.has-tab-bar { padding-bottom: 0; }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding: 0.55rem 1.1rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  color: var(--on-primary); background: var(--primary);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-small { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 0.92rem; }
.btn-block { width: 100%; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- 表单 ---------- */
label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--text);
  width: 100%; min-height: 44px; padding: 0.55rem 0.75rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input[type="checkbox"], input[type="radio"] { width: 1.15rem; min-height: 0; height: 1.15rem; accent-color: var(--primary); }
input[type="file"] { padding: 0.4rem; }
input:disabled { background: var(--surface-2); color: var(--muted); }
textarea { resize: vertical; line-height: var(--leading); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.hint { font-weight: 400; color: var(--muted); font-size: 0.88rem; }
.code-input { font-family: var(--font-mono); letter-spacing: 0.15em; max-width: 14rem; }
.row-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.row-form input { flex: 1 1 10rem; }
.form-card h1 { font-size: 1.5rem; }
.form-links { margin: 1rem 0 0; text-align: center; font-size: 0.95rem; }
.divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); margin: 1rem 0; font-size: 0.9rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- 卡片、提示、徽章 ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.card-body { padding: 1rem; }
.callout { border-color: var(--brand-500); }
.post-card { padding: 0; overflow: hidden; color: var(--text); text-decoration: none; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card h3 { margin-bottom: 0.25rem; }
.post-card time { color: var(--muted); font-size: 0.88rem; }
.post-card:hover h3 { color: var(--primary); }

.alert {
  display: flex; align-items: flex-start; gap: 0.75rem; justify-content: space-between;
  padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); border: 1px solid;
}
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-line); }
.alert-error { background: var(--error-bg); color: var(--error-text); border-color: var(--error-line); }
.alert-info { background: var(--info-bg); color: var(--info-text); border-color: var(--info-line); }
.alert-close { background: none; border: 0; font-size: 1.25rem; line-height: 1; color: inherit; cursor: pointer; padding: 0 0.25rem; }

.badge { display: inline-block; white-space: nowrap; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.badge-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-line); }
.badge-danger { background: var(--error-bg); color: var(--error-text); border-color: var(--error-line); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); font-weight: 600; }
.table tr.is-inactive td { opacity: 0.6; }
@media (max-width: 640px) { .hide-sm { display: none; } }

.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; }

/* ---------- 页面块 ---------- */
.hero { padding: 2rem 0 2.5rem; }
.hero .lead { font-size: 1.15rem; color: var(--muted); max-width: 40rem; }
.prose { max-width: 42rem; margin-inline: auto; }
.prose .cover { border-radius: var(--radius); margin-bottom: 1.5rem; }
.error-page { padding-top: 3rem; }
.error-code { font-size: 3.5rem; font-weight: 800; color: var(--line-strong); margin: 0; }
.debug { text-align: left; font-size: 0.8rem; max-height: 50vh; }

/* 两步验证设置 */
.steps { display: grid; gap: 1.25rem; padding-left: 1.25rem; margin: 0; }
.qr { background: #fff; display: inline-block; padding: 0.5rem; border-radius: var(--radius-sm); margin: 0.75rem 0; }
.qr svg { display: block; width: 200px; height: 200px; }
.secret { font-size: 1.05rem; letter-spacing: 0.08em; word-break: break-all; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0; list-style: none; }
.codes code { display: block; padding: 0.4rem 0.6rem; background: var(--surface-2); border-radius: var(--radius-sm); text-align: center; font-size: 1rem; }
.only-mobile { display: block; }
@media (min-width: 900px) { .only-mobile { display: none; } }


/* ==========================================================================
   作品集单页（app/views/site/home.php）
   一处大胆：首屏用她自己那句话排成三行大字；其余保持安静——细线、留白、少装饰。
   ========================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.main-wide { flex: 1; }
.main-wide > .alert { width: min(var(--container), 100% - 2rem); margin: 1rem auto; }
.main-wide section[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }
h1, h2, h3, .thesis, .contact-big, .bars strong, .impact-total strong { font-family: var(--font-display); }
h3 { font-weight: 700; letter-spacing: 0.005em; }
.brand { font-family: var(--font-display); font-size: 1.2rem; color: var(--primary); }
.site-nav a:not(.btn):hover { color: var(--primary); }
.footer-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--marigold-ink); margin: 1.25rem 0 0.5rem; }
.muted { color: var(--muted); }

.btn { border-radius: 999px; padding-inline: 1.3rem; }
.btn-marigold { background: var(--marigold); color: #1f1402; }
.btn-marigold:hover { background: #f2b457; }

/* ---------- 首屏 ---------- */
.hero { padding: 2rem 0 2.5rem; background: var(--bg); }
.hero-grid {
  display: grid; gap: 1.5rem 3rem;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-areas: "thesis thesis" "actions actions" "photo name";
  align-items: center;
}
.nameplate { grid-area: name; }
@media (max-width: 899px) {
  .nameplate h1 { font-size: 1.45rem; }
  .nameplate-title { font-size: 0.92rem; line-height: 1.35; }
  .hero-grid { row-gap: 1.75rem; column-gap: 1rem; }
}
.nameplate h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.05; color: var(--primary); margin: 0 0 0.35rem; }
.nameplate-title { font-weight: 600; margin: 0; }
.nameplate-where { color: var(--muted); font-size: 0.92rem; margin: 0.15rem 0 0; }

.thesis {
  grid-area: thesis; margin: 0;
  font-size: clamp(1.75rem, 0.9rem + 4.4vw, 2.4rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.01em;
  display: grid; gap: 0.12em;
}
.thesis-lead { color: var(--muted); font-weight: 600; font-size: 0.55em; letter-spacing: 0.02em; }
.thesis-row { display: block; text-wrap: balance; }
.thesis-who { color: var(--text); }
.thesis-with { color: var(--primary); position: relative; }
/* 「with solutions,」底下那条金色高亮：用背景画，不用伪元素。
   伪元素得靠 z-index 压到文字后面，父级一旦有层叠上下文就会被盖掉（踩过）。
   背景天然在文字后面，而且 background-size 能动画。 */
.thesis-row:nth-child(2) .thesis-with {
  background-image: linear-gradient(color-mix(in srgb, var(--marigold) 55%, transparent), color-mix(in srgb, var(--marigold) 55%, transparent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.18em;
}

.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.portrait { grid-area: photo; margin: 0; width: 88px; }
.portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 6px; }
.portrait figcaption { display: none; }

@media (min-width: 900px) {
  .hero { padding: 4rem 0 4.5rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: end;
    grid-template-areas: "thesis photo" "actions photo" "name photo";
    align-items: end;
  }
  .thesis { align-self: start; font-size: clamp(2.4rem, 0.6rem + 2.9vw, 3.05rem); }
  .nameplate { padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .portrait { width: 100%; align-self: stretch; position: relative; }
  .portrait img { height: 100%; aspect-ratio: auto; min-height: 420px; }
  .portrait::after { content: ""; position: absolute; left: -12px; bottom: -12px; width: 45%; height: 8px; background: var(--marigold); }
  .portrait figcaption { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 1.25rem; }
}

/* 专长条 */
.specialties { background: var(--brand-700); color: #e6efe9; }
.specialties ul { list-style: none; margin: 0 auto; padding: 0.9rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; font-size: 0.88rem; font-weight: 600; }
.specialties li { display: flex; align-items: center; gap: 0.5rem; }
.specialties li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marigold); flex: none; }
@media (prefers-color-scheme: dark) { .specialties { background: #173a31; } }

/* ---------- 分段 ---------- */
.band { padding: 3.25rem 0; }
.band-surface { background: var(--surface); border-block: 1px solid var(--line); }
.section-h { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.35rem); line-height: 1.1; color: var(--primary); margin: 0 0 1.75rem; max-width: 22ch; }
.section-h::before { content: ""; display: block; width: 2.25rem; height: 4px; background: var(--marigold); margin-bottom: 0.9rem; }
.section-h-sub { margin-top: 4.5rem; }
@media (min-width: 900px) { .section-h-sub { margin-top: 7rem; } }
.lede { font-size: 1.05rem; max-width: 46rem; }
@media (min-width: 900px) { .band { padding: 5rem 0; } }

.band-forest { background: var(--brand-800); color: #dbe7e1; }
.band-forest .section-h { color: #fff; }
.band-forest .muted { color: #a9c0b6; }
@media (prefers-color-scheme: dark) { .band-forest { background: #173a31; } .stats li { background: #173a31; } }

/* 介绍 */
.intro { max-width: 46rem; }
.intro-lead { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--text); }
@media (min-width: 900px) {
  .intro { max-width: none; columns: 2; column-gap: 3rem; }
  .intro-lead { column-span: all; max-width: 44rem; margin-bottom: 1.5rem; }
  .intro p { break-inside: avoid; }
}

/* ---------- 招牌：项目轨道（真实的先后顺序，所以编号） ---------- */
.track-h { font-size: 1.05rem; margin: 3rem 0 1.25rem; color: var(--muted); font-family: var(--font); font-weight: 600; }
.track { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 0; position: relative; }
.track li { counter-increment: step; position: relative; padding: 0 0 1.1rem 2.75rem; font-weight: 600; }
.track li::before {
  content: counter(step); position: absolute; left: 0; top: -0.1rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--primary); color: var(--primary);
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.track li::after { content: ""; position: absolute; left: calc(0.95rem - 1px); top: 1.8rem; bottom: 0; width: 2px; background: var(--line-strong); }
.track li:last-child { padding-bottom: 0; }
.track li:last-child::after { display: none; }
.track li:last-child::before { background: var(--marigold); border-color: var(--marigold); color: #1f1402; }
@media (min-width: 900px) {
  .track { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .track li { padding: 2.75rem 0.75rem 0 0; font-size: 0.95rem; line-height: 1.3; }
  .track li::before { top: 0; left: 0; }
  .track li::after { left: 1.9rem; right: 0; top: calc(0.95rem - 1px); bottom: auto; width: auto; height: 2px; }
  .track li:last-child::after { display: none; }
  .track-long li { font-size: 0.85rem; }
}
.track-long { margin-bottom: 3rem; }

/* ---------- 列表 ---------- */
.ruled-list { list-style: none; padding: 0; margin: 0; }
.ruled-list li { padding: 0.65rem 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.ruled-list li:first-child { border-top: 1px solid var(--line); }
.ruled-light li, .ruled-light li:first-child { border-color: rgb(255 255 255 / 0.16); color: #fff; }
.cols-3, .cols-2, .cols-2-wide { display: grid; column-gap: 2.5rem; }
@media (min-width: 640px) { .cols-2, .cols-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.ruled-list.cols-3 li:nth-child(-n+3), .ruled-list.cols-2 li:nth-child(-n+2) { border-top: 0; }
@media (min-width: 640px) { .ruled-list.cols-3 li:nth-child(-n+2) { border-top: 1px solid var(--line); } }
@media (min-width: 900px) { .ruled-list.cols-3 li:nth-child(-n+3) { border-top: 1px solid var(--line); } }
.ruled-list.cols-3 li:first-child { border-top: 1px solid var(--line); }

.dash-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.dash-list li { position: relative; padding-left: 1.2rem; margin-bottom: 0.35rem; }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.6rem; height: 2px; background: var(--marigold); }
.inline-list { color: var(--muted); margin: 0; }

/* ---------- 经历 ---------- */
.career { list-style: none; padding: 0; margin: 0; }
.career-item { display: grid; gap: 0.25rem 2rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.career-item:last-child { border-bottom: 1px solid var(--line); }
.career-when { margin: 0; font-weight: 700; color: var(--marigold-ink); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.career-body h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem); line-height: 1.15; margin-bottom: 0.3rem; }
.career-role { font-weight: 600; margin: 0 0 0.75rem; }
.career-place { display: block; font-weight: 400; color: var(--muted); font-size: 0.92rem; }
.career-past .career-body h3 { font-size: 1.25rem; }
@media (min-width: 900px) {
  .career-item { grid-template-columns: 11rem 1fr; }
  .career-when { padding-top: 0.35rem; }
}
.dash-list.cols-2-wide { display: block; }
@media (min-width: 900px) { .dash-list.cols-2-wide { columns: 2; column-gap: 2.5rem; } .dash-list.cols-2-wide li { break-inside: avoid; } }

/* ---------- 项目档案 ---------- */
.dossiers { display: grid; }
.dossier { display: grid; gap: 0.5rem 3rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.dossier:last-child { border-bottom: 1px solid var(--line); }
.dossier-head h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.15; margin: 0 0 0.4rem; }
.dossier-place { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--water); }
@media (prefers-color-scheme: dark) { .dossier-place { color: #8ec9d6; } }
.dossier-note { color: var(--muted); border-left: 3px solid var(--marigold); padding-left: 0.9rem; }
.dossier-skills { font-size: 0.92rem; color: var(--muted); margin: 0; }
.dossier-skills .label { display: block; margin: 0 0 0.25rem; }
@media (min-width: 900px) {
  .dossier { grid-template-columns: 19rem 1fr; }
  .dossier-head { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}

/* ---------- 影响：按数量排的横条 ---------- */
.impact-total { font-size: 1.1rem; max-width: 38rem; margin: 0 0 2.25rem; color: #dbe7e1; }
.impact-total strong { display: block; font-size: clamp(3.2rem, 2rem + 6vw, 6rem); line-height: 0.95; color: var(--marigold); margin-bottom: 0.4rem; }
.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.bar-row { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.25rem 1rem; align-items: center; }
.bars strong { font-size: 1.45rem; color: #fff; font-variant-numeric: tabular-nums; }
.bar { height: 10px; background: rgb(255 255 255 / 0.08); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; width: var(--w, 0%); background: var(--marigold); border-radius: 999px; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bars.is-waiting .bar > span { width: 0; }
.bar-label { grid-column: 2; font-size: 0.92rem; color: #b9cdc4; }
@media (min-width: 900px) {
  .bar-row { grid-template-columns: 6rem minmax(0, 1.2fr) minmax(0, 1fr); }
  .bar-label { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) { .bar > span { transition: none; } }
.impact-note { margin: 2rem 0 0; font-size: 0.85rem; color: #a9c0b6; max-width: 46rem; }
.bar-row.w-3 { --w: 3%; } .bar-row.w-4 { --w: 4%; } .bar-row.w-5 { --w: 5%; } .bar-row.w-6 { --w: 6%; } .bar-row.w-7 { --w: 7%; } .bar-row.w-8 { --w: 8%; } .bar-row.w-9 { --w: 9%; } .bar-row.w-10 { --w: 10%; } .bar-row.w-11 { --w: 11%; } .bar-row.w-12 { --w: 12%; } .bar-row.w-13 { --w: 13%; } .bar-row.w-14 { --w: 14%; } .bar-row.w-15 { --w: 15%; } .bar-row.w-16 { --w: 16%; } .bar-row.w-17 { --w: 17%; } .bar-row.w-18 { --w: 18%; } .bar-row.w-19 { --w: 19%; } .bar-row.w-20 { --w: 20%; } .bar-row.w-21 { --w: 21%; } .bar-row.w-22 { --w: 22%; } .bar-row.w-23 { --w: 23%; } .bar-row.w-24 { --w: 24%; } .bar-row.w-25 { --w: 25%; } .bar-row.w-26 { --w: 26%; } .bar-row.w-27 { --w: 27%; } .bar-row.w-28 { --w: 28%; } .bar-row.w-29 { --w: 29%; } .bar-row.w-30 { --w: 30%; } .bar-row.w-31 { --w: 31%; } .bar-row.w-32 { --w: 32%; } .bar-row.w-33 { --w: 33%; } .bar-row.w-34 { --w: 34%; } .bar-row.w-35 { --w: 35%; } .bar-row.w-36 { --w: 36%; } .bar-row.w-37 { --w: 37%; } .bar-row.w-38 { --w: 38%; } .bar-row.w-39 { --w: 39%; } .bar-row.w-40 { --w: 40%; } .bar-row.w-41 { --w: 41%; } .bar-row.w-42 { --w: 42%; } .bar-row.w-43 { --w: 43%; } .bar-row.w-44 { --w: 44%; } .bar-row.w-45 { --w: 45%; } .bar-row.w-46 { --w: 46%; } .bar-row.w-47 { --w: 47%; } .bar-row.w-48 { --w: 48%; } .bar-row.w-49 { --w: 49%; } .bar-row.w-50 { --w: 50%; } .bar-row.w-51 { --w: 51%; } .bar-row.w-52 { --w: 52%; } .bar-row.w-53 { --w: 53%; } .bar-row.w-54 { --w: 54%; } .bar-row.w-55 { --w: 55%; } .bar-row.w-56 { --w: 56%; } .bar-row.w-57 { --w: 57%; } .bar-row.w-58 { --w: 58%; } .bar-row.w-59 { --w: 59%; } .bar-row.w-60 { --w: 60%; } .bar-row.w-61 { --w: 61%; } .bar-row.w-62 { --w: 62%; } .bar-row.w-63 { --w: 63%; } .bar-row.w-64 { --w: 64%; } .bar-row.w-65 { --w: 65%; } .bar-row.w-66 { --w: 66%; } .bar-row.w-67 { --w: 67%; } .bar-row.w-68 { --w: 68%; } .bar-row.w-69 { --w: 69%; } .bar-row.w-70 { --w: 70%; } .bar-row.w-71 { --w: 71%; } .bar-row.w-72 { --w: 72%; } .bar-row.w-73 { --w: 73%; } .bar-row.w-74 { --w: 74%; } .bar-row.w-75 { --w: 75%; } .bar-row.w-76 { --w: 76%; } .bar-row.w-77 { --w: 77%; } .bar-row.w-78 { --w: 78%; } .bar-row.w-79 { --w: 79%; } .bar-row.w-80 { --w: 80%; } .bar-row.w-81 { --w: 81%; } .bar-row.w-82 { --w: 82%; } .bar-row.w-83 { --w: 83%; } .bar-row.w-84 { --w: 84%; } .bar-row.w-85 { --w: 85%; } .bar-row.w-86 { --w: 86%; } .bar-row.w-87 { --w: 87%; } .bar-row.w-88 { --w: 88%; } .bar-row.w-89 { --w: 89%; } .bar-row.w-90 { --w: 90%; } .bar-row.w-91 { --w: 91%; } .bar-row.w-92 { --w: 92%; } .bar-row.w-93 { --w: 93%; } .bar-row.w-94 { --w: 94%; } .bar-row.w-95 { --w: 95%; } .bar-row.w-96 { --w: 96%; } .bar-row.w-97 { --w: 97%; } .bar-row.w-98 { --w: 98%; } .bar-row.w-99 { --w: 99%; } .bar-row.w-100 { --w: 100%; }

/* ---------- 能力 ---------- */
.split { display: grid; gap: 2.5rem; }
.split h3 { font-size: 1.3rem; margin-bottom: 0.25rem; }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ---------- 培训 ---------- */
.training { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 3rem; }
.training > li { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.training h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.training p { margin-bottom: 0.4rem; }
.training-meta { font-size: 0.85rem; font-weight: 600; color: var(--marigold-ink); }
@media (min-width: 760px) { .training { grid-template-columns: 1fr 1fr; } }

/* ---------- 地区、优势 ---------- */
.places { display: grid; gap: 1.5rem 2.5rem; }
.place h3 { font-size: 1.5rem; margin-bottom: 0.3rem; color: var(--primary); }
.place p { margin: 0; color: var(--muted); }
@media (min-width: 640px) { .places { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .places { grid-template-columns: repeat(4, 1fr); } .place { border-left: 1px solid var(--line); padding-left: 1.25rem; } }
.strengths { display: grid; gap: 2rem 2.5rem; }
.strengths h3 { font-size: 1.05rem; color: var(--marigold-ink); font-family: var(--font); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; margin-bottom: 0.5rem; }
@media (min-width: 640px) { .strengths { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .strengths { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 服务 ---------- */
.services { display: grid; gap: 2rem 4rem; }
.services-lede { color: #c4d6ce; max-width: 30rem; margin-bottom: 1.5rem; }
@media (min-width: 900px) { .services { grid-template-columns: 1fr 1.2fr; align-items: start; } }

/* ---------- 联系 ---------- */
.contact-big {
  display: inline-block; font-size: clamp(1.4rem, 0.9rem + 3.2vw, 3rem); font-weight: 700; line-height: 1.1;
  color: var(--text); text-decoration: none; border-bottom: 4px solid var(--marigold); padding-bottom: 0.15rem; margin-bottom: 2rem;
  overflow-wrap: anywhere;
}
.contact-big:hover { color: var(--primary); }
.contact-list { display: grid; gap: 1.25rem 3rem; margin: 0 0 2rem; }
.contact-list dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: var(--muted); }
.contact-list dd { margin: 0.15rem 0 0; font-weight: 500; }
@media (min-width: 700px) { .contact-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .contact-list { grid-template-columns: repeat(4, auto); justify-content: start; } }

/* ---------- 审查后的细节（design-reviewer，2026-09-20） ---------- */
@media (max-width: 899px) { .nav-toggle-staff { display: none; } }
.site-nav .btn-small { min-height: 44px; padding: 0 1.1rem; }
.contact-list dd a, .footer-row a { display: inline-block; padding: 0.6rem 0; }
.contact-big { padding-block: 0.35rem; }
/* 一行不超过约 70 个字母，读起来不累 */
.career-body p, .dossier-body p, .intro p, .training p, .place p, .lede, .impact-note { max-width: 70ch; }
@media (min-width: 640px) { .container { width: min(var(--container), 100% - 4rem); } }

/* ==========================================================================
   高级美化（2026-09-20）
   原则没变：安静的编辑式版面、细线、留白。这一层只加「质感」——
   分层的光、滚动时才长出来的内容、克制的悬停反馈、WhatsApp 入口。
   所有动效都尊重「减少动态效果」；没有 JS 时内容照样全部可见。
   ========================================================================== */

:root {
  --wa: #25d366;             /* WhatsApp 品牌绿，配深色字（白字对比度不够） */
  --wa-ink: #05291b;
  --wa-solid: #1faa59;       /* 浮动按钮用，配白色字形，对比度 ≥ 3:1 */
  --shadow-lift: 0 10px 30px -12px rgb(18 50 42 / 0.28), 0 2px 6px -2px rgb(18 50 42 / 0.12);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --shadow-lift: 0 10px 30px -12px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4); }
}

::selection { background: var(--marigold); color: #1f1402; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); }

/* ---------- 图标（partials/icon.php） ---------- */
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-brand { fill: currentColor; stroke: none; }

/* ---------- 顶部阅读进度条 ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.scroll-progress > span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--marigold), #f5c877);
}
.js .scroll-progress > span { will-change: transform; }

/* ---------- 头部：滚动后变成毛玻璃 ---------- */
.site-header { transition: box-shadow .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
.site-header.is-stuck {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent), 0 10px 30px -18px rgb(18 50 42 / 0.5);
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marigold); flex: none; }
.site-nav a:not(.btn) { position: relative; }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.25rem; height: 2px;
  background: var(--marigold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease);
}
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 899px) { .site-nav a:not(.btn)::after { display: none; } }

/* ---------- 按钮：抬起一点点 ---------- */
.btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-lg { min-height: 52px; font-size: 1.02rem; padding-inline: 1.6rem; }
.btn-whatsapp { background: var(--primary); color: var(--on-primary); }
.btn-whatsapp .icon-brand { width: 1.15em; height: 1.15em; }
/* 所有 :hover 效果都锁在真鼠标下。手机是触屏：点一下之后 hover 状态会粘住不走，
   列表会一直是绿的、一直缩进，看着像坏了。(hover: hover) 只有鼠标设备才匹配。 */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
  .btn-whatsapp:hover { background: var(--primary-hover); }
}
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- WhatsApp 浮动按钮 ---------- */
.wa-fab {
  position: fixed; z-index: 30; box-shadow: 0 10px 26px -10px rgb(18 50 42 / 0.6), 0 2px 6px rgb(18 50 42 / 0.25);
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom) + 0.85rem);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0; border-radius: 999px;
  background: var(--primary); color: var(--on-primary); text-decoration: none; font-weight: 700; font-size: 0.95rem;
  box-shadow: 0 8px 24px -8px rgb(11 92 58 / 0.65), 0 2px 6px rgb(11 92 58 / 0.3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease), opacity .35s var(--ease);
}
.wa-fab-badge { display: grid; place-items: center; width: 56px; height: 56px; flex: none; }
/* 文字只给读屏软件；按钮本身是个干净的圆 */
.wa-fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (hover: hover) {
  .wa-fab:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgb(18 50 42 / 0.75); }
}
/* 呼吸光圈：只在按钮刚出现时提示一下，不一直闪 */
.wa-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--primary);
  opacity: 0; pointer-events: none;
}
.js .wa-fab.is-new::before { animation: wa-ping 2.2s var(--ease) 2; }
@keyframes wa-ping {
  0% { opacity: .7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}
.js .wa-fab { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
.js .wa-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) {
  .wa-fab { right: 1.75rem; bottom: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .wa-fab { transform: none; }
  .js .wa-fab.is-new::before { animation: none; }
  .wa-fab:hover { transform: none; }
}

/* ---------- 滚动进场：JS 打上 .anim，进入视口再 .is-in ---------- */
.anim { opacity: 1; }
.js .anim { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .anim.is-in { opacity: 1; transform: none; }
.js .hero-grid .anim { transition-duration: .55s; }   /* 首屏要快，别让人等着看标题 */
.js .anim:nth-child(2) { transition-delay: .05s; }
.js .anim:nth-child(3) { transition-delay: .1s; }
.js .anim:nth-child(4) { transition-delay: .15s; }
.js .anim:nth-child(5) { transition-delay: .2s; }
.js .anim:nth-child(6) { transition-delay: .25s; }
.js .anim:nth-child(7) { transition-delay: .3s; }
.js .anim:nth-child(n+8) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .js .anim { opacity: 1; transform: none; transition: none; }
}

/* 标题下那条金色短线：进场时从左边拉出来 */
.js .section-h::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s .12s var(--ease); }
.js .section-h.is-in::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js .section-h::before { transform: none; } }

/* ---------- 首屏：分层的光 ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 55% at 78% 8%, color-mix(in srgb, var(--marigold) 18%, transparent), transparent 70%),
    radial-gradient(55% 60% at 5% 85%, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 70%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-700) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 70% 30%, #000, transparent 75%);
}
.hero-grid { position: relative; z-index: 1; }
.portrait img { box-shadow: var(--shadow-lift); transition: transform .5s var(--ease); }
@media (min-width: 900px) {
  .portrait img { border-radius: 8px; }
  .portrait::after { transition: width .5s var(--ease); }
}
@media (min-width: 900px) and (hover: hover) {
  .portrait:hover img { transform: translateY(-4px); }
  .portrait:hover::after { width: 60%; }
}
@media (prefers-reduced-motion: reduce) { .portrait:hover img { transform: none; } }

/* 首屏那句话：底下的金色高亮进场时从左刷到右 */
.js .thesis-row:nth-child(2) .thesis-with { background-size: 0 0.18em; transition: background-size .8s .35s var(--ease); }
.js .thesis.is-in .thesis-row:nth-child(2) .thesis-with { background-size: 100% 0.18em; }
@media (prefers-reduced-motion: reduce) {
  .js .thesis-row:nth-child(2) .thesis-with { background-size: 100% 0.18em; transition: none; }
}

/* ---------- 专长条：一点渐变，不是纯色块 ---------- */
.specialties { background: linear-gradient(100deg, var(--brand-800), var(--brand-700) 55%, var(--brand-600)); }
.specialties li { transition: opacity .2s var(--ease); }
@media (prefers-color-scheme: dark) { .specialties { background: linear-gradient(100deg, #12322a, #173a31 60%, #1d4a3e); } }

/* ---------- 列表、卡片的悬停反馈（很轻） ---------- */
.ruled-list li { transition: padding-left .25s var(--ease), color .25s var(--ease); }
@media (hover: hover) {
  .ruled-list li:hover { padding-left: 0.5rem; color: var(--primary); }
  .ruled-light li:hover { color: var(--marigold); }
}
@media (prefers-reduced-motion: reduce) { .ruled-list li:hover { padding-left: 0; } }

.career-item, .dossier { transition: background-color .3s var(--ease); }
.career-body h3, .dossier-head h3 { transition: color .25s var(--ease); }
@media (hover: hover) {
  .career-item:hover, .dossier:hover { background: color-mix(in srgb, var(--marigold) 6%, transparent); }
  .career-item:hover .career-body h3, .dossier:hover .dossier-head h3 { color: var(--primary); }
}
/* 底色跟正文同宽：再宽一点的话，上下那条细线会比标题下的金色短线还长，看着就歪了 */

.place { transition: transform .3s var(--ease); }
.place h3 { transition: color .25s var(--ease); }
@media (min-width: 1000px) {
  .place { border-left-width: 2px; transition: border-color .3s var(--ease), transform .3s var(--ease); }
}
@media (min-width: 1000px) and (hover: hover) {
  .place:hover { border-left-color: var(--marigold); transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .place:hover { transform: none; } }

.training > li { transition: background-color .3s var(--ease); }

/* ---------- 影响：数字跳动时不要抖动 ---------- */
.bars strong, .impact-total strong { font-variant-numeric: tabular-nums; }
.bar > span { box-shadow: 0 0 18px -4px color-mix(in srgb, var(--marigold) 70%, transparent); }
.impact-total strong { text-shadow: 0 10px 40px color-mix(in srgb, var(--marigold) 35%, transparent); }

/* ---------- 联系 ---------- */
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 2.25rem; }
.contact-big { border-bottom-width: 0; position: relative; }
.contact-big::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--marigold);
  transform-origin: 0 50%; transition: transform .35s var(--ease);
}
@media (hover: hover) { .contact-big:hover::after { transform: scaleY(1.6); } }
@media (prefers-reduced-motion: reduce) { .contact-big:hover::after { transform: none; } }

/* ---------- 页脚 ---------- */
/* ---------- 点击目标：苹果和谷歌都要求至少 44×44，手指才点得准 ---------- */
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }
.brand { min-height: 44px; }
.contact-big { min-height: 44px; }
.footer-credit a, .footer-top { display: inline-flex; align-items: center; min-height: 44px; }

.site-footer { background: var(--surface); }
.footer-row { align-items: center; row-gap: 0.75rem; }
/* flex-basis 只在横排时才是「宽度」。窄屏页脚是竖排，同一条规则会被当成「高度」，
   把版权那行撑出一大块空白——所以只在 ≥640px 给。 */
@media (min-width: 640px) { .footer-copy { flex: 1 1 18rem; } }
.footer-credit { color: var(--muted); }
.footer-credit a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color .2s var(--ease); }
/* 标志本身是浅底的，给个小圆角当徽章，深色模式下也立得住 */
.footer-mark { width: 18px; height: 18px; flex: none; border-radius: 4px; }
.footer-credit a:hover { color: var(--primary); text-decoration-color: currentColor; }
.footer-top { white-space: nowrap; }
/* 有浮动按钮的页面，页脚右边让出一块，滚到底时「Back to top」不会被圆钮压住 */
@media (min-width: 900px) {
  body:has(.wa-fab) .footer-row { padding-right: 5.5rem; }
}
@media (max-width: 639px) {
  .footer-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .footer-copy, .footer-credit, .footer-top { flex: 0 0 auto; }
}

/* ==========================================================================
   手机端重排（≤899px，2026-09-20）
   之前是把桌面版缩窄，看着像「挤」出来的。这一段按手机自己的逻辑重排：
   先认人（照片 + 名字），再读那句话，最后是两个整宽的按钮。
   ========================================================================== */
@media (max-width: 899px) {
  /* 单栏，从上往下：照片 → 名片 → 那句话 → 按钮。
     照片占满整个内容宽度做横幅，不再是名字旁边的小方块。 */
  .hero { padding: 1rem 0 2rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "photo" "name" "thesis" "actions";
    align-items: stretch;
    row-gap: 1.25rem;
  }
  .portrait { width: 100%; }
  /* 正方形：原图是 4:5 的竖幅，切成横的会变成大头照（下巴顶着边）。
     方形正好是头肩像，也是手机上最耐看的人像比例。 */
  .portrait img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 12%;
    border-radius: 14px; box-shadow: 0 14px 30px -16px rgb(18 50 42 / 0.5);
  }

  /* 名片上面压一条金线，和全站每个大标题上面那条是同一套语言 */
  .nameplate { position: relative; padding-top: 1.15rem; }
  .nameplate::before { content: ""; position: absolute; top: 0; left: 0; width: 2.25rem; height: 4px; background: var(--marigold); }
  .nameplate h1 { font-size: clamp(1.5rem, 5.8vw, 1.9rem); line-height: 1.12; margin-bottom: 0.3rem; }
  .nameplate-title { font-size: 0.95rem; line-height: 1.35; }
  .nameplate-where { font-size: 0.85rem; margin-top: 0.3rem; }

  /* 那句话：字号刚好让每一组「谁 → 连到什么」占满一行、不多不少。
     之前是靠自动换行 + 悬挂缩进，六行长短不齐，看着像断掉的段落。 */
  .thesis { font-size: clamp(1.25rem, 7.2vw - 3px, 1.75rem); line-height: 1.22; gap: 0.32em; }
  .thesis-lead { font-size: 0.62em; margin-bottom: 0.15rem; }
  .thesis-who, .thesis-with { display: inline; width: auto; margin: 0; padding: 0; }
  .thesis-row { text-wrap: balance; }   /* 字号已经算好一行放得下；万一某台手机更窄，也是均分换行而不是甩下一个词 */

  /* 按钮整宽等宽，不再左边一个短的右边一个长的 */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .hero-actions .btn { width: 100%; }

  /* 专长条：横向一条，手指可以左右划。原来自动换行，一行 1 个一行 2 个，参差不齐 */
  .specialties ul {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    gap: 1.25rem; padding-block: 0.8rem;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .specialties ul::-webkit-scrollbar { display: none; }
  .specialties li { flex: none; scroll-snap-align: start; white-space: nowrap; }

  /* 分段之间的呼吸感：手机上 3.25rem 偏空，2.75rem 刚好 */
  .band { padding: 2.75rem 0; }
  .section-h { margin-bottom: 1.35rem; }
  .track-h { margin-top: 2.25rem; }

  /* 联系：两个按钮也整宽 */
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .btn { width: 100%; }
  .contact-big { font-size: clamp(1.25rem, 0.75rem + 2.6vw, 1.6rem); margin-bottom: 1.75rem; }

  /* 浮动按钮小一圈，少挡正文；44px 起步仍然点得准 */
  .wa-fab-badge { width: 52px; height: 52px; }
}

/* 头部在手机上矮一点，多留 8px 给内容 */
@media (max-width: 899px) {
  :root { --header-h: 52px; }
  .brand { font-size: 1.05rem; }
}