/* ════════════════════════════════════════════════════════════
   LIN MINHENG — views.css
   各视图布局 / 响应式
   ════════════════════════════════════════════════════════════ */

/* ── 首页 · HERO ─────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h); padding-bottom: clamp(96px, 13vh, 140px);
  /* 不裁剪：透镜贴边时保持完整圆形（横向溢出由 body 的 overflow-x: clip 兜底） */
  overflow: visible;
}
.lens__world.hero { overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
/* 标题后的品牌辉光：给首屏一个纵深锚点（置于画布之下） */
.hero::before {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: 8%; top: 22%; width: 56%; height: 56%;
  background: radial-gradient(48% 46% at 38% 42%,
              color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
/* 旋转徽章：环形字随速度自转，填补首屏右下的呼吸位 */
.hero__badge {
  /* 驻右上空位——放右下会在矮视口与「精选作品」按钮相撞 */
  position: absolute; right: calc(var(--pad) + 6px); top: clamp(104px, 15vh, 168px);
  width: clamp(96px, 9.5vw, 148px); aspect-ratio: 1; z-index: 1;
  pointer-events: none;          /* 纯装饰：曾压住「精选作品」按钮吃掉点击 */
}
.hero__badge svg { width: 100%; height: 100%; animation: star-spin 26s linear infinite; }
.hero__badge text {
  font-family: var(--font-mono); font-size: 10.6px; letter-spacing: .34em;
  fill: var(--ink2); text-transform: uppercase;
}
.hero__badge circle { fill: none; stroke: var(--line); stroke-width: 1; }
.hero__badge path.hb-star { fill: var(--accent); }

.hero__meta {
  display: flex; gap: clamp(18px, 4vw, 54px); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; color: var(--ink2);
  margin-bottom: clamp(26px, 4vh, 48px);
}
.hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 12.5vw, 200px);
  line-height: .96; letter-spacing: .01em;
}
.hero__line { display: block; }
.hero__line--2 { display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); }
.hero__word { display: inline-block; }
.hero__word--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.hero__star { width: clamp(30px, 5.5vw, 84px); height: auto; color: var(--accent); flex: none; animation: star-spin 9s linear infinite; }
@keyframes star-spin { to { rotate: 360deg; } }

.hero__sub {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-top: clamp(34px, 6vh, 68px);
}
.hero__name { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; }
.hero__name em { color: var(--accent-text); font-size: 1.15em; margin-right: 4px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 26px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; color: var(--ink2);
}
.hero__scroll { display: inline-flex; align-items: center; gap: 12px; }
.hero__scroll i {
  width: 1px; height: 44px; background: var(--line); position: relative; overflow: hidden; display: block;
}
.hero__scroll i::after {
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: var(--accent); animation: scroll-hint 2s var(--ease-io) infinite;
}
@keyframes scroll-hint { 0% { top: -100%; } 55% { top: 0; } 100% { top: 100%; } }

/* ── 双世界透镜 ─────────────────────────────── */
.lens {
  position: absolute; top: 0; left: 0; z-index: 5;
  border-radius: 50%; overflow: hidden; pointer-events: none;
  opacity: 0; scale: .55;
  transition: opacity .4s ease, scale .5s var(--ease-out);
  will-change: transform;
  box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgba(0, 0, 0, .4);
}
.lens.is-on { opacity: 1; scale: 1; }
.lens__world {
  position: absolute; top: 0; left: 0;
  min-height: 0; overflow: hidden;
  background: var(--bg);
  color: var(--ink);          /* 强制在反色变量作用域内重解析继承色 */
  will-change: transform;
}
/* 反色世界：镜内变量整组对调（暗↔浅） */
html[data-theme="dark"] .lens__world {
  --bg: #F2EFE8; --bg2: #EAE6DD; --card: #FFFFFF;
  --ink: #16150F; --ink2: #6B675C; --line: rgba(22, 21, 15, .14);
  --accent: #E8430F; --accent-text: #C63207; --accent-ink: #F6F3EC;
}
html[data-theme="light"] .lens__world {
  --bg: #0B0B0C; --bg2: #121214; --card: #161618;
  --ink: #EDEAE4; --ink2: #98948B; --line: rgba(237, 234, 228, .13);
  --accent: #FF4B1F; --accent-text: #FF6B43; --accent-ink: #0B0B0C;
}

