/* ============================================================
   高鸽子作品集 · Wes Anderson 温暖对称风（F 方案 · 全站）
   芥末黄 + 豆沙红 + 抹茶绿 + 奶油底 + 圆胶囊 + 硬阴影
============================================================ */
:root{
  --bg:#fce8b8;              /* 芥末黄主底 */
  --bg2:#f4d99a;             /* 深芥末黄区块底 */
  --bg3:#faf3e0;             /* 奶油底 */
  --ink:#3d2817;             /* 深咖墨 */
  --ink-soft:#6b503a;
  --ink-mute:#a08768;
  --line:#d9b878;
  --accent:#c8553d;          /* 豆沙红（主强调） */
  --accent2:#588157;         /* 抹茶绿 */
  --accent3:#f2b25c;         /* 芥末橙 */
  --paper:#faf3e0;
  --hair:rgba(61,40,23,.14);
  --shadow-hard:5px 5px 0 var(--ink);
  --shadow-hard-lg:6px 6px 0 var(--ink);
  --radius:22px;
  --radius-sm:14px;
  --font:"PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --serif:"Noto Serif SC","Songti SC",serif;
  --serif-en:"Playfair Display",Georgia,serif;
  --grotesk:"Space Grotesk",var(--font);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* 全站向右让位侧边导航 */
:root{--nav-w:76px}
.hero,.perspective,.section-edu,.section-works,.section-skills,.section-contact,.topbar{padding-left:calc(var(--nav-w) + 4vw)}
.section-head{padding-left:0}

/* ---------- 侧边导航（小人 + 胶囊） ---------- */
.side-nav{position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:40}
.side-nav-inner{background:var(--paper);border:2px solid var(--ink);border-left:none;
  border-radius:0 24px 24px 0;padding:0 14px 14px 12px;box-shadow:5px 5px 0 var(--ink);
  transition:transform .35s cubic-bezier(.34,1.4,.6,1);position:relative}
.side-nav:hover .side-nav-inner{transform:scale(1.04);box-shadow:8px 8px 0 var(--ink)}
.side-nav ul{list-style:none;display:flex;flex-direction:column;gap:3px}

/* 小人 — 以右侧为轴、贴紧右边缘、折叠展开都完整显示 */
.nav-mascot{position:relative;width:calc(100% + 26px);height:176px;
  margin:0 -14px 6px -12px;display:flex;justify-content:flex-end;align-items:flex-end;overflow:visible}
.nav-mascot img{height:100%;width:auto;display:block;margin:0;opacity:.9;
  filter:brightness(1.1) drop-shadow(0 6px 10px rgba(120,140,150,.16));
  transform-origin:bottom right}
.mascot-arrow{position:absolute;right:6px;bottom:2px;color:var(--accent);
  font-size:18px;font-weight:900;animation:arrowbounce 1.5s ease-in-out infinite;opacity:.75}
@keyframes arrowbounce{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}

.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:100px;
  text-decoration:none;color:var(--ink-soft);font-size:14px;font-weight:700;letter-spacing:.3px;
  transition:.25s;white-space:nowrap}
.nav-item .d{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none;transition:.25s}
.nav-item .t{max-width:0;opacity:0;overflow:hidden;transition:max-width .32s cubic-bezier(.34,1.4,.64,1),opacity .25s}
.side-nav:hover .nav-item .t{max-width:100px;opacity:1}
.nav-item:hover{color:var(--ink);background:var(--bg2);transform:translateX(2px)}
.nav-item.active{color:var(--accent)}
.nav-item.active .d{background:var(--accent);box-shadow:0 0 0 4px rgba(200,85,61,.2);animation:navpulse 1.6s ease-in-out infinite}
@keyframes navpulse{0%,100%{box-shadow:0 0 0 4px rgba(200,85,61,.2)}50%{box-shadow:0 0 0 7px rgba(200,85,61,.05)}}
.nav-cta .d{background:var(--accent2)}
.nav-cta:hover{background:rgba(88,129,87,.15);color:var(--accent2)}

