/* ==========================================================================
   许路晗 · 作品集 2026
   结构与配色都在文件开头的变量里，改这里即可换肤。
   ========================================================================== */

:root{
  --ink:#0A0A0B;          /* 深色底 */
  --ink-2:#111113;
  --paper:#F1F1EF;        /* 菜单/文档浅底 */
  --fg:#F4F4F2;           /* 深底上的主文字 */
  --fg-dim:#7E7E7C;       /* 深底上的次级文字 */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);
  --green:#8DE84F;        /* 与标志同色系的强调色 */
  --green-deep:#2F8F3A;
  --ink-line:rgba(10,10,11,.14);

  --ease:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);

  --card-radius:10px;     /* spiral 卡片圆角 */

  /* 浮层里「正文栏」的宽度：作品集的页面、关于我的简历、联系我这两栏都用它。
     屏幕再宽，内容也不会跟着摊开——想更窄/更宽改这一个数就够。 */
  --doc-w:1100px;
  /* 三个浮层左右留白的同一把尺子：这样 1100 那一栏在三层里落在完全相同的位置 */
  --doc-pad:clamp(20px,4vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--ink);color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"kern" 1;
  overflow:hidden;
  overscroll-behavior:none;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img{display:block;max-width:100%;}
::selection{background:var(--green);color:#0A0A0B;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;}

.label{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-dim);
}

/* ---------- 开场前的加载层（结构见 index.html 里的 .boot 注释） ---------- */
.boot{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;background:var(--ink);
  transition:opacity .5s var(--ease-soft);
}
.boot.is-out{opacity:0;pointer-events:none;}
.boot-ball{width:clamp(44px,4.4vw,60px);animation:boot-breathe 1.7s var(--ease-soft) infinite;}
@keyframes boot-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.boot-bar{
  width:clamp(110px,12vw,150px);height:2px;border-radius:2px;
  background:rgba(255,255,255,.13);overflow:hidden;
}
/* 起始就先给一小段：脚本还没接手的那一两秒里，进度条不动会像卡住 */
.boot-bar i{display:block;width:12%;height:100%;background:var(--green);transition:width .35s var(--ease-soft);}
.boot-name{font-size:11px;letter-spacing:.3em;color:var(--fg-dim);text-transform:uppercase;}

/* ---------- 背景网格 ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%, #000 35%, transparent 100%);
  mask-image:radial-gradient(120% 90% at 50% 50%, #000 35%, transparent 100%);
}

/* 有浮层打开时，常驻界面让位 */
body.has-overlay .brand,
body.has-overlay .switch,
body.has-overlay .menubtn,
body.has-overlay .corner,
body.has-overlay .dock{
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-soft);
}

/* ==========================================================================
   常驻界面
   ========================================================================== */

/* 标志 */
.brand{position:fixed;left:clamp(16px,2.2vw,34px);top:clamp(16px,2.4vh,30px);z-index:60;display:block;}
.brand-ball{
  position:relative;display:block;width:clamp(38px,3.1vw,50px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, #F2FFC9 0%, #BDF168 18%, #6ECB45 46%, #2C8034 74%, #10391B 100%);
  box-shadow:
    inset -7px -9px 18px rgba(0,20,0,.55),
    inset 6px 6px 14px rgba(255,255,255,.22),
    0 10px 24px rgba(0,0,0,.55);
  transition:transform .6s var(--ease);
}
.brand:hover .brand-ball{transform:scale(1.08) rotate(-6deg);}
.brand-ball .eye{position:absolute;top:34%;width:17%;height:23%;border-radius:50%;background:#0B1A0A;}
.brand-ball .eye.l{left:26%;}
.brand-ball .eye.r{right:26%;}
.brand-ball .smile{
  position:absolute;left:50%;bottom:22%;width:30%;height:14%;
  border-bottom:2px solid #0B1A0A;border-radius:0 0 60% 60%;
  transform:translateX(-50%);
}

/* spiral / list */
.switch{
  position:fixed;left:50%;top:clamp(14px,2.2vh,26px);transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);
  padding:clamp(12px,1.5vh,17px) clamp(22px,2.2vw,34px);
  border-radius:999px;
  background:rgba(16,16,18,.62);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  /* 胶囊边缘那条跟着鼠标走的镜面光（实现见 specular.js）。
     改这里就能调它的样子，不用碰 JS。 */
  --spec-intensity:1;      /* 灯的亮度 */
  --spec-idle:.35;         /* 鼠标不在附近时留多少光 */
  --spec-shine-size:12;    /* 光斑占整圈的大小（度） */
  --spec-shine-fade:40;    /* 光斑往外淡出的范围（度） */
  --spec-thickness:1.4;    /* 光边的粗细（px） */
  --spec-glow:1;           /* 边缘外的柔光，0 = 只要那条细线 */
  --spec-proximity:220;    /* 离元素多远开始跟着鼠标走（px） */
  --spec-line-color:#ffffff;  /* 灯的颜色，想用品牌绿就写 var(--green) */
  --spec-base-color:#525252;  /* 灯底下那条一直看得见的细边 */
}
.switch-btn{
  font-size:clamp(15px,1.15vw,19px);color:var(--fg-dim);
  letter-spacing:.005em;transition:color .35s var(--ease-soft);
}
.switch-btn:hover{color:rgba(244,244,242,.75);}
.switch-btn.is-active{color:#fff;}
.switch-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.4);}