/* ── 首页 · 自我介绍 ─────────────────────────────── */
/* 宣言：整段思源宋体 900——中文用真字重说话，不再有幻影 350 */
.manifesto {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 3.4vw, 46px); line-height: 1.72;
  max-width: 24em; letter-spacing: .02em;
}
.manifesto em { color: var(--accent-text); font-weight: 500; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  margin-top: clamp(48px, 7vw, 90px); padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.stat b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat--plus b::after { content: "+"; color: var(--accent-text); font-weight: 400; font-size: .55em; vertical-align: .5em; margin-left: 2px; }
.stat > span:last-child { color: var(--ink2); font-size: 14px; letter-spacing: .06em; display: block; margin-top: 10px; }
.sec > .lnk { margin-top: clamp(30px, 4vw, 48px); }

/* ── 首页签名段：横向作品长廊 ───────────────────────────────
   纵向滚动被翻译成横向行进：平滑滚动下由引擎逐帧钉住（JS sticky），
   触屏走原生 position: sticky——同一段签名交互，桌面与手机都不缺席 */
.sec--gallery { padding-block: 0; }
.wg { position: relative; }                     /* 总高度由 JS 依轨道宽度写入 */
.wg__pin {
  height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) * .8);
  will-change: transform;
}
html.no-smooth .wg__pin { position: sticky; top: 0; }
.wg__head { margin-bottom: clamp(26px, 4vh, 56px); }
.wg__track {
  display: flex; align-items: stretch; gap: clamp(28px, 4.5vw, 72px);
  padding-left: var(--pad); padding-right: 12vw;
  will-change: transform;
}
.wg__item { flex: none; width: clamp(320px, 46vw, 760px); position: relative; display: block; }
.wg__item:nth-child(even) { width: clamp(300px, 38vw, 620px); margin-top: clamp(20px, 4vh, 56px); }
.wg__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.wg__item:nth-child(even) .wg__media { aspect-ratio: 4 / 3.4; }
.wg__media .artwork { transition: scale 1s var(--ease-out); }
.wg__item:hover .wg__media .artwork { scale: 1.05; }
.wg__no {
  position: absolute; top: -0.42em; left: -0.06em; z-index: 2;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(56px, 6.5vw, 108px);
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 42%, transparent);
  pointer-events: none;
}
.wg__body { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 16px; }
.wg__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .02em; }
.wg__title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink2); letter-spacing: .04em; margin-top: 5px; }
.wg__tags { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .06em; text-align: right; flex: none; }
.wg__year {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  padding: 6px 13px; border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* 长廊末尾的 CTA 卡 */
.wg__cta {
  flex: none; align-self: center;
  display: grid; place-items: center; gap: 10px;
  width: clamp(240px, 24vw, 380px); aspect-ratio: 1;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(20px, 2vw, 28px); text-align: center;
  transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.wg__cta svg { width: 26px; height: 26px; transition: transform .4s var(--ease-out); }
.wg__cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.wg__cta:hover svg { transform: translateX(8px); }
.wg__foot {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(22px, 4vh, 48px);
}
.wg__progress { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.wg__progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.wg__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; color: var(--ink2); }

/* 长廊降级（reduced-motion）：还原为静态网格 */
.wg--flat .wg__pin {
  height: auto; overflow: visible; position: static;
  padding-block: clamp(70px, 11vw, 160px) 0;
}
.wg--flat .wg__foot { display: none; }
.wg--flat .works-grid { padding-inline: var(--pad); }

/* ── 作品卡片（reduced-motion 回退网格） ─────────────────────────────── */
.works-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.work-card { display: block; }
.work-card__media {
  position: relative; aspect-ratio: 4 / 3.1; border-radius: var(--radius); overflow: hidden;
}
.work-card__media .artwork { transition: scale 1s var(--ease-out); }
.work-card:hover .work-card__media .artwork { scale: 1.05; }
.work-card__year {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em;
  padding: 7px 14px; border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.work-card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 18px; }
.work-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: .02em; }
.work-card__title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink2); letter-spacing: .04em; margin-top: 4px; }
.work-card__tags { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .06em; text-align: right; flex: none; }

