/* ════════════════════════════════════════════════════════════════════
   个人主页 · style.css
   设计语言：制图图纸 + 瑞士网格 + 论文纸质感
   · 一套变量控制全部颜色，改 --accent 就能换主色
   · 亮色 = 米白纸 + 墨黑 + 砖红；暗色 = 墨底 + 暖白 + 浅砖红
   · 字体全部用系统自带（不联网也能正常显示），刻意选了
     衬线标题（宋/思源宋）+ 无衬线正文 + 等宽标注，做出"图纸标注"的味道
   ════════════════════════════════════════════════════════════════════ */

/* ─────────── 1. 设计变量 ─────────── */
:root{
  /* 颜色 */
  --paper:#F1EFEA;          /* 页面底 */
  --paper-2:#E7E4DD;        /* 次级底 */
  --card:#F8F6F2;           /* 卡片底 */
  --ink:#16150F;            /* 正文墨色 */
  --ink-2:#4C4940;          /* 次级文字 */
  --ink-3:#6B675C;          /* 弱文字 / 标注（对纸色 ≥4.8:1） */
  --line:rgba(22,21,15,.17);/* 主要分隔线 */
  --line-2:rgba(22,21,15,.08);/* 更细的线 */
  --accent:#A8452B;         /* 主色：砖红（可换成你喜欢的任何颜色） */
  --accent-2:rgba(168,69,43,.10);

  /* 字体：标题衬线 / 正文无衬线 / 标注等宽 */
  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",Georgia,"Times New Roman",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Cascadia Mono","JetBrains Mono","Courier New",monospace;

  /* 尺寸与节奏 */
  --wrap:1280px;
  --gut:clamp(20px,4.2vw,60px);
  --head-h:64px;
  --sect:clamp(72px,10vw,148px);   /* 章节上下留白 */
  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 0 rgba(22,21,15,.03), 0 18px 44px -28px rgba(22,21,15,.45);
}

html[data-theme="dark"]{
  --paper:#0D0D0C;
  --paper-2:#151513;
  --card:#141412;
  --ink:#EEEBE3;
  --ink-2:#B4B0A5;
  --ink-3:#9C978B;
  --line:rgba(238,235,227,.20);
  --line-2:rgba(238,235,227,.09);
  --accent:#E2805A;
  --accent-2:rgba(226,128,90,.14);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 20px 50px -30px rgba(0,0,0,.9);
}

/* ─────────── 2. 基础 ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--paper);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  text-wrap:pretty;
  transition:background .35s var(--ease), color .35s var(--ease);
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.18;letter-spacing:.005em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
dl,dd,dt,ol,ul,figure{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(var(--wrap), 100% - var(--gut)*2);margin-inline:auto}
/* 关键：CSS 里的 display 会盖掉 hidden 属性，必须显式声明一次 */
[hidden]{display:none !important}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.10em;text-transform:uppercase}
.muted{color:var(--ink-3)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px}
.skip:focus{left:12px;top:12px}

/* 滚动进场的动画基类（app.js 加 .in） */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
html[data-yi-motion="off"] .reveal{opacity:1;transform:none;transition:none}

/* ─────────── 3. 顶栏 ─────────── */
.site-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head__progress{
  position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--accent);transition:width .12s linear;
}
.site-head__inner{
  height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.brand__mark{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  background:var(--ink);color:var(--paper);padding:3px 6px;border-radius:2px;
}
.brand__name{font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:.06em}

.nav{display:flex;gap:clamp(8px,1.6vw,26px);align-items:center}
.nav a{
  display:flex;align-items:baseline;gap:7px;
  padding:6px 2px;position:relative;color:var(--ink-2);
  transition:color .25s var(--ease);
}
.nav a em{font-family:var(--mono);font-style:normal;font-size:.62rem;color:var(--ink-3);letter-spacing:.08em}
.nav a span{font-size:.92rem}
.nav a i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.14em;color:var(--ink-3)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--ink)}
.nav a.is-active em{color:var(--accent)}