/* menu */
.menubtn{
  position:fixed;right:clamp(16px,2.2vw,34px);top:clamp(16px,2.4vh,30px);z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  padding:clamp(11px,1.4vh,16px) clamp(20px,1.6vw,26px);
  border-radius:999px;background:#fff;color:#0A0A0B;
  font-size:clamp(15px,1.1vw,18px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .5s var(--ease),background .35s;
}
/* 悬停变品牌绿（和站里按钮的绿色一致），字保持深色，对比度够 */
.menubtn:hover{transform:scale(1.04);background:var(--green);}
.menubtn .dot{width:5px;height:5px;border-radius:50%;background:#0A0A0B;}
/* 悬停时 menu 四个字母依次跳一下 */
.menubtn-word{display:inline-flex;}
.menubtn-word i{font-style:normal;display:inline-block;-webkit-text-stroke:0 currentColor;}
.menubtn:hover .menubtn-word i{animation:menu-hop .52s cubic-bezier(.3,1.5,.5,1) both;}
.menubtn:hover .menubtn-word i:nth-child(2){animation-delay:.055s;}
.menubtn:hover .menubtn-word i:nth-child(3){animation-delay:.11s;}
.menubtn:hover .menubtn-word i:nth-child(4){animation-delay:.165s;}
@keyframes menu-hop{
  0%{transform:translateY(0);-webkit-text-stroke-width:0;}
  38%{transform:translateY(-4px);-webkit-text-stroke-width:.6px;}
  70%{transform:translateY(1px);-webkit-text-stroke-width:.25px;}
  100%{transform:translateY(0);-webkit-text-stroke-width:0;}
}

/* 左下竖排 */
.corner{
  position:fixed;left:clamp(12px,1.6vw,22px);bottom:clamp(80px,10vh,140px);z-index:55;
  display:flex;gap:6px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(11px,1vw,15px);letter-spacing:.06em;color:rgba(244,244,242,.72);
  pointer-events:none;
}
.corner i{font-style:normal;color:var(--fg-dim);}
.corner .corner-2{color:var(--fg-dim);letter-spacing:.2em;}

/* 右下 dock */
.dock{
  position:fixed;right:clamp(16px,2.2vw,34px);bottom:clamp(16px,2.4vh,30px);z-index:60;
  display:flex;align-items:center;gap:10px;
}
.round{
  width:clamp(40px,3.2vw,52px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;transition:transform .45s var(--ease),background .3s;
}
.round:hover{transform:translateY(-2px);background:rgba(255,255,255,.18);}
.round svg{width:52%;height:52%;}
.round .mute{display:none;}
.round.off .wave{display:none;}
.round.off .mute{display:block;}
.round.avatar{padding:0;overflow:hidden;border-color:rgba(255,255,255,.55);}
.round.avatar img{width:100%;height:100%;object-fit:cover;}

/* ==========================================================================
   视图容器
   ========================================================================== */
.view{
  position:fixed;inset:0;z-index:10;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease-soft);
}
.view.is-active{opacity:1;visibility:visible;pointer-events:auto;}

/* ==========================================================================
   作品轮播（FlexCarousel）—— 样式取自 React Bits 组件，配色接到站点主题
   ========================================================================== */
/* ---------- 开场：卡片螺旋隧道（逻辑见 app.js 的 initHelixIntro） ---------- */
.helix{
  position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;
  perspective:760px;perspective-origin:50% 50%;
  background:radial-gradient(circle at 50% 50%,
    #0A0A0B 0%, #0A0A0B 58%, rgba(10,10,11,.9) 82%, rgba(10,10,11,.7) 100%);
  opacity:1;transition:opacity .8s var(--ease-soft);
}
.helix.is-out{opacity:0;}
.helix-card{
  position:absolute;left:50%;top:50%;
  background-size:cover;background-position:center;
  border-radius:8px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 44px rgba(0,0,0,.62);
  backface-visibility:hidden;will-change:transform,opacity;
}

.flex-carousel{
  position:relative;width:100%;height:100%;overflow:hidden;
  cursor:grab;touch-action:pan-y;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:contain;outline:none;
}
.flex-carousel[data-hover='open']{cursor:zoom-in;}
.flex-carousel[data-hover='close']{cursor:zoom-out;}
.flex-carousel[data-dragging]{cursor:grabbing;}
.flex-carousel:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);}

.flex-carousel canvas{pointer-events:none;}

.flex-carousel__caption{
  position:absolute;left:0;right:0;
  top:calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift, 1) + 26px);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 16px;pointer-events:none;text-align:center;color:var(--fg,#f4f4f2);
  animation:flex-carousel-reveal 900ms ease both;
}
.flex-carousel__title{
  display:flex;flex-direction:column;align-items:center;max-width:100%;
  font-size:15px;font-weight:500;line-height:1.35;letter-spacing:0;
  animation:flex-carousel-title 520ms cubic-bezier(.22,1,.36,1);
}
.flex-carousel__subtitle{font-weight:400;opacity:.6;}
.flex-carousel__count{
  display:inline-flex;align-items:center;gap:3px;
  font-size:12px;line-height:1;font-variant-numeric:tabular-nums;opacity:.5;
  transition:opacity 400ms ease;
}
.flex-carousel[data-focus] .flex-carousel__count{opacity:0;}
.flex-carousel__digits{display:inline-flex;}
.flex-carousel__digit{display:inline-block;height:1em;overflow:hidden;}
.flex-carousel__reel{display:flex;flex-direction:column;transition:transform 600ms cubic-bezier(.22,1,.36,1);}
.flex-carousel__reel span{height:1em;}
.flex-carousel__slash{opacity:.6;}
.flex-carousel__live{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* 没有 WebGL2 时的兜底：普通一排图片 */
.flex-carousel__fallback{
  position:absolute;inset:0;display:flex;align-items:center;gap:12px;
  overflow-x:auto;padding:0 40px;
}
.flex-carousel__fallback img{height:50%;border-radius:8px;flex:none;}

@keyframes flex-carousel-title{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes flex-carousel-reveal{
  from{opacity:0;}
  to{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .flex-carousel__caption,.flex-carousel__title{animation:none;}
  .flex-carousel__reel{transition:none;}
}

/* ---------- list ---------- */
.list-scroll{
  position:absolute;inset:0;overflow:hidden;   /* 一屏放完，不出现滚动条 */
  z-index:2;                     /* 文字压在悬停预览图上面 */
}
.list-inner{
  height:100%;
  padding:6vh clamp(20px,5vw,90px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:translateY(9px);          /* 整体略微下移 */
}
.row{
  position:relative;display:flex;justify-content:center;align-items:baseline;
  /* 上下内边距 = 行距的一半：相邻两行之间空出 2 倍这个值。
     这里从 7px 提到 9px，行与行之间就多出 4px（用户 10/15 要求）。
     注意别只加一边 —— fitList() 按「上下各一份」算高度预算，
     加完字号会自动小一档，七行仍然满屏放得下、不滚动。 */
  width:100%;padding:clamp(9px,calc(.5vh + 9px),16px) 0;cursor:pointer;
}
/* 内层承担悬停时"其余行变暗"的过渡，外层的滚动渐隐不受影响 */
.row-inner{
  position:relative;display:flex;justify-content:center;align-items:baseline;
  width:100%;transition:opacity .35s var(--ease-soft),color .35s var(--ease-soft);
}
/* 悬停时：被悬停的这一行保持纯白（和正中那行一个色），其余行统一 30% 透明度 */
.list-inner.is-hovering .row:not(.is-hover) .row-inner{opacity:.3;}
.row .idx{
  position:absolute;left:0;top:50%;
  font-size:clamp(10px,.8vw,13px);letter-spacing:.18em;color:var(--fg-dim);
}
.row .name{
  font-size:clamp(34px,6.4vw,132px);
  font-weight:600;letter-spacing:-.025em;line-height:1.02;
  /* 定位到文字本身：下面那条 hover 下划线以「文字的字号」算 em，才会落到字下方 */
  position:relative;
  color:#fff;white-space:nowrap;text-align:center;
  text-shadow:0 2px 28px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
  transition:color .3s var(--ease-soft),letter-spacing .6s var(--ease);
}
.row .meta{
  position:absolute;right:0;top:50%;
  font-size:clamp(10px,.8vw,13px);letter-spacing:.16em;color:var(--fg-dim);
  white-space:nowrap;
}
.row.is-hover .name{letter-spacing:-.012em;}
.row.is-hover .name::after{
  /* 落到字形下方（原来 .06em 落在行盒里、会压在字上） */
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:2px;background:var(--green);
}
.list-preview{
  position:fixed;left:0;top:0;width:min(360px,24vw);aspect-ratio:16/9;z-index:1;
  border-radius:10px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .45s var(--ease-soft);
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14);
}
.list-preview.on{opacity:1;}
.list-preview img{width:100%;height:100%;object-fit:cover;}
/* 悬停到另一行、预览卡换图时：从卡片中心向外展开 */
.list-preview img.is-in{animation:list-card-in .6s cubic-bezier(.22,1,.36,1) both;}
@keyframes list-card-in{
  0%{clip-path:inset(46% 46% 46% 46% round 10px);transform:scale(1.06);filter:blur(8px);}
  100%{clip-path:inset(0% 0% 0% 0% round 0px);transform:scale(1);filter:blur(0);}
}

/* ==========================================================================
   浮层通用
   ========================================================================== */
.panel,.case{
  position:fixed;inset:10px;z-index:80;
  border-radius:14px;overflow:hidden;
  transform:translateY(102%);
  transition:transform .85s var(--ease);
  visibility:hidden;
}
.panel.is-open,.case.is-open{transform:none;visibility:visible;}
.panel{background:var(--paper);color:#0A0A0B;}
.case{background:#08080A;color:var(--fg);inset:0;border-radius:0;display:flex;flex-direction:column;}

.close{
  position:absolute;right:clamp(18px,3vw,44px);top:clamp(16px,3vh,34px);z-index:5;
  display:inline-flex;align-items:center;gap:clamp(8px,1vw,16px);
  font-size:clamp(15px,1.2vw,20px);color:#0A0A0B;
}
.close .x{
  width:clamp(38px,3.4vw,54px);aspect-ratio:1;border-radius:50%;background:#0A0A0B;
  position:relative;transition:transform .5s var(--ease);
}
.close .x::before,.close .x::after{
  content:"";position:absolute;left:50%;top:50%;width:34%;height:1.8px;background:#fff;
  transform:translate(-50%,-50%) rotate(45deg);
}
.close .x::after{transform:translate(-50%,-50%) rotate(-45deg);}
.close:hover .x{transform:rotate(90deg) scale(.94);}
.close-dark{color:#fff;}
.close-dark .x{background:#fff;}
.close-dark .x::before,.close-dark .x::after{background:#0A0A0B;}

/* ---------- 菜单 ---------- */
/* 深色底：和 works / 案例浮层同一套。菜单里那三行大字跟着换成浅色；
   挂着的工牌织带也从深灰翻成浅色 —— 黑底上一条深色带子是看不见的。
   入场不一样：这一层是整屏的，从上方像揭幕一样铺到下方（clip-path 自上而下），
   里面的内容原地不动 —— 不是整张面板从下往上滑进来。 */
.panel-menu{
  display:flex;flex-direction:column;justify-content:flex-start;
  background:#08080A;color:var(--fg);
  inset:0;border-radius:0;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
}
.panel-menu.is-open{transform:none;clip-path:inset(0 0 0 0);}
.panel-menu .menu-list a{color:var(--fg);}
.menu-list{
  display:flex;flex-direction:column;align-items:flex-start;
  /* 上下自动留白 = 三行在面板里垂直居中；屏幕不够高时自动收成 0，不会把字挤出画面 */
  margin:auto 0;
  /* 左侧内边距 +10px：整块字整体向右挪一点 */
  padding:0 calc(clamp(24px,8vw,150px) + 10px);
}
.menu-list a{
  /* 字号平时只看宽度（9.2vw）；只有窗口高度不够放三行时（约为 1600×540 这种
     极扁的窗口）才受 27vh 限制收一收，免得字被上下裁掉。
     末尾再减 12px：整体字号收两档 */
  font-size:clamp(46px,calc(min(9.2vw,27vh) - 12px),186px);
  /* 字重：原来 600 偏粗，改成常规体（400）；想更细可以试 300 */
  font-weight:400;letter-spacing:-.035em;line-height:.96;
  color:#0A0A0B;position:relative;
  transition:color .35s var(--ease-soft),transform .7s var(--ease),opacity .4s;
}
.menu-list a::after{
  content:"";position:absolute;left:0;bottom:.06em;height:.045em;width:0;background:currentColor;
  transition:width .7s var(--ease);
}
.menu-list a:hover::after{width:100%;}
.menu-list a.menu-sub{
  margin-top:clamp(22px,4vh,48px);
  font-size:clamp(17px,1.8vw,32px);letter-spacing:-.01em;
  font-weight:400;                 /* 正常字重，不跟着上面的大字加粗 */
}
.menu-list a.menu-sub .arrow{font-style:normal;margin-left:.35em;display:inline-block;transition:transform .5s var(--ease);}
.menu-list a.menu-sub:hover .arrow{transform:translateY(.16em);}

/* ---------- 菜单里挂着的工作牌 ---------- */
.lanyard{
  position:absolute;top:0;bottom:0;right:clamp(20px,7vw,140px);
  width:min(30vw,380px);
  pointer-events:none;              /* 只有卡片本身接鼠标 */
}
.lan-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
/* 挂绳与卡扣都是灰调的：黑底上原来那条近白的带子太跳（原来是护眼白 + 冷调金属） */
.lan-band{fill:none;stroke:#8A8A86;stroke-width:30;stroke-linecap:round;}
.lan-band-line{fill:none;stroke:rgba(10,10,11,.20);stroke-width:24;stroke-dasharray:2 6;}
.lan-clip{
  position:absolute;left:0;top:0;width:36px;height:20px;margin:-10px 0 0 -18px;
  border-radius:6px;background:linear-gradient(#E4E4E1,#ADADA8 60%,#83837E);
  box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.lan-clip i{
  position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;border:2.5px solid #8E8E89;background:transparent;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.25);
}
.lan-swing{
  position:absolute;left:0;top:0;width:var(--card-w,220px);
  transform-origin:50% 0;will-change:transform;
}
.lan-flip{
  position:relative;width:100%;aspect-ratio:1.6/2.25;
  transform-style:preserve-3d;will-change:transform;
  pointer-events:auto;cursor:grab;
}
.lan-face{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* 给卡片一圈「牌」的边：浅色描边 + 上沿一道高光（像塑料工牌的边缘反光），
     原来只有 8% 的内描边，黑底上几乎看不出卡片边界 */
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 26px 50px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(255,255,255,.12),
             inset 0 1px 0 rgba(255,255,255,.32);
  background:#111;
}
.lan-front img{display:block;width:100%;height:100%;object-fit:cover;}
.lan-swing.grab .lan-flip{cursor:grabbing;}

/* 菜单文字的 morph 结构（逐字替换，见 app.js 的 buildMorphMenu） */
.morph{display:inline-flex;}
/* 字距：和 .menu-list a 的 letter-spacing 一致，用负外边距补，
   这样槽位宽度可以正好等于字形宽度，不会裁掉最后一个字母 */
.morph-slot + .morph-slot{margin-left:-.035em;}
.morph-slot{
  position:relative;display:inline-block;overflow:hidden;
  width:var(--w);height:1.06em;
  transition:width .55s var(--ease);transition-delay:var(--d,0s);
  will-change:width;
}
.morph-slot i{
  position:absolute;left:50%;top:0;font-style:normal;white-space:pre;
  transform:translate(-50%,0) scale(var(--sk,1));
  transition:transform .55s var(--ease) var(--d,0s);
  will-change:transform;backface-visibility:hidden;
}
/* hover 判定区不随文字宽度变化，避免"缩窄→离开 hover→变宽→再 hover"的闪动 */
.menu-list a::before{
  content:"";position:absolute;left:0;top:50%;height:1.3em;transform:translateY(-50%);
  /* 悬停感应区 = 两种状态里更宽的那个 + 18px。
     加这 18px 是因为：汉字比英文窄，鼠标停在英文右端时，字一收窄就会滑出
     感应区 → hover 掉 → 又变宽 → 又 hover 上，来回闪。 */
  width:calc(var(--hover-w,100%) + 18px);
}
.morph-slot .morph-to{
  /* 汉字在同样字号下比拉丁字母高一大截，缩一点让两者视觉上一样大 */
  --sk:.74;
  transform:translate(-50%,118%) scale(var(--sk));
}
.menu-list a:hover .morph-slot{width:var(--wh);}
.menu-list a:hover .morph-from{
  transform:translate(-50%,-118%) scale(var(--sk,1));
}
.menu-list a:hover .morph-to{
  transform:translate(-50%,0) scale(var(--sk));
}

.menu-foot{
  display:flex;align-items:flex-end;justify-content:flex-end;gap:24px;flex-wrap:wrap;
  padding:0 clamp(24px,8vw,150px) clamp(26px,5vh,54px);
}

.socials{display:flex;gap:clamp(9px,1vw,14px);}
.socials a{
  width:clamp(40px,3.8vw,62px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:#0A0A0B;color:#fff;
  transition:transform .5s var(--ease),background .3s,color .3s;
}
.socials a:hover{transform:translateY(-3px);background:var(--green-deep);}
.socials svg{width:46%;height:46%;}
.socials-dark{margin-top:clamp(30px,6vh,70px);}

/* ---------- 文档型浮层（关于 / 联系） ---------- */
/* 浮层里一律不显示滚动条：文档浮层用 .doc-scroll，案例详情用 .case-body。
   内容照旧能滚（触控板、滚轮、方向键都行），只是不画右边那条杠。 */
.doc-scroll,.case-body{scrollbar-width:none;}
.doc-scroll::-webkit-scrollbar,.case-body::-webkit-scrollbar{width:0;height:0;}
.doc-scroll{height:100%;overflow-y:auto;padding:clamp(80px,12vh,150px) clamp(24px,6vw,110px) clamp(50px,9vh,110px);}
.doc-head{max-width:var(--doc-w);}
.doc-head h1{
  margin-top:clamp(16px,3vh,34px);
  font-size:clamp(44px,7.4vw,140px);font-weight:600;letter-spacing:-.035em;line-height:.98;
}
.doc-head h1 span{display:block;font-size:.2em;font-weight:400;letter-spacing:.28em;color:rgba(10,10,11,.45);margin-top:.5em;}
.doc-head .huge{font-size:clamp(38px,6.4vw,120px);}
.doc-role{margin-top:clamp(12px,2vh,22px);font-size:clamp(13px,1.05vw,17px);letter-spacing:.06em;color:rgba(10,10,11,.55);}

.doc-grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,90px);
  margin-top:clamp(40px,7vh,86px);
  border-top:1px solid var(--ink-line);padding-top:clamp(30px,5vh,60px);
}
.doc-main p{font-size:clamp(15px,1.15vw,19px);line-height:1.85;color:rgba(10,10,11,.78);max-width:66ch;}
.doc-main p + p{margin-top:1.2em;}
.doc-main .lead{font-size:clamp(18px,1.6vw,27px);line-height:1.6;color:#0A0A0B;letter-spacing:-.01em;}

.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:clamp(34px,5vh,58px);padding-top:clamp(24px,3.5vh,40px);
  border-top:1px solid var(--ink-line);
}
.facts dt{font-size:clamp(22px,2.4vw,44px);font-weight:600;letter-spacing:-.02em;}
.facts dd{margin-top:8px;font-size:12.5px;letter-spacing:.05em;color:rgba(10,10,11,.55);}

.doc-sec{margin-top:clamp(38px,6vh,72px);}
.doc-sec h2{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(10,10,11,.45);margin-bottom:clamp(16px,2.4vh,26px);
}
.job{border-top:1px solid var(--ink-line);padding:clamp(16px,2.4vh,26px) 0;}
.job:last-child{border-bottom:1px solid var(--ink-line);}
.job-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline;}
.job-head b{font-size:clamp(15px,1.25vw,21px);font-weight:500;}
.job-head span{font-size:12.5px;letter-spacing:.06em;color:rgba(10,10,11,.5);}
.job ul{margin:14px 0 0;padding-left:1.1em;display:grid;gap:8px;}
.job li{font-size:clamp(13.5px,1vw,16px);line-height:1.7;color:rgba(10,10,11,.72);}

.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chips span{
  font-size:13px;padding:9px 15px;border-radius:999px;border:1px solid rgba(10,10,11,.2);
  transition:background .3s,color .3s,border-color .3s;
}
.chips span:hover{background:#0A0A0B;color:var(--paper);border-color:#0A0A0B;}
.chips-quiet span{border-color:rgba(10,10,11,.14);color:rgba(10,10,11,.6);}

.doc-aside{position:sticky;top:0;align-self:start;}
.portrait{border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:#ddd;}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.kv{margin-top:clamp(20px,3vh,32px);display:grid;gap:16px;}
/* 标签（邮箱 / 电话 / 所在地 / 作品集）字号调大 4px：10.5 → 14.5 */
.kv dt{font-size:14.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(10,10,11,.42);}
.kv dd{margin-top:4px;font-size:14.5px;line-height:1.6;color:rgba(10,10,11,.82);}
.kv dd a:hover{text-decoration:underline;text-underline-offset:.18em;}
/* 这四个信息挪到按钮下面、占满一栏，所以横着排一排。
   最后一栏（作品集那句话）最长，多分一点宽度，免得它折成两行；
   窄窗口会在下面的媒体查询里退回单列。 */
.kv-wide{
  margin-top:0;gap:24px 40px;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);
}

.btn-dark{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,3vh,34px);
  padding:14px 22px;border-radius:999px;background:#0A0A0B;color:var(--paper);
  font-size:14px;transition:background .35s,transform .5s var(--ease);
}
.btn-dark:hover{background:var(--green-deep);transform:translateY(-2px);}
.btn-dark.big{font-size:clamp(15px,1.2vw,19px);padding:18px 28px;margin-top:clamp(26px,4vh,44px);}

/* ---------- works：整本作品集铺在页面里翻 ---------- */
/* 这一层用黑底：作品集每一页本身就是白纸，压在黑底上像摊在灯下的画册。
   和案例浮层（.case）是同一套深色处理，翻起来观感一致。 */
.panel-works{background:#08080A;color:var(--fg);}
.panel-works .doc-scroll{
  /* 顶部留白要够：那行小标题得落在右上角 close 的下方，不跟它打架 */
  padding-top:clamp(76px,11vh,120px);
  padding-bottom:clamp(28px,4.5vh,64px);
  padding-left:var(--doc-pad);
  padding-right:var(--doc-pad);
}
/* 文档浮层最上面那行小标题（作品集 / 关于我共用）：只一行，和页面同一列宽、同样居中 */
.doc-title{
  max-width:var(--doc-w);margin:0 auto;
  font-size:clamp(17px,1.5vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--fg);
}
.doc-title span{
  display:inline-block;margin-left:.7em;
  font-size:.74em;font-weight:400;letter-spacing:.18em;color:rgba(244,244,242,.45);
}
.works-pages{
  /* 左右自动 = 页面在窗口里居中；max-width 不动，所以 PDF 页的大小不变 */
  margin:clamp(18px,3vh,34px) auto 0;
  display:flex;flex-direction:column;gap:clamp(14px,2vh,26px);
  max-width:var(--doc-w);
}
.works-pages figure{
  position:relative;aspect-ratio:16/9;      /* 和 PDF 原页比例一致，加载前就占好位置 */
  background:#111;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
  /* 65 页同时躺在页面里，只让滚到跟前的那几页真正参与渲染 */
  content-visibility:auto;
  contain-intrinsic-size:auto 664px;
}
.works-pages img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 下载按钮跟「关于我」里那颗对齐：落在同一列里、贴内容左边缘（不是居中） */
.works-foot{
  max-width:var(--doc-w);margin:clamp(30px,5vh,60px) auto 0;
  display:flex;justify-content:flex-start;
}

/* 浅色按钮：给深底浮层里的下载用（.btn-dark 在近黑底上看不见） */
.btn-light{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;background:var(--paper);color:#0A0A0B;
  font-size:14px;transition:background .35s,transform .5s var(--ease);
}
.btn-light:hover{background:var(--green);transform:translateY(-2px);}

.contact-grid{
  /* 单栏：那句话 → 下载按钮 → 四栏联系方式，依次往下列（信息块就在按钮下面） */
  display:grid;grid-template-columns:1fr;
  /* 三行：[那句话 + 按钮] / [文件夹] / [四项信息]。
     中间行 1fr 吃掉余量，文件夹于是停在信息块正上方；窗口太矮时它收成 0。
     flex:1 让这张网格撑满标题以下的高度，中间行才有余量可分。 */
  grid-template-rows:auto 1fr auto;
  /* 加了文件夹之后要腾出约 50px，这里和上下留白各收一点，保证还是一屏放得下 */
  flex:1;gap:0;margin-top:clamp(26px,4.6vh,56px);
  border-top:1px solid var(--ink-line);padding-top:clamp(28px,5vh,54px);
}
/* 那个会翻开的文件夹：贴在这一栏右边、四项信息的上方，中间固定留 20px。
   靠「中间那一行吃掉余量」实现：行结构是 [那句话+按钮] / [文件夹] / [四项信息]，
   中间行设成 1fr，于是文件夹被推到信息块正上方；窗口太矮时中间行收成 0，
   只留下文件夹自身的最小上边距，不会挤到按钮。 */
.contact-doc{
  /* 贴这一栏最左边：左边缘和信息行第一栏（邮箱）对齐，位置仍在信息块上方 20px */
  justify-self:start;align-self:end;
  margin:clamp(20px,3vh,40px) 0 20px;
}
/* 联系我：正文也统一到 --doc-w 并居中（原来宽屏下会一直摊到边） */
.panel-contact .doc-head,
.panel-contact .contact-grid{
  /* width:100% 是关键：少了它，作为 flex 子元素的标题会被 auto 外边距压成
     「和文字一样宽」再整体居中，看起来标题跑到中间去了；给满宽度之后
     正文左对齐，标题和下面四项信息落在同一条左边缘上。 */
  width:100%;max-width:var(--doc-w);
  margin-left:auto;margin-right:auto;
}
/* 这段是「一句话自我介绍」，要刚好两行：栏宽放宽 + 字号上限收到 20px，宽窗口下也才是两行 */
.contact-grid .lead{font-size:clamp(16px,1.3vw,20px);line-height:1.7;color:rgba(10,10,11,.78);max-width:64ch;}

/* 联系我和作品集 / 关于我同一套结构：黑底 → 一行小标题 → 一张白纸。
   上下留白和那两层对齐（顶部要够，小标题不跟右上角的 close 打架）。 */
.panel-contact{background:#08080A;color:var(--fg);}
.panel-contact .doc-scroll{
  padding:clamp(64px,9.4vh,110px) var(--doc-pad) clamp(22px,3.6vh,52px);
}
.panel-contact .doc-head .huge{font-size:clamp(32px,min(5.8vw,8vh),104px);}
.panel-contact .btn-dark{margin-top:clamp(8px,1.8vh,20px);}

/* 白纸里怎么排（和上面那层的通用规则叠加）：
   自我介绍占满一整行；文件夹落在「作品集」那一栏（第 4 列）左边缘上，和信息行对齐；
   四项信息在最下面，也占满一整行。 */
.contact-sheet .contact-grid{
  flex:none;gap:0;grid-template-rows:auto auto auto;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);
  column-gap:40px;
  margin-top:clamp(18px,3vh,46px);padding-top:clamp(18px,3vh,44px);
}
.contact-sheet .contact-grid > :nth-child(1){grid-column:1 / -1;}
.contact-sheet .contact-doc{
  grid-column:4 / -1;justify-self:start;
  margin:clamp(12px,2vh,26px) 0 14px;
}
.contact-sheet .contact-grid .kv{grid-column:1 / -1;}

/* ---------- 案例浮层 ---------- */
.case-bar{
  flex:0 0 auto;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,3vh,30px) clamp(24px,8vw,180px);
  background:linear-gradient(to bottom, rgba(8,8,10,.94), rgba(8,8,10,0));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.case-back{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,242,.6);
  transition:color .3s;
}
.case-back:hover{color:#fff;}
.case-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 clamp(24px,8vw,180px) clamp(60px,10vh,120px);}

.case-hero{max-width:1500px;margin:0 auto;padding:clamp(10px,4vh,50px) 0 clamp(24px,4vh,44px);}
.case-hero .label{color:rgba(244,244,242,.45);}
.case-title-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.case-title{
  position:relative;width:100%;height:clamp(92px,15vh,168px);
  margin-top:clamp(12px,2.2vh,26px);touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.case-title canvas{display:block;width:100%;height:100%;}
.case-year{
  margin-top:clamp(4px,1vh,10px);
  font-size:clamp(16px,1.6vw,26px);letter-spacing:.02em;color:rgba(244,244,242,.55);
}
.case-hero h2{
  margin-top:clamp(14px,2.4vh,28px);
  font-size:clamp(32px,5.4vw,104px);font-weight:600;letter-spacing:-.035em;line-height:1;
}
.case-hero h2 small{display:block;margin-top:.5em;font-size:.24em;font-weight:400;letter-spacing:.2em;color:rgba(244,244,242,.5);}
.case-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(18px,3vh,30px);}
.case-meta span{font-size:12px;letter-spacing:.1em;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;color:rgba(244,244,242,.72);}
.case-lead{margin-top:clamp(20px,3.4vh,36px);max-width:56em;font-size:clamp(15px,1.2vw,20px);line-height:1.8;color:rgba(244,244,242,.78);}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(26px,4vh,46px);}
.case-facts div{border-top:1px solid var(--line-2);padding-top:16px;}
.case-facts b{display:block;font-size:clamp(20px,2.2vw,38px);font-weight:600;letter-spacing:-.02em;}
.case-facts span{display:block;margin-top:8px;font-size:12.5px;color:rgba(244,244,242,.5);}

.case-pages{max-width:1500px;margin:0 auto;display:grid;gap:clamp(14px,2vh,26px);}
.case-pages figure{
  border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:#111;position:relative;
}
.case-pages img{width:100%;}
.case-pages figcaption{
  position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.16em;
  color:rgba(244,244,242,.6);background:rgba(8,8,10,.6);padding:5px 10px;border-radius:999px;
  backdrop-filter:blur(6px);
}

.case-foot{
  max-width:1500px;margin:clamp(40px,7vh,80px) auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(24px,4vh,40px);
}
.case-nav{display:flex;gap:26px;flex-wrap:wrap;}
.case-nav a{font-size:clamp(15px,1.3vw,22px);letter-spacing:-.01em;color:rgba(244,244,242,.85);}
.case-nav a:hover{color:var(--green);}
.case-nav small{display:block;font-size:10.5px;letter-spacing:.26em;color:rgba(244,244,242,.4);text-transform:uppercase;margin-bottom:6px;}

/* ==========================================================================
   关于我 —— 按简历的版式排
   顶部联系人行 / 姓名职位标签 + 照片 / 英文小节名 + 中文标题 / 细分隔线

   这一层和作品集（.panel-works）是同一套结构：
     黑底 → 一行小标题（.doc-title）→ 一张白纸（.cv，简历就印在上面）。
   底色、那行小标题的位置、白纸的宽窄和投影都跟作品集对齐；
   左右留白仍交给 --doc-pad 这把公共的尺子，所以三层文档浮层内容列落在同一处。
   ========================================================================== */
.panel-about{background:#08080A;color:var(--fg);}
.panel-about .doc-scroll{
  /* 和作品集同一组留白：顶部要够，小标题不跟右上角的 close 打架 */
  padding:clamp(76px,11vh,120px) var(--doc-pad) clamp(28px,4.5vh,64px);
}

/* 文档浮层里那张「纸」：作品集是 PDF 页、关于我是简历、联系我是这张。
   三层共用同一套白纸（同样的宽窄、圆角、投影、左右对齐），看起来是一本书。 */
.sheet{
  max-width:var(--doc-w);margin:clamp(18px,3vh,34px) auto 0;color:#111;
  background:#fff;border:1px solid rgba(10,10,11,.1);border-radius:8px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.cv{padding:clamp(44px,7vh,88px) clamp(28px,4vw,80px) clamp(48px,8vh,96px);}
.contact-sheet{padding:clamp(30px,4.6vh,64px) clamp(28px,4vw,80px) clamp(22px,3.6vh,52px);}
.cv ul{list-style:none;padding:0;margin:0;}

/* 顶部联系方式 */
.cv-top{
  display:flex;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;
  font-size:13px;
}
.cv-top span{display:inline-flex;gap:.55em;}
.cv-top i{font-style:normal;color:#9c9c9c;}

/* 姓名 / 职位 / 标签 + 照片 */
.cv-hero{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(24px,5vw,80px);margin-top:clamp(36px,8vh,104px);
}
.cv-hero-text h1{font-size:clamp(38px,4.4vw,62px);font-weight:700;letter-spacing:-.01em;line-height:1;}
.cv-role{margin-top:12px;font-size:clamp(17px,1.5vw,22px);}
.cv-tags{margin-top:10px;font-size:13px;color:#8e8e8e;}
.cv-photo{flex:none;width:clamp(140px,16vw,230px);}
.cv-photo img{display:block;width:100%;height:auto;border-radius:2px;}

.cv-intro{margin-top:clamp(34px,6vh,72px);font-size:clamp(14px,1.1vw,16px);line-height:2;}

/* 小节标题 */
.cv-sec{margin-top:clamp(32px,6vh,62px);padding-top:clamp(18px,3vh,30px);border-top:1px solid #e6e6e6;}
.cv-label{font-size:13px;color:#9c9c9c;}
.cv-sec h2{margin-top:6px;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.01em;}

/* 网格条目 */
.cv-grid{display:grid;gap:clamp(22px,3vh,34px) clamp(28px,4vw,64px);margin-top:clamp(18px,3vh,28px);}
.cv-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cv-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cv-grid h3,.cv-job-what h3{font-size:15px;font-weight:600;}
.cv-grid ul{margin-top:10px;display:grid;gap:2px;}
.cv-grid li{font-size:14px;line-height:1.95;color:#6b6b6b;}

/* 荣誉奖项（和核心能力保持同样的上间距；这里要写 ul 才对得过后面的重置） */
ul.cv-awards{margin-top:clamp(18px,3vh,28px);display:grid;gap:8px;}
.cv-awards li{font-size:14px;line-height:1.9;}
.cv-awards em{font-style:normal;}
.cv-awards em::after{content:"｜";color:#c9c9c9;margin:0 .3em;}

/* 工作经历：时间 / 公司 / 项目 三栏 */
.cv-job{
  display:grid;grid-template-columns:minmax(96px,1fr) minmax(150px,1.5fr) minmax(0,4.6fr);
  gap:clamp(14px,2.5vw,44px);padding:clamp(22px,4vh,38px) 0;border-bottom:1px solid #ededed;
}
.cv-job:last-child{border-bottom:0;padding-bottom:0;}
.cv-job-when{font-size:14px;color:#6b6b6b;}
.cv-job-who b{display:block;font-size:15px;font-weight:600;}
.cv-job-who span{display:block;margin-top:6px;font-size:14px;color:#6b6b6b;}
.cv-job-what article + article{margin-top:clamp(18px,3vh,32px);padding-top:clamp(18px,3vh,32px);border-top:1px solid #f1f1f1;}
.cv-job-what p{margin-top:9px;font-size:14px;line-height:1.95;color:#6b6b6b;}
.cv-job-what .cv-result{color:#3a3a3a;}

/* 个人优势 / 教育经历 */
ul.cv-lines{margin-top:clamp(18px,3vh,28px);display:grid;gap:6px;}
.cv-lines li{font-size:14px;line-height:1.95;color:#6b6b6b;}
.cv-edu{display:flex;flex-wrap:wrap;gap:12px clamp(24px,5vw,72px);margin-top:clamp(18px,3vh,28px);font-size:14px;}

.cv-foot{margin-top:clamp(34px,6vh,64px);padding-top:clamp(22px,4vh,38px);border-top:1px solid #e6e6e6;}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1100px){
  .doc-grid{grid-template-columns:1fr;}
  .doc-aside{position:static;order:-1;}
  .portrait{max-width:320px;}
  .contact-grid{grid-template-columns:1fr;}
  .case-facts{grid-template-columns:1fr;}
  .cv-job{grid-template-columns:minmax(84px,1fr) minmax(0,3fr);}
  .cv-job-what{grid-column:2 / -1;}
}
@media (max-width:820px){
  .facts{grid-template-columns:repeat(2,1fr);gap:24px 16px;}
  .corner{display:none;}
  .row .meta{display:none;}
  .row .name{font-size:clamp(28px,10vw,60px);white-space:normal;}
  .list-preview{display:none;}
  .menu-list{padding-top:clamp(80px,14vh,140px);}
  .list-inner{padding:5vh 18px;}
  .kv-wide{grid-template-columns:1fr;}
  .cv-hero{flex-direction:column;gap:22px;}
  .cv-photo{order:-1;width:min(200px,52%);}
  .cv-grid-2,.cv-grid-3{grid-template-columns:1fr;}
  .cv-job{grid-template-columns:minmax(0,1fr);gap:10px;}
  .cv-job-what{grid-column:auto;}
  .cv-top{font-size:12px;}
  .lanyard{display:none;}    /* 800px 以下收起来，免得和菜单文字挤在一起 */
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}