/* ── 服务列表 ─────────────────────────────── */
.services { border-top: 1px solid var(--line); }
.service { position: relative; border-bottom: 1px solid var(--line); isolation: isolate; }
.service__head {
  width: 100%; display: grid;
  grid-template-columns: 84px 1.1fr 1.6fr auto 30px;
  gap: var(--gap); align-items: center; text-align: left;
  padding: clamp(28px, 3.8vw, 50px) clamp(10px, 1.6vw, 26px);
}
.service__chev { width: 20px; height: 20px; justify-self: end; color: var(--ink2); transition: transform .5s var(--ease-out), color .3s ease; }
.service__head:hover .service__chev { color: var(--accent-text); }
.service__head[aria-expanded="true"] .service__chev { transform: rotate(135deg); color: var(--accent-text); }
.service__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-io); }
.service__head[aria-expanded="true"] + .service__panel { grid-template-rows: 1fr; }
.service__panel-in {
  overflow: hidden; min-height: 0;
  padding-left: calc(84px + var(--gap)); padding-right: clamp(10px, 1.6vw, 26px);
}
.service__how { color: color-mix(in srgb, var(--ink) 82%, var(--ink2)); font-size: 15.5px; line-height: 1.95; max-width: 44em; }
.service__deliver { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--ink2); margin-top: 14px; }
.service__links { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; margin: 18px 0 clamp(24px, 3vw, 40px); }
.lnk--dim { color: var(--ink2); }
/* 悬停：圆角暖灰内嵌块自下而上漫起——比全宽反白方条柔和得多 */
.service::before {
  content: ""; position: absolute; inset: 6px clamp(-8px, -.5vw, -14px); z-index: -1;
  background: var(--bg2); border-radius: 18px;
  opacity: 0; transform: translateY(10px) scale(.99);
  transition: opacity .45s ease, transform .55s var(--ease-out);
}
.service:has(.service__head:hover)::before { opacity: 1; transform: none; }
.service__head > * { transition: color .35s ease, transform .5s var(--ease-out); }
.service__head:hover .service__title { transform: translateX(10px); }
.service__no {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 2.6vw, 40px); color: var(--accent-text); line-height: 1;
}
.service__head:hover .service__no { transform: translateY(-4px) rotate(-6deg); }
.service__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 3vw, 40px); letter-spacing: .03em; }
.service__title small { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: .06em; color: var(--ink2); margin-top: 4px; }
.service__head:hover .service__title small { color: var(--accent-text); }
.service__desc { color: var(--ink2); font-size: 15px; max-width: 34em; }
.service__head:hover .service__desc { color: color-mix(in srgb, var(--ink) 84%, var(--ink2)); }
.service__tags { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .05em; text-align: right; line-height: 2; }

/* ── 文章列表 ─────────────────────────────── */
.post-list { border-top: 1px solid var(--line); }
.post-row {
  position: relative; display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: var(--gap); align-items: center;
  padding: clamp(22px, 3vw, 38px) clamp(4px, 1vw, 18px);
  border-bottom: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
}
.post-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease-io);
}
.post-row:hover::before { transform: scaleY(1); transform-origin: top; }
.post-row > * { transition: color .3s ease, transform .5s var(--ease-out); }
.post-row:hover > * { color: var(--bg); }
.post-row__date { font-family: var(--font-mono); font-size: 13px; color: var(--ink2); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.post-row__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .02em; }
.post-row:hover .post-row__title { transform: translateX(12px); }
.post-row__tags { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .06em; }
.post-row__min { font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .06em; }
.post-row__arr {
  position: absolute; right: clamp(4px, 1vw, 18px); top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  opacity: 0; transform: translateX(-14px) rotate(-45deg);
  transition: opacity .35s ease, transform .5s var(--ease-out);
  color: var(--accent);
}
.post-row:hover .post-row__arr { opacity: 1; transform: translateX(0) rotate(0); }
.post-list--full .post-row { grid-template-columns: 150px 1fr auto auto 30px; }

/* ── 页脚铭牌行 ─────────────────────────────── */
.colophon {
  margin-top: clamp(36px, 5vw, 56px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .26em;
  color: var(--ink2);
}
.colophon::selection { background: var(--accent-fill); }
@media (max-width: 640px) { .colophon { font-size: 9.5px; letter-spacing: .14em; } }

/* ── 蓝图批注：散落在留白处的工程注记 ─────────────────────────────── */
.anno {
  position: absolute; left: var(--ax, 50%); top: var(--ay, 50%);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--ink2); opacity: .8; white-space: nowrap;
  pointer-events: none; user-select: none; z-index: 1;
}
@media (max-width: 1080px) { .anno { display: none; } }