.head-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ghost-btn{
  min-width:40px;min-height:36px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.ghost-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ghost-btn em{font-style:normal;opacity:.6}
.menu-btn{display:none;font-size:1rem}

/* ─────────── 4. 首屏 ─────────── */
.hero{padding-top:clamp(48px,8vw,110px);padding-bottom:clamp(28px,4vw,56px)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,64px);align-items:end;
}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:clamp(14px,2vw,24px);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:0 0 auto}
.hero__name{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(3.1rem,9.4vw,7.4rem);line-height:.96;letter-spacing:-.01em;
}
.hero__name .latin{display:block;font-size:.26em;letter-spacing:.24em;color:var(--ink-3);
  margin-top:.9em;font-family:var(--mono);font-weight:400;text-transform:uppercase}
.hero__tagline{
  margin-top:clamp(18px,2.4vw,30px);max-width:34em;
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.85;color:var(--ink-2);
}
.meta-list{margin-top:clamp(22px,3vw,34px);border-top:1px solid var(--line-2)}
.meta-list>div{
  display:grid;grid-template-columns:9em 1fr;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line-2);
}
.meta-list dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.meta-list dd{font-size:.94rem;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,32px)}
.btn-line{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 18px;
  border:1px solid var(--ink);border-radius:var(--r);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.btn-line:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn-line--solid{background:var(--ink);color:var(--paper)}
.btn-line--solid:hover{background:var(--accent);border-color:var(--accent)}
.btn-line i{font-style:normal}

/* 图纸框 */
.sheet{
  position:relative;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
}
.sheet__draw{display:block;width:100%;aspect-ratio:4/3}
.sheet__block{
  border-top:1px solid var(--line);padding:10px 12px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.sheet__block b{color:var(--ink);font-weight:500}
.sheet__corner{position:absolute;width:9px;height:9px;border:1px solid var(--accent);opacity:.8}
.sheet__corner--tl{left:8px;top:8px;border-right:0;border-bottom:0}
.sheet__corner--br{right:8px;bottom:8px;border-left:0;border-top:0}

.hero__foot{
  margin-top:clamp(34px,5vw,64px);padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.scroll-hint{color:var(--ink-3)}
.scroll-hint i{font-style:normal;color:var(--accent)}

/* ─────────── 5. 章节标题（编号 + 中文 + 英文 + 细线） ─────────── */
.section{padding-block:var(--sect);scroll-margin-top:var(--head-h)}
.section+.section{border-top:1px solid var(--line-2)}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(30px,4.6vw,64px)}
.sec-head__no{font-family:var(--mono);font-style:normal;font-size:.74rem;letter-spacing:.1em;color:var(--accent)}
.sec-head__zh{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:.01em}
.sec-head__en{font-family:var(--mono);font-style:normal;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-bottom:.25em}
.sec-head__rule{flex:1;height:1px;background:var(--line);transform:translateY(-.35em)}

.edit-hint{
  margin-top:clamp(22px,3vw,36px);padding:9px 13px;
  border:1px dashed var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.66rem;line-height:1.9;letter-spacing:.04em;color:var(--ink-3);
  text-transform:none;
}
.edit-hint code{background:var(--accent-2);color:var(--accent);padding:1px 5px;border-radius:2px;font-size:.95em}
html[data-hints="off"] [data-hint]{display:none}

/* ─────────── 6. 关于 ─────────── */
.about{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,60px);align-items:start}
.portrait{border:1px solid var(--line);background:var(--card);border-radius:var(--r);position:relative;overflow:hidden}
.portrait__box{aspect-ratio:3/4;display:grid;place-items:center;text-align:center;padding:20px;
  background:
    repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(0deg,var(--line-2) 0 1px,transparent 1px 28px);
}
.portrait__box span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--ink-3);line-height:2;text-transform:uppercase}
.portrait__box img{width:100%;height:100%;object-fit:cover}
.portrait__dim{display:flex;justify-content:space-between;padding:8px 10px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.about__paras>*+*{margin-top:1.15em}
.about__paras p{font-size:1.02rem;line-height:1.95;color:var(--ink-2)}
.about__paras p strong{color:var(--ink);font-weight:600}
.about__paras p:first-child{font-size:1.14rem;color:var(--ink)}
.facts{margin-top:clamp(24px,3.4vw,40px);border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:minmax(7em,.34fr) 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.facts dt{font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.facts dd{font-size:.95rem}

/* ─────────── 7. 技能 ─────────── */
.skills__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vw,32px)}
.tab{
  min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:8px;transition:all .2s var(--ease);
}
.tab b{font-weight:400;color:var(--ink-3);font-size:.62rem}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tab.is-on b{color:var(--paper);opacity:.65}

.skills__rows{border-top:1px solid var(--line)}
.skill-row{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);gap:clamp(16px,3vw,40px);
  padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--line-2);
}
.skill-row__head h3{font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.skill-row__head p{font-size:.86rem;line-height:1.85;color:var(--ink-3)}
.skill-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 26px}
.skill-item{display:flex;align-items:center;gap:11px;padding:6px 0;position:relative}
.skill-item__name{font-size:.95rem;white-space:nowrap}
.skill-item__dots{display:flex;gap:3px;flex:0 0 auto}
.skill-item__dots i{width:8px;height:8px;border:1px solid var(--line);display:block}
.skill-item__dots i.on{background:var(--accent);border-color:var(--accent)}
.skill-item__note{
  position:absolute;left:0;top:100%;z-index:5;max-width:26em;
  background:var(--ink);color:var(--paper);padding:7px 10px;border-radius:var(--r);
  font-size:.76rem;line-height:1.6;opacity:0;pointer-events:none;transform:translateY(3px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.skill-item:hover .skill-item__note{opacity:1;transform:none}

/* ─────────── 8. 作品集 ─────────── */
.works-bar,.cv-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(18px,2.6vw,30px)}
.filters{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  min-height:38px;padding:7px 13px;border:1px solid var(--line-2);border-radius:var(--r);
  font-family:var(--mono);font-size:.67rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;transition:all .2s var(--ease);
}
.chip b{font-weight:400;color:var(--ink-3)}
.chip:hover{border-color:var(--line);color:var(--ink);background:var(--card)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.is-on b{color:#fff;opacity:.75}

.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:clamp(18px,2.4vw,34px)}
.card{
  display:flex;flex-direction:column;text-align:left;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--card);overflow:hidden;
  transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:var(--shadow)}
.card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line-2)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card__media svg{width:100%;height:100%;display:block}
.card:hover .card__media img{transform:scale(1.035)}
.card__no{
  position:absolute;left:0;top:0;padding:5px 9px;background:var(--paper);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);
}
.card__kind{
  position:absolute;right:0;top:0;padding:5px 9px;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
}
.card__body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__title{font-family:var(--serif);font-size:1.06rem;line-height:1.45}
.card__sub{font-size:.85rem;line-height:1.7;color:var(--ink-3)}
.card__foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.card__tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:100px;padding:2px 8px;text-transform:uppercase}
.empty-note{padding:34px 0;color:var(--ink-3);font-size:.9rem}

