/* =========================================================
   墨白志 · 个人博客
   设计语言：黑白二元块面瞬时反转 / 衬线标题 + 等宽标签 / 0 圆角 / 发丝线
   动效原则：可变 CSS 变量驱动，全部可被 prefers-reduced-motion 关闭
   ========================================================= */

/* ---------- 0. 设计令牌 ---------- */
:root{
  /* 字体 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --mono:  "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 排版尺度 */
  --fs-kicker: 13px;
  --fs-meta:   12px;

  /* 动效曲线 */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --t-fast:  .18s;
  --t-base:  .32s;
  --t-slow:  .9s;

  /* 布局 */
  --pad: 64px;      /* 页面左右安全边距 */
  --nav-h: 72px;
  --maxw: 1440px;
}

/* ---------- 1. 区块级主题（核心：一处定义，整块反转） ----------
   暖砂纸感：墨褐 ↔ 米白纸，赭石作点缀
   --------------------------------------------------------------- */
.s-ink{            /* 深墨褐块面（替代纯黑，久看不刺眼） */
  --bg:#241D17;
  --fg:#F3EDE2;
  --muted:#AC9E8C;
  --dim:#7C6F60;
  --soft:#2E2620;      /* 卡片 / 输入框底 */
  --line:rgba(243,237,226,.16);
  --line-weak:rgba(243,237,226,.08);
  --glow:rgba(255,224,186,.10);
  --accent:#D98A4F;    /* 赭石（深底上提亮） */
  --accent-soft:rgba(217,138,79,.22);
}
.s-paper{          /* 暖砂纸块面 */
  --bg:#F5F1E8;
  --fg:#2A221B;
  --muted:#7A6B59;
  --dim:#9C8E7C;
  --soft:#EBE4D6;      /* 纸色卡片 */
  --line:rgba(42,34,27,.16);
  --line-weak:rgba(42,34,27,.08);
  --glow:rgba(42,34,27,.06);
  --accent:#B25A2E;    /* 赭石 */
  --accent-soft:rgba(178,90,46,.14);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:#241D17;
  color:#F3EDE2;
  font-family:var(--serif);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.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;
}

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{
  background:var(--bg);
  color:var(--fg);
  padding-block:96px;
}

/* ---------- 3. 通用文字件 ---------- */
.kicker{
  font-family:var(--mono);
  font-size:var(--fs-kicker);
  letter-spacing:.08em;
  color:var(--muted);
}
.meta{
  font-family:var(--mono);
  font-size:var(--fs-meta);
  color:var(--muted);
  letter-spacing:.02em;
}
.body{ font-size:17px; line-height:1.75; }
.s-paper .body{ color:#4A4034; }
.s-ink   .body{ color:var(--muted); }

.s-title{ font-size:48px; line-height:1.15; margin-top:20px; }
.s-title--sm{ font-size:40px; }
.s-sub{ margin-top:14px; font-size:17px; line-height:1.7; color:var(--muted); max-width:620px; }
.s-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}

/* 交互注释（交付时可整块删除：搜索 .note） */
.note{
  font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--dim); opacity:.9;
}
.note--block{ margin-top:24px; }

/* 箭头通用位移 */
.arw{
  display:inline-block;
  transition:transform var(--t-base) var(--ease-out);
}

/* ---------- 4. 阅读进度条 ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:transparent; pointer-events:none;
}
.progress i{
  display:block; height:100%; width:0;
  background:var(--accent, #B25A2E);
  transform-origin:left;
}

/* ---------- 5. 导航 ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:110;
  height:var(--nav-h);
  transition:background var(--t-base) var(--ease-out),
             color var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             backdrop-filter var(--t-base) var(--ease-out);
  border-bottom:1px solid transparent;
}
/* 滚动态：毛玻璃 + 发丝线 */
.nav.is-scrolled{
  background:color-mix(in srgb, var(--nav-bg) 78%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--nav-line);
}
/* 反色：JS 按当前所处区块切换 data-over */
.nav[data-over="ink"]{   --nav-bg:#241D17; --nav-fg:#F3EDE2; --nav-line:rgba(243,237,226,.16); }
.nav[data-over="paper"]{ --nav-bg:#F5F1E8; --nav-fg:#2A221B; --nav-line:rgba(42,34,27,.14); }
.nav{ color:var(--nav-fg); }

.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  height:var(--nav-h);
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand__name{ font-size:20px; font-weight:600; }
.brand__sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--nav-fg); opacity:.55; }