/* 展开时右侧背景变模糊——目录占位后保持空白 */
.nav-scrim{position:fixed;inset:0;z-index:35;pointer-events:none;opacity:0;
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:opacity .38s ease,backdrop-filter .38s ease,-webkit-backdrop-filter .38s ease}
.side-nav:hover ~ .nav-scrim{opacity:1;-webkit-backdrop-filter:blur(6px) saturate(1.05);backdrop-filter:blur(6px) saturate(1.05);
  background:linear-gradient(90deg,rgba(252,232,184,.9) 0%,rgba(252,232,184,.55) 15%,rgba(252,232,184,.15) 40%,transparent 100%)}

/* ---------- 顶栏 （已删除 signature，避免与内容重叠）---------- */
.topbar{display:none}

/* ---------- 进度条 ---------- */
.progress-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:50;background:rgba(61,40,23,.08)}
#progressFill{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}

/* ---------- 通用 section 头 ---------- */
.section-head{margin-bottom:44px;padding:0 5vw}
.section-idx{font-family:var(--serif-en);font-size:13px;color:var(--accent);letter-spacing:3px;font-weight:900;font-style:italic;text-transform:uppercase}
.section-head h2{font-family:var(--serif);font-size:clamp(32px,4.4vw,56px);font-weight:900;color:var(--ink);
  margin:6px 0 12px;letter-spacing:-.5px;line-height:1.15}
.section-head h2 .k{position:relative;display:inline-block;color:var(--paper);background:var(--accent2);
  padding:0 14px;border-radius:100px;margin:0 4px}
.section-head p.section-sub{color:var(--ink-soft);font-size:15px;letter-spacing:.3px}

/* ========================================================
   1 · Hero
======================================================== */
.hero{min-height:100vh;padding-top:80px;padding-bottom:60px;padding-right:5vw;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 58%,var(--paper) 58%,var(--paper) 100%);
  position:relative;overflow:hidden}

/* 底层装饰 — 漂浮圆点（只在 hero 可见） */
.hero::after{content:"";position:absolute;top:12%;right:-6vw;width:280px;height:280px;
  background:radial-gradient(circle,var(--accent2) 0%,var(--accent2) 30%,transparent 65%);
  opacity:.08;filter:blur(2px);pointer-events:none;animation:floaty 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(-15px,20px)}}
.hero::before{content:"";position:absolute;left:0;right:0;top:58%;height:1px;background:var(--ink);opacity:.15}

/* Hero 双栏 */
.hero-grid{display:grid;grid-template-columns:2.25fr 1fr;gap:36px;align-items:end;margin-bottom:30px}
.hero-left{min-width:0}

.hero-meta{display:flex;gap:14px;align-items:center;color:var(--ink);font-size:13px;
  letter-spacing:3px;font-weight:700;text-transform:uppercase;font-family:var(--serif-en)}
.hero-meta::before{content:"✻";color:var(--accent);font-size:16px}

.thesis{margin-top:26px}
.thesis h1{font-family:var(--serif);font-weight:900;font-size:clamp(42px,6.3vw,94px);line-height:1.1;
  letter-spacing:4px;color:var(--ink)}
.thesis h1 .k{position:relative;display:inline-block;color:var(--paper);background:var(--accent);
  padding:0 16px;border-radius:100px;margin:0 4px;
  box-shadow:4px 4px 0 var(--ink);border:2.5px solid var(--ink);transform:rotate(-1deg)}
.thesis h1 .k2{background:var(--accent2);transform:rotate(1deg)}
.thesis h1 .tc{display:inline-block}
/* 两行标题定 inline-block：ln2 的 margin-left 对齐修正走过渡滑动，不跳变 */
.thesis h1 .ln1,.thesis h1 .ln2{display:inline-block;white-space:nowrap}
.thesis h1 .ln2{transition:margin-left .4s ease}

.tagline{margin-top:30px;font-size:15.5px;color:var(--ink-soft);max-width:820px;line-height:1.85}
.tagline b{color:var(--accent);font-weight:800}
.tagline .sep{color:var(--accent2);margin:0 8px;font-weight:900}

/* “习惯用…”语句 — 胶囊依靠，不再漂浮 */
.tagline-strap{margin-top:18px;display:inline-flex;align-items:flex-start;gap:12px;
  background:var(--paper);border:2px solid var(--ink);border-radius:22px;padding:12px 20px;
  box-shadow:4px 4px 0 var(--ink);max-width:820px;font-size:14.5px;line-height:1.75;color:var(--ink)}
.tagline-strap .strap-mark{color:var(--accent);font-size:18px;flex:none;line-height:1.5}
.tagline-strap b{color:var(--accent);font-weight:800}