/* ── 怎么合作：四步 ─────────────────────────────── */
.process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
/* 电路干线：一条贯穿四步的虚线（跨过列间距），节点落在各步起点 */
.process::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 15px);
}
.step { position: relative; padding-top: 24px; transition: transform .5s var(--ease-out); }
.step::before {
  content: ""; position: absolute; top: -4.5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
/* 节点呼吸：微型脉冲圈错峰扩散 */
.step::after {
  content: ""; position: absolute; top: -4.5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: node-ping 3.4s ease-out infinite;
}
.step:nth-child(2)::after { animation-delay: .85s; }
.step:nth-child(3)::after { animation-delay: 1.7s; }
.step:nth-child(4)::after { animation-delay: 2.55s; }
@keyframes node-ping {
  0% { transform: scale(.5); opacity: .9; }
  60%, 100% { transform: scale(3); opacity: 0; }
}
.step:hover { transform: translateY(-6px); }
.step__no {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 3.6vw, 56px); line-height: 1; color: var(--accent-text);
  display: inline-block; transition: transform .5s var(--ease-out);
}
.step:hover .step__no { transform: rotate(-8deg) scale(1.08); }
.step__t { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2vw, 27px); margin: 14px 0 10px; letter-spacing: .02em; }
.step__t small { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 13px; color: var(--ink2); margin-top: 4px; letter-spacing: .06em; }
.step__d { color: var(--ink2); font-size: 14.5px; line-height: 1.9; }

/* ── 首页「编辑部」：头条特写 + 目录 ─────────────────────────────── */
.press { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.press__lead { position: relative; display: block; padding-top: clamp(20px, 2.5vw, 34px); }
.press__mark {
  position: absolute; top: -0.12em; left: -0.05em; z-index: -1;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(130px, 15vw, 240px); line-height: 1;
  color: var(--accent); opacity: .1; pointer-events: none; user-select: none;
}
.press__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em; color: var(--accent-text); text-transform: uppercase; }
.press__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(28px, 3.5vw, 52px); line-height: 1.28; letter-spacing: .01em;
  margin: 16px 0 18px; max-width: 15em;
}
/* 荧光笔划线：悬停时从左向右涂满标题 */
.press__title > span {
  background: linear-gradient(color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)) no-repeat 0 86% / 0 38%;
  transition: background-size .65s var(--ease-io);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.press__lead:hover .press__title > span { background-size: 100% 38%; }
.press__excerpt { color: var(--ink2); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.9; max-width: 30em; }
.press__meta { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink2); margin-top: 20px; }
.press__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; font-size: 15px; }
.press__go svg { width: 17px; height: 17px; transition: transform .4s var(--ease-out); }
.press__lead:hover .press__go svg { transform: translateX(6px); }
.press__list { border-top: 1px solid var(--line); }
.press__row {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(14px, 2vw, 24px);
  align-items: baseline; padding: clamp(18px, 2.4vw, 28px) 4px;
  border-bottom: 1px solid var(--line);
}
.press__no { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(18px, 1.8vw, 24px); color: var(--accent-text); }
.press__rt { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.6vw, 21px); letter-spacing: .01em; transition: transform .45s var(--ease-out), color .3s ease; }
.press__row:hover .press__rt { transform: translateX(8px); color: var(--accent-text); }
.press__rm { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink2); }

/* ── 作品索引页 ─────────────────────────────── */
.work-index { padding-bottom: clamp(70px, 10vw, 150px); }
.work-item {
  display: grid; grid-template-columns: 60px 300px 1fr auto;
  gap: var(--gap); align-items: center;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.work-item:last-child { border-bottom: 1px solid var(--line); }
.work-item__no { font-family: var(--font-mono); font-size: 13px; color: var(--ink2); }
.work-item__media { position: relative; aspect-ratio: 16 / 9.5; border-radius: 12px; overflow: hidden; }
.work-item__media .artwork { transition: scale .9s var(--ease-out); }
.work-item:hover .work-item__media .artwork { scale: 1.07; }
.work-item__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4.4vw, 62px); letter-spacing: .02em; line-height: 1.25; transition: transform .5s var(--ease-out), color .3s ease; }
.work-item:hover .work-item__title { transform: translateX(14px); color: var(--accent-text); }
.work-item__title small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--ink2); letter-spacing: .03em; margin-top: 6px; }
.work-item__meta { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink2); letter-spacing: .08em; line-height: 2.1; }

/* ── 作品详情 ─────────────────────────────── */
/* 项目页吸收自身配色：顶部环境光晕 + 主题化点缀。
   JS 注入两套（--pa/--pc 深色用、--pal/--pcl 浅色用），
   此处只做选路——浅色主题拿到的是专门加深过的 light 色板，AA 有保障 */
.v-project { position: relative; --pac: var(--pa); --pcc: var(--pc); }
html[data-theme="light"] .v-project { --pac: var(--pal, var(--pa)); --pcc: var(--pcl, var(--pc)); }
.v-project::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(78vh, 920px);
  background: radial-gradient(58% 54% at 50% -6%, color-mix(in srgb, var(--pac, transparent) 16%, transparent), transparent 72%);
  pointer-events: none; z-index: -1;
}
.v-project .proj-sec h2 i { color: color-mix(in srgb, var(--pac) 72%, var(--ink)); }
.v-project .page-kicker .crumb:hover { color: color-mix(in srgb, var(--pac) 72%, var(--ink)); }
.v-project .proj-metric b { color: color-mix(in srgb, var(--pac) 76%, var(--ink)); }
.v-project .proj-metric b i { color: color-mix(in srgb, var(--pcc) 68%, var(--ink)); }
.v-project ::selection { background: var(--pac); color: var(--bg); }