/* ── 8b. 精选作品：整幅排在网格最前面 ── */
.feature{
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,52px);align-items:center;text-align:left;width:100%;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(18px,2.6vw,30px) 0;transition:background .3s var(--ease);
}
.feature:hover{background:var(--card)}
/* 两条以上精选：图文左右交替，相邻两条不要叠成双线 */
.feature.is-flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.feature.is-flip .feature__media{order:2}
.feature + .feature{border-top:0}
.feature__media{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line-2);background:var(--paper-2)}
.feature__media img,.feature__media svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.feature:hover .feature__media img{transform:scale(1.02)}
.feature__kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.feature__title{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.35;margin-top:12px}
.feature__sub{font-size:.98rem;line-height:1.85;color:var(--ink-2);margin-top:10px;max-width:32em}
.feature__meta{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:16px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.feature__meta b{font-weight:400;color:var(--ink)}
.feature__tags{margin-top:12px}
.feature__more{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  margin-top:18px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px;transition:color .2s var(--ease)}
.feature:hover .feature__more{color:var(--accent)}

/* ── 8c. 视图切换 ── */
.works-bar__right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.view-toggle button{min-width:36px;min-height:36px;display:grid;place-items:center;
  font-size:.86rem;color:var(--ink-3);transition:background .2s var(--ease),color .2s var(--ease)}
.view-toggle button+button{border-left:1px solid var(--line)}
.view-toggle button:hover{background:var(--card);color:var(--ink)}
.view-toggle button.is-on{background:var(--ink);color:var(--paper)}

/* ── 8d. 索引视图（表格） ── */
.works-index{width:100%;border-collapse:collapse;border-top:1px solid var(--line);text-align:left}
.works-index th{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;padding:10px 14px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.works-index td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line-2);font-size:.93rem;vertical-align:baseline}
.works-index tbody tr{cursor:pointer;transition:background .18s var(--ease)}
.works-index tbody tr:hover,.works-index tbody tr:focus-visible{background:var(--card)}
.works-index .t-no{font-family:var(--mono);font-size:.66rem;color:var(--ink-3);width:3em}
.works-index .t-title{font-family:var(--serif);font-size:1.02rem}
.works-index .t-mono{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.works-index .t-tags{color:var(--ink-3);font-size:.82rem}

/* ── 8e. 图片灯箱 ── */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(9,9,8,.955);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,52px);animation:ovIn .25s var(--ease)}
.lightbox__img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;box-shadow:0 40px 90px -50px #000}
.lightbox__cap{color:rgba(255,255,255,.62);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;margin-top:16px;text-align:center}
.lightbox__bar{position:absolute;left:0;right:0;top:0;height:60px;display:flex;
  align-items:center;justify-content:space-between;padding-inline:clamp(14px,4vw,32px);
  color:rgba(255,255,255,.55);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em}
