/* Hallmark · macrostructure: bespoke Marquee+Grid+Timeline+Statement (AIGC Riso collage)
 * genre: editorial brutalist · theme: custom · paper oklch(94% .012 80) · ink oklch(18% .01 50)
 * accent: red/yellow/blue Riso triad · display Bricolage Grotesque 900 + Noto Sans SC 900
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* The Bold Font（本地嵌入，极粗壮阔无衬线）
 * size-adjust 对齐 fallback Archivo Black 的字面尺寸，避免字体加载前后 C 等字符宽度跳动
 */
@font-face {
  font-family: 'The Bold Font';
  src: url('./theboldfont.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Mortend 字体（本地嵌入；Archivo Black 作为粗野主义 fallback）
 * 仓库仅提供 ExtraBold 的 woff/woff2，Regular/Bold 用 TTF 兜底。
 */
@font-face {
  font-family: 'Mortend';
  src: url('./fonts/Mortend-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mortend';
  src: url('./fonts/Mortend-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mortend';
  src: url('./fonts/mortend-extrabold-webfont.woff2') format('woff2'),
       url('./fonts/mortend-extrabold-webfont.woff') format('woff'),
       url('./fonts/Mortend-ExtraBold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-paper:     oklch(94% 0.012 80);
  --color-paper-2:   oklch(90% 0.015 75);
  --color-paper-3:   oklch(86% 0.018 72);
  --color-paper-4:   oklch(80% 0.02 70);
  --color-rule:      oklch(72% 0.02 65);
  --color-neutral:   oklch(55% 0.015 60);
  --color-muted:     oklch(40% 0.015 55);
  --color-ink:       oklch(18% 0.01 50);
  --color-red:       oklch(52% 0.22 25);
  --color-red-soft:  oklch(62% 0.18 25);
  --color-yellow:    oklch(82% 0.16 85);
  --color-yellow-soft: oklch(88% 0.13 85);
  --color-blue:      oklch(58% 0.18 250);
  --color-blue-soft: oklch(68% 0.14 250);
  --color-green:     oklch(58% 0.16 145);
  --color-pink:      oklch(72% 0.15 20);
  --color-torn:      oklch(97% 0.008 80);
  --color-focus:     oklch(52% 0.22 25);
  --font-display:    "Bricolage Grotesque", "Noto Sans SC", system-ui, sans-serif;
  --font-display-cn: "Noto Sans SC", "ZCOOL KuaiLe", sans-serif;
  --font-serif-cn:   "Noto Serif SC", serif;
  --font-hand:       "Ma Shan Zheng", "ZCOOL KuaiLe", cursive;
  --font-body:       "Geist", "Noto Sans SC", system-ui, sans-serif;
  --font-mono:       "Geist Mono", "Space Mono", ui-monospace, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  520ms;
  --chrome-h: 40px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: var(--color-ink); background: var(--color-paper);
  overflow-x: clip; min-height: 100vh;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(139,90,43,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(139,90,43,0.03) 0%, transparent 40%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: 0.3; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.02; font-style: normal; letter-spacing: -0.02em; }
::selection { background: var(--color-red); color: var(--color-paper); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-paper-2); }
::-webkit-scrollbar-thumb { background: var(--color-ink); border: 2px solid var(--color-paper-2); }

/* BROWSER CHROME */
.browser-chrome {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; height: var(--chrome-h);
  padding: 0 0.6rem; background: oklch(88% 0.008 80);
  border-bottom: 1.5px solid var(--color-ink);
  font-family: var(--font-mono); font-size: 0.72rem; gap: 0.5rem;
}
.chrome-left { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); display: inline-block; }
.dot-red { background: oklch(60% 0.18 25); }
.dot-yellow { background: oklch(80% 0.16 85); }
.dot-green { background: oklch(65% 0.15 145); }
.chrome-tab {
  display: inline-flex; align-items: center; height: 26px; padding: 0 0.7rem;
  background: var(--color-paper); border: 1.5px solid var(--color-ink); border-bottom: none;
  border-radius: 4px 4px 0 0; font-size: 0.68rem; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
  transition: background var(--dur-short) var(--ease-out);
}
.chrome-tab-active { background: var(--color-red); color: var(--color-paper); }
.chrome-tab:hover:not(.chrome-tab-active) { background: var(--color-paper-3); }
.chrome-url {
  flex: 1 1 auto; display: flex; align-items: center; gap: 0.4rem;
  height: 26px; padding: 0 0.8rem; background: var(--color-paper);
  border: 1px solid var(--color-ink); border-radius: 4px;
  max-width: 520px; margin: 0 auto; font-size: 0.72rem; color: var(--color-muted);
}
.url-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrome-right { display: flex; gap: 0.8rem; padding: 0 0.4rem; font-weight: 700; font-size: 0.9rem; }
.chrome-close:hover { color: var(--color-red); }

/* ============================================================
   PRELOADER — Riso 风格加载页
============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-paper);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 600ms var(--ease-out), visibility 600ms;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.prel-paper {
  position: relative; width: min(480px, 88vw);
  padding: clamp(2rem,6vw,3.5rem) 2rem;
  background: var(--color-torn);
  border: 3px solid var(--color-ink);
  box-shadow: 6px 7px 0 var(--color-red), 10px 12px 30px rgba(0,0,0,0.2);
  text-align: center;
}
.prel-staple {
  position: absolute; width: 26px; height: 10px;
  background: var(--color-paper-4); border: 1px solid var(--color-ink); border-radius: 2px;
}
.prel-staple-tl { top: -8px; left: 20%; }
.prel-staple-br { bottom: -8px; right: 20%; }
.prel-target {
  width: 80px; height: 80px; margin: 0 auto 1rem; color: var(--color-ink);
  animation: prel-spin 3s linear infinite;
}
.prel-target svg { width: 100%; height: 100%; }
@keyframes prel-spin { to { transform: rotate(360deg); } }
.prel-word {
  font-family: 'The Bold Font', 'Archivo Black', var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 6rem); line-height: 0.9;
  display: flex; justify-content: center; gap: 0;
  margin-bottom: 0.5rem;
}
.prel-word span { display: inline-block; }
.pw-a { color: oklch(58% 0.23 35); text-shadow: 3px 0 0 oklch(80% 0.2 90), -2px 2px 0 var(--color-ink); transform: translateY(0); animation: prel-bounce 1.2s ease-in-out infinite; }
.pw-i { color: oklch(58% 0.23 35); text-shadow: 3px 0 0 oklch(80% 0.2 90), -2px 2px 0 var(--color-ink); margin: 0 -0.04em; animation: prel-bounce 1.2s ease-in-out infinite 0.15s; }
.pw-g { color: oklch(80% 0.2 90); text-shadow: -2px 2px 0 oklch(58% 0.23 35), 2px 0 0 var(--color-ink); margin: 0 -0.04em; animation: prel-bounce 1.2s ease-in-out infinite 0.3s; }
.pw-c { color: oklch(80% 0.2 90); text-shadow: 3px 3px 0 oklch(58% 0.23 35); animation: prel-bounce 1.2s ease-in-out infinite 0.45s; }
@keyframes prel-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.prel-sub {
  font-family: var(--font-display-cn); font-weight: 900;
  font-size: clamp(1rem,2.2vw,1.3rem); margin-bottom: 1.5rem; color: var(--color-muted);
}
.prel-bar {
  width: 100%; height: 10px; background: var(--color-paper-2);
  border: 2px solid var(--color-ink); position: relative; overflow: hidden;
  margin-bottom: 0.8rem;
}
.prel-bar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--color-red); transition: width 180ms linear;
}
.prel-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.15em; font-weight: 700;
}
.prel-loading { color: var(--color-muted); text-transform: uppercase; }
.prel-percent { color: var(--color-red); font-size: 1rem; }
.prel-dots {
  position: absolute; border-radius: 50%; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0.5;
}
.prel-dots-r {
  width: 120px; height: 120px; top: -30px; right: -30px;
  background: radial-gradient(circle, var(--color-red-soft) 2px, transparent 2.5px);
  background-size: 8px 8px;
}
.prel-dots-b {
  width: 100px; height: 100px; bottom: -20px; left: -20px;
  background: radial-gradient(circle, var(--color-blue-soft) 2px, transparent 2.5px);
  background-size: 7px 7px;
}
.prel-dots-y {
  width: 80px; height: 80px; top: 40%; right: -40px;
  background: radial-gradient(circle, var(--color-yellow) 3px, transparent 3.5px);
  background-size: 10px 10px; opacity: 0.6;
}
.prel-sticker {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  padding: 0.25rem 0.7rem;
  background: var(--color-yellow); border: 2px solid var(--color-ink);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.15em; box-shadow: 2px 2px 0 var(--color-ink);
}

/* ============================================================
   HERO — AIGC 解构大字 + 全屏视频背景暗化
============================================================ */
.hero {
  position: relative; min-height: calc(100vh - var(--chrome-h));
  padding: clamp(1rem,3vw,2rem); overflow: hidden;
  background: var(--color-paper);
  border-bottom: 1.5px solid var(--color-ink);
  color: var(--color-paper);
}

/* 全屏视频背景层 */
.hero-bg-video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: #1a1410;
}
.bgv-video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}
/* 韦斯·安德森调色覆盖：粉黄暖调 */
.bgv-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 180, 100, 0.18) 0%,
      rgba(255, 120, 140, 0.12) 40%,
      rgba(120, 180, 200, 0.15) 100%);
  mix-blend-mode: soft-light;
}
.bgv-layer { position: absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(40px); opacity: 0.45; z-index: 2; }
.bgv-1 { width: 60%; height: 60%; top: -20%; left: -10%; opacity: 0.15; background: radial-gradient(circle, var(--color-red) 0%, var(--color-red-soft) 60%, transparent 75%); animation: bgv-float-1 18s ease-in-out infinite; }
.bgv-2 { width: 55%; height: 55%; bottom: -20%; right: -10%; opacity: 0.15; background: radial-gradient(circle, var(--color-blue) 0%, var(--color-blue-soft) 60%, transparent 75%); animation: bgv-float-2 22s ease-in-out infinite; }
.bgv-3 { width: 55%; height: 55%; top: 20%; left: 30%; background: radial-gradient(circle, var(--color-yellow) 0%, var(--color-yellow-soft) 60%, transparent 75%); animation: bgv-float-3 15s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes bgv-float-1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(15%,10%) scale(1.2)} }
@keyframes bgv-float-2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-10%,-15%) scale(1.15)} }
@keyframes bgv-float-3 { 0%,100%{transform:translate(0,0) scale(1) rotate(0)} 50%{transform:translate(-15%,8%) scale(1.3) rotate(30deg)} }
.bgv-grid { position: absolute; inset: 0; z-index: 3;
  background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.5; animation: bgv-grid-move 25s linear infinite; pointer-events: none; }
@keyframes bgv-grid-move { to { background-position: 40px 40px; } }
.bgv-noise { position: absolute; inset: 0; z-index: 4; mix-blend-mode: overlay; opacity: 0.4; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.bgv-text-strip { position: absolute; bottom: 15%; left: 0; right: 0; z-index: 5; pointer-events: none;
  display: flex; gap: 4rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 8vw, 7rem); color: rgba(255,255,255,0.15);
  letter-spacing: -0.01em; animation: bgv-marquee 30s linear infinite;
}
.bgv-text-strip span { flex: 0 0 auto; }
@keyframes bgv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 暗化叠层 */
.hero-bg-dim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.35) 100%);
}
/* 纸纹叠层保留拼贴质感 */
.hero-bg-paper {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.15; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-rail-left {
  position: absolute; top: clamp(1rem,2.5vw,1.8rem); left: clamp(0.8rem,2.5vw,1.8rem);
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; z-index: 5;
}
.rail-slash { font-weight: 700; letter-spacing: -0.05em; }
.rail-dot { color: var(--color-red); font-weight: 700; }
.rail-num { color: var(--color-red); font-weight: 700; }
.hero-meta { position: absolute; top: clamp(1rem,2.5vw,1.8rem); right: clamp(0.8rem,2.5vw,1.8rem); z-index: 5; }
.meta-stamp {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; padding: 0.25rem 0.55rem;
  border: 1.5px solid var(--color-ink); background: var(--color-paper);
  text-transform: uppercase; font-weight: 700;
  transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--color-ink);
}
.hero-note.note-year {
  position: absolute; top: clamp(3rem,7vw,5rem); right: clamp(3rem,12vw,12rem);
  z-index: 8; background: var(--color-yellow); padding: 0.45rem 0.9rem;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(0.85rem,1.4vw,1.1rem); line-height: 1;
  border: 2px solid var(--color-ink);
  transform: rotate(-7deg); box-shadow: 3px 4px 0 var(--color-ink); text-align: center;
}
.note-pin { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 14px; height: auto; }
.hero-staple {
  position: absolute; top: 2.5rem; left: 2.5rem;
  width: 28px; height: 44px; z-index: 4; opacity: 0.85;
  animation: staple-wiggle 6s ease-in-out infinite;
}
@keyframes staple-wiggle { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(-2deg)} }
.hero-pin { position: absolute; width: 40px; height: 40px; z-index: 8; filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.3)); }
.pin-tr { top: clamp(4rem,9vw,7rem); right: clamp(1.5rem,5vw,4rem); }
.pin-bl { bottom: clamp(7rem,13vw,10rem); left: clamp(2rem,8vw,6rem); }
.hero-target {
  position: absolute; top: clamp(3rem,10vw,8rem); left: 38%;
  width: clamp(110px,18vw,200px); height: clamp(110px,18vw,200px);
  opacity: 0.4; z-index: 1; mix-blend-mode: multiply;
  animation: target-spin 40s linear infinite;
}
@keyframes target-spin { to { transform: rotate(360deg); } }
.hero-tape { position: absolute; width: 100px; height: 24px; opacity: 0.65; z-index: 4; }
.tape-top { top: clamp(4.5rem,9vw,6rem); left: 28%; background: var(--color-yellow-soft); transform: rotate(-8deg); }
.tape-mid { top: 16%; right: 6%; width: 72px; height: 20px; transform: rotate(5deg); background: var(--color-red-soft); opacity: 0.5; }

.hero-title-stack {
  position: relative; z-index: 5;
  margin-top: clamp(4rem, 9vw, 7rem);
  margin-left: clamp(0.3rem, 1.5vw, 1.5rem);
  width: 100%;
}
.hero-word-row { position: relative; line-height: 0.8; display: flex; flex-wrap: wrap; align-items: baseline; }

/* AIGC 4 字母 — Archivo Black 极粗壮阔字
 * 配色统一红 + 橙黄，无镂空，无绿色
 */
.hw {
  font-family: 'The Bold Font', 'Archivo Black', var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(6rem, 18vw, 16rem);
  line-height: 0.82;
  display: inline-block;
  letter-spacing: -0.04em;
  margin-right: clamp(0.05rem, 0.4vw, 0.4rem);
  vertical-align: baseline;
  position: relative;
  opacity: 0;
  transform: translate(-15px, 12px);
  animation: hw-in 650ms var(--ease-out) forwards;
}
/* A/I 红色，G/C 橙黄；均为实心，带同色系错位阴影 */
.hw-a { animation-delay: 200ms;
        color: oklch(58% 0.23 35);
        text-shadow: 6px 0 0 oklch(80% 0.2 90), -4px 5px 0 var(--color-paper), 0 0 50px rgba(255,120,40,0.5);
        transform: translate(-15px, 12px) rotate(-2deg); }
.hw-i { animation-delay: 320ms;
        color: oklch(58% 0.23 35);
        text-shadow: 5px 0 0 oklch(80% 0.2 90), -3px 4px 0 var(--color-paper);
        transform: translate(-15px, 12px) rotate(3deg) translateY(0.05em); }
.hw-g { animation-delay: 440ms;
        color: oklch(80% 0.2 90);
        text-shadow: -5px 4px 0 oklch(58% 0.23 35), 5px 0 0 var(--color-paper), 0 0 40px rgba(255,200,40,0.5);
        transform: translate(-15px, 12px) rotate(1deg); }
.hw-c { animation-delay: 560ms;
        color: oklch(80% 0.2 90);
        text-shadow: 6px 6px 0 oklch(58% 0.23 35), 0 0 40px rgba(255,180,40,0.4);
        transform: translate(-15px, 12px) rotate(-1deg); margin-right: 0; }
@keyframes hw-in {
  0% { opacity: 0; filter: blur(4px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); filter: blur(0); }
}
/* 入场结束后保持错落 rotation —— 用额外 class 锁定 */
.hw.in { transform: translate(0,0) rotate(var(--end-rot, 0)); }