.proj-hero { padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 100px)); }
.proj-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(48px, 10vw, 150px); line-height: 1.12; letter-spacing: .01em;
}
.proj-blurb { margin-top: clamp(18px, 2.5vw, 28px); color: var(--ink2); font-size: clamp(16px, 1.6vw, 20px); max-width: 36em; }
.proj-cover { margin-top: clamp(36px, 5vw, 64px); }
.proj-cover__art {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 8.2; will-change: transform;
}
.proj-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  padding-block: clamp(34px, 5vw, 56px);
  border-bottom: 1px solid var(--line); margin-top: clamp(24px, 3vw, 40px);
}
.proj-meta__cell b { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--ink2); font-weight: 400; margin-bottom: 10px; text-transform: uppercase; }
.proj-meta__cell span { font-size: 16px; font-weight: 600; }
.proj-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(40px, 6vw, 100px); padding-block: clamp(50px, 8vw, 110px); }
.proj-sec h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: .02em; margin: clamp(34px, 5vw, 54px) 0 18px;
}
.proj-sec h2:first-child { margin-top: 0; }
.proj-sec h2 i { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); margin-right: 14px; font-weight: 400; }
.proj-sec p { color: var(--ink2); font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.9; max-width: 38em; }
.proj-metrics { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); position: sticky; top: calc(var(--nav-h) + 30px); }
.proj-metric { border-top: 1px solid var(--line); padding-top: 18px; }
.proj-metric b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.proj-metric b i { font-style: normal; color: var(--accent-text); font-size: .6em; font-weight: 400; margin-left: 2px; }
.proj-metric span { color: var(--ink2); font-size: 14px; display: block; margin-top: 8px; }
.proj-shots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); padding-bottom: clamp(50px, 8vw, 110px); }
.proj-shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.proj-shot:nth-child(2) { transform: translateY(clamp(20px, 4vw, 60px)); }
.proj-next { display: block; padding-block: 0 clamp(50px, 8vw, 100px); }
.proj-next__inner {
  position: relative; overflow: hidden; border-radius: var(--radius);
  min-height: clamp(300px, 52vh, 540px);
  display: flex; align-items: flex-end;
}
.proj-next__art { position: absolute; inset: 0; }
.proj-next__art .artwork { transition: scale 1.2s var(--ease-out); }
.proj-next:hover .proj-next__art .artwork { scale: 1.05; }
.proj-next__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(185deg, transparent 42%, rgba(8, 8, 10, .6));
}
.proj-next__body {
  position: relative; z-index: 1; width: 100%;
  display: flex; align-items: baseline; gap: clamp(14px, 2.5vw, 30px); flex-wrap: wrap;
  padding: clamp(20px, 3.5vw, 42px);
  color: #F2EFE8;
}
.proj-next__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; opacity: .8; }
.proj-next__t {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 5.5vw, 76px); letter-spacing: .01em; line-height: 1.05;
  transition: transform .5s var(--ease-out);
}
.proj-next:hover .proj-next__t { transform: translateX(10px); }
.proj-next__body svg {
  width: clamp(26px, 3.4vw, 44px); height: auto; margin-left: auto; align-self: center;
  transition: transform .5s var(--ease-out);
}
.proj-next:hover .proj-next__body svg { transform: translateX(10px); }