/* 个人名片（右侧） */
.hero-card{background:var(--paper);border:2.5px solid var(--ink);border-radius:24px;padding:22px 22px 20px;
  box-shadow:6px 6px 0 var(--ink);position:relative;transform:rotate(1.5deg);transition:.4s;max-width:360px;margin-left:auto}
.hero-card:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.hero-card::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:24px;background:var(--accent);border:1.5px solid var(--ink);border-radius:3px;opacity:.85}
.hc-tag{font-family:var(--serif-en);font-style:italic;font-size:13px;color:var(--accent);letter-spacing:2px;font-weight:800;margin-bottom:4px;text-transform:uppercase}
.hc-name-cn{font-family:var(--serif);font-size:38px;font-weight:900;color:var(--ink);letter-spacing:2px;line-height:1.1}
.hc-name-en{font-family:var(--serif-en);font-style:italic;font-weight:700;color:var(--ink-soft);font-size:20px;letter-spacing:.5px;margin-top:2px}
.hc-line{width:40px;height:3px;background:var(--accent);margin:14px 0 14px;border-radius:2px}
.hc-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.hc-list li{font-family:var(--serif);font-size:14px;line-height:1.6;color:var(--ink-soft);
  display:flex;align-items:flex-start;gap:9px;letter-spacing:.2px;font-weight:600}
.hc-list li span{flex:none;font-size:16px;margin-top:1px}
.flag-ico{width:16px;height:12px;display:inline-block;vertical-align:-1px;border-radius:2px}
.hc-list li b{color:var(--ink);font-weight:800}

/* 数字条 */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.num-cell-link{display:block;text-decoration:none;cursor:pointer}
.num-cell{background:var(--paper);border-radius:var(--radius);padding:26px 22px;text-align:center;
  border:2px solid var(--ink);box-shadow:var(--shadow-hard);transition:transform .35s cubic-bezier(.34,1.6,.64,1),box-shadow .35s;position:relative}
.num-cell:hover{transform:translate(-3px,-6px) rotate(-1.5deg);box-shadow:9px 11px 0 var(--ink)}
.num-cell:nth-child(2):hover,.num-cell:nth-child(4):hover{transform:translate(-3px,-6px) rotate(1.5deg)}
.num-cell .n{position:relative;display:inline-block}
.num-cell:nth-child(1){background:var(--accent3)}
.num-cell:nth-child(2){background:var(--accent);color:var(--paper)}
.num-cell:nth-child(3){background:var(--accent2);color:var(--paper)}
.num-cell:nth-child(4){background:var(--paper)}
.num-cell .n{font-family:var(--serif);font-weight:900;font-size:clamp(36px,4.8vw,58px);line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
/* 数字部分独立 .v：右对齐 + JS 锁定终值宽度，计数过程不抖动、结尾不跳变 */
.num-cell .n .v{display:inline-block;text-align:right}
.num-cell:nth-child(1) .n,.num-cell:nth-child(4) .n{color:var(--ink)}
.num-cell:nth-child(2) .n,.num-cell:nth-child(3) .n{color:var(--paper)}
.num-cell .n .unit,.num-cell .n .plus{font-size:.5em;margin-left:2px}
.num-cell .lbl{margin-top:14px;font-size:13px;line-height:1.55;font-weight:600}
.num-cell:nth-child(1) .lbl,.num-cell:nth-child(4) .lbl{color:var(--ink-soft)}
.num-cell:nth-child(2) .lbl,.num-cell:nth-child(3) .lbl{color:var(--paper);opacity:.92}
.num-cell .lbl b{font-weight:900}

/* 公司/客户行 */
.brands{margin-top:32px;background:var(--paper);border-radius:var(--radius);padding:22px 26px;
  border:2px solid var(--ink);box-shadow:var(--shadow-hard)}
.brand-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:10px 0}
.brand-row+.brand-row{border-top:1px dashed var(--line)}
.brand-row .label{font-family:var(--serif-en);font-size:12px;color:var(--accent);font-weight:900;
  min-width:150px;letter-spacing:2px;text-transform:uppercase;font-style:italic}