/* 黑色倾斜跑马灯长条 —— 胶带感（无白色描边） */
.hero-bar-marquee {
  position: relative;
  width: 115%;
  margin: clamp(0.4rem, 1.2vw, 1rem) -8% clamp(0.3rem, 0.8vw, 0.7rem);
  height: clamp(2.2rem, 4.6vw, 3.6rem);
  background: var(--color-ink);
  transform: rotate(-2.5deg) skewX(-4deg);
  overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,0.4), inset 0 0 30px rgba(0,0,0,0.5);
  z-index: 4;
  transform-origin: left center;
  animation: bar-sweep 700ms var(--ease-out) 300ms both, bar-color-cycle 12s linear infinite;
}
@keyframes bar-sweep { from { transform: rotate(-2.5deg) skewX(-4deg) scaleX(0); } to { transform: rotate(-2.5deg) skewX(-4deg) scaleX(1); } }
@keyframes bar-color-cycle {
  0%   { background: oklch(22% 0.02 50); }
  20%  { background: oklch(30% 0.14 35); }   /* 深橙红 */
  40%  { background: oklch(28% 0.12 75); }   /* 暗金橙 */
  60%  { background: oklch(26% 0.16 50); }   /* 橙棕 */
  80%  { background: oklch(30% 0.14 30); }   /* 红棕 */
  100% { background: oklch(22% 0.02 50); }
}
.hbm-track {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  animation: hbm-scroll 28s linear infinite;
}
@keyframes hbm-scroll {
  from { transform: translateY(-50%) translateX(0); }
  to   { transform: translateY(-50%) translateX(-50%); }
}
.hbm-item {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.85rem);
  letter-spacing: 0.06em;
  color: oklch(86% 0.16 80);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 oklch(55% 0.22 35);
  display: inline-block;
}
.hbm-item:nth-child(4n+1) { color: oklch(86% 0.16 80); text-shadow: 2px 2px 0 oklch(55% 0.22 35); }
.hbm-item:nth-child(4n+2) { color: oklch(64% 0.23 35); text-shadow: 2px 2px 0 oklch(82% 0.17 75); }
.hbm-item:nth-child(4n+3) { color: oklch(84% 0.18 75); text-shadow: 2px 2px 0 oklch(55% 0.22 35); }
.hbm-item:nth-child(4n+4) { color: oklch(90% 0.04 70); text-shadow: 2px 2px 0 oklch(55% 0.22 35); }
@keyframes hbm-item-color {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(40deg); }
}
.hbm-dot {
  color: var(--color-red);
  font-size: clamp(0.7rem, 1.4vw, 1.1rem);
  text-shadow: 0 0 8px currentColor;
  display: inline-block;
  animation: hbm-dot-pulse 1.4s ease-in-out infinite;
}
.hbm-dot:nth-child(even) { animation-delay: 0.7s; color: var(--color-yellow); }
@keyframes hbm-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.7; }
}

/* 小 AI · GENERATED 标签 */
.hw-tag {
  display: inline-block; margin-top: 0.8rem;
  font-family: var(--font-mono); font-size: clamp(0.6rem, 1vw, 0.78rem);
  font-weight: 900; letter-spacing: 0.25em; color: var(--color-yellow);
  background: rgba(0,0,0,0.5); border: 2px solid var(--color-yellow);
  padding: 0.3rem 0.7rem; transform: rotate(-2deg);
  text-transform: uppercase;
  animation: hw-in 500ms var(--ease-out) 1100ms both;
}
.row-bot { margin-top: clamp(0.15rem,0.5vw,0.35rem); }
.hero-cn {
  font-family: var(--font-display-cn); font-weight: 900;
  font-size: clamp(3.5rem, 10vw, 9rem); line-height: 0.85;
  display: inline-block; letter-spacing: -0.04em; vertical-align: baseline;
  position: relative; opacity: 0; transform: translate(-8px,6px);
  animation: hw-in 600ms var(--ease-out) forwards;
}
.cn-vs { animation-delay: 700ms; color: var(--color-paper); }
.cn-pm { animation-delay: 780ms; color: var(--color-red);
         text-shadow: -3px 3px 0 var(--color-paper), 4px 0 0 var(--color-yellow); }
.cn-zp { animation-delay: 860ms; color: transparent;
         -webkit-text-stroke: 3px var(--color-paper); }
.cn-j { animation-delay: 940ms; color: var(--color-paper); }

/* & 符号 */
.and-mark {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 5rem); color: var(--color-yellow);
  line-height: 0.8; vertical-align: baseline; margin: 0 0.1em;
  display: inline-block; transform: rotate(-8deg);
  opacity: 0; animation: hw-in 500ms var(--ease-out) 740ms both;
}
.hero-en.slash {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem,5vw,4.5rem); color: var(--color-red);
  line-height: 0.8; vertical-align: baseline; margin: 0 0.1em;
  opacity: 0; animation: hw-in 500ms var(--ease-out) 820ms both;
}
.hero-en-port {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(0.8rem, 1.5vw, 1.1rem); letter-spacing: 0.12em;
  color: var(--color-ink); vertical-align: super; margin-left: 0.4em;
  text-transform: uppercase; padding: 0.2em 0.5em;
  background: var(--color-yellow); border: 2px solid var(--color-paper);
  transform: rotate(-3deg);
  opacity: 0; animation: hw-in 500ms var(--ease-out) 1000ms both;
}

/* 黑卡头像 */
.hero-card {
  position:absolute; bottom:clamp(1.5rem,4vw,3rem); right:clamp(0.8rem,2.5vw,2rem);
  width:clamp(110px,14vw,150px); background:var(--color-ink); color:var(--color-paper);
  padding:0.5rem 0.5rem 0.35rem; transform:rotate(-5deg);
  box-shadow:4px 5px 0 var(--color-red),7px 9px 0 rgba(0,0,0,0.5);
  z-index:7; border:2px solid var(--color-paper);
}
.card-avatar svg { width:100%; height:auto; }
.card-tag { font-family:var(--font-display); font-weight:800; font-size:0.65rem;
  letter-spacing:0.1em; text-align:right; margin-top:0.2rem; text-transform:uppercase; }
.card-slash { color:var(--color-red); margin:0 0.3em; }
.card-staple { position:absolute; top:-6px; left:20%; width:18px; height:8px;
  background:var(--color-paper-4); border:1px solid var(--color-ink); border-radius:2px; }

.hero-signature {
  position:absolute; bottom:clamp(6rem,12vw,9rem); left:clamp(0.8rem,2.5vw,1.8rem);
  z-index:5; font-family:var(--font-mono); font-size:0.68rem;
  letter-spacing:0.18em; text-transform:uppercase;
  opacity:0; animation:fade-up 600ms var(--ease-out) 900ms forwards;
  color: var(--color-paper);
}
.sig-topline { margin-bottom:0.35rem; }
.sig-date { color:var(--color-yellow); border-top:1px solid var(--color-paper); border-bottom:1px solid var(--color-paper); padding:0.12rem 0; }
.sig-name { font-weight:700; letter-spacing:0.25em; font-size:0.72rem; }
.sig-name i { color:var(--color-red); margin:0 0.4em; font-style:normal; }
@keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.hero-cta-row {
  position:absolute; bottom:clamp(1.5rem,3.5vw,2.8rem); left:clamp(0.8rem,2.5vw,1.8rem);
  display:flex; gap:0.6rem; flex-wrap:wrap; z-index:7;
  opacity:0; animation:fade-up 600ms var(--ease-out) 1000ms forwards;
}
.hero-cta {
  display:inline-flex; align-items:baseline; gap:0.45rem;
  padding:0.6rem 1.1rem; font-family:var(--font-display); font-weight:900;
  font-size:clamp(0.9rem,1.4vw,1.1rem); letter-spacing:0.02em;
  border:2.5px solid var(--color-paper);
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.cta-primary { background:var(--color-red); color:var(--color-paper); box-shadow:4px 4px 0 var(--color-paper); border-color:var(--color-paper); }
.cta-primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--color-paper); }
.cta-primary:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--color-paper); }
.cta-ghost { background:transparent; color:var(--color-paper); box-shadow:4px 4px 0 var(--color-red); border-color:var(--color-paper); }
.cta-ghost:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--color-red); }
.cta-ghost:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--color-red); }
.hero-cta:focus-visible { outline:3px solid var(--color-yellow); outline-offset:4px; }
.cta-cn { font-family:var(--font-display-cn); font-weight:900; }
.cta-en { font-size:0.7em; letter-spacing:0.08em; }
.hero-cta-small {
  position:absolute; bottom:clamp(1.8rem,4vw,3rem); left:50%;
  transform:translateX(-50%) rotate(3deg);
  font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1rem,2vw,1.4rem); color:var(--color-yellow);
  border-bottom:3px solid var(--color-yellow); z-index:6; padding-bottom:0.1rem;
  opacity:0; animation:fade-up 600ms var(--ease-out) 1100ms forwards;
}
.hero-rail-left-edge { position:absolute; top:50%; left:0.5rem;
  font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.25em;
  text-transform:uppercase; color:rgba(255,255,255,0.6); z-index:4; white-space:nowrap;
  writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); }
.hero-rail-right { position:absolute; top:50%; right:0.7rem;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.2em;
  text-transform:uppercase; z-index:4; white-space:nowrap; color:rgba(255,255,255,0.6); }
.hero-footline {
  position:absolute; bottom:clamp(0.5rem,1.2vw,1rem); left:clamp(0.8rem,2.5vw,1.8rem); right:clamp(0.8rem,2.5vw,1.8rem);
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-body); font-size:0.78rem; font-weight:700; z-index:5;
  color: var(--color-paper);
}
.foot-name { letter-spacing:0.05em; }
.foot-name i { color:var(--color-red); margin:0 0.2em; font-style:normal; }
.foot-contact { margin-left:auto; font-family:var(--font-mono); letter-spacing:0.15em;
  font-size:0.72rem; color:var(--color-yellow); font-weight:700; border-bottom:1.5px solid var(--color-yellow); }

.hero-halftone { position:absolute; border-radius:50%; pointer-events:none; z-index:3; mix-blend-mode:screen; opacity:0.25; }
.halftone-red { top:3%; right:24%; width:clamp(160px,24vw,320px); height:clamp(160px,24vw,320px);
  background:radial-gradient(circle,var(--color-red-soft) 1.5px,transparent 2px); background-size:7px 7px; opacity:0.4; }
.halftone-blue { bottom:6%; left:2%; width:clamp(140px,20vw,260px); height:clamp(140px,20vw,260px);
  background:radial-gradient(circle,var(--color-blue-soft) 1.2px,transparent 1.8px); background-size:6px 6px; opacity:0.35; }
.halftone-yellow { top:50%; left:25%; width:clamp(110px,16vw,220px); height:clamp(110px,16vw,220px);
  background:radial-gradient(circle,var(--color-yellow) 2px,transparent 2.5px); background-size:9px 9px; opacity:0.3; }

.hero-arrow.arrow-a { position:absolute; top:38%; right:clamp(44%,42vw,48%); width:80px; height:44px; z-index:7; opacity:0.7; }
.hero-dots.dots-a { position:absolute; top:7%; left:25%; display:flex; gap:5px; z-index:4; }
.hero-dots i { display:block; width:5px; height:5px; background:var(--color-paper); border-radius:50%; }
.hero-dots i:nth-child(1) { width:3px; height:3px; }
.hero-dots i:nth-child(3) { width:7px; height:7px; }
.hero-x { position:absolute; font-family:var(--font-display); font-weight:900; color:var(--color-red); z-index:5; line-height:1; }
.x-a { bottom:14%; left:38%; transform:rotate(12deg); font-size:2.6rem; }
.x-b { top:24%; right:48%; transform:rotate(-12deg); font-size:1.5rem; opacity:0.65; color:var(--color-yellow); }
.hero-num { position:absolute; bottom:18%; left:32%; font-family:var(--font-display); font-weight:900;
  font-size:0.95rem; letter-spacing:0.05em; z-index:5; color:var(--color-yellow); }
.hero-star { position:absolute; top:32%; left:4%; font-size:1.5rem; color:var(--color-yellow); z-index:5;
  animation:spin 8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* 装饰颜色（暗背景版） */
.hero-rail-left .rail-label,
.hero-rail-left .rail-slash { color: var(--color-paper); }
.hero-rail-left .rail-dot,
.hero-rail-left .rail-num { color: var(--color-yellow); }
.meta-stamp { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-paper); box-shadow: 2px 2px 0 var(--color-red); }
.hero-note.note-year { z-index: 8; }
.hero-target { opacity: 0.35; }
.hero-tape { mix-blend-mode: screen; opacity: 0.4; }

@media (max-width:900px) {
  .hero-title-stack { width:100%; margin-top:clamp(4rem,15vw,7rem); margin-left:0; }
  .hero-card { display:none; }
  .hero-signature { position:relative; bottom:auto; left:auto; margin-top:3rem; }
  .hero-cta-row { position:relative; bottom:auto; left:auto; margin-top:1.5rem; }
  .hero-cta-small { position:relative; bottom:auto; left:auto; transform:none; display:inline-block; margin-top:1rem; }
  .hero-footline { position:relative; margin-top:2rem; }
  .hero { min-height:auto; padding-bottom:2rem; }
}

/* ============================================================
   ABOUT
============================================================ */
.about { position:relative; padding:clamp(2.5rem,6vw,4.5rem) clamp(0.8rem,2vw,1.5rem); background:var(--color-paper-2); overflow:hidden; }
.about-wrap { max-width:1400px; margin:0 auto; }
.about-paper { position:relative; background:var(--color-torn);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3vw,2.5rem);
  border:2px solid var(--color-ink);
  box-shadow:0 4px 0 var(--color-ink), 0 10px 30px rgba(0,0,0,0.12);
  background-image:radial-gradient(circle at 15% 80%,rgba(139,90,43,0.06) 0%,transparent 7%),
                   radial-gradient(circle at 85% 15%,rgba(0,0,0,0.03) 0%,transparent 4%); }
.about-clip { position:absolute; width:28px; height:56px; z-index:4; }
.clip-lt { top:-10px; left:36px; }
.clip-rb { bottom:-10px; right:56px; transform:rotate(180deg); }
.about-head { display:grid; grid-template-columns:auto 1fr; gap:0.8rem 1.5rem; align-items:end;
  padding-bottom:1rem; margin-bottom:1.5rem; border-bottom:2.5px solid var(--color-ink); }
.about-title { position:relative; display:inline-block; grid-row:1/span 2; }
.title-zh { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(2.8rem,6vw,4.5rem); line-height:0.9; letter-spacing:-0.02em; position:relative; z-index:2; }
.title-strike { position:absolute; top:45%; left:-5%; width:110%; height:12px;
  background:var(--color-red); transform:rotate(-6deg); z-index:1; mix-blend-mode:multiply; }
.about-name-block { display:flex; gap:0.8rem; align-items:baseline; flex-wrap:wrap; }
.about-name { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.3rem,2.2vw,1.9rem); }
.about-role { font-size:clamp(0.9rem,1.3vw,1.05rem); color:var(--color-muted); }
.about-avail { display:inline-flex; align-items:center; gap:0.35rem; font-family:var(--font-mono);
  font-size:0.68rem; font-weight:700; letter-spacing:0.1em; padding:0.2rem 0.45rem;
  background:var(--color-green); color:var(--color-paper); border:1.5px solid var(--color-ink); }
.av-dot { width:5px; height:5px; border-radius:50%; background:var(--color-paper); animation:blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
.about-contact-inline { grid-column:2; display:flex; gap:1.2rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.78rem; }
.about-contact-inline span b { color:var(--color-muted); font-weight:700; margin-right:0.35em; }
@media (max-width:720px) { .about-head { grid-template-columns:1fr; } .about-contact-inline { grid-column:1; } }

.about-body { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1.2rem,3vw,2.8rem); margin-bottom:2rem; }
@media (max-width:900px) { .about-body { grid-template-columns:1fr; } }
.block-title { display:inline-flex; align-items:baseline; gap:0.45rem;
  font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.1rem,1.7vw,1.35rem);
  margin-bottom:0.9rem; padding-bottom:0.25rem; border-bottom:3px solid var(--color-ink); }
.block-title-small { font-size:clamp(1rem,1.4vw,1.15rem); margin-top:1.3rem; margin-bottom:0.5rem; }
.bt-num { font-family:var(--font-mono); font-size:0.7em; color:var(--color-red); font-weight:700; letter-spacing:0.1em; }
.bt-en { font-family:var(--font-mono); font-size:0.55em; color:var(--color-muted); letter-spacing:0.15em; font-weight:700; }

.intro-text-big p { font-size:clamp(0.95rem,1.25vw,1.08rem); line-height:1.75; margin-bottom:0.8rem; }
.intro-text-big .first-word { float:left; font-family:var(--font-display-cn); font-weight:900;
  font-size:3em; line-height:0.85; padding:0.05em 0.1em 0 0; color:var(--color-red); }
.intro-text-big em { font-style:normal; font-weight:700; color:var(--color-blue); border-bottom:2px solid var(--color-blue); }
.intro-text-big u { text-decoration:none; background-image:linear-gradient(transparent 60%,var(--color-yellow) 60%); padding:0 2px; }
.m-red { background:var(--color-red); color:var(--color-paper); padding:0 0.25em; font-weight:700; }
.intro-motto { font-family:"Noto Serif SC", "Noto Sans SC", serif; font-weight:900; font-size:clamp(1.15rem,2vw,1.5rem); color:var(--color-red);
  line-height:1.5; margin-top:0.9rem; padding-left:0.9rem; border-left:4px solid var(--color-red); }