/* ── 博客文章页 ─────────────────────────────── */
.post-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-nav) + 1);
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}
.post-head { padding-top: calc(var(--nav-h) + clamp(44px, 7vw, 90px)); padding-bottom: clamp(30px, 4vw, 50px); }
.post-head__meta { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--ink2); letter-spacing: .08em; margin-bottom: 20px; }
.post-head__meta .tag { color: var(--accent-text); }
.post-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(34px, 6vw, 84px); line-height: 1.3; letter-spacing: .01em;
  max-width: 18em;
}
.post-excerpt { margin-top: clamp(20px, 3vw, 30px); font-family: var(--font-serif); font-style: italic; color: var(--ink2); font-size: clamp(17px, 1.8vw, 22px); max-width: 30em; line-height: 1.75; }
.post-body { max-width: 760px; margin-inline: auto; padding-block: clamp(30px, 5vw, 60px); border-top: 1px solid var(--line); }
.post-body > * + * { margin-top: 1.5em; }
/* 首字下沉：衬线斜体大字，杂志开篇的仪式感 */
.post-body > p:first-child::first-letter {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 3.1em; line-height: .8;
  float: left; padding: .08em .14em 0 0;
  color: var(--accent-text);
}
.post-body p { font-size: clamp(16px, 1.35vw, 18px); line-height: 2; color: color-mix(in srgb, var(--ink) 88%, var(--ink2)); }
.post-body h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: .02em; margin-top: 2.2em;
}
.post-body h2::before { content: "§ "; color: var(--accent-text); font-weight: 400; }
.post-body blockquote {
  border-left: 3px solid var(--accent); padding: .4em 0 .4em 1.6em; margin-block: 2em;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 1.8vw, 23px); line-height: 1.8; color: var(--ink);
}
.post-body pre {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 26px; overflow-x: auto; font-family: var(--font-mono);
  font-size: 13.5px; line-height: 1.8; margin-block: 1.8em;
}
.post-body code { font-family: var(--font-mono); font-size: .92em; }
.post-body p code, .post-body li code { background: var(--bg2); border: 1px solid var(--line); padding: .1em .45em; border-radius: 6px; color: var(--accent-text); }
.post-body ul { padding-left: 1.3em; }
.post-body li { margin-block: .7em; line-height: 1.9; color: color-mix(in srgb, var(--ink) 88%, var(--ink2)); }
.post-body li::marker { color: var(--accent-text); }
.post-body strong { color: var(--ink); }
.post-foot {
  max-width: 760px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-block: clamp(30px, 5vw, 56px); border-top: 1px solid var(--line);
}
.post-nav { display: flex; gap: clamp(28px, 5vw, 72px); margin-left: auto; flex-wrap: wrap; }
.post-next { text-align: right; }
.post-next--prev { text-align: left; }
.post-next__k { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--ink2); margin-bottom: 6px; }
.post-next__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 26px); transition: color .3s ease; }
.post-next:hover .post-next__t { color: var(--accent-text); }

/* ── 关于页 ─────────────────────────────── */
.about-intro {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(36px, 6vw, 100px);
  align-items: start; padding-bottom: clamp(40px, 6vw, 80px);
}
.about-portrait { position: sticky; top: calc(var(--nav-h) + 24px); }
.about-portrait__art { position: relative; aspect-ratio: 3.4 / 4; border-radius: var(--radius); overflow: hidden; will-change: transform; }
.about-portrait figcaption {
  margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .1em; color: var(--ink2);
}
.about-bio p { font-size: clamp(18px, 2vw, 26px); line-height: 1.95; font-weight: 400; }
.about-bio p + p { margin-top: 1.6em; }

.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.belief { border-top: 1px solid var(--line); padding-top: 24px; }
.belief__no { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); }
.belief__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); margin: 14px 0 12px; letter-spacing: .02em; }
.belief__desc { color: var(--ink2); font-size: 15px; line-height: 1.9; }

.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tool-group__h { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--ink2); text-transform: uppercase; margin-bottom: 18px; }
.tool-chip {
  display: inline-block; margin: 0 8px 10px 0; padding: 9px 18px;
  border: 1px solid var(--line); border-radius: 99px; font-size: 14px;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .3s var(--ease-out);
}
.tool-chip:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-3px); }

.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.tl-item { position: relative; padding: 0 0 clamp(34px, 5vw, 54px) clamp(28px, 4vw, 54px); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -4.5px; top: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.tl-item__time { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); letter-spacing: .1em; }
.tl-item__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); margin: 8px 0 6px; letter-spacing: .02em; }
.tl-item__desc { color: var(--ink2); font-size: 15px; max-width: 40em; }

.awards { border-top: 1px solid var(--line); }
.award {
  display: grid; grid-template-columns: 90px 1fr auto; gap: var(--gap); align-items: baseline;
  padding: 20px clamp(2px, .8vw, 14px); border-bottom: 1px solid var(--line);
  transition: background-color .3s ease, padding-left .4s var(--ease-out);
}
.award:hover { background: var(--bg2); padding-left: clamp(12px, 2vw, 28px); }
.award__year { font-family: var(--font-mono); font-size: 13px; color: var(--ink2); }
.award__name { font-weight: 600; font-size: clamp(16px, 1.6vw, 20px); }
.award__by { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink2); letter-spacing: .06em; }

