/* ============================================================
   书路教育官网 v4 · 站点样式（Organic 风格）
   原则：胶囊形按钮 / 标签 / 导航条；卡片大圆角；版块通栏、靠交替底色区分、不加圆角不加阴影；
         只用蓝、红两种主题色；左对齐、留白充足；按钮文字不带箭头
   令牌见 tokens.css；规格见 spec-v4-organic-morandi.md
   ============================================================ */

/* —— 字体：自托管（scripts/build-latin-fonts.py 生成），不引用 fonts.googleapis.com —— */
@font-face { font-family: 'Caprasimo'; src: local('Caprasimo'), local('Caprasimo-Regular'), url('../fonts/caprasimo-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: local('Figtree Regular'), local('Figtree-Regular'), url('../fonts/figtree-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: local('Figtree SemiBold'), local('Figtree-SemiBold'), url('../fonts/figtree-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: local('Figtree Bold'), local('Figtree-Bold'), url('../fonts/figtree-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
[id] { scroll-margin-top: 96px; }   /* 吸顶胶囊条高度 + 间距 */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color var(--theme-dur) ease, color var(--theme-dur) ease;
}

/* 标题：英文用 Caprasimo（只有 400），中文回退到系统黑体的粗体。
   font-synthesis: none 禁止浏览器给 Caprasimo 伪加粗，700 只作用于系统中文字体 */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }

p { margin: 0; }
img, video { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
button { font: inherit; }

a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.band-dark :focus-visible { outline-color: var(--color-onband); }
::selection { background: var(--color-accent-200); }

/* 照片统一柔化：影片封面、产品图、头像 */
.photo { filter: saturate(.6) contrast(.85) brightness(1.1); }

/* 跳转链接（仅键盘聚焦时可见） */
.skip-link {
  position: absolute; left: 16px; top: -100px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: 14px; font-weight: 600; text-decoration: none; z-index: 40;
}
.skip-link:focus { top: 16px; color: var(--color-on-accent); }

/* ============================================================
   通栏版块与内容容器
   ============================================================ */
.band { padding: var(--pad-y) var(--pad-x); transition: background-color var(--theme-dur) ease, color var(--theme-dur) ease; }
.band-bg { background: var(--color-bg); }
.band-card { background: var(--color-card); }
.band-surface { background: var(--color-surface); }
.band-dark { background: var(--color-band); color: var(--color-onband); }
.container { max-width: var(--content-max); margin: 0 auto; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-neutral-700);
  max-width: 34em;
}

/* ============================================================
   按钮：胶囊形，文字不带箭头；磁吸位移由 main.js 写 inline transform
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform var(--dur) var(--ease-spring);
}
.btn-sm { padding: 11px 20px; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface-strong); color: var(--color-text); }
.btn-lu { background: var(--color-accent-2); color: var(--color-on-accent); }
.btn-lu:hover { background: var(--color-accent-2-600); color: var(--color-on-accent); }
.btn-lu:active { background: var(--color-accent-2-700); }
.btn-lu:focus-visible { outline-color: var(--color-accent-2); }
.btn-light { background: var(--color-onband); color: var(--color-band); }
.btn-light:hover { background: var(--color-onband); color: var(--color-band); box-shadow: 0 0 0 4px rgba(var(--color-onband-rgb), .18); }
.btn-outline { box-shadow: inset 0 0 0 2px rgba(var(--color-onband-rgb), .55); color: var(--color-onband); }
.btn-outline:hover { background: rgba(var(--color-onband-rgb), .12); box-shadow: inset 0 0 0 2px rgba(var(--color-onband-rgb), .8); color: var(--color-onband); }

/* ============================================================
   标签：浅色胶囊，100 档底 + 700 档字
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tag-shu { background: var(--color-accent-100); color: var(--color-accent-700); }
.tag-lu { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.tag-neutral { background: var(--color-surface); color: var(--color-neutral-700); }

/* ============================================================
   1. Header：吸顶，半透明 bg 胶囊条
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px clamp(16px, 4vw, 48px);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 6px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 8px 10px 8px 20px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-bg-rgb), .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  transition: border-radius .3s ease, background-color var(--theme-dur) ease, box-shadow var(--theme-dur) ease;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  text-decoration: none;
}
.logo-img {
  display: block;
  height: 50px; width: auto;
  padding: 4px 8px;
  border-radius: 10px;
  background: var(--color-logo-chip);   /* 暗色模式下给 Logo 加浅色底衬（Logo 含黑色文字） */
  transition: background-color var(--theme-dur) ease;
}

.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.nav-link:hover,
.nav-link[aria-current="true"] { background: var(--color-surface); color: var(--color-text); }
.site-nav .btn { margin-left: 10px; }

/* 明暗切换：44px 圆形，浅色模式显示月亮，暗色模式显示太阳；hover 图标旋转 -20° */
.header-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.theme-toggle {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color .25s ease, color var(--theme-dur) ease;
}
.theme-toggle:hover { background: var(--color-surface-strong); }
.theme-icon {
  width: 20px; height: 20px;
  display: block;
  transition: transform .4s var(--ease-spring);
}
.theme-toggle:hover .theme-icon { transform: rotate(-20deg); }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