.exp-list { display:flex; flex-direction:column; gap:0.15rem; }
.exp-item { position:relative; padding:0.7rem 0; border-bottom:1px dashed var(--color-rule); padding-right:2.3rem; }
.exp-current { background:linear-gradient(90deg,rgba(255,200,0,0.15),transparent); padding-left:0.7rem; margin-left:-0.7rem; border-left:4px solid var(--color-red); }
.exp-row { display:flex; gap:0.7rem; align-items:baseline; flex-wrap:wrap; }
.exp-date { font-family:var(--font-display); font-weight:800; font-size:0.9rem; color:var(--color-red); letter-spacing:0.02em; }
.exp-place { font-weight:700; font-size:0.98rem; }
.exp-role { display:block; font-size:0.85rem; color:var(--color-muted); margin-top:0.2rem; line-height:1.5; }
.check-tick { position:absolute; right:0; top:50%; transform:translateY(-50%); width:26px; height:26px; }

.edu-single { display:flex; gap:0.7rem; align-items:baseline; flex-wrap:wrap;
  padding:0.5rem 0.7rem; background:var(--color-paper-2); border:1.5px dashed var(--color-ink); }
.edu-date { font-family:var(--font-display); font-weight:800; color:var(--color-ink); }
.edu-place { font-weight:700; }
.edu-major { color:var(--color-muted); font-size:0.85rem; }

.skills-strip { padding:1.5rem 0 0.8rem; margin-bottom:1.8rem;
  border-top:2.5px solid var(--color-ink); border-bottom:1px dashed var(--color-rule); position:relative; }
.skills-title { margin-bottom:1.5rem; }
.skills-orbit { position:relative; display:flex; flex-wrap:wrap; gap:clamp(0.6rem,1.2vw,1rem);
  justify-content:center; align-items:center; min-height:100px; padding:0.5rem 0; }
.tool-icon { position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:68px; height:68px; background:var(--color-torn); border:2.5px solid var(--color-ink);
  font-size:1.4rem; color:var(--color-ink); box-shadow:3px 3px 0 var(--color-ink);
  animation:float-icon 4s ease-in-out infinite; animation-delay:var(--delay,0s);
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.tool-icon i { line-height:1; }
.ti-label { position:absolute; bottom:-1.3rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.6rem; font-weight:700; letter-spacing:0.05em;
  white-space:nowrap; color:var(--color-muted); opacity:0; transition:opacity var(--dur-short); }
.tool-icon:hover { transform:translateY(-8px) rotate(-4deg) scale(1.1); box-shadow:5px 8px 0 var(--color-red); z-index:10; }
.tool-icon:hover .ti-label { opacity:1; }
@keyframes float-icon {
  0%,100%{transform:translateY(0) rotate(calc(var(--dist,1)*-2deg))}
  50%{transform:translateY(calc(var(--dist,1)*-7px)) rotate(calc(var(--dist,1)*2deg))}
}
.tool-ps { color:var(--color-blue); } .tool-ai { color:var(--color-red); }
.tool-id { color:var(--color-pink); } .tool-figma { color:var(--color-ink); }
.tool-blender { color:var(--color-blue); } .tool-mj { color:var(--color-red); }
.tool-sd { color:var(--color-ink); } .tool-comfy { color:var(--color-muted); }
.tool-ae { color:var(--color-blue-soft); } .tool-c4d { color:var(--color-red-soft); }

.awards-row { display:flex; flex-direction:column; }
.award-list { display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; }
.award-list li { display:inline-flex; align-items:baseline; gap:0.45rem; font-size:0.9rem; }
.aw-year { font-family:var(--font-display); font-weight:800; color:var(--color-red); font-size:0.95rem; min-width:3em; }
.aw-tag { padding:0.1rem 0.45rem; background:var(--color-yellow); font-family:var(--font-mono); font-size:0.68rem; font-weight:700; border:1.5px solid var(--color-ink); letter-spacing:0.1em; }

/* 项目经历 */
.projects-row { padding-top: 1rem; border-top: 2px solid var(--color-ink); margin-top: 1.5rem; }
.project-list { display: flex; flex-direction: column; gap: 0.4rem; }
.proj-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: baseline;
  padding: 0.7rem 0.8rem; background: var(--color-paper);
  border: 2px solid var(--color-ink); border-left: 6px solid var(--color-red);
  box-shadow: 3px 3px 0 var(--color-ink);
  position: relative; transition: transform var(--dur-short) var(--ease-out);
}
.proj-item:nth-child(even) { border-left-color: var(--color-blue); transform: rotate(-0.3deg); }
.proj-item:nth-child(3n) { border-left-color: var(--color-yellow); transform: rotate(0.3deg); }
.proj-item:hover { transform: rotate(0) translate(-2px,-2px); box-shadow: 5px 5px 0 var(--color-red); }
.proj-year {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.1rem; color: var(--color-red); letter-spacing: -0.01em;
}
.proj-item:nth-child(even) .proj-year { color: var(--color-blue); }
.proj-item:nth-child(3n) .proj-year { color: var(--color-ink); }
.proj-body { display: flex; flex-direction: column; gap: 0.15rem; }
.proj-name { font-family: var(--font-display-cn); font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
.proj-role { font-size: 0.82rem; color: var(--color-muted); }
.proj-tag {
  padding: 0.15rem 0.5rem; background: var(--color-yellow);
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 900;
  letter-spacing: 0.1em; border: 1.5px solid var(--color-ink);
  align-self: center;
}
.proj-hot { background: var(--color-red); color: var(--color-paper); border-color: var(--color-red); }
.about-x { position:absolute; font-family:var(--font-display); font-weight:900; font-size:2.2rem;
  color:var(--color-red); z-index:3; line-height:1; top:18%; right:3%; transform:rotate(10deg); }
.about-scribble { position:absolute; bottom:8%; left:32%; color:var(--color-red); font-size:2rem;
  font-family:var(--font-hand); transform:rotate(-20deg); }
.about-coffee { position:absolute; top:48%; right:2%; width:50px; height:42px;
  background:radial-gradient(ellipse at center,rgba(101,67,33,0.4) 0%,rgba(101,67,33,0.15) 60%,transparent 70%);
  border-radius:50%; z-index:1; pointer-events:none; }
.about-halftone { position:absolute; bottom:0; left:0; right:0; height:28%;
  background:radial-gradient(circle,var(--color-blue-soft) 1px,transparent 1.5px);
  background-size:6px 6px; opacity:0.13; pointer-events:none; z-index:0; }

/* ============================================================
   WORKS
============================================================ */
.works { position:relative; padding:clamp(2.5rem,6vw,4.5rem) clamp(0.8rem,2.5vw,1.8rem); background:var(--color-paper); overflow:hidden; }
.works-head { position:relative; max-width:1400px; margin:0 auto clamp(1.8rem,4vw,3rem);
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.wh-left { position:relative; }
.wh-stamp-selected { position:absolute; top:-0.5rem; left:0; display:inline-block;
  border:2.5px solid var(--color-red); color:var(--color-red); padding:0.25rem 0.7rem;
  font-family:var(--font-mono); font-size:clamp(0.65rem,1vw,0.8rem); font-weight:700;
  letter-spacing:0.1em; background:var(--color-paper); transform:rotate(-3deg); z-index:3; }
.wh-stamp-selected em { font-style:normal; font-weight:900; }
.works-cn {
  font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(4.5rem,13vw,10rem); line-height:0.85; letter-spacing:-0.04em; padding-top:0.8rem;
  display:inline-flex; align-items:baseline; gap:0.15em;
}
.wh-port-side {
  font-family:var(--font-display); font-weight:900;
  font-size: clamp(1.2rem, 3vw, 2.6rem);
  color: var(--color-red); letter-spacing: -0.01em;
  display: inline-block; transform: rotate(-4deg);
  border: 3px solid var(--color-red);
  padding: 0.1em 0.3em;
  background: var(--color-paper);
  box-shadow: 3px 3px 0 var(--color-ink);
  align-self: center;
  margin-left: 0.2em;
}
.wh-port-sub { display:block; margin-top:0.5rem;
  font-family:var(--font-mono); font-size:clamp(0.65rem,1vw,0.82rem);
  letter-spacing:0.2em; color:var(--color-ink); text-transform:uppercase; }
.wh-port-sub i { color:var(--color-red); font-style:normal; margin:0 0.4em; font-weight:700; }
.wh-right { text-align:right; }
.pn-label { font-family:var(--font-display); font-weight:900; font-size:0.85rem; color:var(--color-red); vertical-align:super; letter-spacing:0.05em; }
.pn-big { font-family:var(--font-display); font-weight:900; font-size:clamp(2.2rem,6vw,4rem); color:var(--color-ink); line-height:0.9; letter-spacing:-0.03em; margin-left:0.1em; }
@media (max-width:760px) {
  .works-head { flex-direction:column; align-items:flex-start; gap:0.8rem; }
  .wh-right { text-align:left; }
}

.works-filter { position:relative; max-width:1400px; margin:0 auto clamp(1.2rem,2.5vw,1.8rem); z-index:5; }
.filter-label { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-muted); display:block; margin-bottom:0.5rem; }
.filter-list { display:flex; flex-wrap:wrap; gap:0.25rem 0.8rem; align-items:baseline; }
.filter-btn { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(0.9rem,1.5vw,1.15rem); color:var(--color-ink); padding:0.12rem 0;
  position:relative; transition:color var(--dur-short) var(--ease-out); }
.filter-btn .btn-en { font-family:var(--font-mono); font-size:0.65rem; font-weight:700; color:var(--color-muted);
  letter-spacing:0.1em; margin-left:0.3em; text-transform:uppercase; }
.filter-btn.is-active { color:var(--color-red); }
.filter-btn.is-active::after { content:""; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:var(--color-red); }
.filter-btn:hover { color:var(--color-red); }
.filter-btn:focus-visible { outline:2px solid var(--color-red); outline-offset:3px; }
.filter-empty { font-family:var(--font-display-cn); font-weight:700; font-size:clamp(1rem,1.6vw,1.2rem); color:var(--color-muted); text-align:center; padding:clamp(2rem,5vw,3.5rem) 1rem; border:2px dashed var(--color-rule); margin-top:1.5rem; background:rgba(245,240,232,.5); }

.works-grid { position:relative; max-width:1400px; margin:0 auto;
  column-count:4; column-gap:clamp(0.7rem,1.5vw,1.2rem); z-index:2; }
@media (max-width:1100px){ .works-grid{column-count:3} }
@media (max-width:760px){ .works-grid{column-count:2;column-gap:0.5rem} }
@media (max-width:440px){ .works-grid{column-count:1} }

.work-card { break-inside:avoid; position:relative; display:block;
  margin:0 0 clamp(0.8rem,1.8vw,1.5rem); background:var(--color-torn); border:2.5px solid var(--color-ink);
  transform:rotate(var(--rot,0deg)) translate(var(--tx,0),var(--ty,0));
  box-shadow:4px 5px 0 var(--color-ink),6px 8px 16px rgba(0,0,0,0.1);
  cursor:pointer; transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
  opacity:0; animation:card-in var(--dur-long) var(--ease-out) forwards; }
.work-card.is-hidden { display:none; }
@keyframes card-in {
  from{opacity:0;transform:rotate(var(--rot,0deg)) translate(var(--tx,0),var(--ty,0)) translateY(30px)}
  to{opacity:1;transform:rotate(var(--rot,0deg)) translate(var(--tx,0),var(--ty,0)) translateY(0)}
}
.work-card:nth-child(1){animation-delay:0ms} .work-card:nth-child(2){animation-delay:70ms}
.work-card:nth-child(3){animation-delay:140ms} .work-card:nth-child(4){animation-delay:210ms}
.work-card:nth-child(5){animation-delay:280ms} .work-card:nth-child(6){animation-delay:350ms}
.work-card:nth-child(7){animation-delay:420ms} .work-card:nth-child(8){animation-delay:490ms}
.work-card:nth-child(9){animation-delay:560ms} .work-card:nth-child(10){animation-delay:630ms}
.work-card:nth-child(11){animation-delay:700ms} .work-card:nth-child(12){animation-delay:770ms}
.work-card:nth-child(13){animation-delay:840ms}
.work-card:hover { transform:rotate(0deg) translate(0,-6px) scale(1.03);
  box-shadow:6px 8px 0 var(--color-red),10px 14px 24px rgba(0,0,0,0.18); z-index:10; }
.work-card:focus-visible { outline:3px solid var(--color-red); outline-offset:4px; }
.card-inner { display:block; padding:0.45rem; }
.card-visual { position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  border:1.5px solid var(--color-ink); display:flex; align-items:center; justify-content:center; }
.card-large .card-visual { aspect-ratio:3/4; }
.card-wide .card-visual { aspect-ratio:16/9; }
.card-meta { display:flex; align-items:baseline; gap:0.4rem; padding:0.4rem 0.15rem 0.15rem;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; }
.cm-num { color:var(--color-red); } .cm-year { margin-left:auto; color:var(--color-muted); }
.cm-cm { margin-left:auto; color:var(--color-red); font-family:var(--font-display); font-weight:900; font-size:0.75rem; letter-spacing:0.15em; }

.card-hover-img { position:absolute; inset:0; z-index:3; background:var(--hc,var(--color-red));
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(1.1);
  transition:opacity var(--dur-short) var(--ease-out),transform 400ms var(--ease-out); pointer-events:none; }
.card-hover-img::before { content:attr(data-label); position:absolute; inset:auto 0.5rem 0.5rem auto;
  font-family:var(--font-display); font-weight:900; font-size:0.95rem; color:var(--color-paper);
  letter-spacing:0.05em; text-transform:uppercase; text-shadow:2px 2px 0 var(--color-ink); }
.card-hover-img::after { content:"↗"; position:absolute; top:0.5rem; left:0.5rem; font-size:1.3rem;
  color:var(--color-paper); font-weight:900; text-shadow:2px 2px 0 var(--color-ink); }
.work-card:hover .card-hover-img { opacity:1; transform:scale(1); }
/* 有封面图的卡片：悬停覆盖层显示对应图片（红色投影仍由 .work-card:hover 的 box-shadow 控制） */
.card-hover-img.has-cover {
  background: var(--cover) center/cover no-repeat;
}
.card-hover-img.has-cover::before,
.card-hover-img.has-cover::after {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.65), 2px 2px 0 rgba(0,0,0,.55);
}
.card-hover-img.has-cover::after { content:"↗ 查看"; font-size:.85rem; top:.6rem; left:.6rem; }

/* 新增卡片视觉 */
.visual-xmas { background:var(--color-red); position:relative; overflow:hidden; padding:.8rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; }
.vx-tree { position:absolute; right:-6%; top:8%; width:46%; aspect-ratio:1;
  background:var(--color-yellow); clip-path:polygon(50% 0,100% 100%,0 100%); opacity:.9; }
.vx-star { position:absolute; right:30%; top:4%; font-size:1.3rem; color:var(--color-yellow); }
.vx-big { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.5rem,3.2vw,2.4rem); color:var(--color-paper); line-height:1; z-index:2; position:relative; }
.vx-bot { align-self:flex-end; font-family:var(--font-display); font-weight:900;
  font-size:.8rem; letter-spacing:.12em; color:var(--color-paper); z-index:2; }
.visual-billboard { background:var(--color-yellow); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:flex-end!important; overflow:hidden; }
.vb-frame { position:absolute; left:10%; right:10%; top:14%; bottom:30%; background:var(--color-ink);
  border:3px solid var(--color-ink); box-shadow:5px 5px 0 var(--color-red); display:flex; align-items:center; justify-content:center; }
.vb-frame span { font-family:var(--font-display); font-weight:900; color:var(--color-yellow); font-size:1.1rem; letter-spacing:.08em; }
.vb-pole { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:10px; height:34%; background:var(--color-ink); }
.vb-tag { position:absolute; top:.5rem; left:.5rem; background:var(--color-red); color:var(--color-paper);
  padding:.12rem .4rem; font-family:var(--font-display-cn); font-size:.65rem; font-weight:900; z-index:2; }
.vb-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.1rem,2.2vw,1.6rem); color:var(--color-ink); z-index:2; position:relative; }
.visual-solar { background:var(--color-paper-3); position:relative; overflow:hidden; padding:.8rem; }
.vs-circle { position:absolute; right:-12%; top:-12%; width:58%; aspect-ratio:1; border-radius:50%;
  background:var(--color-red); opacity:.92; }
.vs-yin { position:absolute; left:8%; top:8%; font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(2rem,4.5vw,3.2rem); color:var(--color-ink); line-height:.95; z-index:2; writing-mode:vertical-rl; }
.vs-sub { position:absolute; bottom:.5rem; right:.5rem; font-family:var(--font-mono); font-weight:700;
  font-size:.6rem; letter-spacing:.1em; color:var(--color-blue); z-index:2; }