/* ── 联系页 ─────────────────────────────── */
.contact-mail { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap; padding-bottom: clamp(40px, 6vw, 80px); }
.contact-mail__a {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 5.6vw, 76px); letter-spacing: .01em;
  position: relative; line-height: 1.25;
  background: linear-gradient(var(--accent-text), var(--accent-text)) no-repeat 0 100% / 0 3px;
  transition: background-size .6s var(--ease-io), color .3s ease;
  word-break: break-all;
}
.contact-mail__a:hover { background-size: 100% 3px; color: var(--accent-text); }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(44px, 7vw, 110px); padding-bottom: clamp(70px, 10vw, 150px); }

.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.cform__field { margin-bottom: clamp(24px, 3vw, 34px); }
.cform__field label, .cform__legend {
  display: block; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: .16em; color: var(--ink2); margin-bottom: 12px; text-transform: uppercase;
}
.cform__field label i { color: var(--accent-text); font-style: normal; }
.cform__field input, .cform__field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 12px 2px 14px; font-size: 17px; border-radius: 0;
  transition: border-color .35s ease;
  resize: vertical; min-height: 44px;
}
.cform__field input:focus, .cform__field textarea:focus { outline: none; border-color: var(--accent); }
.cform__field input::placeholder, .cform__field textarea::placeholder { color: color-mix(in srgb, var(--ink2) 65%, transparent); }
.cform__field.has-err input, .cform__field.has-err textarea { border-color: var(--err); }
.cform__err { color: var(--err); font-size: 13px; margin-top: 8px; min-height: 1.2em; }
.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  padding: 11px 22px; border: 1px solid var(--line); border-radius: 99px;
  font-size: 14.5px; letter-spacing: .03em; min-height: 44px;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .2s var(--ease-out);
}
.pill:hover { border-color: var(--accent); transform: translateY(-2px); }
.pill.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cform__submit { margin-top: 8px; }
.cform__submit.is-busy { pointer-events: none; opacity: .6; }
.cform__note { margin-top: 18px; font-size: 13px; color: var(--ink2); font-family: var(--font-serif); font-style: italic; }
.cform-ok { padding: clamp(30px, 5vw, 60px) 0; }
.cform-ok__ico { width: 74px; height: 74px; margin-bottom: 26px; color: var(--accent); }
.cform-ok__ico circle { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1s var(--ease-out) forwards; }
.cform-ok__ico path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .7s var(--ease-out) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cform-ok h3 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); font-weight: 700; margin-bottom: 14px; }
.cform-ok p { color: var(--ink2); }

.contact-aside { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 44px); }
.contact-big { font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.6; font-variant-numeric: tabular-nums; }
.contact-block .footer__a { font-size: 15px; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px; text-align: left; font-size: 15.5px; font-weight: 600;
  transition: color .3s ease;
}
.faq-item__q:hover { color: var(--accent-text); }
.faq-item__q svg { width: 16px; height: 16px; flex: none; transition: transform .45s var(--ease-out); }
.faq-item__q[aria-expanded="true"] svg { transform: rotate(135deg); }
/* 收起态同时从无障碍树移除（visibility 延迟到收起动画结束） */
.faq-item__a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .5s var(--ease-io), visibility 0s linear .5s;
}
.faq-item__q[aria-expanded="true"] + .faq-item__a {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .5s var(--ease-io);
}
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding: 0 2px 20px; color: var(--ink2); font-size: 14.5px; line-height: 1.9; }

/* ── 404 ─────────────────────────────── */
.v-404 {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
  padding-top: var(--nav-h);
}
.e404 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(120px, 30vw, 360px); line-height: 1;
  color: transparent; -webkit-text-stroke: 2.5px var(--ink);
}
.v-404 .btn { margin-top: 26px; }