.brand-row .item{font-family:var(--serif);font-weight:800;color:var(--ink);font-size:15.5px;transition:.25s;display:inline-block}
.item-link{cursor:pointer}
.item-link::after{content:"";display:block;height:2px;width:0;background:var(--accent);transition:width .25s;border-radius:2px}
.item-link:hover::after{width:100%}
@keyframes gotoFlash{0%{box-shadow:0 0 0 0 rgba(200,60,40,0)}15%{box-shadow:0 0 0 6px rgba(200,60,40,.35)}100%{box-shadow:0 0 0 0 rgba(200,60,40,0)}}
.tl-flip.goto-flash .flip-face.front,.tl-flip.goto-flash .flip-face.back{animation:gotoFlash 1.5s ease}
.brand-row.primary .item{font-size:17px;color:var(--accent2)}
.brand-row .item:hover{color:var(--accent);transform:translateY(-2px) scale(1.05)}

/* ========================================================
   2 · 五段路径 三重视角
======================================================== */
.perspective{padding:100px 5vw 130px calc(var(--nav-w) + 4vw);background:var(--bg2);border-top:2px solid var(--ink);position:relative}

.persp-head-wide{display:flex;align-items:flex-start;gap:80px;flex-wrap:nowrap;margin-bottom:64px;padding:0;padding-right:6vw}
.persp-head-wide > div:first-child{flex:0 0 auto}
.persp-head-wide .section-idx{margin-bottom:6px}
.persp-head-wide h2{font-family:var(--serif);font-size:clamp(30px,4.4vw,52px);font-weight:900;color:var(--ink);
  letter-spacing:-.5px;white-space:nowrap;line-height:1.15}
.persp-head-wide h2 .k{color:var(--paper);background:var(--accent2);padding:0 14px;border-radius:100px;display:inline-block}
.persp-copy{flex:1 1 auto;max-width:none;padding-top:22px}
.persp-copy p{font-size:15.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:14px;max-width:none}
.flip-hint{display:inline-flex;align-items:center;gap:10px;margin-top:8px;font-size:13.5px;color:var(--ink-soft);
  letter-spacing:.3px;font-weight:600;background:var(--paper);padding:6px 14px;border-radius:100px;border:1.5px solid var(--line)}
.flip-hint b{color:var(--accent);font-weight:800}
.flip-hint-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(200,85,61,.18);animation:flipdot 1.8s ease-in-out infinite}
@keyframes flipdot{0%,100%{box-shadow:0 0 0 3px rgba(200,85,61,.15)}50%{box-shadow:0 0 0 7px rgba(200,85,61,.05)}}