.nav__links{ display:flex; align-items:center; gap:40px; }
.nav__links a{
  position:relative;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  opacity:.72; transition:opacity var(--t-fast) linear;
  padding-block:4px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after,
.nav__links a.is-current::after{ transform:scaleX(1); }
.nav__links a.is-current{ opacity:1; }

.nav__right{ display:flex; align-items:center; gap:20px; }
.nav__cta{ font-family:var(--mono); font-size:13px; font-weight:500; }
.nav__cta:hover .arw{ transform:translate(3px,-3px); }

/* 汉堡按钮（仅移动端） */
.nav__toggle{ display:none; width:28px; height:20px; position:relative; }
.nav__toggle span{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor;
  transition:transform var(--t-base) var(--ease-out), opacity var(--t-fast) linear;
}
.nav__toggle span:nth-child(1){ top:6px; }
.nav__toggle span:nth-child(2){ top:13px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- 6. HERO ---------- */
.hero{
  display:flex; align-items:center; gap:48px;
  padding-block:96px 40px;
}
.hero__text{ flex:1 1 auto; max-width:640px; }
.hero__title{
  margin-top:22px;
  font-size:clamp(40px, 5.4vw, 78px);
  line-height:1.15;
}
.hero__sub{ margin-top:26px; font-size:17px; line-height:1.75; color:var(--muted); max-width:520px; }
.hero__cta{ margin-top:34px; display:flex; align-items:center; gap:36px; flex-wrap:wrap; }

/* 主 CTA：下划线从左展开 */
.link-underline{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  font-size:20px; font-weight:600; padding-bottom:10px;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:currentColor;
  transform:scaleX(1); transform-origin:left;
  transition:transform var(--t-base) var(--ease-out);
}
.link-underline:hover::after{ transform:scaleX(1) ; }
.link-underline:hover .arw{ transform:translateX(4px); }
.link-quiet{
  font-size:18px; color:var(--muted);
  transition:color var(--t-fast) linear;
}
.link-quiet:hover{ color:var(--fg); }
.link-quiet:hover .arw{ transform:translateX(4px); }

.hero__figure{ flex:0 0 440px; max-width:440px; }
.hero__figure figcaption,
.about__fig figcaption{
  margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--muted);
}

/* 图片框：进入视口时轻微缩放归位 + 灰度 */
.img-frame{
  overflow:hidden; background:var(--soft);
  position:relative;
}
.img-frame img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transform:scale(1.06);
  transition:transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
  will-change:transform;
}
.is-in .img-frame img,
.img-frame.is-in img{ transform:scale(1); }
/* 视差图由 JS 每帧写 transform，不能再挂过渡，否则拖影 */
.img-frame img[data-parallax]{ transition:filter 1.2s var(--ease-out); }

.hero__foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:20px 0; border-top:1px solid var(--line-weak);
}
.scroll-hint{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--muted);
  animation:bob 2.4s var(--ease-inout) infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---------- 7. 01 精选 ---------- */