.vs-dot { position:absolute; bottom:18%; left:14%; width:14%; aspect-ratio:1; border-radius:50%; background:var(--color-yellow); border:2px solid var(--color-ink); z-index:2; }
.visual-bluebook { background:var(--color-blue); position:relative; padding:.8rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vbl-bars { position:absolute; right:-8%; bottom:10%; display:flex; align-items:flex-end; gap:6px; opacity:.55; }
.vbl-bars i { width:14px; background:var(--color-paper); display:block; }
.vbl-bars i:nth-child(1){height:60px} .vbl-bars i:nth-child(2){height:90px;background:var(--color-yellow)} .vbl-bars i:nth-child(3){height:48px} .vbl-bars i:nth-child(4){height:74px}
.vbl-top { font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.12em; color:var(--color-paper); z-index:2; position:relative; }
.vbl-big { font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--color-paper); line-height:.95; z-index:2; position:relative; }
.vbl-bot { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1rem,2vw,1.4rem); color:var(--color-yellow); z-index:2; position:relative; }
.visual-zhongying { background:var(--color-paper); position:relative; padding:.8rem; flex-direction:column; align-items:center!important; justify-content:center!important; overflow:hidden; }
.vzy-mark { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:var(--color-red); line-height:1; border:3px solid var(--color-red); border-radius:50%;
  width:58%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--color-paper); box-shadow:3px 3px 0 var(--color-ink); }
.vzy-tag { position:absolute; top:.5rem; left:.5rem; background:var(--color-ink); color:var(--color-paper);
  padding:.12rem .4rem; font-family:var(--font-display-cn); font-size:.62rem; font-weight:700; }
.vzy-bot { position:absolute; bottom:.5rem; right:.5rem; font-family:var(--font-mono); font-weight:700;
  font-size:.6rem; letter-spacing:.08em; color:var(--color-ink); }
.visual-vcover { background:var(--color-red); position:relative; overflow:hidden; padding:.8rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; }
.vvc-bar { position:absolute; left:0; right:0; top:50%; height:3px; background:var(--color-paper); opacity:.5; }
.vvc-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.6em; height:2.6em; border-radius:50%; background:var(--color-paper); color:var(--color-red);
  display:flex; align-items:center; justify-content:center; padding-left:.18em; font-size:1.1rem; z-index:2; box-shadow:3px 3px 0 var(--color-ink); }
.vvc-top { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.1rem,2.2vw,1.5rem); color:var(--color-paper); z-index:2; position:relative; }
.vvc-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.62rem; letter-spacing:.1em; color:var(--color-paper); z-index:2; position:relative; }

/* ----- 视频封面 B：缩略图+时间码+波形 ----- */
.visual-thumb { background:var(--color-ink); position:relative; padding:.8rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; color:var(--color-paper); }
.vth-monitor { position:absolute; right:6%; top:14%; width:50%; aspect-ratio:16/9; background:var(--color-paper); border:3px solid var(--color-ink); box-shadow:5px 5px 0 var(--color-red); display:flex; align-items:center; justify-content:center; }
.vth-monitor::before { content:""; position:absolute; inset:6px; background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(0,0,0,0.06) 8px 9px); }
.vth-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1.8em; height:1.8em; border-radius:50%; background:var(--color-red); color:var(--color-paper); display:flex; align-items:center; justify-content:center; font-size:.8rem; z-index:2; box-shadow:2px 2px 0 var(--color-ink); padding-left:.12em; }
.vth-wave { position:absolute; left:8%; bottom:22%; right:60%; height:18%; display:flex; align-items:flex-end; gap:3px; }
.vth-wave i { flex:1; background:var(--color-yellow); border-radius:1px; }
.vth-wave i:nth-child(1){height:30%} .vth-wave i:nth-child(2){height:70%} .vth-wave i:nth-child(3){height:50%} .vth-wave i:nth-child(4){height:90%} .vth-wave i:nth-child(5){height:60%} .vth-wave i:nth-child(6){height:40%} .vth-wave i:nth-child(7){height:80%} .vth-wave i:nth-child(8){height:55%} .vth-wave i:nth-child(9){height:30%} .vth-wave i:nth-child(10){height:65%}
.vth-time { position:absolute; bottom:.5rem; right:.5rem; font-family:var(--font-mono); font-weight:700; font-size:.65rem; color:var(--color-yellow); background:rgba(0,0,0,.55); padding:.1rem .35rem; letter-spacing:.08em; z-index:2; }
.vth-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.2rem,2.6vw,1.8rem); color:var(--color-paper); line-height:1; z-index:2; position:relative; }
.vth-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--color-yellow); z-index:2; position:relative; }

/* ----- 慎初画册：精装书+篆刻+印泥 ----- */
.visual-shenchu { background:var(--color-paper-2); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vsh-cover { position:absolute; right:8%; top:18%; width:54%; aspect-ratio:3/4; background:var(--color-red); border:4px solid var(--color-ink); box-shadow:6px 6px 0 var(--color-ink); }
.vsh-cover::before { content:""; position:absolute; inset:8px; border:2px solid var(--color-yellow); }
.vsh-seal { position:absolute; right:14%; top:30%; width:24%; aspect-ratio:1; background:var(--color-yellow); border:3px solid var(--color-ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-display-cn); font-weight:900; color:var(--color-red); font-size:clamp(.8rem,1.8vw,1.2rem); z-index:2; }
.vsh-spine { position:absolute; right:6%; top:18%; width:4%; aspect-ratio:3/4; background:linear-gradient(90deg,var(--color-ink) 0 25%,var(--color-red) 25% 100%); }
.vsh-ribbon { position:absolute; right:32%; top:14%; width:6%; height:72%; background:var(--color-yellow); border:1px solid var(--color-ink); z-index:1; }
.vsh-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.4rem,3vw,2.2rem); color:var(--color-ink); line-height:.9; z-index:2; position:relative; }
.vsh-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.12em; color:var(--color-red); z-index:2; }

/* ----- AIGC 作品集：分形晶格+3D 立方体 ----- */
.visual-aigc2 { background:var(--color-ink); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; color:var(--color-paper); }
.va2-cube { position:absolute; right:6%; top:18%; width:46%; aspect-ratio:1; perspective:300px; }
.va2-cube-inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:va2-spin 8s linear infinite; }
@keyframes va2-spin { from { transform:rotateY(0) rotateX(15deg); } to { transform:rotateY(360deg) rotateX(15deg); } }
.va2-cube-inner span { position:absolute; inset:8%; background:linear-gradient(135deg,var(--color-red) 0%,var(--color-yellow) 100%); border:2px solid var(--color-paper); opacity:.88; }
.va2-cube-inner span:nth-child(1){transform:translateZ(36px)}
.va2-cube-inner span:nth-child(2){transform:rotateY(180deg) translateZ(36px)}
.va2-cube-inner span:nth-child(3){transform:rotateY(90deg) translateZ(36px)}
.va2-cube-inner span:nth-child(4){transform:rotateY(-90deg) translateZ(36px)}
.va2-cube-inner span:nth-child(5){transform:rotateX(90deg) translateZ(36px)}
.va2-cube-inner span:nth-child(6){transform:rotateX(-90deg) translateZ(36px)}
.va2-cube-inner span:nth-child(7){position:absolute;inset:8%;background:var(--color-yellow);border:2px solid var(--color-ink);transform:translateZ(36px);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;color:var(--color-red);font-size:1.3rem;z-index:2;}
.va2-net { position:absolute; left:6%; top:30%; width:30%; aspect-ratio:1; background:
  radial-gradient(circle at 20% 30%, var(--color-blue) 1px, transparent 2px),
  radial-gradient(circle at 70% 20%, var(--color-blue) 1px, transparent 2px),
  radial-gradient(circle at 50% 70%, var(--color-blue) 1px, transparent 2px),
  radial-gradient(circle at 80% 80%, var(--color-blue) 1px, transparent 2px),
  radial-gradient(circle at 25% 80%, var(--color-blue) 1px, transparent 2px);
}
.va2-net::before { content:""; position:absolute; inset:0;
  background:
  linear-gradient(45deg, transparent 48%, var(--color-blue) 48% 52%, transparent 52%),
  linear-gradient(135deg, transparent 48%, var(--color-blue) 48% 52%, transparent 52%); opacity:.4; }
.va2-big { font-family:var(--font-display); font-weight:900; font-size:clamp(1.3rem,3vw,2.2rem); color:var(--color-yellow); letter-spacing:-.01em; line-height:.95; z-index:2; position:relative; }
.va2-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--color-red); z-index:2; position:relative; }
.va2-tag { position:absolute; bottom:1.1rem; right:.5rem; font-family:var(--font-display-cn); font-weight:900; font-size:.6rem; color:var(--color-paper); background:var(--color-red); padding:.1rem .4rem; z-index:2; }

/* ----- 有信达 VIS 手册：堆叠多页+比例尺+对位标记 ----- */
.visual-vis { background:var(--color-blue); position:relative; padding:1rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vvis-stack { position:absolute; right:8%; top:18%; width:54%; height:64%; }
.vvis-page { position:absolute; inset:0; background:var(--color-paper); border:2px solid var(--color-ink); box-shadow:4px 4px 0 var(--color-ink); }
.vvis-page:nth-child(1) { transform:translate(0,0) rotate(-4deg); background:var(--color-paper); }
.vvis-page:nth-child(2) { transform:translate(8px,-6px) rotate(2deg); background:var(--color-yellow); }
.vvis-page:nth-child(3) { transform:translate(16px,-12px) rotate(-1deg); background:var(--color-paper); }
.vvis-page:nth-child(3)::before { content:"VIS"; position:absolute; left:18%; top:30%; font-family:var(--font-display); font-weight:900; font-size:1.4rem; color:var(--color-ink); letter-spacing:.05em; }
.vvis-page:nth-child(3)::after  { content:""; position:absolute; left:18%; right:18%; top:60%; height:2px; background:var(--color-red); box-shadow:0 8px 0 var(--color-ink),0 16px 0 var(--color-red); }
.vvis-ruler { position:absolute; left:.5rem; top:18%; width:6%; height:64%; background:repeating-linear-gradient(0deg,var(--color-paper) 0 6px,var(--color-ink) 6px 7px); opacity:.7; }
.vvis-ruler::before { content:""; position:absolute; left:-200%; top:0; width:300%; height:2px; background:var(--color-ink); }
.vvis-ruler::after  { content:""; position:absolute; left:-200%; bottom:0; width:300%; height:2px; background:var(--color-ink); }
.vvis-cross { position:absolute; width:14px; height:14px; }
.vvis-cross::before, .vvis-cross::after { content:""; position:absolute; background:var(--color-paper); }
.vvis-cross::before { left:50%; top:0; bottom:0; width:1.5px; transform:translateX(-50%); }
.vvis-cross::after  { top:50%; left:0; right:0; height:1.5px; transform:translateY(-50%); }
.vvis-cross.c1 { right:7%; top:17%; }
.vvis-cross.c2 { right:7%; bottom:17%; }
.vvis-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--color-paper); line-height:1.05; z-index:2; position:relative; }
.vvis-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.12em; color:var(--color-yellow); z-index:2; position:relative; }

/* ----- 618 Banner：宽卡，默认显示几何封面，hover 切换到真实 banner 图 ----- */
.work-card.card-banner { padding:0; }
.work-card.card-banner .card-inner { padding:0; }
.work-card.card-banner .card-visual { background:var(--color-paper-3); aspect-ratio:16/9; padding:0; border:none; }
.work-card.card-banner .bnr-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity 380ms var(--ease-out), transform 480ms var(--ease-out);
  z-index:2;
}
.work-card.card-banner:hover .bnr-img { opacity:1; transform:scale(1); }
.work-card.card-banner .card-hover-img { display:none; }
.work-card.card-banner:hover { box-shadow:6px 8px 0 var(--color-red),10px 14px 24px rgba(0,0,0,0.18); }

/* 几何封面：电商促销海报版式（条带+圆形+大字+进度条） */
.work-card.card-banner .card-visual.visual-banner { background:linear-gradient(115deg,var(--color-red) 0%,var(--color-red) 55%,var(--color-yellow) 55%,var(--color-yellow) 100%); position:absolute; inset:0; overflow:hidden; transition:opacity 360ms var(--ease-out); }
.work-card.card-banner:hover .visual-banner { opacity:0; pointer-events:none; }
.visual-banner .bnr-stripe {
  position:absolute; left:0; right:0; top:0; height:18%;
  background:var(--color-ink);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.2rem;
  z-index:3;
}
.visual-banner .bnr-stripe-bot { top:auto; bottom:0; height:14%; background:var(--color-ink); }
.visual-banner .bnr-tag {
  position:absolute; left:5%; top:24%; z-index:4;
  font-family:var(--font-mono); font-weight:900; font-size:clamp(0.7rem,1.2vw,1rem);
  letter-spacing:.18em; color:var(--color-paper); background:var(--color-ink);
  padding:.4rem .7rem; border-radius:1px;
}
.visual-banner .bnr-circle {
  position:absolute; right:8%; top:30%; width:32%; aspect-ratio:1; border-radius:50%;
  background:var(--color-paper); border:6px solid var(--color-ink);
  box-shadow:8px 8px 0 rgba(0,0,0,.25);
  z-index:3;
}
.visual-banner .bnr-bar {
  position:absolute; left:5%; top:62%; width:24%; height:8px;
  background:var(--color-ink); z-index:3;
}
.visual-banner .bnr-bar-2 { top:70%; width:18%; background:var(--color-paper); border:2px solid var(--color-ink); }
.visual-banner .bnr-big {
  position:absolute; left:5%; bottom:18%; z-index:4;
  font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.6rem,4vw,3.2rem); line-height:.9; color:var(--color-paper);
  letter-spacing:.04em; text-shadow:3px 3px 0 var(--color-ink);
}
.visual-banner .bnr-bot {
  position:absolute; right:5%; bottom:18%; z-index:4;
  font-family:var(--font-mono); font-weight:700; font-size:clamp(.6rem,.9vw,.8rem);
  letter-spacing:.16em; color:var(--color-ink); background:var(--color-paper);
  padding:.35rem .55rem;
}

/* 名片样机 1：悬停时把图片向左旋转 90° */
.card-hover-img.spin-left { transition:opacity var(--dur-short) var(--ease-out), transform 520ms var(--ease-out); }
.work-card:hover .card-hover-img.spin-left { opacity:1; transform:scale(1.04) rotate(-90deg); transform-origin:center center; }


.visual-tape { background:var(--color-ink); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:flex-end!important; overflow:hidden; color:var(--color-paper); }
.vt-stripe { position:absolute; top:0; left:0; right:0; height:14px; background:repeating-linear-gradient(45deg,var(--color-yellow) 0 12px,var(--color-ink) 12px 24px); }
.vt-cone { position:absolute; right:8%; top:18%; width:38%; aspect-ratio:.7; background:radial-gradient(circle at 50% 100%,var(--color-red) 0 28%,var(--color-paper) 28% 36%,var(--color-red) 36% 100%); clip-path:polygon(50% 0,100% 100%,0 100%); opacity:.95; }
.vt-cone::before { content:""; position:absolute; left:8%; right:8%; top:34%; height:6px; background:var(--color-paper); }
.vt-cone::after  { content:""; position:absolute; left:18%; right:18%; top:58%; height:6px; background:var(--color-paper); }
.vt-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.1rem,2.2vw,1.6rem); color:var(--color-yellow); z-index:2; position:relative; }
.vt-tag { position:absolute; bottom:.5rem; right:.5rem; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--color-paper); z-index:2; }

/* ----- 加拿大：红枫叶几何 ----- */
.visual-maple { background:var(--color-paper); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vm-leaf { position:absolute; right:-10%; top:8%; width:62%; aspect-ratio:1; background:var(--color-red); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); opacity:.95; }
.vm-leaf::after { content:""; position:absolute; left:49%; top:55%; width:6%; height:38%; background:var(--color-ink); transform:translateX(-50%); }
.vm-flag { position:absolute; top:.55rem; left:.55rem; width:34%; height:18%; display:flex; }
.vm-flag span { flex:1; }
.vm-flag span:nth-child(1){background:var(--color-red)}
.vm-flag span:nth-child(2){background:var(--color-paper)}
.vm-flag span:nth-child(3){background:var(--color-red)}
.vm-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.3rem,2.8vw,2rem); color:var(--color-ink); z-index:2; position:relative; }
.vm-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.12em; color:var(--color-blue); z-index:2; }

/* ----- 圣诞 01：礼物盒（红+绿+金丝带）----- */
.visual-gift { background:var(--color-red); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vg-box { position:absolute; right:-8%; bottom:6%; width:58%; aspect-ratio:1.1; background:var(--color-green); border:4px solid var(--color-ink); box-shadow:6px 6px 0 var(--color-ink); }
.vg-box::before { content:""; position:absolute; left:42%; top:0; bottom:0; width:14%; background:var(--color-yellow); border-left:3px solid var(--color-ink); border-right:3px solid var(--color-ink); }
.vg-box::after  { content:""; position:absolute; left:0; right:0; top:36%; height:18%; background:var(--color-yellow); border-top:3px solid var(--color-ink); border-bottom:3px solid var(--color-ink); }
.vg-bow { position:absolute; right:18%; bottom:54%; width:22%; aspect-ratio:1.4; background:var(--color-yellow); border:3px solid var(--color-ink); border-radius:50% 50% 0 0; transform:rotate(-12deg); }
.vg-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.4rem,2.8vw,2.1rem); color:var(--color-paper); line-height:1; z-index:2; position:relative; }
.vg-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--color-yellow); z-index:2; position:relative; }