/* 锅盖 γ：三卡等宽 + 高度/颜色/标题字号作阶梯 */
.tl-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch}
.tl-flip{position:relative;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,.05,.2,1);will-change:transform}
.tl-flip.flippable{cursor:pointer}
.tl-flip .flip-face{width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
.tl-flip .flip-face.back{position:absolute;inset:0;transform:rotateY(180deg)}
.tl-flip.flipped{transform:rotateY(180deg)}
.tl-flip:not(.flipped) .flip-face.back{pointer-events:none}
.tl-flip.flipped .flip-face.front{pointer-events:none}

.tl-node{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:30px 28px;
  box-shadow:var(--shadow-hard-lg);transition:transform .35s cubic-bezier(.34,1.5,.64,1),background .35s;position:relative;height:100%;will-change:transform}
.tl-flip[data-flip="platform"] .tl-node{padding:38px 32px}
.tl-flip[data-flip="brand"] .tl-node{padding:28px 26px;background:var(--bg3)}
.tl-flip[data-flip="agency"] .tl-node{padding:24px 24px;background:#f6ecc9;font-size:.94em}
.tl-flip:not(.flipped) .flip-face.front .tl-node:hover,
.tl-flip.flipped .flip-face.back .tl-node:hover{transform:translate(-4px,-6px) rotate(-.5deg);box-shadow:10px 12px 0 var(--ink)}

/* 额头彩带 — 已删 */
.corner-strap{display:none}
.tl-node.primary{background:var(--accent3)}

.tl-node .yr{font-family:var(--serif-en);font-size:13px;color:var(--ink);letter-spacing:1.5px;font-weight:800;
  margin-bottom:14px;font-style:italic;background:#fff;padding:3px 12px;border-radius:100px;
  display:inline-block;border:1.5px solid var(--ink)}
.tl-node .role{font-size:12px;color:var(--accent);letter-spacing:2px;font-weight:800;margin-bottom:6px}
.tl-node h3{font-family:var(--serif);font-size:26px;font-weight:900;color:var(--ink);margin-bottom:4px;letter-spacing:-.3px;line-height:1.15}
.tl-flip[data-flip="platform"] .tl-node h3{font-size:34px}
.tl-flip[data-flip="brand"] .tl-node h3{font-size:26px}
.tl-flip[data-flip="agency"] .tl-node h3{font-size:22px}
.tl-node .who{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px;font-weight:600}
.tl-node ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.tl-node li{font-size:14px;line-height:1.72;color:var(--ink-soft);padding-left:18px;position:relative}
.tl-node li::before{content:"✻";position:absolute;left:0;color:var(--accent);font-size:11px;top:5px}
.tl-node li b{color:var(--ink);font-weight:800}
.tl-node li .metric{color:var(--accent);font-weight:900}
.tl-badge{display:none}

/* 翻卡徽标 · 手账书签样式 */
.flip-tag{position:absolute;top:-11px;right:20px;font-size:11px;font-weight:800;color:#fff;background:var(--accent);
  padding:5px 14px;border-radius:2px;letter-spacing:.8px;z-index:3;transition:.28s;
  box-shadow:2px 2px 0 var(--ink);border:1.5px solid var(--ink);transform:rotate(-2deg);
  animation:tagpulse 2.4s ease-in-out infinite}
.flip-tag.flip-back{background:var(--accent2)}
.tl-flip:hover .flip-tag{transform:rotate(0) scale(1.08);box-shadow:4px 4px 0 var(--ink);animation:none}
@keyframes tagpulse{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(-2deg) scale(1.05)}}

/* ========================================================
   3 · 学业背景
======================================================== */
.section-edu{padding:100px 5vw 120px calc(var(--nav-w) + 4vw);background:var(--paper);border-top:2px solid var(--ink)}
.edu-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;padding:0;align-items:stretch}
.edu-timeline{position:relative;padding-left:36px}
.edu-timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:3px;
  background:repeating-linear-gradient(var(--accent) 0 8px,transparent 8px 16px)}
.edu-node{position:relative;margin-bottom:22px;cursor:pointer}
.edu-node .edu-dot{position:absolute;left:-30px;top:24px;width:18px;height:18px;border-radius:50%;
  background:var(--paper);border:4px solid var(--accent);transition:.25s}
.edu-node.active .edu-dot{background:var(--accent);box-shadow:0 0 0 5px rgba(200,85,61,.2)}
.edu-card{background:var(--bg3);border:2px solid var(--ink);border-radius:var(--radius);padding:20px 24px;
  box-shadow:4px 4px 0 var(--ink);transition:.25s}
.edu-node:hover .edu-card{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.edu-node.active .edu-card{background:var(--accent3);border-color:var(--ink)}
.edu-year{display:inline-block;font-family:var(--serif-en);font-size:12px;font-weight:900;color:#fff;
  background:var(--accent);padding:3px 12px;border-radius:100px;letter-spacing:1px;font-style:italic;margin-bottom:8px}
.edu-card h3{font-family:var(--serif);font-size:18px;font-weight:900;color:var(--ink);margin-bottom:2px}
.edu-card .major{color:var(--accent);font-weight:800;font-size:13.5px;margin-bottom:4px}
.edu-card .note{color:var(--ink-soft);font-size:13px}

.edu-aside{align-self:stretch;display:flex}
.edu-hi-card{background:var(--bg2);border:2px solid var(--ink);border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-hard-lg);width:100%;display:flex;flex-direction:column;justify-content:center}
.edu-hi-tag{display:inline-block;font-size:11px;font-weight:900;color:var(--paper);background:var(--accent2);
  padding:4px 12px;border-radius:100px;letter-spacing:2px;margin-bottom:14px}
.edu-hi-tag:empty{display:none;margin:0}
.edu-hi-head{font-family:var(--serif);font-size:20px;font-weight:900;color:var(--ink);margin-bottom:14px;line-height:1.4}
.edu-hi-head:empty{display:none;margin:0}
.edu-hi-ghead{font-family:var(--serif);font-size:16px;font-weight:900;color:var(--accent);margin:16px 0 10px}
.edu-hi-gtitle{font-family:var(--serif);font-size:22px;font-weight:900;color:var(--ink);
  margin:0 0 14px;line-height:1.4;letter-spacing:.5px}