/* 手机端菜单按钮 */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.menu-toggle-icon { position: relative; width: 18px; height: 10px; }
.menu-toggle-icon i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .3s ease, top .3s ease;
}
.menu-toggle-icon i:first-child { top: 0; }
.menu-toggle-icon i:last-child { top: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { top: 4px; transform: rotate(-45deg); }

/* ============================================================
   2. 首屏：左标语 / 右影片
   ============================================================ */
.hero { padding-top: clamp(32px, 6vw, 80px); }
.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.hero-copy {
  flex: 1.1 1 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 28px);
  min-width: 0;
}
.hero h1 .line { display: block; }
.line-shu { color: var(--color-accent-700); }
.line-lu { color: var(--color-accent-2-700); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-media { flex: 1 1 360px; min-width: 0; }
.video-frame {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.video-player {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
/* 封面做柔化；开始播放后恢复原色 */
.video-frame:not(.is-playing) .video-player { filter: saturate(.6) contrast(.85) brightness(1.1); }

.video-overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: clamp(16px, 3vw, 28px);
  cursor: pointer;
}
.video-play {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  transition: background-color .25s ease, transform var(--dur) var(--ease-spring);
}
.video-play:hover,
.video-overlay:hover .video-play { background: var(--color-accent-600); }
.play-ring {
  position: absolute; inset: 0; z-index: -1;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: .5;
  animation: pulse 2.2s ease-out infinite;
}
.play-icon {
  width: 0; height: 0;
  margin-left: 5px;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--color-on-accent);
}
.video-caption {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-bg-rgb), .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
}
.video-frame.is-playing .video-overlay { display: none; }
@keyframes pulse {
  from { transform: scale(1); opacity: .5; }
  to { transform: scale(1.8); opacity: 0; }
}

/* ============================================================
   3. 产品与服务：左目录（tablist）/ 右详情（tabpanel）
   ============================================================ */
/* 版块标题：每个版块只有一个 H2，下方间距统一 */
.band > .container > h2 { margin-bottom: clamp(32px, 4vw, 48px); }
.product-tabs {
  display: flex;
  flex-direction: row-reverse;   /* DOM 里目录在前：宽屏目录在右、图文在左；窄屏换行后目录在上 */
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 48px);
}
.product-list {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.product-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 22px 10px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur) ease, box-shadow var(--dur) ease, color var(--theme-dur) ease, transform var(--dur) var(--ease-spring);
}
.product-tab:hover { transform: translateX(6px); }
.product-tab[aria-selected="true"] { background: var(--color-bg); box-shadow: var(--shadow-md); }
.product-tab:focus-visible { outline-offset: -2px; }
.tab-lu:focus-visible { outline-color: var(--color-accent-2); }
.product-no {
  flex: none;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}
.tab-lu .product-no { background: var(--color-accent-2-200); color: var(--color-accent-2-700); }
.tab-shu .product-no { background: var(--color-accent-200); color: var(--color-accent-700); }
.tab-lu[aria-selected="true"] .product-no { background: var(--color-accent-2); color: var(--color-on-accent); }
.tab-shu[aria-selected="true"] .product-no { background: var(--color-accent); color: var(--color-on-accent); }
.product-tab-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.product-tab-name { font-size: 17px; font-weight: 700; }
.product-tab-cat { margin-top: 2px; font-size: var(--fs-small); color: var(--color-neutral-700); }

/* 详情面板：右栏 min-height 由 main.js 取三块最长内容，切换不跳动 */
.product-panels { flex: 2 1 420px; position: relative; min-width: 0; }
.product-panel {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius-panel);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  transition: background-color var(--theme-dur) ease, box-shadow var(--theme-dur) ease;
}
.product-panel[hidden] { display: none; }
.product-media {
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-surface);
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.product-desc { max-width: 36em; font-size: var(--fs-body-lg); line-height: 1.8; color: var(--color-neutral-700); }
.product-body .btn { margin-top: 6px; }

/* 切换动效：旧内容 0.2s 淡出下移；新图片 scale .96→1 弹性；文字延迟 0.1s 淡入 */
.product-panel.is-leaving { animation: panel-out .2s ease forwards; }
.product-panel.is-entering .product-media { animation: media-in .7s var(--ease-spring) both; }
.product-panel.is-entering .product-body { animation: fade-up .5s ease .1s both; }
@keyframes panel-out { to { opacity: 0; transform: translateY(10px); } }
@keyframes media-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 无 JS：三款产品全部展开 */
html:not(.js) .product-panel[hidden] { display: block; }
html:not(.js) .product-panel + .product-panel { margin-top: 24px; }

/* ============================================================
   4. 关于我们：左文字 / 右两个错落头像
   ============================================================ */
.about-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.about-copy {
  flex: 1.2 1 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}