/* ----- 圣诞 02：雪花（深蓝+白）----- */
.visual-snow { background:var(--color-blue); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; color:var(--color-paper); }
.vs-snow { position:absolute; right:-10%; top:6%; width:60%; aspect-ratio:1; color:var(--color-paper); }
.vs-snow::before, .vs-snow::after { content:""; position:absolute; inset:0; }
.vs-snow::before { background:
  linear-gradient(0deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%),
  linear-gradient(60deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%),
  linear-gradient(120deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%); }
.vs-snow::after  { background:
  radial-gradient(circle, var(--color-paper) 8%, transparent 9%); }
.vs-snow2 { position:absolute; left:10%; top:46%; width:18%; aspect-ratio:1; color:var(--color-paper); }
.vs-snow2::before { content:""; position:absolute; inset:0; background:
  linear-gradient(0deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%),
  linear-gradient(90deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%); }
.vs-snow3 { position:absolute; left:34%; top:18%; width:12%; aspect-ratio:1; color:var(--color-paper); }
.vs-snow3::before { content:""; position:absolute; inset:0; background:
  linear-gradient(0deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%),
  linear-gradient(90deg, transparent 47%, var(--color-paper) 47% 53%, transparent 53%); }
.vs-big { font-family:var(--font-display); font-weight:900; font-size:clamp(1.2rem,2.6vw,1.8rem); color:var(--color-paper); line-height:.95; z-index:2; position:relative; letter-spacing:.04em; }
.vs-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.12em; color:var(--color-yellow); z-index:2; }

/* ----- 自主招生：翻开的书 ----- */
.visual-admission { background:var(--color-green); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vbk-pages { position:absolute; right:6%; top:18%; width:62%; height:64%; background:var(--color-paper); border:3px solid var(--color-ink); box-shadow:5px 5px 0 var(--color-yellow); }
.vbk-pages::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--color-ink); }
.vbk-pages::after  { content:""; position:absolute; left:8%; right:8%; top:18%; height:3px; background:var(--color-ink); box-shadow:0 12px 0 var(--color-ink), 0 24px 0 var(--color-ink), 0 36px 0 var(--color-ink); }
.vbk-pencil { position:absolute; right:8%; top:8%; width:38%; height:6px; background:var(--color-yellow); border:2px solid var(--color-ink); transform:rotate(-18deg); transform-origin:right center; }
.vbk-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--color-paper); line-height:1; z-index:2; position:relative; }
.vbk-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.12em; color:var(--color-yellow); z-index:2; position:relative; }

/* ----- 小年祝福：红灯笼 ----- */
.visual-lantern { background:var(--color-yellow); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; }
.vl-lant { position:absolute; right:10%; top:14%; width:42%; aspect-ratio:.7; background:var(--color-red); border-radius:50% 50% 45% 45%; border:3px solid var(--color-ink); box-shadow:5px 5px 0 var(--color-ink); }
.vl-lant::before { content:""; position:absolute; left:6%; right:6%; top:30%; height:6px; background:var(--color-ink); }
.vl-lant::after  { content:""; position:absolute; left:6%; right:6%; top:60%; height:6px; background:var(--color-ink); }
.vl-tassel { position:absolute; right:28%; top:54%; width:6%; height:18%; background:var(--color-red); border:2px solid var(--color-ink); }
.vl-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.2rem,2.6vw,1.8rem); color:var(--color-ink); z-index:2; position:relative; }
.vl-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--color-red); z-index:2; }

/* ----- 音标课：对话框气泡 ----- */
.visual-bubble { background:var(--color-blue); position:relative; padding:.9rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; overflow:hidden; color:var(--color-paper); }
.vbub-1 { position:absolute; right:8%; top:14%; width:46%; aspect-ratio:1.1; background:var(--color-paper); border:3px solid var(--color-ink); border-radius:48% 48% 48% 12%; box-shadow:4px 4px 0 var(--color-yellow); }
.vbub-1::before { content:""; position:absolute; left:18%; top:30%; width:64%; height:6px; background:var(--color-ink); box-shadow:0 14px 0 var(--color-ink); }
.vbub-2 { position:absolute; left:8%; bottom:18%; width:24%; aspect-ratio:1; background:var(--color-yellow); border:3px solid var(--color-ink); border-radius:50%; }
.vbub-phonetic { position:absolute; right:14%; top:34%; font-family:var(--font-mono); font-weight:700; font-size:1.1rem; color:var(--color-ink); z-index:2; }
.vbub-big { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.2rem,2.6vw,1.8rem); color:var(--color-paper); z-index:2; position:relative; }
.vbub-bot { align-self:flex-end; font-family:var(--font-mono); font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--color-yellow); z-index:2; position:relative; }


.card-sticker { position:absolute; padding:0.15rem 0.45rem; font-family:var(--font-display); font-weight:900;
  font-size:0.72rem; letter-spacing:0.1em; border:2px solid var(--color-red); background:var(--color-paper); z-index:4; }
.sticker-selected { top:0.5rem; right:0.5rem; border-radius:50%; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; background:var(--color-red); color:var(--color-paper);
  border-color:var(--color-red); transform:rotate(12deg); font-size:0.65rem; text-align:center; line-height:1.1; }
.sticker-next { bottom:0.5rem; right:0.5rem; background:var(--color-yellow); color:var(--color-ink);
  border-color:var(--color-ink); transform:rotate(-5deg); }
.sticker-new { top:0.5rem; left:0.5rem; background:var(--color-red); color:var(--color-paper);
  border-color:var(--color-red); transform:rotate(-4deg); padding:0.12rem 0.4rem; font-size:0.65rem; }
.card-pin { position:absolute; top:-7px; left:50%; width:12px; height:12px;
  background:radial-gradient(circle at 30% 30%,var(--color-red),oklch(40% 0.18 25));
  border-radius:50%; border:1px solid var(--color-ink); box-shadow:1px 1px 0 rgba(0,0,0,0.4); z-index:4; }

/* Visuals */
.visual-fest { background:var(--color-red); background-image:radial-gradient(circle,var(--color-ink) 1px,transparent 2px); background-size:6px 6px; flex-direction:column; padding:0.8rem; }
.fest-circle { width:70%; aspect-ratio:1; background:var(--color-ink); border-radius:50%; position:relative; }
.fest-circle::after { content:""; position:absolute; inset:22%; background:var(--color-yellow); border-radius:50%; }
.fest-text-top { position:absolute; top:0.5rem; left:0.5rem; font-family:var(--font-display); font-weight:900;
  font-size:clamp(0.8rem,1.8vw,1.2rem); background:var(--color-paper); padding:0.12rem 0.35rem; transform:rotate(-3deg); color:var(--color-ink); }
.fest-text-bot { position:absolute; bottom:0.4rem; left:0.4rem; font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.1rem,2.4vw,1.8rem); color:var(--color-ink); }
.card-tag-top { position:absolute; top:0.5rem; left:0.5rem; background:var(--color-ink); color:var(--color-paper);
  padding:0.15rem 0.4rem; font-family:var(--font-display-cn); font-size:0.68rem; font-weight:700; z-index:2; }
.visual-void { background:var(--color-ink); flex-direction:column; }
.void-face { width:60%; aspect-ratio:3/4; background:var(--color-paper); border-radius:50% 50% 45% 45%; position:relative;
  background-image:radial-gradient(circle,var(--color-ink) 1px,transparent 1.5px); background-size:4px 4px; }
.void-face span { position:absolute; top:30%; width:12%; height:8%; background:var(--color-ink); border-radius:50%; }
.void-face span:nth-child(1){left:25%} .void-face span:nth-child(2){right:25%}
.void-text { position:absolute; bottom:0.8rem; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.3rem,3vw,2.2rem); color:var(--color-paper); letter-spacing:0.05em; }
.visual-coffee { background:var(--color-blue); position:relative; }
.cf-sq-outer { position:absolute; inset:10%; background:var(--color-paper); border:3px solid var(--color-paper); }
.cf-sq-inner { position:absolute; inset:22%; background:var(--color-yellow); }
.cf-tag { position:absolute; top:.4rem; left:.4rem; background:var(--color-ink); color:var(--color-paper);
  padding:.15rem .35rem; font-size:.65rem; font-weight:700; font-family:var(--font-display-cn); }
.cf-text { position:absolute; bottom:.4rem; left:0; right:0; text-align:center; color:var(--color-paper);
  font-family:var(--font-display); font-weight:900; font-size:.78rem; letter-spacing:.08em; }
.visual-exhibit { background:var(--color-torn); padding:.8rem; }
.ex-big { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.8rem,5vw,3rem); line-height:.9; display:block; color:var(--color-ink); }
.ex-num { font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.2rem,2.6vw,1.9rem); position:absolute; top:.5rem; right:.5rem; color:var(--color-ink); }
.ex-circle { position:absolute; bottom:20%; right:10%; width:35%; aspect-ratio:1;
  border:3px dashed var(--color-red); border-radius:50%; }
.ex-label { position:absolute; bottom:.4rem; right:.4rem; font-family:var(--font-display); font-weight:900;
  font-size:.8rem; color:var(--color-red); letter-spacing:.05em; transform:rotate(5deg); }
.visual-zine { background:var(--color-torn); padding:.8rem; flex-direction:column; align-items:flex-start!important; }
.zine-top { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.2rem,2.4vw,1.8rem); color:var(--color-red); margin-bottom:.6rem; }
.zine-lines { width:100%; display:flex; flex-direction:column; gap:.4rem; flex:1; justify-content:center; }
.zine-lines span { display:block; height:1.5px; background:var(--color-ink); }
.zine-lines span:nth-child(1){width:100%} .zine-lines span:nth-child(2){width:85%}
.zine-lines span:nth-child(3){width:92%} .zine-lines span:nth-child(4){width:70%} .zine-lines span:nth-child(5){width:88%}
.zine-bot { font-family:var(--font-display); font-weight:900;
  font-size:clamp(.85rem,1.6vw,1.1rem); line-height:1.1; margin-top:.5rem; color:var(--color-ink); }
.visual-market { background:var(--color-yellow); padding:.8rem; flex-direction:column; align-items:flex-start!important; justify-content:space-between!important; }
.mk-big { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:.95; color:var(--color-ink); }
.mk-tag { position:absolute; top:.5rem; right:.5rem; background:var(--color-ink); color:var(--color-paper);
  padding:.15rem .4rem; font-family:var(--font-mono); font-size:.65rem; font-weight:700; letter-spacing:.05em; }
.mk-bot { font-family:var(--font-display); font-weight:900;
  font-size:clamp(.85rem,1.6vw,1.1rem); letter-spacing:.05em; align-self:flex-end; color:var(--color-ink); }
.visual-album { background:var(--color-ink); position:relative; }
.alb-circle { width:70%; aspect-ratio:1; border-radius:50%; background:var(--color-torn); position:relative; }
.alb-circle::after { content:""; position:absolute; inset:40%; background:var(--color-ink); border-radius:50%; }
.alb-text { position:absolute; bottom:.5rem; left:0; right:0; text-align:center; font-family:var(--font-display);
  font-weight:900; font-size:clamp(1.2rem,2.6vw,1.8rem); color:var(--color-paper); letter-spacing:.1em; }
.visual-geo { background:var(--color-paper-3); position:relative; overflow:hidden; }
.geo-tri { position:absolute; top:10%; left:10%; width:0; height:0;
  border-left:36px solid transparent; border-right:36px solid transparent; border-bottom:64px solid var(--color-red); transform:rotate(-15deg); }
.geo-dot { position:absolute; bottom:15%; right:15%; width:40%; aspect-ratio:1; background:var(--color-ink); border-radius:50%; }
.geo-tag { position:absolute; bottom:.35rem; left:.35rem; font-family:var(--font-display-cn); font-size:.8rem; font-weight:900; }
.geo-text { position:absolute; top:.35rem; right:.35rem; font-family:var(--font-display); font-weight:900;
  font-size:.62rem; letter-spacing:.1em; color:var(--color-red); }

/* ----- ComfyUI 工程：节点流几何封面（深底 + 网格 + 3 个节点 + 连线 + 大字） ----- */
.visual-comfyui { background:linear-gradient(160deg,var(--color-ink) 0%,var(--color-ink) 60%,#1a2440 100%); position:relative; overflow:hidden; color:var(--color-paper); }
.visual-comfyui .cmy-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:18px 18px;
  pointer-events:none;
}
/* 节点（仿 ComfyUI 圆角矩形标题栏 + 圆点） */
.visual-comfyui .cmy-node {
  position:absolute; display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--font-mono); font-weight:700; font-size:.6rem;
  letter-spacing:.04em; color:var(--color-paper);
  padding:.3rem .5rem .3rem .3rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid var(--color-paper);
  border-radius:4px;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  z-index:3;
}
.visual-comfyui .cmy-node::before {
  content:""; width:10px; height:10px; border-radius:50%; flex:0 0 auto;
}
.visual-comfyui .n-a { top:18%; left:14%; }
.visual-comfyui .n-a::before { background:var(--color-blue); box-shadow:0 0 6px var(--color-blue); }
.visual-comfyui .n-b { top:18%; right:14%; }
.visual-comfyui .n-b::before { background:var(--color-yellow); box-shadow:0 0 6px var(--color-yellow); }
.visual-comfyui .n-c { bottom:24%; left:38%; }
.visual-comfyui .n-c::before { background:var(--color-red); box-shadow:0 0 6px var(--color-red); }
/* 连线（贝塞尔近似：用一段斜向的伪元素带圆点） */
.visual-comfyui .cmy-edge {
  position:absolute; height:2px; background:var(--color-paper);
  transform-origin:0 50%; z-index:2; opacity:.65;
}
.visual-comfyui .e-1 { top:24%; left:33%; width:34%; transform:rotate(0deg); }
.visual-comfyui .e-2 { top:25%; left:67%; width:2px; height:34%; background:var(--color-paper); }
.visual-comfyui .e-3 { top:55%; left:48%; width:12%; transform:rotate(-8deg); }
/* 文本元素 */
.visual-comfyui .cmy-tag {
  position:absolute; top:.45rem; left:.5rem; z-index:4;
  font-family:var(--font-mono); font-weight:900; font-size:.62rem; letter-spacing:.16em;
  color:var(--color-ink); background:var(--color-yellow); padding:.25rem .5rem;
}
.visual-comfyui .cmy-big {
  position:absolute; left:.5rem; right:.5rem; bottom:2rem; z-index:4;
  font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.1rem,2.4vw,1.7rem); line-height:1; letter-spacing:.06em;
  color:var(--color-paper);
  text-shadow:3px 3px 0 var(--color-blue);
}
.visual-comfyui .cmy-bot {
  position:absolute; right:.5rem; bottom:.45rem; z-index:4;
  font-family:var(--font-mono); font-weight:700; font-size:.55rem; letter-spacing:.18em;
  color:var(--color-paper);
}
.visual-book { background:var(--color-blue); position:relative; flex-direction:column; padding:.8rem; justify-content:space-between!important; }
.bk-big { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(2.2rem,5.5vw,3.8rem); color:var(--color-paper); line-height:.9; }
.bk-lines { position:absolute; top:15%; bottom:15%; left:50%; width:2px; background:rgba(0,0,0,.3); }
.bk-label { font-family:var(--font-display); font-weight:900; font-size:.72rem;
  color:var(--color-paper); letter-spacing:.1em; align-self:flex-start; }
.visual-aigc { background:var(--color-red); position:relative; flex-direction:column; padding:.8rem; overflow:hidden; }
.aigc-big { font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.8rem,4vw,2.8rem); color:var(--color-paper); letter-spacing:-0.02em; line-height:1; z-index:2; position:relative; }
.aigc-grid { position:absolute; inset:0; background-image:linear-gradient(var(--color-paper) 1px,transparent 1px),linear-gradient(90deg,var(--color-paper) 1px,transparent 1px); background-size:20px 20px; opacity:.25; animation:grid-move 10s linear infinite; }
.aigc-sub { position:absolute; bottom:.5rem; right:.5rem; font-family:var(--font-mono); font-size:.62rem;
  font-weight:700; color:var(--color-paper); letter-spacing:.1em; z-index:2; }
.visual-video { background:var(--color-ink); position:relative; flex-direction:column; padding:.8rem; }
.vd-poster { width:100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 4px; display:block; opacity:.92; }
.vd-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(1.4rem,3.5vw,2.4rem); color:var(--color-red); background:var(--color-paper);
  width:2em; height:2em; border-radius:50%; display:flex; align-items:center; justify-content:center; padding-left:.15em; line-height:1; z-index:2; }
.vd-text { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.1rem,2.2vw,1.6rem); color:var(--color-paper); line-height:1; align-self:flex-start; margin-top:auto; z-index:2; }
.vd-time { position:absolute; top:.5rem; right:.5rem; background:var(--color-red); color:var(--color-paper);
  padding:.1rem .35rem; font-family:var(--font-mono); font-size:.62rem; font-weight:700; z-index:2; }