.edu-hi-gtitle:not(:first-child),
.edu-hi-list + .edu-hi-gtitle{margin-top:22px}
.edu-hi-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.edu-hi-list li{font-size:13.5px;line-height:1.75;color:var(--ink-soft);padding-left:16px;position:relative}
.edu-hi-list li::before{content:"◆";position:absolute;left:0;color:var(--accent);font-size:9px;top:6px}
.edu-hi-list li b{color:var(--ink);font-weight:800}
.edu-hi-imgs{display:flex;gap:12px;margin-top:16px}
.edu-hi-imgs figure{flex:1;margin:0;border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink)}
.edu-hi-imgs figure:first-child img{object-position:center 15%}
.edu-hi-imgs img{width:100%;height:150px;object-fit:cover;object-position:center 50%;display:block}
.edu-hi-imgs figcaption{font-size:11px;color:var(--ink-soft);text-align:center;padding:5px 4px;line-height:1.3;background:var(--paper)}

/* ========================================================
   4 · 成果印记
======================================================== */
.section-works{padding:100px 5vw 120px calc(var(--nav-w) + 4vw);background:var(--bg);border-top:2px solid var(--ink)}
.tabs{display:inline-flex;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:100px;
  padding:6px;box-shadow:var(--shadow-hard);margin-bottom:36px}
.tab{border:none;background:transparent;padding:9px 20px;border-radius:100px;font-family:var(--font);
  font-size:14px;font-weight:800;cursor:pointer;color:var(--ink-soft);letter-spacing:.3px;transition:.25s;white-space:nowrap}
.tab.active{background:var(--ink);color:var(--paper)}
.tab:not(.active):hover{background:var(--bg2);color:var(--ink)}
.tab-panel{display:none;animation:panelin .35s ease}
.tab-panel.active{display:block}
@keyframes panelin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.output-card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-hard-lg);transition:transform .35s cubic-bezier(.34,1.6,.5,1),box-shadow .35s,background .3s;position:relative;overflow:hidden}
.output-card:hover{transform:translate(-4px,-8px) rotate(-.5deg);box-shadow:10px 14px 0 var(--ink)}
.output-card:nth-child(2):hover{transform:translate(-4px,-8px) rotate(.5deg)}
.output-card:nth-child(3):hover{transform:translate(-4px,-8px) rotate(-.5deg)}
.output-card:nth-child(1){background:var(--accent3)}
.output-card:nth-child(3){background:var(--bg3)}
.output-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none;border-radius:var(--radius)}
.output-card:hover::after{opacity:1}
.output-card .oc-icon{font-size:32px;margin-bottom:10px}
.output-card h3{font-family:var(--serif);font-size:20px;font-weight:900;color:var(--ink);margin-bottom:8px;line-height:1.4}
.output-card p{color:var(--ink-soft);font-size:14px;line-height:1.7}
.output-card .go{display:inline-block;margin-top:14px;font-size:13px;color:var(--accent);font-weight:800;letter-spacing:.3px}
a.output-card{text-decoration:none;color:inherit}
a.output-card,a.output-card *{text-decoration:none !important;border-bottom:none !important}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project-card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:28px 26px;
  box-shadow:var(--shadow-hard-lg);transition:transform .35s cubic-bezier(.34,1.5,.6,1),box-shadow .35s}
.project-card:hover{transform:translate(-4px,-6px) rotate(-.5deg);box-shadow:10px 12px 0 var(--ink)}
.project-card:nth-child(2):hover{transform:translate(-4px,-6px) rotate(.5deg)}
.project-card .pj-emoji{font-size:28px;margin-bottom:12px;display:inline-block;background:var(--accent3);
  padding:6px 10px;border-radius:14px;border:1.5px solid var(--ink)}
.project-card h3{font-family:var(--serif);font-size:18px;font-weight:900;color:var(--ink);margin-bottom:6px;line-height:1.4}
.project-card .pj-tag{display:inline-block;font-size:11px;color:var(--accent);background:rgba(200,85,61,.12);
  padding:3px 10px;border-radius:100px;font-weight:800;letter-spacing:.5px;margin-bottom:14px}
.project-card ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.project-card li{font-size:13.5px;line-height:1.7;color:var(--ink-soft);padding-left:18px;position:relative}
.project-card li::before{content:"—";position:absolute;left:0;color:var(--accent);font-weight:900}