.lightbox__bar .ghost-btn{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.26)}
.lightbox__bar .ghost-btn:hover{background:#fff;color:#111;border-color:#fff}
.ov-fig img{cursor:zoom-in}

/* ── 8f. 图纸互动：栅格开关 + 房间高亮 ── */
.draw g{pointer-events:none}
.draw .room{pointer-events:all;transition:fill .22s var(--ease)}
.draw .room:hover{fill:var(--accent);fill-opacity:.18}
.draw .grid{transition:opacity .3s var(--ease)}
.draw.is-nogrid .grid{opacity:0}
.sheet__toggle{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);border-radius:2px;padding:3px 8px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.sheet__toggle:hover,.sheet__toggle[aria-pressed="false"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

@media (max-width:920px){
  .feature,.feature.is-flip{grid-template-columns:1fr;gap:18px}
  .feature.is-flip .feature__media{order:0}
  .works-index .t-role,.works-index .t-tags{display:none}
  .works-bar__right{width:100%;justify-content:space-between}
}

/* ─────────── 9. 经历时间线 ─────────── */
.timeline{position:relative;margin-left:8px}
.timeline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{position:relative;padding:0 0 clamp(22px,3vw,34px) clamp(20px,3vw,34px)}
.tl-item::before{
  content:"";position:absolute;left:-3.5px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--paper);border:1px solid var(--accent);
}
.tl-item--now::before{background:var(--accent)}
.tl-item__top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tl-item__period{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;color:var(--accent)}
.tl-item__kind{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:100px;padding:1px 8px}
.tl-item__title{font-family:var(--serif);font-size:1.16rem;margin-top:6px}
.tl-item__org{font-size:.92rem;color:var(--ink-2);margin-top:3px}
.tl-item__detail{font-size:.92rem;line-height:1.9;color:var(--ink-2);margin-top:8px;max-width:52em}
.tl-item ul{margin-top:9px;display:grid;gap:4px}
.tl-item ul li{position:relative;padding-left:16px;font-size:.9rem;line-height:1.8;color:var(--ink-2)}
.tl-item ul li::before{content:"—";position:absolute;left:0;color:var(--ink-3);font-family:var(--mono);font-size:.72rem}

/* ─────────── 10. 联系 ─────────── */
.section--contact .sec-head{margin-bottom:clamp(24px,3.4vw,42px)}
.contact__lead{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.7rem);line-height:1.4;max-width:24em}
.contact__lead em{font-style:normal;color:var(--accent)}
.contact__mail{
  display:inline-block;margin-top:clamp(20px,3vw,34px);
  font-family:var(--serif);font-size:clamp(1.2rem,3.4vw,2.3rem);
  border-bottom:1px solid var(--line);padding-bottom:6px;word-break:break-all;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.contact__mail:hover{border-color:var(--accent);color:var(--accent)}
.contact__rows{margin-top:clamp(30px,4.4vw,58px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.contact__rows a,.contact__rows>div{
  display:flex;flex-direction:column;gap:5px;padding:16px 0;border-bottom:1px solid var(--line-2);
  transition:color .2s var(--ease);
}
.contact__rows span{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.contact__rows strong{font-weight:500;font-size:.96rem;word-break:break-all}
.contact__rows a:hover{color:var(--accent)}
.copy-btn{align-self:flex-start;margin-top:4px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);padding-bottom:1px}
.copy-btn:hover{color:var(--accent);border-color:var(--accent)}

/* ─────────── 11. 页脚 ─────────── */
.foot{border-top:1px solid var(--line);padding:22px 0 34px}
.foot__inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ─────────── 12. 作品详情浮层 ─────────── */
.overlay{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;
  animation:ovIn .32s var(--ease)}
@keyframes ovIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.overlay__bar{
  flex:0 0 auto;height:var(--head-h);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-inline:clamp(14px,4vw,40px);background:var(--paper);
}
.overlay__pager{display:flex;gap:6px}
.overlay__scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.overlay__inner{padding-block:clamp(26px,4vw,52px) clamp(50px,8vw,90px)}
.ov-head{border-bottom:1px solid var(--line);padding-bottom:clamp(18px,2.6vw,30px);margin-bottom:clamp(22px,3.4vw,40px)}
.ov-head h2{font-family:var(--serif);font-size:clamp(1.6rem,4vw,3rem);line-height:1.2}
.ov-head .ov-sub{font-size:1.02rem;color:var(--ink-2);margin-top:10px;max-width:44em}
.ov-head .ov-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ov-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.ov-gallery{display:grid;gap:14px}
.ov-fig{border:1px solid var(--line-2);background:var(--card);border-radius:var(--r);overflow:hidden}
.ov-fig img{width:100%}
.ov-fig svg{width:100%;display:block}
.ov-fig figcaption{padding:8px 11px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.ov-side{position:sticky;top:calc(var(--head-h) + 20px)}
.ov-table{border-top:1px solid var(--line)}
.ov-table>div{display:grid;grid-template-columns:minmax(5.4em,.4fr) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.ov-table dt{font-family:var(--mono);font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.ov-table dd{font-size:.92rem}
.ov-desc{margin-top:clamp(20px,3vw,32px)}
.ov-desc h3,.ov-drawings h3,.ov-links h3{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:12px;font-weight:400}
.ov-desc p{font-size:.96rem;line-height:1.95;color:var(--ink-2)}
.ov-desc p+p{margin-top:.9em}
.ov-drawings,.ov-links{margin-top:clamp(20px,3vw,32px)}
.ov-drawings li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2);
  font-size:.9rem;color:var(--ink-2)}
.ov-drawings li span{font-family:var(--mono);font-size:.64rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.ov-links a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:.92rem}
.ov-links a:hover{color:var(--accent)}
.ov-hint{margin-top:18px;padding:9px 12px;border:1px dashed var(--line);border-radius:var(--r);
  font-family:var(--mono);font-size:.63rem;line-height:1.9;color:var(--ink-3);text-transform:none}
.ov-hint code{background:var(--accent-2);color:var(--accent);padding:1px 5px;border-radius:2px}
.ov-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

/* ─────────── 12b. 展板重排版（把 A1 展板拆成网页面板） ─────────── */
.board{padding-bottom:26px}
.board__head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:clamp(20px,3vw,34px)}
.board__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.board__title{font-family:var(--serif);font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.08;margin-top:12px;letter-spacing:-.01em}
.board__en{font-family:var(--mono);font-size:clamp(.68rem,1.1vw,.8rem);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}
.board__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 26px;margin-top:22px;border-top:1px solid var(--line-2)}
.board__meta>div{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.board__meta dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.board__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.board__meta dd{margin:0;font-size:.88rem}

.board__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.panel{min-width:0}

.panel--figure{border:1px solid var(--line-2);background:var(--card);border-radius:var(--r);overflow:hidden;
  transition:border-color .25s var(--ease)}
.panel--figure:hover{border-color:var(--line)}
.panel--figure img,.panel--figure svg{width:100%;display:block}
.panel--figure img{cursor:zoom-in}

/* 在线试玩：截图位置放一个真的 iframe */
.embed{position:relative;width:100%;aspect-ratio:390/844;background:#EDE7DB}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.embed__note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:26px;font-family:var(--mono);font-size:.65rem;line-height:2.1;color:var(--ink-3)}
.embed__note span{white-space:pre-line}
.panel--embed .panel__cap a{color:var(--accent);border-bottom:1px solid currentColor;white-space:nowrap}
.panel__cap{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding:8px 11px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--ink-3);text-transform:none}
.panel__cap b{color:var(--accent);font-weight:400;letter-spacing:.1em}

.panel--text{padding-top:2px;align-self:stretch;display:flex;flex-direction:column}
/* 文字栏拉到与旁边大图等高；只有标了 anchor 的面板，把末尾清单落到行底 */
.panel--text[data-anchor]>ul:last-child{margin-top:auto;padding-top:20px}
.panel__kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.panel__h{font-family:var(--serif);font-size:1.18rem;line-height:1.45;margin-bottom:11px}
.panel--text p{font-size:.94rem;line-height:1.95;color:var(--ink-2);max-width:54em}
.panel--text p+p{margin-top:.75em}
.panel__en{margin-top:15px;padding-top:13px;border-top:1px solid var(--line-2);
  font-size:.79rem;line-height:1.9;color:var(--ink-3)}
.panel--text ul{margin-top:10px}
.panel--text li{position:relative;padding-left:15px;font-size:.9rem;line-height:1.8;color:var(--ink-2)}
.panel--text li::before{content:"—";position:absolute;left:0;color:var(--ink-3);font-family:var(--mono);font-size:.72rem}

.panel--list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,32px)}
.panel__group h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px;font-weight:400}
.panel__group li{display:flex;flex-direction:column;gap:1px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.panel__group li span{font-size:.88rem;color:var(--ink)}
.panel__group li i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.board__foot{margin-top:clamp(26px,4vw,44px);padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.board__foot p{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}
.board__orig{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px}
.board__orig:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:920px){
  .board__grid{grid-template-columns:1fr}
  .board__grid>.panel{grid-column:1/-1 !important}
  .panel--list{grid-template-columns:1fr}
}

/* ─────────── 13. 提示条 ─────────── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,10px);z-index:80;
  background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:100px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ─────────── 14. 响应式 ─────────── */
@media (max-width:1080px){
  .about{grid-template-columns:1fr;gap:28px}
  .portrait{max-width:290px}
  .ov-body{grid-template-columns:1fr}
  .ov-side{position:static}
}
@media (max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .hero__name{font-size:clamp(2.9rem,13vw,5rem)}
  .sheet{max-width:520px}
  .nav{
    position:fixed;left:0;right:0;top:var(--head-h);z-index:39;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--gut) 16px;display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .nav a::after{display:none}
  .menu-btn{display:inline-flex}
  .skill-row{grid-template-columns:1fr;gap:14px}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .brand__name{display:none}
  .works-grid{grid-template-columns:1fr}
  .works-bar,.cv-bar{align-items:flex-start;flex-direction:column}
  .tl-item{padding-left:22px}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ─────────── 15. 动效偏好 & 打印 ─────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms !important;transition-duration:.05ms !important}
}
@media print{
  .site-head,.overlay,.toast,.edit-hint,.filters,.scroll-hint,.hero__sheet,.copy-btn,.works-bar .works-count{display:none !important}
  html[data-theme]{--paper:#fff;--card:#fff;--ink:#000;--ink-2:#222;--ink-3:#555;--line:#bbb;--line-2:#ddd;--accent:#8A3722;--shadow:none}
  body{font-size:11pt;line-height:1.6}
  .section{padding-block:18pt;break-inside:auto}
  .card,.tl-item,.ov-fig{break-inside:avoid}
  .works-grid{grid-template-columns:repeat(2,1fr);gap:10pt}
  .hero{padding-top:0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  @page{margin:14mm}
}

/* ─────────── 16. 评审修订（2026.10） ─────────── */

/* 16a 首屏真实图纸 */
.sheet__media{position:relative;aspect-ratio:4/3;background:#FAF8F3;padding:clamp(6px,.9vw,12px)}
.sheet__img{width:100%;height:100%;object-fit:contain;display:block}
html[data-theme="dark"] .sheet__img{filter:brightness(.9)}
.sheet__grid{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(0deg,var(--line-2) 0 1px,transparent 1px 28px);
  transition:opacity .3s var(--ease)}
.sheet.is-nogrid .sheet__grid{opacity:0}

/* 16b 档案卡（没有照片时的替代） */
.idcard{border:1px solid var(--line);background:var(--card);border-radius:var(--r);position:relative;overflow:hidden}
.idcard__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.idcard__mark{font-family:var(--mono);font-size:1.5rem;letter-spacing:.16em;color:var(--accent)}
.idcard__tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--ink-3)}
.idcard__rows{padding:4px 16px}
.idcard__rows>div{display:grid;grid-template-columns:4.6em 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.idcard__rows>div:last-child{border-bottom:0}
.idcard__rows dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.idcard__rows dd{font-size:.86rem;line-height:1.6}
.idcard__foot{display:flex;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}

/* 16c 结果带：数字前置 */
.results{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.results li{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:4px 11px;background:var(--paper)}
.results li::before{content:"— ";color:var(--accent)}
.board__results{margin-top:18px}
.works-count--head{margin-left:14px;padding-bottom:.2em;font-size:.64rem;text-transform:none;letter-spacing:.08em}

/* 16d 移动菜单遮罩 */
.nav-backdrop{position:fixed;left:0;right:0;top:var(--head-h);bottom:0;z-index:38;
  background:rgba(10,10,9,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.nav-backdrop.is-on{opacity:1;pointer-events:auto}

/* 16e 技能说明：键盘和触屏都能看到 */
.skill-item:focus .skill-item__note,
.skill-item:focus-within .skill-item__note{opacity:1;transform:none}
@media (hover:none){
  .skill-item{flex-wrap:wrap}
  .skill-item__note{position:static;opacity:1;transform:none;background:none;color:var(--ink-3);
    padding:0;max-width:none;font-size:.76rem;width:100%;pointer-events:auto}
}
/* 触屏不一定认 hover:none（桌面模拟器就不认），按宽度兜底 */
@media (max-width:920px){
  .skill-item{flex-wrap:wrap}
  .skill-item__note{position:static;opacity:1;transform:none;background:none;color:var(--ink-3);
    padding:2px 0 0;max-width:none;font-size:.76rem;width:100%;pointer-events:auto}
}

/* 16f 触控目标 ≥44px */
.ghost-btn{min-height:44px}
.chip{min-height:44px}
.tab{min-height:44px}
.view-toggle button{min-width:44px;min-height:44px}

/* 16g 手机：标签与值上下排 */
@media (max-width:620px){
  .meta-list>div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .meta-list dt{padding-top:0}
  .hero__cta{width:100%}
  .hero__cta .btn-line{flex:1 1 auto;justify-content:center}
  .idcard__rows>div{grid-template-columns:4.2em 1fr}
  .works-count--head{display:none}
}

/* 16h 展板英文对照：默认收进 details */
.panel__en summary{cursor:pointer;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);list-style:none}
.panel__en summary::-webkit-details-marker{display:none}
.panel__en summary::after{content:" +"}
.panel__en[open] summary::after{content:" –"}
.panel__en p{margin-top:8px}

/* 16i 页脚 */
.foot__top{color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot__top:hover{color:var(--accent);border-color:var(--accent)}

/* 16j 作品行：图文与边缘留出呼吸 */
.feature{padding-inline:clamp(10px,2.4vw,30px)}
@media (max-width:920px){
  .feature{padding-inline:clamp(10px,2.4vw,22px)}
}

/* 16k 技能：能力 + 证据，去掉 1–5 自评圆点 */
.skill-items{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 30px}
.skill-item{display:block;padding:10px 0;border-bottom:1px solid var(--line-2);position:static}
.skill-item__name{display:block;font-size:.95rem;white-space:normal}
.skill-item__note{position:static;display:block;opacity:1;transform:none;background:none;
  color:var(--ink-3);padding:4px 0 0;max-width:none;font-size:.78rem;line-height:1.65;
  pointer-events:auto;width:auto}
.skill-item__dots{display:none}

/* 16l 技能软件 logo：24px 真实产品图标 */
.skill-item{padding:12px 0}
.skill-item.has-logo{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;
  align-items:start}
.skill-item.has-logo .skill-item__name{grid-column:2;line-height:1.5}
.skill-item.has-logo .skill-item__note{grid-column:2;margin-top:3px;padding-top:0}
.skill-logo{grid-column:1;grid-row:1;display:block;width:24px;height:24px;
  object-fit:contain;margin-top:-1px}
/* 暗色下给深色图标一块纸色底，Cursor / OpenAI / Rhino 才不会消失 */
[data-theme="dark"] .skill-logo{background:#F1EFEA;border-radius:4px;padding:2px;box-sizing:border-box}
.skill-logo--mono{background:none;border:1px solid var(--ink-3);border-radius:3px;
  display:grid;place-items:center;font:600 9px/1 var(--mono);letter-spacing:0;
  color:var(--ink-3);opacity:.9;box-sizing:border-box}
.skill-logo--none{background:none}