.about-copy h2, .contact-copy h2 { margin-bottom: 4px; }
.about-text { max-width: 36em; font-size: var(--fs-body-lg); line-height: 1.85; }
.motto {
  font-family: var(--font-heading);
  font-weight: 700;
  font-synthesis: none;
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.motto-shu { color: var(--color-accent-700); }
.motto-lu { color: var(--color-accent-2-700); }

.about-people {
  flex: 1 1 360px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
  min-width: 0;
}
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.person-lu { margin-top: 48px; }
.avatar {
  width: var(--avatar); height: var(--avatar);
  border-radius: 50%;
  border: 8px solid var(--color-accent);
  object-fit: cover;
  background: var(--color-card);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) ease;
  will-change: transform;
}
.person-lu .avatar { border-color: var(--color-accent-2); }
.person figcaption { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.person strong { font-size: var(--fs-body-lg); font-weight: 700; }
.person span { font-size: var(--fs-small); color: var(--color-neutral-700); }

/* ============================================================
   5. 用户评价：3 张卡片
   ============================================================ */
.review-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.5vw, 32px);
}
.review-card {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-card);
  background: var(--color-card);
  box-shadow: var(--shadow-md);
  min-width: 0;
  transition: background-color var(--theme-dur) ease, box-shadow var(--theme-dur) ease;
}
.quote-mark {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
  padding-top: .35em;
}
.card-shu .quote-mark { background: var(--color-accent-200); color: var(--color-accent-700); }
.card-lu .quote-mark { background: var(--color-accent-2-200); color: var(--color-accent-2-700); }
.review-card blockquote { flex: 1; font-size: var(--fs-body-lg); line-height: 1.85; }
.review-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.review-meta strong { font-size: 15px; font-weight: 700; }
.review-meta span { font-size: var(--fs-small); color: var(--color-neutral-700); }

/* ============================================================
   6. 联系我们 + 页脚：同一深色通栏
   ============================================================ */
.contact { padding-bottom: clamp(48px, 6vw, 80px); }
.contact-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 64px);
}
.contact-copy {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}
.contact h2 { color: var(--color-onband); }
.contact .lead { color: rgba(var(--color-onband-rgb), .75); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.wechat-pill {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 12px 32px 12px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--color-onband-rgb), .08);
  box-shadow: inset 0 0 0 1px rgba(var(--color-onband-rgb), .15);
}
.wechat-qr {
  flex: none;
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.wechat-pill p { display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.wechat-pill strong { font-size: 15px; font-weight: 700; }
.wechat-pill span { font-size: var(--fs-small); color: rgba(var(--color-onband-rgb), .7); }

.site-footer {
  padding: 0 var(--pad-x) clamp(28px, 4vw, 40px);
  font-size: var(--fs-small);
  color: rgba(var(--color-onband-rgb), .7);
  transition: background-color var(--theme-dur) ease, color var(--theme-dur) ease;
}
.site-footer .container {
  padding-top: 24px;
  border-top: 1px solid rgba(var(--color-onband-rgb), .2);
}
.site-footer a { color: inherit; }
.site-footer a:hover { color: var(--color-onband); }

/* ============================================================
   动效（spec §7）
   ============================================================ */
/* 滚动渐入：只有在 JS 可用时才先隐藏，避免无 JS 时内容不可见 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  transition: opacity 1s var(--ease-spring), transform 1s var(--ease-spring), background-color var(--theme-dur) ease, box-shadow var(--theme-dur) ease;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* 渐入结束后，卡片 / 头像的倾斜用自己的短过渡 */
.js [data-reveal].is-settled { transition: opacity 1s var(--ease-spring), transform var(--dur) ease, background-color var(--theme-dur) ease, box-shadow var(--theme-dur) ease; }

/* 标题逐字出现：每个字从 translateY(.4em) rotate(4deg) 回到原位，延迟由 main.js 按字序写入 */
.js .is-split .word { display: inline-block; white-space: nowrap; }
.js .is-split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em) rotate(4deg);
  transition: opacity .8s var(--ease-spring), transform .8s var(--ease-spring);
}
.js .is-visible .char { opacity: 1; transform: none; }

/* ============================================================
   响应式（spec §9）
   ============================================================ */
@media (max-width: 600px) {
  .menu-toggle { display: inline-flex; }
  .header-bar { padding-left: 14px; }
  .header-tools { margin-left: auto; }
  .theme-toggle { width: 40px; height: 40px; }
  .header-bar.nav-open { border-radius: 28px; }
  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 0 4px;
    margin-left: 0;
    order: 10;   /* 展开后排在 Logo 与工具按钮那一行之下 */
  }
  .nav-open .site-nav { display: flex; }
  .nav-link { padding: 12px 16px; }
  .site-nav .btn { margin: 6px 0 2px; }
  :root { --avatar: 150px; }
  .person-lu { margin-top: 32px; }
  .video-overlay { gap: 10px; }
  .video-play { width: 60px; height: 60px; }
  .wechat-pill { padding-right: 24px; }
}

/* ============================================================
   减少动态效果：全部静止、直接显示
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .is-split .char { opacity: 1; transform: none; }
  .play-ring { display: none; }
}