/* ========================================================
   5 · 能力底牌
======================================================== */
.section-skills{padding:100px 5vw 120px calc(var(--nav-w) + 4vw);background:var(--paper);border-top:2px solid var(--ink)}

.skill-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;padding:20px 0}
.skill-chip{background:var(--paper);border:2px solid var(--ink);border-radius:100px;
  padding:10px 20px;font-weight:800;color:var(--ink);letter-spacing:.3px;transition:transform .28s cubic-bezier(.34,1.5,.64,1),box-shadow .28s,background .3s;cursor:default;
  box-shadow:3px 3px 0 var(--ink)}
.skill-chip.s3{background:var(--accent);color:var(--paper);font-size:20px;padding:14px 26px}
.skill-chip.s2{background:var(--accent3);font-size:16px;padding:12px 22px}
.skill-chip.s1{font-size:14px;background:var(--paper)}
.skill-chip:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:6px 6px 0 var(--ink)}
.skill-chip.s3:hover{background:var(--accent2);transform:translate(-3px,-3px) rotate(2deg)}

.ai-intro{background:var(--bg2);border:2px solid var(--ink);border-radius:var(--radius);
  padding:16px 22px;box-shadow:var(--shadow-hard);margin-bottom:20px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.ai-works{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ai-card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-hard-lg);transition:transform .35s cubic-bezier(.34,1.6,.5,1),box-shadow .35s,background .3s;text-decoration:none;color:inherit;display:block;position:relative}
.ai-card:hover{transform:translate(-4px,-6px) rotate(-.4deg);box-shadow:10px 12px 0 var(--ink);background:var(--bg3)}
.ai-card:nth-child(2):hover{transform:translate(-4px,-6px) rotate(.4deg)}

/* AI 卡——emoji + 标题 + tag 同行平排，“打开”收到右上角角标 */
.ai-card .ai-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ai-card .ai-emoji{font-size:26px;flex:none;background:var(--accent3);padding:6px 10px;border-radius:12px;line-height:1}
.ai-card h3{font-family:var(--serif);font-size:18px;font-weight:900;color:var(--ink);margin:0;line-height:1.35;flex:none}
.ai-card .ai-tag{display:inline-block;font-size:11px;color:var(--paper);background:var(--accent2);
  padding:3px 10px;border-radius:100px;font-weight:800;letter-spacing:.5px;flex:none}
.ai-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.65;margin:0}
.ai-card .ai-go{display:inline-flex;align-items:center;font-size:12px;color:var(--accent);font-weight:800;
  background:var(--paper);padding:4px 10px;border-radius:100px;border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);transition:.25s;letter-spacing:.3px;margin-left:auto;flex:none}
.ai-card:hover .ai-go{background:var(--accent);color:var(--paper);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

.honor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.honor-item{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-hard);display:flex;align-items:center;gap:14px;transition:.3s cubic-bezier(.34,1.5,.64,1)}
.honor-item:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:6px 6px 0 var(--ink)}
.honor-item:nth-child(even):hover{transform:translate(-3px,-3px) rotate(1deg)}
.honor-item:nth-child(3n+1){background:var(--accent3)}
.honor-item:nth-child(3n+2){background:var(--bg3)}
.honor-item .h-icon{font-size:28px;flex:none;background:var(--paper);padding:8px 12px;border-radius:14px;border:1.5px solid var(--ink)}
.honor-item:nth-child(3n+2) .h-icon{background:var(--bg2)}
.honor-item .h-txt{font-family:var(--serif);font-size:15px;font-weight:800;color:var(--ink);line-height:1.5}

/* ========================================================
   6 · 联系
======================================================== */
.section-contact{padding:100px 5vw 60px calc(var(--nav-w) + 4vw);background:var(--bg);border-top:2px solid var(--ink);position:relative}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:44px 40px;
  box-shadow:var(--shadow-hard-lg);position:relative;overflow:hidden}
.contact-card::before{content:"✻";position:absolute;top:-30px;right:-30px;font-size:200px;color:var(--accent3);opacity:.6;pointer-events:none}
.contact-title{font-family:var(--serif);font-size:clamp(40px,5vw,66px);font-weight:900;color:var(--ink);
  margin:8px 0 14px;line-height:1}