.visual-xhs { background:var(--color-red); position:relative; flex-direction:column; padding:.8rem; }
.xhs-big { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.6rem,3vw,2.2rem); color:var(--color-paper); line-height:1; }
.xhs-sub { font-family:var(--font-display); font-weight:900; font-size:.78rem; color:var(--color-paper); letter-spacing:.1em; margin-top:.25rem; opacity:.85; }
.xhs-stars { position:absolute; top:.5rem; right:.5rem; color:var(--color-yellow); font-size:1rem; letter-spacing:.1em; }
.visual-ppt { background:var(--color-torn); position:relative; flex-direction:column; padding:.8rem; align-items:flex-start!important; justify-content:space-between!important; }
.ppt-top { width:100%; }
.ppt-title { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.1rem,2vw,1.5rem); color:var(--color-ink); line-height:1; }
.ppt-sub { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--color-blue); font-weight:700; margin-top:.25rem; display:block; }
.ppt-bars { display:flex; align-items:flex-end; gap:.25rem; height:40%; width:100%; }
.ppt-bars i { flex:1; background:var(--color-ink); }
.ppt-bars i:nth-child(1){height:40%; background:var(--color-red);}
.ppt-bars i:nth-child(2){height:70%;}
.ppt-bars i:nth-child(3){height:55%; background:var(--color-blue);}
.ppt-bars i:nth-child(4){height:90%; background:var(--color-yellow);}
.ppt-bars i:nth-child(5){height:35%;}

/* 海外项目 PPT — 深底 + 地球经纬 + 数据柱 */
.visual-ppt-oversea { background:linear-gradient(160deg,var(--color-ink) 0%,var(--color-ink) 60%,#1a2a44 100%); }
.visual-ppt-oversea .ppt-title { color:var(--color-paper); }
.visual-ppt-oversea .ppt-sub { color:var(--color-yellow); }
.visual-ppt-oversea .ppt-bars { height:30%; margin-top:auto; }
.visual-ppt-oversea .ppt-bars i { background:var(--color-paper); }
.visual-ppt-oversea .ppt-bars i:nth-child(1){height:60%; background:var(--color-blue);}
.visual-ppt-oversea .ppt-bars i:nth-child(2){height:35%;}
.visual-ppt-oversea .ppt-bars i:nth-child(3){height:80%; background:var(--color-yellow);}
.visual-ppt-oversea .ppt-bars i:nth-child(4){height:50%;}
.ppt-globe {
  position:absolute; right:6%; top:30%; width:46%; aspect-ratio:1; border-radius:50%;
  background:
    repeating-linear-gradient(0deg,    transparent 0,transparent 8%,rgba(255,255,255,.18) 8%,rgba(255,255,255,.18) 9%),
    repeating-linear-gradient(90deg,   transparent 0,transparent 6%,rgba(255,255,255,.18) 6%,rgba(255,255,255,.18) 7%),
    radial-gradient(circle at 35% 35%, var(--color-blue-soft) 0%, var(--color-blue) 70%);
  border:2px solid var(--color-paper);
  box-shadow:0 0 0 4px var(--color-blue),6px 6px 0 rgba(0,0,0,.4);
  z-index:1;
}
.visual-ppt-oversea .ppt-globe::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 70% 75%, var(--color-yellow) 0 4px, transparent 5px),
             radial-gradient(circle at 30% 55%, var(--color-yellow) 0 5px, transparent 6px),
             radial-gradient(circle at 55% 30%, var(--color-yellow) 0 3px, transparent 4px);
}

/* 电商详情页专题入口卡片 */
.card-ecommerce { border: 2px solid var(--color-ink); }
.visual-ecom { background: linear-gradient(135deg, var(--color-paper) 0%, var(--color-paper-3) 100%); position:relative; padding:1rem; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.ecom-phones { position:relative; z-index:2; display:flex; gap:6px; align-items:flex-end; height:75%; }
.ep { display:block; border:2px solid var(--color-ink); border-radius:8px; background:var(--color-paper); position:relative; }
.ep::before { content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%); width:40%; height:3px; background:var(--color-ink); border-radius:2px; }
.ep-1 { width:28px; height:70px; background:var(--color-red); transform:rotate(-6deg) translateY(4px); }
.ep-2 { width:32px; height:82px; background:var(--color-paper); z-index:2; }
.ep-3 { width:28px; height:68px; background:var(--color-blue); transform:rotate(5deg) translateY(6px); }
.ecom-tag { position:absolute; top:.6rem; left:.6rem; background:var(--color-ink); color:var(--color-paper);
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; padding:.15rem .4rem; letter-spacing:.05em; z-index:3; }
.ecom-arrow { position:absolute; bottom:.6rem; right:.7rem; font-size:1.6rem; font-weight:900;
  color:var(--color-red); z-index:3; transition:transform 220ms var(--ease-out); }
.work-card:hover .ecom-arrow { transform:translate(4px,-4px); }
.sticker-featured { position:absolute; top:-10px; right:-8px; background:var(--color-yellow); color:var(--color-ink);
  border:2px solid var(--color-ink); font-family:var(--font-display-cn); font-weight:900; font-size:.7rem;
  padding:.2rem .5rem; transform:rotate(8deg); z-index:5; box-shadow:2px 2px 0 var(--color-ink); }
.sticker-featured span { display:block; }

.works-pager { display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin:clamp(1.8rem,3vw,2.5rem) auto 0; max-width:1400px;
  font-family:var(--font-display); font-weight:900; font-size:.95rem; }
.pg-prev { font-size:1.4rem; color:var(--color-muted); cursor:pointer; }
.pg-cur { font-size:1.9rem; color:var(--color-red); border-bottom:3px solid var(--color-red); padding:0 .2rem; }
.pg-dot { color:var(--color-ink); }
.pg-next { cursor:pointer; }
.pg-next:hover { color:var(--color-red); }
.pg-right { margin-left:auto; font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.15em; color:var(--color-muted); }
@media (max-width:600px){ .pg-right{display:none} }

/* ============================================================
   WORKFLOW
============================================================ */
.workflow { position:relative; padding:0 clamp(.8rem,2vw,1.5rem) clamp(2.5rem,6vw,4.5rem); background:var(--color-paper-2); overflow:hidden; }
.workflow-browser { display:flex; align-items:center; gap:.7rem; padding:.5rem .7rem;
  background:var(--color-ink); color:var(--color-paper); font-family:var(--font-mono); font-size:.72rem; }
.wf-dots { display:flex; gap:.25rem; }
.wf-dots i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.wf-dots i:nth-child(1){background:var(--color-red)} .wf-dots i:nth-child(2){background:var(--color-yellow)} .wf-dots i:nth-child(3){background:var(--color-green)}
.wf-url { letter-spacing:.1em; opacity:.85; } .wf-reload { margin-left:auto; font-size:1rem; cursor:pointer; }
.workflow-nav { display:flex; gap:1.2rem; align-items:center; justify-content:center;
  margin:clamp(1.2rem,3vw,2.5rem) 0 clamp(1.2rem,3vw,2rem);
  font-family:var(--font-display-cn); font-weight:900; font-size:clamp(.95rem,1.6vw,1.2rem); flex-wrap:wrap; }
.wf-nav-link { color:var(--color-ink); padding:.15rem 0; }
.wf-nav-active { color:var(--color-red); text-decoration:underline; text-decoration-thickness:3px; }
.wf-head { text-align:center; max-width:800px; margin:0 auto clamp(2rem,4vw,3rem); position:relative; }
.wf-title-cn { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.8rem,4vw,2.8rem); color:var(--color-ink); letter-spacing:-.02em; position:relative; }
.wf-evo { color:var(--color-red); position:relative; }
.wf-evo::after { content:""; position:absolute; left:0; bottom:.1em; width:100%; height:8px; background:var(--color-yellow); z-index:-1; transform:rotate(-2deg); }
.wf-title-en { display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(.85rem,1.5vw,1.1rem); color:var(--color-muted); letter-spacing:.1em; margin-top:.3rem; }
.wf-title-en i { color:var(--color-red); font-style:normal; }
.wf-subtitle { font-size:clamp(.9rem,1.2vw,1rem); color:var(--color-muted); margin-top:.6rem; line-height:1.6; }
.wf-year-range { display:inline-block; margin-top:.8rem; padding:.35rem .9rem; font-family:var(--font-mono); font-weight:900;
  font-size:.9rem; border:2.5px solid var(--color-ink); background:var(--color-paper); box-shadow:3px 3px 0 var(--color-red); }
.wf-arrow { color:var(--color-red); margin:0 .4em; }

.wf-track { position:relative; max-width:1400px; margin:0 auto;
  padding:2.5rem clamp(.8rem,3vw,2.5rem); min-height:560px; }
.wf-line { position:absolute; top:50%; left:5%; right:5%; height:4px;
  background:repeating-linear-gradient(90deg,var(--color-ink) 0,var(--color-ink) 10px,transparent 10px,transparent 18px);
  transform:translateY(-50%); z-index:1; }
.wf-card { position:absolute; width:calc(22% - 0.5rem); z-index:2; }
.wc-2023 { top:5%;  left:3%; } .wc-2024 { top:50%; left:28%; } .wc-2025 { top:5%;  left:52%; } .wc-2026 { top:50%; left:76%; }
@media (max-width:900px) {
  .wf-track { min-height:auto; padding:.8rem 0; display:flex; flex-direction:column; gap:1.5rem; }
  .wf-line { display:none; }
  .wf-card { position:relative; width:100%; top:auto!important; left:auto!important; }
}
.wc-node { position:absolute; top:50%; left:50%; width:20px; height:20px; border-radius:50%;
  background:var(--color-red); border:3px solid var(--color-paper);
  box-shadow:0 0 0 3px var(--color-red),0 0 0 6px var(--color-paper),0 0 0 8px var(--color-ink);
  transform:translate(-50%,-50%); z-index:3; }
.node-blue { background:var(--color-blue); box-shadow:0 0 0 3px var(--color-blue),0 0 0 6px var(--color-paper),0 0 0 8px var(--color-ink); }
.node-yellow { background:var(--color-yellow); box-shadow:0 0 0 3px var(--color-yellow),0 0 0 6px var(--color-paper),0 0 0 8px var(--color-ink); }
.node-red { background:var(--color-red); box-shadow:0 0 0 3px var(--color-red),0 0 0 6px var(--color-paper),0 0 0 8px var(--color-ink); }

.wc-card { position:relative; background:var(--color-torn); border:2.5px solid var(--color-ink);
  box-shadow:4px 5px 0 var(--color-ink); padding:0; overflow:hidden;
  transition:transform var(--dur-long) var(--ease-out),box-shadow var(--dur-long) var(--ease-out); }
.wc-card:hover { transform:translateY(-4px) rotate(0); box-shadow:6px 10px 0 var(--color-red); z-index:5; }
.wc-2023 .wc-card { transform:rotate(-2deg); }
.wc-2024 .wc-card { transform:rotate(1.5deg); }
.wc-2025 .wc-card { transform:rotate(-1deg); }
.wc-2026 .wc-card { transform:rotate(2deg); }
/* hover 投影随卡片主色 */
.work-card.card-red:hover { box-shadow:6px 8px 0 var(--color-red),10px 14px 24px rgba(0,0,0,0.18); }
.work-card.card-blue:hover { box-shadow:6px 8px 0 var(--color-blue),10px 14px 24px rgba(0,0,0,0.18); }
.work-card.card-green:hover { box-shadow:6px 8px 0 var(--color-green),10px 14px 24px rgba(0,0,0,0.18); }
.work-card.card-yellow:hover { box-shadow:6px 8px 0 var(--color-yellow),10px 14px 24px rgba(0,0,0,0.18); }
.work-card.card-black:hover { box-shadow:6px 8px 0 var(--color-ink),10px 14px 24px rgba(0,0,0,0.18); }

/* 卡片边框主色（用 :where 保持低优先级，不破坏 .work-card 边框） */
:where(.work-card.card-blue)   { border-color:var(--color-blue); }
:where(.work-card.card-green)  { border-color:var(--color-green); }
:where(.work-card.card-yellow) { border-color:var(--color-yellow); }
:where(.work-card.card-black)  { border-color:var(--color-ink); }


.card-dark-edge { background:var(--color-ink); color:var(--color-paper); }
.card-red-edge { border-top:6px solid var(--color-red); }
.wc-head { display:flex; align-items:baseline; justify-content:space-between; gap:.4rem;
  padding:.7rem .9rem .4rem; border-bottom:2px solid var(--color-ink); }
.head-dark { border-bottom-color:var(--color-paper); }
.wc-year { font-family:var(--font-display); font-weight:900; font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.02em; line-height:1; }
.year-blue { color:var(--color-blue); } .year-dark { color:var(--color-yellow); } .year-red { color:var(--color-red); }
.wc-phase { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(.85rem,1.2vw,1rem); padding:.12rem .45rem; background:var(--color-red); color:var(--color-paper); }
.phase-2 { background:var(--color-blue); } .phase-3 { background:var(--color-yellow); color:var(--color-ink); }
.phase-4 { background:var(--color-ink); color:var(--color-paper); border:2px solid var(--color-red); }
.wc-visual { position:relative; height:100px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-bottom:2px solid var(--color-ink); }
.wcv-explore { background:var(--color-yellow-soft); }
.wcv-grow { background:var(--color-blue-soft); }
.wcv-mature { background:var(--color-red); }
.wcv-break { background:var(--color-yellow); }
.wcv-hand { font-family:var(--font-hand); font-size:2.6rem; color:var(--color-red); }
.wcv-grid { position:absolute; inset:0; background-image:linear-gradient(var(--color-ink) 1px,transparent 1px),linear-gradient(90deg,var(--color-ink) 1px,transparent 1px); background-size:18px 18px; opacity:.3; }
.wcv-label { position:relative; z-index:2; font-family:var(--font-display-cn); font-weight:900;
  font-size:1rem; background:var(--color-paper); border:2px solid var(--color-ink); padding:.12rem .5rem; transform:rotate(-3deg); }
.wcv-ai { font-family:var(--font-display-cn); font-weight:900; font-size:2rem;
  color:var(--color-paper); letter-spacing:.05em; text-shadow:3px 3px 0 var(--color-ink); }
.wcv-mature .wcv-label { position:absolute; bottom:.4rem; right:.4rem; font-size:.72rem;
  background:var(--color-yellow); color:var(--color-ink); border-color:var(--color-ink); box-shadow:2px 2px 0 var(--color-ink); z-index:3; }
.wcv-spark { font-size:2.6rem; color:var(--color-red); text-shadow:2px 2px 0 var(--color-ink); animation:spark 2s ease-in-out infinite; }
@keyframes spark { 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(15deg) scale(1.15)} }
.wcv-break .wcv-label { background:var(--color-ink); color:var(--color-paper); border-color:var(--color-ink); }
.wc-body { padding:.8rem .9rem 1rem; }
.body-light { color:var(--color-paper); }
.wc-slogan { font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1rem,1.4vw,1.15rem); margin-bottom:.35rem; }
.slogan-light { color:var(--color-yellow); } .slogan-red { color:var(--color-red); }
.wc-desc { font-size:.82rem; line-height:1.6; color:var(--color-muted); margin-bottom:.6rem; }
.desc-light { color:rgba(255,255,255,.8); }
.wc-tools { display:flex; flex-wrap:wrap; gap:.3rem; }
.wc-tools li { padding:.12rem .4rem; font-family:var(--font-mono); font-size:.65rem; font-weight:700;
  letter-spacing:.05em; border:1.5px solid var(--color-ink); background:var(--color-paper); }
.tools-blue li { border-color:var(--color-blue); color:var(--color-blue); }
.tools-dark { gap:.35rem; } .tools-dark li { background:transparent; border-color:var(--color-paper); color:var(--color-yellow); }
.tools-red li { background:var(--color-red); color:var(--color-paper); border-color:var(--color-red); }
.wc-staple { position:absolute; bottom:5px; left:15%; width:20px; height:7px;
  background:var(--color-paper-4); border:1px solid var(--color-ink); border-radius:1px; }
.wc-tag { position:absolute; top:-7px; right:.8rem; padding:.12rem .4rem;
  background:var(--color-red); color:var(--color-paper); font-family:var(--font-display-cn); font-weight:900;
  font-size:.68rem; border:1.5px solid var(--color-ink); transform:rotate(4deg); }
.wc-tape { position:absolute; bottom:-7px; right:15%; width:44px; height:16px; background:var(--color-yellow-soft); opacity:.8; transform:rotate(-6deg); }

.wf-summary { max-width:1000px; margin:clamp(2.2rem,4vw,3.5rem) auto 0; padding:1.5rem clamp(.8rem,2.5vw,1.8rem); position:relative; }
.ws-line { position:absolute; top:50%; left:0; right:0; height:3px; background:var(--color-ink); z-index:1; }
.ws-cards { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.ws-item { background:var(--color-paper); border:2.5px solid var(--color-ink);
  box-shadow:3px 3px 0 var(--color-red); padding:.8rem; text-align:center; }
.ws-num { display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem,2.8vw,2.2rem); color:var(--color-red); line-height:1; }
.ws-label { display:block; font-family:var(--font-display-cn); font-weight:700; font-size:.85rem; margin-top:.25rem; }
@media (max-width:600px) { .ws-cards { grid-template-columns:repeat(2,1fr); } }