/* ── 响应式 ─────────────────────────────── */
@media (max-width: 1024px) {
  .proj-body { grid-template-columns: 1fr; }
  .proj-metrics { position: static; flex-direction: row; flex-wrap: wrap; }
  .proj-metric { flex: 1 1 160px; }
  .beliefs, .tools { grid-template-columns: 1fr 1fr; }
  .work-item { grid-template-columns: 40px 220px 1fr; }
  .work-item__meta { grid-column: 2 / -1; text-align: left; display: flex; gap: 18px; line-height: 1.6; }
}
@media (max-width: 860px) {
  .works-grid { grid-template-columns: 1fr; }
  .hero__badge { display: none; }
  .wg__item { width: min(78vw, 460px); }
  .wg__item:nth-child(even) { width: min(70vw, 400px); margin-top: 22px; }
  .wg__no { font-size: clamp(44px, 12vw, 72px); }
  .wg__cta { width: min(56vw, 300px); }
  .service__head { grid-template-columns: 44px 1fr 26px; grid-template-rows: auto auto; }
  .service__desc { grid-column: 2 / -1; }
  .service__tags { display: none; }
  .service__panel-in { padding-left: 0; }
  .press { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .post-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 6px; }
  .post-row__title { grid-column: 1 / -1; grid-row: 1; }
  .post-row__date { grid-row: 2; }
  .post-row__tags { display: none; }
  .post-row__min { grid-row: 2; text-align: right; }
  .post-row__arr { display: none; }
  .post-list--full .post-row { grid-template-columns: 1fr auto; }
  .about-intro { grid-template-columns: 1fr; }
  .about-portrait { position: static; max-width: 420px; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .proj-meta { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .proj-shots { grid-template-columns: 1fr; }
  .proj-shot:nth-child(2) { transform: none; }
}
@media (max-width: 620px) {
  /* 移动端首屏：更大的标题占位、收紧的纵向节奏，消灭大面积空场 */
  .hero { padding-bottom: clamp(76px, 11vh, 110px); justify-content: flex-end; gap: 0; }
  .hero__title { font-size: clamp(46px, 14.2vw, 96px); }
  .hero__meta { margin-bottom: clamp(18px, 3vh, 32px); }
  .hero__sub { margin-top: clamp(24px, 4.5vh, 44px); }
  .hero__star { width: clamp(22px, 4.5vw, 40px); }
  .hero__line--2 { gap: 10px; }
  .hero__sub { flex-direction: column; align-items: flex-start; }
  /* 缩略图 + 文字并排的紧凑列表（显式声明，勿依赖隐式网格） */
  .work-item { grid-template-columns: 42vw 1fr; align-items: center; }
  .work-item__no { display: none; }
  .work-item__media { grid-row: 1; }
  .work-item__meta { grid-column: 2; }
  .beliefs, .tools { grid-template-columns: 1fr; row-gap: 34px; }
  .cform__row { grid-template-columns: 1fr; gap: 0; }
  .contact-mail__a { font-size: clamp(22px, 7.5vw, 40px); }
}


/* ════════════════════════════════════════════════════════════
   子页面 hover 强化 & 关于页密度（追加覆盖层）
   ════════════════════════════════════════════════════════════ */

/* 作品索引行：左缘账签滑入 + 序号点亮 + 插画提色 */
.work-item { position: relative; transition: background-color .35s ease; }
.work-item::before {
  content: ""; position: absolute; left: calc(var(--pad) * -0.4); top: 18%; bottom: 18%;
  width: 3px; background: var(--accent); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-out);
}
.work-item:hover::before { transform: scaleY(1); }
.work-item:hover .work-item__no { color: var(--accent-text); }
.work-item:hover .artwork { filter: saturate(1.12) brightness(1.05); }
.work-item .artwork { transition: filter .4s ease, scale .9s var(--ease-out); }
.work-item:hover .work-item__meta { color: var(--ink); }
.work-item__meta { transition: color .3s ease; }

/* 时间线：节点点亮 + 标题推移 */
.tl-item__title { transition: transform .45s var(--ease-out), color .3s ease; }
.tl-item:hover .tl-item__title { transform: translateX(8px); color: var(--accent-text); }
.tl-item::before { transition: background-color .3s ease, box-shadow .3s ease; }
.tl-item:hover::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }

/* 信条：从「裸文字」升级为卡片 + 浮起 */
.belief {
  border: 1px solid var(--line); border-top: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px);
  background: color-mix(in srgb, var(--bg2) 55%, transparent);
  transition: transform .5s var(--ease-out), border-color .35s ease, background-color .35s ease;
}
.belief:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--bg2);
}
.belief__no { display: inline-block; transition: transform .5s var(--ease-out); }
.belief:hover .belief__no { transform: rotate(-8deg) scale(1.15); }

/* 关于页密度：收紧节奏，速览条 */
.v-about .sec { padding-block: clamp(46px, 7vw, 96px); }
.v-about .page-head { padding-bottom: clamp(28px, 4vw, 52px); }
.about-intro { padding-bottom: clamp(28px, 4vw, 56px); }
.about-bio > p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.9em; line-height: .92; float: left;
  padding: .04em .14em 0 0; color: var(--accent-text);
}
.facts {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap); padding-block: clamp(26px, 3.6vw, 44px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: clamp(10px, 2vw, 24px);
}
.facts b {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px); letter-spacing: .06em; color: var(--accent-text);
}
.facts span { display: block; margin-top: 8px; color: var(--ink2); font-size: 13.5px; letter-spacing: .04em; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; row-gap: 26px; } }