.fbig{
  margin-top:44px; display:flex; background:var(--soft);
  transition:background var(--t-base) var(--ease-out);
}
.fbig__img{ flex:0 0 640px; height:430px; }
.fbig__img img{ height:100%; }
.fbig__text{
  padding:40px; display:flex; flex-direction:column; gap:16px; justify-content:center;
}
.fbig__text h3{ font-size:36px; line-height:1.25; }
.fbig__text p{ font-size:16px; line-height:1.7; color:#4A4034; max-width:440px; }
.tag{
  align-self:flex-start;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:6px 12px; border:1px solid var(--accent); color:var(--accent);
}
.tag--ghost{ border:0; padding:0; color:var(--muted); }

.frow{ margin-top:24px; display:flex; gap:24px; }
.fcard{
  flex:1 1 0; background:var(--soft); padding:28px;
  display:flex; flex-direction:column; gap:12px;
  transition:transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.fcard:hover{ transform:translateY(-3px); }
.fcard h3{ font-size:22px; line-height:1.3; }
.fcard:hover h3{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- 8. 02 文章列表 ---------- */
.chips{ display:flex; gap:12px; flex-wrap:wrap; }
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  padding:8px 14px; border:1px solid var(--line); color:var(--muted);
  transition:color var(--t-fast) linear, background var(--t-fast) linear,
             border-color var(--t-fast) linear;
}
.chip:hover{ color:var(--fg); border-color:var(--fg); }
.chip.is-on{ background:var(--fg); color:var(--bg); border-color:var(--fg); }

.jlist{ margin-top:36px; border-top:1px solid var(--line); }
.jrow{
  display:flex; align-items:center; gap:28px;
  padding:26px 24px;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background var(--t-fast) linear, color var(--t-fast) linear;
}
/* 整行反白 */
.jrow:hover{ background:var(--fg); color:var(--bg); }
.jrow:hover .jrow__cat,
.jrow:hover .jrow__date,
.jrow:hover .jrow__main i{ color:var(--bg); }
.jrow__idx{
  font-family:var(--mono); font-size:13px; width:32px; flex:none;
  color:var(--muted); transition:color var(--t-fast) linear;
}
.jrow:hover .jrow__idx{ color:var(--bg); }
.jrow__main{ flex:1 1 auto; display:flex; flex-direction:column; gap:6px; min-width:0; }
.jrow__main b{ font-size:24px; font-weight:600; line-height:1.3; }
.jrow__main i{ font-style:normal; font-size:14px; color:var(--muted); }
.jrow__cat{ font-family:var(--mono); font-size:12px; width:56px; flex:none; color:var(--muted); }
.jrow__date{ font-family:var(--mono); font-size:12px; width:96px; flex:none; color:var(--dim); text-align:right; }
.jrow__arw{
  flex:none; font-size:16px;
  opacity:0; transform:translateX(-8px);
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.jrow:hover .jrow__arw{ opacity:1; transform:translateX(0); }

/* 筛选后的过滤动画 */
.jrow.is-filtered{
  display:none;
}
.jrow.is-entering{ animation:rowIn .38s var(--ease-out) both; }
@keyframes rowIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ---------- 9. 03 关于 ---------- */
.about{ margin-top:44px; display:flex; gap:64px; align-items:center; }
.about__fig{ flex:0 0 400px; max-width:400px; }
.about__fig .img-frame{ aspect-ratio:1/1; }
.about__text{ flex:1 1 auto; }
.about__text .s-title{ margin-top:0; margin-bottom:22px; font-size:44px; }
.about__text .body + .body{ margin-top:16px; }

.skills{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }
.skills span{
  font-family:var(--mono); font-size:12px;
  padding:8px 14px; border:1px solid var(--line);
}

.timeline{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.timeline li{
  display:flex; gap:20px; align-items:baseline;
  padding-bottom:12px; border-bottom:1px solid var(--line-weak);
}
.timeline .y{ font-family:var(--mono); font-size:13px; font-weight:500; width:48px; flex:none; }
.timeline .d{ font-size:15px; color:#4A4034; }

/* ---------- 10. 04 项目 ---------- */
.pgrid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pcard{
  position:relative; overflow:hidden;
  background:var(--soft); border:1px solid var(--line);
  padding:28px; min-height:236px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out);
}
/* 鼠标聚光 */
.pcard::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 62%);
  opacity:0; transition:opacity var(--t-base) var(--ease-out);
}
.pcard:hover{ transform:translateY(-2px); border-color:var(--fg); }
.pcard:hover::before{ opacity:1; }
.pcard__idx{ font-family:var(--mono); font-size:11px; color:var(--dim); }
.pcard h3{ font-size:22px; }
.pcard p{ font-size:14px; line-height:1.65; color:var(--muted); }
.pcard__tech{ margin-top:auto; font-family:var(--mono); font-size:11px; color:var(--dim); }
.pcard__go{
  font-family:var(--mono); font-size:12px; font-weight:500;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.pcard:hover .pcard__go{ opacity:1; transform:none; }
.pcard:hover .pcard__go .arw{ transform:translateX(4px); }

/* ---------- 11. 05 数据 ---------- */
.stats{ margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ display:flex; flex-direction:column; gap:10px; }
.stat__line{ display:block; height:2px; background:var(--accent); width:100%; opacity:.55; }
.stat__num{
  font-size:72px; line-height:1; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat__label{ font-family:var(--mono); font-size:13px; color:var(--muted); }

/* ---------- 12. 06 订阅 ---------- */
.sub{ text-align:center; display:flex; flex-direction:column; align-items:center; padding-block:120px; }
.sub__title{ margin-top:20px; font-size:clamp(36px,4.6vw,64px); line-height:1.15; }
.sub__text{ margin-top:18px; font-size:18px; line-height:1.7; color:var(--muted); max-width:560px; }
.sub__form{ margin-top:36px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:center; }
.sub__input{
  width:420px; height:56px; padding:0 20px;
  background:var(--soft); color:var(--fg);
  border:1px solid var(--line); border-radius:0;
  font-family:var(--mono); font-size:14px;
  transition:border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.sub__input::placeholder{ color:var(--dim); }
.sub__input:focus{ outline:none; border-color:var(--fg); }
.sub__input.is-pulse{ animation:pulse .8s var(--ease-out); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 var(--accent-soft) }
  100%{ box-shadow:0 0 0 14px transparent }
}
.sub__input.is-error{ border-color:var(--accent); animation:shake .32s linear; }
@keyframes shake{ 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.sub__btn{
  font-family:var(--serif); font-size:18px; font-weight:600;
  padding:16px 28px; border-bottom:2px solid var(--fg);
  transition:opacity var(--t-fast) linear;
}
.sub__btn:hover{ opacity:.72; }
.sub__btn.is-done{ opacity:1; }
.sub__msg{ margin-top:16px; min-height:20px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.social{ margin-top:52px; display:flex; gap:36px; flex-wrap:wrap; justify-content:center; }
.social a{ font-family:var(--mono); font-size:13px; color:var(--muted); transition:color var(--t-fast) linear; }
.social a:hover{ color:var(--fg); }

/* ---------- 13. 页脚 ---------- */
.footer{ background:var(--bg); color:var(--fg); padding-block:36px; }
.footer__line{ display:block; height:1px; background:var(--line); margin-bottom:20px; }
.footer__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer__brand{ font-size:16px; font-weight:600; }
.footer__slogan{ font-family:var(--mono); font-size:12px; color:var(--dim); }
.footer__top{ font-family:var(--mono); font-size:12px; color:var(--dim); transition:color var(--t-fast) linear; }
.footer__top:hover{ color:var(--fg); }

/* ---------- 14. 滚动进入动画（通用） ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--d, 0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* 标题逐行上浮 */
[data-reveal="lines"]{ opacity:1; transform:none; }
[data-reveal="lines"] .line{ display:block; overflow:hidden; }
[data-reveal="lines"] .line > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1s var(--ease-out);
  transition-delay:var(--d, 0s);
}
[data-reveal="lines"].is-in .line > span{ transform:none; }

/* ---------- 14.5 数字人（SVG 矢量形象） ----------
   所有位移动作由 JS 写 SVG transform 属性完成（不用 CSS transform，
   避免 transform-box / transform-origin 在不同浏览器上的差异）
   --------------------------------------------------------------- */
.dh{ display:block; width:100%; height:auto; overflow:visible; }
.dh-halo{ fill:var(--accent-soft); }
.dh-line{
  fill:none; stroke:var(--fg); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
.dh-fill{ fill:var(--soft); stroke:none; }
.dh-solid{ fill:var(--fg); stroke:none; }
.dh-blush{ fill:var(--accent); opacity:0; transition:opacity .28s var(--ease-out); }
.dh-mouth{ transition:opacity .18s linear; }
.dh-mouth--happy,
.dh-mouth--o{ opacity:0; transition:opacity .18s linear; }
.dh.is-happy .dh-mouth--happy{ opacity:1; }
.dh.is-happy .dh-mouth{ opacity:0; }
.dh.is-happy .dh-blush{ opacity:.45; }
.dh.is-surprised .dh-mouth--o{ opacity:1; }
.dh.is-surprised .dh-mouth{ opacity:0; }

/* 首屏：数字人舞台 */
.dh-stage{
  background:var(--soft); border:1px solid var(--line);
  padding:28px; display:flex; align-items:center; justify-content:center;
}
.dh-host{ width:100%; max-width:320px; }

/* 右下角常驻小助手 */
.dh-mini{
  /* 固定在纸色卡片上，压在任何区块都读得清 */
  --bg:#F5F1E8; --fg:#2A221B; --soft:#EBE4D6;
  --accent:#B25A2E; --accent-soft:rgba(178,90,46,.14); --line:rgba(42,34,27,.16);
  position:fixed; right:24px; bottom:24px; z-index:100;
  display:flex; align-items:flex-end; gap:10px;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.dh-mini.is-on{ opacity:1; transform:none; pointer-events:auto; }
.dh-mini__host{
  position:relative; width:92px; height:104px; overflow:hidden;
  background:var(--soft); border:1px solid var(--line);
  border-radius:48px 48px 44px 44px;
  box-shadow:0 12px 32px rgba(0,0,0,.20);
  cursor:pointer; flex:none;
}
.dh-mini__host .dh{ width:100%; margin-top:2px; }
.dh-mini__bubble{
  max-width:230px; padding:10px 14px;
  background:var(--fg); color:var(--bg);
  font-family:var(--mono); font-size:12px; line-height:1.5;
  opacity:0; transform:translateY(6px) scale(.96);
  transform-origin:bottom right; pointer-events:none;
  transition:opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
.dh-mini__bubble.is-on{ opacity:1; transform:none; }
.dh-mini__close{
  position:absolute; top:2px; right:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--fg); color:var(--bg);
  font-size:12px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s linear;
}
.dh-mini:hover .dh-mini__close{ opacity:1; }

/* ---------- 15. 响应式 ---------- */
@media (max-width:1100px){
  :root{ --pad:40px; }
  .hero__figure{ flex-basis:340px; max-width:340px; }
  .fbig{ flex-direction:column; }
  .fbig__img{ flex:none; width:100%; height:320px; }
  .pgrid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .about{ gap:40px; }
}
@media (max-width:820px){
  :root{ --pad:24px; --nav-h:64px; }
  .section{ padding-block:64px; }
  .hero{ flex-direction:column; align-items:flex-start; padding-block:120px 32px; }
  .hero__figure{ flex:none; width:100%; max-width:100%; }
  .hero__figure .img-frame{ aspect-ratio:4/5; }
  .frow{ flex-direction:column; }
  .about{ flex-direction:column; align-items:flex-start; }
  .about__fig{ flex:none; width:100%; max-width:340px; }
  .pgrid{ grid-template-columns:1fr; }
  .s-title{ font-size:34px; }
  .jrow{ flex-wrap:wrap; gap:12px 16px; padding:20px 16px; }
  .jrow__main{ flex:1 1 100%; order:2; }
  .jrow__idx{ order:1; }
  .jrow__cat{ order:3; width:auto; }
  .jrow__date{ order:4; width:auto; }
  .jrow__arw{ order:5; opacity:1; transform:none; }
  .sub__input{ width:100%; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--nav-bg); color:var(--nav-fg);
    padding:8px var(--pad) 20px;
    border-bottom:1px solid var(--nav-line);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity var(--t-base) var(--ease-out),
               transform var(--t-base) var(--ease-out),
               visibility var(--t-base) linear;
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__links a{ padding:14px 0; font-size:16px; width:100%; }
  .nav__toggle{ display:block; }
  .nav__cta{ display:none; }
  .dh-mini{ right:14px; bottom:14px; gap:8px; }
  .dh-mini__host{ width:72px; height:82px; }
  .dh-mini__bubble{ font-size:11px; max-width:150px; padding:8px 10px; }
  .dh-stage{ padding:20px; }
}

/* ---------- 16. 无障碍：尊重减弱动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  [data-reveal="lines"] .line > span{ transform:none; }
  .img-frame img{ transform:none; }
  .scroll-hint{ animation:none; }
}