.workflow-foot { text-align:center; margin-top:1.8rem; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.15em; color:var(--color-muted); }
.workflow-foot i { color:var(--color-red); margin:0 .4em; font-style:normal; }

/* ============================================================
   CONTACT
============================================================ */
.contact { position:relative; padding:0 clamp(.8rem,2vw,1.5rem) clamp(2rem,4vw,3.5rem); background:var(--color-paper); overflow:hidden; }
.contact-tabs { display:flex; gap:.4rem; padding:.5rem .7rem; background:var(--color-ink); }
.ct-tab { padding:.25rem .7rem; font-family:var(--font-display-cn); font-weight:900;
  font-size:.88rem; color:var(--color-paper); opacity:.7; }
.ct-tab-on { background:var(--color-paper); color:var(--color-ink); transform:translateY(-2px); opacity:1; }

.ct-head { max-width:1400px; margin:0 auto clamp(1.8rem,4vw,3rem); padding-top:clamp(1.8rem,4vw,3rem); }
.ct-title { font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.8rem,8vw,6rem); line-height:.9; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:.15em; letter-spacing:-.03em; }
.ct-big { color:var(--color-ink); }
.ct-red { color:var(--color-red); font-family:var(--font-display-cn); position:relative; }
.ct-red::after { content:""; display:inline-block; width:.3em; height:.3em;
  border-radius:50%; background:var(--color-yellow); margin-left:.15em; vertical-align:super; }
.ct-lead { max-width:55ch; font-size:clamp(.9rem,1.3vw,1.05rem); line-height:1.7; margin-top:1rem; color:var(--color-muted); }
.ct-hl { display:inline-block; padding:0 .25em; font-weight:900; }
.ct-hl { background:var(--color-yellow); color:var(--color-ink); }
.ct-hl.hl-b { background:var(--color-blue); color:var(--color-paper); }
.ct-hl.hl-y { color:var(--color-red); background:transparent; text-decoration:underline wavy var(--color-red) 2px; }

.ct-grid { max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:auto auto;
  gap:clamp(.8rem,1.5vw,1.2rem); margin-bottom:clamp(2.2rem,4vw,3.5rem); }
@media (max-width:900px) { .ct-grid { grid-template-columns:1fr; } }

.ct-email-card { grid-row:1/span 2; position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.3rem,2.5vw,2.2rem); min-height:300px; background:var(--color-torn);
  border:3px solid var(--color-ink); box-shadow:6px 7px 0 var(--color-red);
  text-decoration:none; color:var(--color-ink);
  clip-path:polygon(0% 3%,4% 0%,10% 2%,16% 0%,24% 3%,32% 0%,40% 2%,50% 0%,60% 3%,70% 0%,80% 2%,88% 0%,95% 3%,100% 6%,100% 95%,96% 100%,88% 97%,78% 100%,68% 97%,58% 100%,48% 97%,38% 100%,28% 97%,18% 100%,8% 97%,0% 100%);
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.ct-email-card:hover { transform:translate(-3px,-3px); box-shadow:10px 11px 0 var(--color-red); }
.cec-label { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.2em; font-weight:700;
  color:var(--color-muted); text-transform:uppercase; }
.cec-mail { font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.8rem,4vw,3.2rem); line-height:1; letter-spacing:-.02em; color:var(--color-red); word-break:break-all; }
.cec-arrow { position:absolute; top:1.3rem; right:1.5rem; font-size:2.2rem; font-weight:900; color:var(--color-ink);
  transition:transform var(--dur-short) var(--ease-out); }
.ct-email-card:hover .cec-arrow { transform:translate(4px,-4px) rotate(12deg); color:var(--color-red); }
.cec-clip { position:absolute; top:-10px; left:30%; width:30px; height:14px;
  background:var(--color-paper-4); border:1.5px solid var(--color-ink); border-radius:3px; }
.cec-tape { position:absolute; bottom:-7px; right:10%; width:70px; height:20px;
  background:var(--color-yellow-soft); opacity:.7; transform:rotate(3deg); }

.ct-intent-card { position:relative; padding:1.2rem; background:var(--color-yellow);
  border:3px solid var(--color-ink); box-shadow:5px 5px 0 var(--color-ink); transform:rotate(-1.5deg); }
.cic-line { display:block; font-family:var(--font-display-cn); font-weight:900;
  font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.2; margin-bottom:.25rem; position:relative; }
.cic-strike { position:absolute; top:50%; left:0; right:0; height:3px; background:var(--color-red); transform:rotate(-4deg); }
.cic-strong { color:var(--color-red); }
.cic-small { font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  color:var(--color-muted); font-weight:700; margin-top:.6rem; padding-top:.5rem;
  border-top:1px dashed var(--color-ink); }

.ct-socials { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.cs-stamp { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  border:2.5px solid var(--color-ink); background:var(--color-torn);
  font-family:var(--font-display-cn); font-weight:900; font-size:.9rem;
  text-decoration:none; color:var(--color-ink); box-shadow:3px 3px 0 var(--color-ink);
  transform:rotate(var(--rot,0deg));
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.cs-stamp i { font-size:1.4rem; }
.cs-stamp:hover { transform:rotate(0) scale(1.08) translateY(-3px); box-shadow:4px 6px 0 var(--color-red); }
.cs-wechat { color:var(--color-green); border-color:var(--color-green); }
.cs-xhs { color:var(--color-red); border-color:var(--color-red); }
.cs-zcool { color:var(--color-blue); border-color:var(--color-blue); }
.cs-be { color:var(--color-ink); }
@media (max-width:520px) { .ct-socials { grid-template-columns:repeat(2,1fr); } }

.ct-photo-card { position:relative; border:2.5px solid var(--color-ink); background:var(--color-torn);
  padding:.4rem; box-shadow:4px 4px 0 var(--color-ink); transform:rotate(2deg); }
.cpc-inner svg { width:100%; height:auto; display:block; }
.cpc-caption { display:block; text-align:center; font-family:var(--font-mono); font-size:.65rem;
  font-weight:700; letter-spacing:.1em; margin-top:.25rem; color:var(--color-muted); }

.ct-pdf-btn { position:relative; display:flex; align-items:center; gap:.8rem; padding:.8rem 1.2rem;
  background:var(--color-ink); color:var(--color-paper); border:3px solid var(--color-ink);
  box-shadow:5px 5px 0 var(--color-red); text-decoration:none;
  transition:transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
  grid-column:2; }
.ct-pdf-btn:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--color-red); }
.pdf-ic { font-size:1.6rem; color:var(--color-yellow); }
.pdf-meta { display:flex; flex-direction:column; flex:1; }
.pm-fname { font-family:var(--font-mono); font-size:.75rem; opacity:.8; }
.pm-size { font-family:var(--font-mono); font-size:.65rem; opacity:.5; }
.pdf-cta { font-family:var(--font-display-cn); font-weight:900; font-size:1rem; }

.cta-final { position:relative; max-width:1400px; margin:0 auto 1.5rem;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.3rem,3vw,2.5rem);
  background:var(--color-red); color:var(--color-paper);
  clip-path:polygon(0% 4%,3% 0%,10% 3%,18% 0%,28% 4%,38% 0%,48% 3%,58% 0%,68% 4%,78% 0%,88% 3%,96% 0%,100% 4%,98% 50%,100% 96%,94% 100%,84% 96%,72% 100%,60% 96%,48% 100%,36% 97%,24% 100%,12% 96%,4% 100%,0% 96%); }
.cta-tape { position:absolute; top:-10px; left:12%; width:110px; height:22px; background:var(--color-yellow); opacity:.8; transform:rotate(-4deg); }
.cta-title { font-family:var(--font-display-cn); font-weight:900; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.02em; }
.cta-sub { font-size:clamp(.88rem,1.2vw,1rem); margin-top:.35rem; opacity:.9; }
.cta-meta-row { display:flex; flex-wrap:wrap; gap:1.2rem; margin:1rem 0;
  font-family:var(--font-mono); font-size:.82rem; }
.cta-meta-row b { color:var(--color-yellow); margin-right:.35em; }
.cta-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.ch-chip { padding:.3rem .8rem; font-family:var(--font-display-cn); font-weight:900;
  font-size:.88rem; border:2px solid var(--color-paper); box-shadow:2px 2px 0 var(--color-paper); }
.ch-green { background:var(--color-green); } .ch-blue { background:var(--color-blue); } .ch-red { background:var(--color-ink); }

.site-footer { max-width:1400px; margin:0 auto; padding:1rem 0 .5rem;
  display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--color-muted); }
.site-footer i { color:var(--color-red); font-style:normal; }
.foot-slogan { margin-left:auto; font-family:var(--font-hand); font-size:1.1rem; color:var(--color-ink); }

/* SIDE DOTS */
.side-dots { position:fixed; right:clamp(.5rem,1.2vw,1.2rem); top:50%;
  transform:translateY(-50%); display:flex; flex-direction:column; gap:.7rem; z-index:80; }
.sd-dot { width:12px; height:12px; border-radius:50%; border:1.5px solid var(--color-ink);
  background:var(--color-paper); box-shadow:0 0 0 2px var(--color-paper), 0 1px 4px rgba(0,0,0,.25);
  position:relative; transition:background var(--dur-short), transform var(--dur-short), border-color var(--dur-short); }
.sd-dot::after { content:attr(data-label); position:absolute; right:180%; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.15em; font-weight:700;
  color:var(--color-ink); background:var(--color-paper); padding:2px 6px; border:1px solid var(--color-rule);
  opacity:0; transition:opacity var(--dur-short); white-space:nowrap; pointer-events:none; }
.sd-dot:hover { background:var(--color-red); border-color:var(--color-red); }
.sd-dot:hover::after { opacity:1; }
.sd-active { background:var(--color-red); border-color:var(--color-red); transform:scale(1.25); box-shadow:0 0 0 2px var(--color-paper), 0 0 0 3px var(--color-red); }
@media (max-width:600px) { .side-dots { display:none; } }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html { scroll-behavior:auto; }
  /* 跑马灯是核心视觉信息，需保持滚动 */
  .hbm-track { animation: hbm-scroll 28s linear infinite !important; }
  .hbm-dot { animation: hbm-dot-pulse 1.4s ease-in-out infinite !important; }
  .hero-bar-marquee { animation: bar-color-cycle 12s linear infinite !important; }
}

/* ============================================================
   ABOUT / CONTACT — Riso 档案风（忠实移植自预览页）
   ============================================================ */

/* ---- 抵消旧版 about/contact 默认样式 ---- */
.about-v2, .contact-v2 {
  background: var(--color-paper) !important;
  padding: 0 !important;
  position: relative;
  overflow: clip;
  scroll-margin-top: var(--chrome-h);
}
.about-v2::before, .about-v2::after,
.contact-v2::before, .contact-v2::after { display: none !important; }
.about-v2 > .about-wrap,
.contact-v2 > .contact-tabs,
.contact-v2 > .ct-head { display: none !important; }

/* ================= ABOUT ================= */
.about-v2 .ab-masthead {
  background: var(--color-paper);
  border-bottom: 3px solid var(--color-ink);
  padding: clamp(28px,5vw,72px) clamp(20px,5vw,72px) 28px;
  position: relative;
}
.about-v2 .ab-masthead::before {
  content: "ABOUT ME / 设计师档案";
  position: absolute; top: 14px; left: 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.25em;
  color: var(--color-text-3);
}
.about-v2 .ab-masthead::after {
  content: ""; position: absolute; bottom: -3px; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--color-red) 0 20px, transparent 20px 32px);
}
.about-v2 .ab-masthead-grid {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  padding-top: 24px;
}
.about-v2 .ab-masthead-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--color-paper); background: var(--color-ink);
  padding: 4px 12px; margin-bottom: 16px;
}
.about-v2 .ab-masthead-title {
  font-family: var(--font-display); font-size: clamp(52px,10vw,140px);
  font-weight: 900; line-height: 0.85; margin: 0;
  color: var(--color-ink); position: relative;
}
.about-v2 .ab-shadow-red {
  position: absolute; top: 6px; left: 6px;
  color: var(--color-red); z-index: -1;
}
.about-v2 .ab-outline {
  -webkit-text-stroke: 2.5px var(--color-ink);
  color: transparent;
}
.about-v2 .ab-cn {
  display: block;
  font-family: var(--font-cn); font-size: clamp(18px,3vw,28px); font-weight: 900;
  color: var(--color-red); letter-spacing: 0.15em; margin-top: 8px;
}
.about-v2 .ab-masthead-sub {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 24px; font-size: 12px;
  font-family: var(--font-mono); letter-spacing: 0.1em;
}
.about-v2 .ab-dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--color-red); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.about-v2 .ab-dot-blue { background: var(--color-blue); }
.about-v2 .ab-dot-yellow { background: var(--color-yellow); }
.about-v2 .ab-masthead-num {
  font-family: var(--font-mono); font-size: 11px;
  text-align: right; line-height: 1.8; color: var(--color-text-3);
  white-space: nowrap;
}

.about-v2 .ab-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(32px,5vw,64px) clamp(20px,5vw,48px);
}

/* Profile */
.about-v2 .ab-profile {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px;
  margin-bottom: 64px; align-items: start;
}
.about-v2 .ab-id-card {
  background: var(--color-yellow);
  border: 2px solid var(--color-ink);
  padding: 16px; position: relative;
  box-shadow: 6px 6px 0 var(--color-red);
  transform: rotate(-1.5deg);
  transition: transform .3s ease;
}
.about-v2 .ab-id-card:hover { transform: rotate(0); }
.about-v2 .ab-id-tab {
  position: absolute; top: -2px; left: -2px;
  background: var(--color-ink); color: var(--color-paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  padding: 4px 14px;
}
.about-v2 .ab-id-photo {
  width: 100%; aspect-ratio: 1; border: 2px solid var(--color-ink);
  overflow: hidden; margin-top: 20px; margin-bottom: 12px; position: relative;
  background: var(--color-paper-2);
}
.about-v2 .ab-id-photo img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; filter: grayscale(.1) contrast(1.05);
}
.about-v2 .ab-id-stamp {
  position: absolute; bottom: 8px; right: 8px;
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--color-red); color: var(--color-red);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 900;
  text-align: center; line-height: 1.2;
  transform: rotate(-12deg); background: rgba(245,242,235,.85);
}
.about-v2 .ab-id-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px dashed rgba(26,24,28,.25);
  font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.05em;
}
.about-v2 .ab-id-row:last-child { border-bottom: none; }
.about-v2 .ab-id-row span { color: var(--color-text-3); }
.about-v2 .ab-id-row b { color: var(--color-ink); font-weight: 700; }

.about-v2 .ab-intro-text {
  font-size: clamp(15px,1.4vw,17px); line-height: 1.9;
}
.about-v2 .ab-lead {
  font-family: var(--font-cn); font-size: clamp(20px,2.5vw,28px);
  font-weight: 700; color: var(--color-ink);
  display: block; margin-bottom: 24px; line-height: 1.4;
}
.about-v2 .ab-intro-text p { margin: 0 0 18px; }
.about-v2 .ab-intro-text mark {
  background: var(--color-yellow); padding: 1px 6px;
  border: 1px solid var(--color-ink); font-weight: 700;
}
.about-v2 .ab-scribble {
  text-decoration: line-through; text-decoration-color: var(--color-red);
  text-decoration-thickness: 2px;
}
.about-v2 .ab-tag-red {
  background: var(--color-red); color: var(--color-paper);
  padding: 2px 8px; font-weight: 700;
}

/* Stats */
.about-v2 .ab-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 2px solid var(--color-ink); margin-bottom: 64px;
  background: var(--color-paper);
}
.about-v2 .ab-stat {
  padding: 28px 16px; text-align: center;
  border-right: 2px solid var(--color-ink);
}
.about-v2 .ab-stat:last-child { border-right: none; }
.about-v2 .ab-stat-num {
  font-family: var(--font-display); font-size: 48px; font-weight: 900;
  color: var(--color-red); line-height: 1;
}
.about-v2 .ab-stat-num.ab-stat-blue { color: var(--color-blue); }
.about-v2 .ab-stat-num.ab-stat-ink { color: var(--color-ink); }
.about-v2 .ab-stat-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--color-text-3); margin-top: 8px;
}

/* Section head */
.about-v2 .ab-section-gap { margin-top: 64px; }
.about-v2 .ab-sec-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 36px; padding-bottom: 12px;
  border-bottom: 2px solid var(--color-ink);
}
.about-v2 .ab-sec-head-num {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--color-red); letter-spacing: 0.2em;
}
.about-v2 .ab-sec-head-title {
  font-family: var(--font-cn); font-size: clamp(22px,3vw,32px);
  font-weight: 900; margin: 0;
}
.about-v2 .ab-sec-head-en {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--color-text-3); margin-left: auto;
}