.contact-title .k{color:var(--paper);background:var(--accent);padding:0 20px;border-radius:100px;
  box-shadow:4px 4px 0 var(--ink);border:2.5px solid var(--ink);display:inline-block;transform:rotate(-2deg)}
.contact-hint{color:var(--ink-soft);font-size:15px;line-height:1.85}
.resume-btn{display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  background:var(--accent2);color:var(--paper);font-family:var(--serif);font-weight:800;font-size:16px;
  padding:12px 24px;border-radius:100px;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  transition:.25s;text-decoration:none}
.resume-btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.resume-btn .rb-arrow{display:inline-block;font-weight:900;animation:rbBounce 1.4s ease-in-out infinite}
@keyframes rbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.contact-right{display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.contact-item{display:flex;align-items:center;gap:14px;background:var(--bg3);border:2px solid var(--ink);
  border-radius:var(--radius);padding:16px 22px;font-family:var(--font);color:var(--ink);font-weight:700;
  text-decoration:none;transition:transform .35s cubic-bezier(.34,1.5,.5,1),box-shadow .35s,background .3s;box-shadow:3px 3px 0 var(--ink);position:relative;z-index:2}
.contact-item:hover{transform:translate(-3px,-4px) rotate(-.5deg);box-shadow:7px 8px 0 var(--ink);background:var(--accent3)}
.contact-item:hover .ci-icon{transform:rotate(-8deg) scale(1.1)}
.contact-item .ci-icon{transition:transform .3s cubic-bezier(.34,1.5,.5,1)}
.contact-item .ci-icon{font-size:22px;background:var(--paper);padding:6px 10px;border-radius:12px;border:1.5px solid var(--ink)}
.contact-item .ci-label{font-size:11px;color:var(--ink-mute);letter-spacing:2px;font-weight:800;text-transform:uppercase;margin-bottom:6px}
.contact-item .ci-val{font-family:"Space Grotesk",var(--font);font-weight:900;font-size:18px;color:var(--ink);letter-spacing:.4px;font-variant-numeric:tabular-nums;line-height:1.1;display:inline-block;position:relative}
.contact-item .ci-val::after{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:8px;background:var(--accent3);opacity:.55;z-index:-1;border-radius:2px}
.contact-item:hover .ci-val::after{background:var(--accent);opacity:.35}

/* 联系方式区 — 小人在卡内部左下角，裙下完全裁切 */
.contact-card{overflow:hidden}
.contact-mascot{position:absolute;left:calc(40% - 50px);bottom:0;width:140px;height:150px;overflow:hidden;pointer-events:none;z-index:1;opacity:.95;
  animation:cmpoint 3.2s ease-in-out infinite;transform-origin:bottom center}
.contact-mascot img{width:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}
@keyframes cmpoint{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2deg)}}

.site-footer{text-align:right;padding:40px 5vw 20px 20px;color:var(--ink-soft);font-size:13.5px;position:relative;z-index:6}
.site-footer .footer-main{font-family:var(--serif);font-weight:800;color:var(--ink);letter-spacing:.3px}
.site-footer .footer-sub{font-family:var(--serif-en);font-style:italic;font-size:12.5px;color:var(--ink-mute);margin-top:4px;letter-spacing:.5px}



/* ---------- 响应式 ---------- */
@media (max-width:960px){
  :root{--nav-w:0px}
  .side-nav{display:none}
  .hero,.perspective,.section-edu,.section-works,.section-skills,.section-contact{padding-left:5vw}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-card{transform:none;max-width:420px}
  .hero-meta{flex-wrap:wrap}
  .persp-head-wide{flex-wrap:wrap;gap:24px}
  .persp-head-wide h2{white-space:normal}
  .numbers,.output-grid,.project-grid,.ai-works,.honor-grid{grid-template-columns:repeat(2,1fr)}
  .tl-grid{grid-template-columns:1fr;gap:18px}
  .edu-grid{grid-template-columns:1fr;gap:24px}
  .edu-aside{position:static}
  .contact-card{grid-template-columns:1fr;padding:32px 24px}
  .thesis h1{font-size:44px}
  .mascot-easter{width:80px;bottom:20px;right:12px}
  .brand-row .label{min-width:auto;flex-basis:100%}
}
@media (max-width:560px){
  .numbers,.output-grid,.project-grid,.ai-works,.honor-grid{grid-template-columns:1fr}
}