/* Timeline */
.about-v2 .ab-timeline { position: relative; padding-left: 32px; }
.about-v2 .ab-timeline::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px; background: var(--color-ink);
}
.about-v2 .ab-tl-item {
  position: relative; padding: 0 0 36px; display: grid;
  grid-template-columns: 80px 1fr; gap: 24px;
}
.about-v2 .ab-tl-item::before {
  content: ""; position: absolute; left: -38px; top: 6px;
  width: 14px; height: 14px; background: var(--color-red);
  border: 3px solid var(--color-paper); box-shadow: 0 0 0 2px var(--color-ink);
}
.about-v2 .ab-tl-year {
  font-family: var(--font-display); font-size: 36px; font-weight: 900;
  color: var(--color-red); line-height: 1;
}
.about-v2 .ab-tl-year-blue { color: var(--color-blue); }
.about-v2 .ab-tl-body {
  background: var(--color-paper); border: 1.5px solid var(--color-ink);
  padding: 18px 22px; position: relative;
}
.about-v2 .ab-tl-body::before {
  content: ""; position: absolute; left: -8px; top: 14px;
  width: 14px; height: 14px; background: var(--color-paper);
  border-left: 1.5px solid var(--color-ink);
  border-bottom: 1.5px solid var(--color-ink);
  transform: rotate(45deg);
}
.about-v2 .ab-tl-h {
  font-family: var(--font-cn); font-size: 18px; font-weight: 700;
  margin: 0 0 4px;
}
.about-v2 .ab-tl-role {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--color-text-3); margin-bottom: 12px;
}
.about-v2 .ab-tl-desc { font-size: 14px; line-height: 1.8; }
.about-v2 .ab-tl-desc ul { margin: 10px 0 0; padding-left: 18px; }
.about-v2 .ab-tl-desc li { margin-bottom: 4px; font-size: 13px; color: var(--color-text-2); }
.about-v2 .ab-tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.about-v2 .ab-tl-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 3px 10px; border: 1px solid var(--color-ink);
}
.about-v2 .ab-tl-tag.ab-tl-hot {
  background: var(--color-red); color: var(--color-paper);
  border-color: var(--color-red);
}
.about-v2 .ab-tl-side { display: none; }

/* Skills */
.about-v2 .ab-skills-grid {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 12px;
}
.about-v2 .ab-skill {
  background: var(--color-paper); border: 2px solid var(--color-ink);
  padding: 16px 10px; text-align: center; position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.about-v2 .ab-skill:hover {
  transform: translateY(-4px); box-shadow: 4px 4px 0 var(--color-red);
}
.about-v2 .ab-skill-icon { font-size: 28px; display: block; margin-bottom: 8px; color: var(--color-ink); }
.about-v2 .ab-skill-name {
  display: block; font-family: var(--font-cn); font-size: 14px; font-weight: 700;
}
.about-v2 .ab-skill-en {
  display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.15em; color: var(--color-text-3); margin-top: 4px;
}
.about-v2 .ab-skill-corner {
  position: absolute; top: 4px; right: 6px;
  font-size: 10px; color: var(--color-red);
}

/* Marquee */
.about-v2 .ab-marq {
  background: var(--color-ink); color: var(--color-paper);
  border-top: 3px solid var(--color-red);
  border-bottom: 3px solid var(--color-red);
  padding: 16px 0; overflow: hidden; white-space: nowrap;
}
.about-v2 .ab-marq-track {
  display: inline-flex; gap: 32px;
  animation: ab-marq-scroll 22s linear infinite;
  font-family: var(--font-display); font-size: 28px; font-weight: 900;
  letter-spacing: 0.02em;
}
.about-v2 .ab-marq-track i {
  font-style: normal; color: var(--color-yellow);
  padding: 0 8px;
}
@keyframes ab-marq-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ================= CONTACT ================= */
.contact-v2 { color: var(--color-ink); }
.contact-v2 .ch-mast {
  background: var(--color-red); color: var(--color-paper);
  padding: clamp(40px,6vw,80px) clamp(20px,5vw,60px) clamp(48px,6vw,72px);
  position: relative; overflow: hidden;
}
.contact-v2 .ch-mast::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--color-ink) 0 18px, transparent 18px 28px);
}
.contact-v2 .ch-mast-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.contact-v2 .ch-mast-topline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .35em;
  opacity: .8; margin-bottom: 20px;
}
.contact-v2 .ch-h {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px,11vw,160px); line-height: .85;
  margin: 0 0 24px; color: var(--color-paper); position: relative;
}
.contact-v2 .ch-h-red { color: var(--color-yellow); display: inline-block; position: relative; }
.contact-v2 .ch-shadow {
  position: absolute; left: 4px; top: 4px;
  color: var(--color-ink); z-index: -1;
}
.contact-v2 .ch-dek {
  font-family: var(--font-cn); font-size: clamp(15px,1.5vw,18px);
  line-height: 1.8; max-width: 620px; margin-bottom: 28px;
}
.contact-v2 .ch-mark {
  background: var(--color-ink); color: var(--color-paper);
  padding: 2px 8px;
}
.contact-v2 .ch-note {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--color-paper); color: var(--color-ink);
  padding: 12px 20px; border: 2px solid var(--color-ink);
  box-shadow: 4px 4px 0 var(--color-ink);
}
.contact-v2 .ch-note-ico {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-red); color: var(--color-paper);
  display: flex; align-items: center; justify-content: center;
}
.contact-v2 .ch-note strong { display: block; font-family: var(--font-cn); font-size: 14px; }
.contact-v2 .ch-note span { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-3); }

.contact-v2 .ch-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(32px,5vw,64px) clamp(20px,5vw,48px) 72px; }

.contact-v2 .ch-grid {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr;
  grid-template-rows: auto auto; gap: 16px; margin-bottom: 40px;
}

.contact-v2 .ch-card {
  background: var(--color-paper); border: 2px solid var(--color-ink);
  padding: 24px; position: relative; transition: transform .25s, box-shadow .25s;
}
.contact-v2 .ch-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--color-ink); }
.contact-v2 .ch-card-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--color-text-3); margin-bottom: 16px;
}
.contact-v2 .ch-card-tag-p { color: var(--color-paper-2); }

/* Email card */
.contact-v2 .ch-mail {
  background: var(--color-yellow);
  grid-row: span 2; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; min-height: 360px;
  text-decoration: none; color: var(--color-ink);
}
.contact-v2 .ch-mail:hover { box-shadow: 8px 8px 0 var(--color-red); }
.contact-v2 .ch-mail-ico {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--color-red); color: var(--color-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; margin-bottom: 20px;
  border: 2px solid var(--color-ink);
}
.contact-v2 .ch-mail-addr {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px,3.2vw,34px); line-height: 1.1; margin-bottom: 16px;
  word-break: break-all;
}
.contact-v2 .ch-mail-hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid var(--color-ink); padding-bottom: 2px;
}

/* Intent card */
.contact-v2 .ch-intent { background: var(--color-ink); color: var(--color-paper); }
.contact-v2 .ch-intent-h {
  font-family: var(--font-cn); font-size: 20px; margin: 0 0 16px; color: var(--color-yellow);
}
.contact-v2 .ch-intent-list { list-style: none; padding: 0; margin: 0; }
.contact-v2 .ch-intent-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed rgba(245,242,235,.2);
  font-family: var(--font-cn); font-size: 14px;
}
.contact-v2 .ch-intent-list li i { color: var(--color-yellow); font-size: 11px; }
.contact-v2 .ch-intent-bottom {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  color: var(--color-paper-2); letter-spacing: .1em;
}

/* Desk card */
.contact-v2 .ch-desk { padding: 0; overflow: hidden; }
.contact-v2 .ch-desk .ch-card-tag { padding: 16px 24px 0; }
.contact-v2 .ch-desk-visual {
  background: var(--color-ink); padding: 24px; display: flex;
  justify-content: center; margin-top: 12px;
}
.contact-v2 .ch-desk-monitor {
  background: var(--color-paper); border: 2px solid var(--color-paper);
  width: 100%; max-width: 260px;
}
.contact-v2 .ch-desk-bar {
  background: var(--color-text-3); padding: 6px 8px;
  display: flex; gap: 4px;
}
.contact-v2 .ch-desk-bar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-paper-2); display: block;
}
.contact-v2 .ch-desk-bar i:first-child { background: var(--color-red); }
.contact-v2 .ch-desk-code {
  font-family: var(--font-mono); font-size: 11px;
  line-height: 1.7; padding: 12px; color: var(--color-ink);
}
.contact-v2 .ch-desk-label {
  font-family: var(--font-cn); font-size: 12px; text-align: center;
  padding: 12px; color: var(--color-text-3); letter-spacing: .1em;
}

/* Stamps */
.contact-v2 .ch-stamps {
  grid-column: span 2;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.contact-v2 .ch-stamp {
  background: var(--color-paper); border: 2px solid var(--color-ink);
  border-radius: 50%; width: 100%; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-decoration: none; color: var(--color-ink);
  transition: transform .25s, background .25s;
  max-width: 150px; margin: 0 auto;
}
.contact-v2 .ch-stamp:hover { transform: rotate(-6deg) scale(1.05); }
.contact-v2 .ch-stamp i { font-size: 26px; margin-bottom: 6px; }
.contact-v2 .ch-stamp span { font-family: var(--font-cn); font-size: 13px; font-weight: 700; }
.contact-v2 .ch-stamp small {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: .1em; color: var(--color-text-3);
}
.contact-v2 .ch-stamp-bili:hover { background: var(--color-blue); color: var(--color-paper); border-color: var(--color-blue); }
.contact-v2 .ch-stamp-red:hover { background: var(--color-red); color: var(--color-paper); border-color: var(--color-red); }
.contact-v2 .ch-stamp-line:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

/* Resume */
.contact-v2 .ch-resume {
  display: flex; align-items: center; gap: 20px;
  background: var(--color-red); color: var(--color-paper);
  border: 2px solid var(--color-ink); padding: 20px 28px;
  text-decoration: none; margin-bottom: 40px;
  box-shadow: 6px 6px 0 var(--color-ink);
  transition: transform .25s;
}
.contact-v2 .ch-resume:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--color-ink); }
.contact-v2 .ch-resume-icon {
  width: 56px; height: 56px; background: var(--color-paper);
  color: var(--color-red); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex-shrink: 0;
}
.contact-v2 .ch-resume-info { flex: 1; }
.contact-v2 .ch-resume-title {
  font-family: var(--font-cn); font-size: 17px; font-weight: 700; margin-bottom: 4px;
}
.contact-v2 .ch-resume-meta {
  font-family: var(--font-mono); font-size: 11px;
  opacity: .85; letter-spacing: .05em;
}
.contact-v2 .ch-resume-cta {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-ink); color: var(--color-paper);
  padding: 10px 18px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .15em; flex-shrink: 0;
}

/* CTA */
.contact-v2 .ch-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  border-top: 3px solid var(--color-ink); padding-top: 40px;
}
.contact-v2 .ch-cta-cn {
  display: block; font-family: var(--font-cn); font-size: 16px;
  color: var(--color-text-3); margin-bottom: 8px; letter-spacing: .2em;
}
.contact-v2 .ch-cta-big {
  display: block; font-family: var(--font-cn); font-weight: 900;
  font-size: clamp(28px,5vw,52px); line-height: 1.2;
}
.contact-v2 .ch-cta-u {
  text-decoration: underline; text-decoration-color: var(--color-red);
  text-decoration-thickness: 6px; text-underline-offset: 4px;
}
.contact-v2 .ch-cta-sub {
  display: block; margin-top: 12px; font-family: var(--font-mono);
  font-size: 12px; color: var(--color-text-3); letter-spacing: .15em;
}
.contact-v2 .ch-cta-sub b { color: var(--color-red); }
.contact-v2 .ch-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--color-red); color: var(--color-paper);
  padding: 20px 36px; font-family: var(--font-display);
  font-weight: 900; font-size: 18px; letter-spacing: .05em;
  text-decoration: none; border: 3px solid var(--color-ink);
  box-shadow: 6px 6px 0 var(--color-ink);
  transition: transform .2s, box-shadow .2s;
}
.contact-v2 .ch-cta-btn:hover {
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 var(--color-ink);
}

/* Responsive */
@media (max-width: 900px) {
  .about-v2 .ab-profile { grid-template-columns: 1fr; gap: 28px; }
  .about-v2 .ab-id-card { max-width: 320px; margin: 0 auto; }
  .about-v2 .ab-stats { grid-template-columns: repeat(2,1fr); }
  .about-v2 .ab-stat:nth-child(2) { border-right: none; }
  .about-v2 .ab-stat:nth-child(1), .about-v2 .ab-stat:nth-child(2) { border-bottom: 2px solid var(--color-ink); }
  .about-v2 .ab-skills-grid { grid-template-columns: repeat(3,1fr); }
  .about-v2 .ab-masthead-grid { flex-direction: column; align-items: flex-start; }
  .about-v2 .ab-tl-item { grid-template-columns: 1fr; gap: 8px; }
  .contact-v2 .ch-grid { grid-template-columns: 1fr; }
  .contact-v2 .ch-mail { grid-row: auto; min-height: auto; padding: 40px 24px; }
  .contact-v2 .ch-stamps { grid-column: auto; }
}
@media (max-width: 560px) {
  .about-v2 .ab-skills-grid { grid-template-columns: repeat(2,1fr); }
  .contact-v2 .ch-resume { flex-direction: column; text-align: center; gap: 14px; }
  .contact-v2 .ch-cta { flex-direction: column; align-items: flex-start; }
}


/* reveal animation for About/Contact */
.about-v2 .reveal, .contact-v2 .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.about-v2 .reveal.in, .contact-v2 .reveal.in {
  opacity: 1; transform: none;
}

/* === Lightbox 浮层 === */
.lb-mask {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 14, 14, 0);
  backdrop-filter: blur(0px);
  opacity: 0; pointer-events: none;
  transition: background-color 280ms ease, backdrop-filter 280ms ease, opacity 280ms ease;
}
.lb-mask.lb-open {
  background: rgba(15, 14, 14, .82);
  backdrop-filter: blur(14px);
  opacity: 1; pointer-events: auto;
}
.lb-stage {
  max-width: 92vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  transform: scale(.92) translateY(8px);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
}
.lb-mask.lb-open .lb-stage { transform: scale(1) translateY(0); }
.lb-img {
  display: block; max-width: 92vw; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  border: 3px solid var(--color-ink);
  box-shadow: 12px 12px 0 var(--color-red), 0 30px 60px rgba(0,0,0,.5);
  background: var(--color-paper);
  transform: scale(1) rotate(0);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease;
  user-select: none;
  -webkit-user-drag: none;
}
.lb-mask.lb-zoomed .lb-stage { cursor: zoom-out; }
.lb-mask.lb-zoomed .lb-img { transform: scale(1.6); box-shadow: 8px 8px 0 var(--color-red), 0 40px 80px rgba(0,0,0,.6); }
.lb-close {
  position: absolute; top: 1.2rem; right: 1.4rem;
  width: 48px; height: 48px;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  box-shadow: 4px 4px 0 var(--color-red);
  font-size: 1.5rem; font-weight: 900; line-height: 1;
  cursor: pointer;
  font-family: var(--font-display);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.lb-close:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--color-red); }
.lb-close:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--color-red); transition-duration: 60ms; }
.lb-hint {
  position: absolute; bottom: 1.2rem; left: 50%;
  transform: translate(-50%, 12px);
  font-family: var(--font-mono); font-weight: 700; font-size: .75rem;
  letter-spacing: .08em; color: var(--color-paper);
  padding: .45rem .9rem; background: rgba(0,0,0,.55);
  border: 1.5px solid var(--color-ink);
  opacity: 0; transition: opacity 200ms ease 200ms, transform 360ms cubic-bezier(.2,.7,.2,1) 200ms;
}
.lb-mask.lb-open .lb-hint { opacity: 1; transform: translate(-50%, 0); }
body.lb-locked { overflow: hidden; }

/* 卡片点击态：摆正再弹回（hover 态时也能触发） */
.work-card { cursor: pointer; }
.work-card.is-clicked .card-inner {
  transform: rotate(0deg) translate(0, 0) scale(1.06) !important;
  transition: transform 60ms cubic-bezier(.2,.8,.3,1);
  z-index: 50;
}
.work-card.is-clicked { z-index: 50; }
.work-card:not(.is-clicked) .card-inner { transition: transform 260ms cubic-bezier(.2,.8,.3,1); }

/* 卡片空 href：让 data-lightbox 与 data-page 接管点击 */
.work-card[data-lightbox], .work-card[data-page] { cursor: pointer; }
.work-card[data-page]::after {
  content: "↗"; position: absolute; right: .6rem; top: .6rem;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-paper); color: var(--color-ink);
  border: 2px solid var(--color-ink);
  box-shadow: 2px 2px 0 var(--color-red);
  font-family: var(--font-display); font-weight: 900; font-size: .85rem;
  z-index: 5; opacity: 0; transform: translate(-6px, 6px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.work-card[data-page]:hover::after { opacity: 1; transform: translate(0,0); }
.work-card[data-lightbox]::after {
  content: "⊕"; position: absolute; right: .6rem; top: .6rem;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: var(--color-paper);
  border: 2px solid var(--color-ink);
  box-shadow: 2px 2px 0 var(--color-yellow);
  font-family: var(--font-display); font-weight: 900; font-size: .9rem;
  z-index: 5; opacity: 0; transform: translate(-6px, 6px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.work-card[data-lightbox]:hover::after { opacity: 1; transform: translate(0,0); }