:root{
  --paper:#E4DDC9;
  --paper-hi:#F4F0E2;
  --ink:#1C1A13;
  --gold:#8C6B1F;
  --foil:#D6B25A;
  --mute:#6B6553;
  --lede:#59543F;
  --rule:rgba(28,26,19,.13);
  --rule-gold:rgba(140,107,31,.3);

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.74;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  position:relative;
}

/* ══ 纸 ══════════════════════════════════════════════════════
   四层叠出来的：色调起伏 → 帘纹 → 洒金 → 光 → 边缘 → 纤维
   每一层都低对比；材质感来自层数，不来自单层的强度         */

/* 1 大尺度色调起伏。故意用多块 + 重模糊 + 超出视口，
   让它没有可辨认的边缘，读起来是纸本身的不匀，不是一个渐变 */
.tone{
  position:fixed; inset:-25%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 42% at 20% 14%, rgba(255,252,240,.9), transparent 70%),
    radial-gradient(44% 38% at 84% 26%, rgba(240,231,208,.75), transparent 72%),
    radial-gradient(48% 44% at 62% 90%, rgba(224,212,183,.6), transparent 74%),
    radial-gradient(42% 48% at 6% 78%, rgba(248,243,226,.6), transparent 72%);
  filter:blur(50px);
}
/* 2 洒金：金箔屑落在纸浆里。纸的纹理全靠它和纤维层，
   试过再加一层帘纹（1px 重复线），在缩放和 HiDPI 下会起摩尔纹，砍掉了 */
#flecks{position:absolute; top:0; left:0; z-index:0; pointer-events:none}
/* 3 光：跟着光标走。overlay 让中间调的金箔提亮得多，浅色纸几乎不动，
   所以看起来是金在反光，而不是屏幕上多了一块亮斑 */
.gleam{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:overlay; opacity:0; transition:opacity .8s ease;
  background:radial-gradient(circle 165px at var(--mx,50%) var(--my,40%),
             rgba(255,246,220,.78), rgba(255,246,220,.26) 36%, transparent 68%);
}
.gleam.on{opacity:1}
/* 5 边缘：纸向视口外翻卷 */.edge{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 140px rgba(88,76,46,.14), inset 0 0 34px rgba(88,76,46,.07);
}
/* 6 纤维 */
body::before{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ══ 落笔：点击处纸被压出一道印，金箔被震起来 ═══════════════ */
.strike-layer{position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden}
.strike{
  position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px;
  border-radius:50%; border:1px solid rgba(140,107,31,.5);
  box-shadow:inset 0 1px 3px rgba(62,52,26,.16), 0 1px 0 rgba(255,255,255,.55);
}
.flake{position:absolute; margin:-1px 0 0 -1px; border-radius:1px}

/* ══ 页眉 ═══════════════════════════════════════════════════ */
.masthead{
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; padding:22px 48px 0;
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute);
}
.masthead b{color:var(--gold); font-weight:500}

/* ══ 骨架 ═══════════════════════════════════════════════════ */
.shell{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:76px;
}

/* ── 左栏 ─────────────────────────────────────────────────── */
.bio{
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:88px 0;
}
/* 人像：印在纸上，不是贴在纸上。
   multiply 让证件照的纯白底直接透出纸色和金屑，人像才落进这张纸里 */
.portrait{
  position:relative; width:126px; height:162px; margin-bottom:28px;
  border:1px solid rgba(140,107,31,.42);
  box-shadow:0 1px 0 rgba(255,255,255,.65), 0 8px 22px rgba(62,52,26,.15);
  flex:none;
}
.portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
  display:block; mix-blend-mode:multiply;
  filter:contrast(1.05) brightness(1.07) saturate(.88);
}
.portrait::after{                       /* 装裱的内衬线 */
  content:''; position:absolute; inset:5px; pointer-events:none;
  border:1px solid rgba(140,107,31,.22);
}

h1{
  font-family:var(--display);
  font-variation-settings:'opsz' 96,'wdth' 100;
  font-weight:800; font-size:clamp(56px,7.2vw,104px);
  line-height:.86; letter-spacing:-.048em;
  /* background-clip:text 只在背景框内上色，行高 .86 会让字的上缘伸出框外被截掉。
     用内边距把框撑开，再用负外边距把版面收回来 */
  padding:.11em 0 .07em; margin:-.11em 0 8px;
  background:linear-gradient(96deg,
    var(--ink) 0%, var(--ink) 30%,
    var(--gold) 44%, var(--foil) 50%, var(--gold) 56%,
    var(--ink) 70%, var(--ink) 100%);
  background-size:300% 100%; background-position:120% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:foil 2.4s cubic-bezier(.4,0,.18,1) .45s forwards;
}
@keyframes foil{ from{background-position:120% 0} to{background-position:30% 0} }
h1:hover{animation:foil 1.4s cubic-bezier(.4,0,.18,1) forwards}

.latin{
  display:flex; align-items:center; gap:14px;
  font-family:var(--display);
  font-variation-settings:'opsz' 24,'wdth' 84;
  font-weight:600; font-size:13.5px;
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:26px;
}
.latin::after{content:''; flex:1; max-width:88px; height:1px; background:var(--rule-gold)}

.role{
  font-family:var(--display); font-variation-settings:'opsz' 28,'wdth' 96;
  font-weight:600; font-size:clamp(18px,2vw,22px);
  letter-spacing:-.01em; margin-bottom:16px;
}
/* 「求职意向」用页面既有的小标签样式，和右上事实条、经历里的职位标签同一套 */
.role-label{
  display:block; font-family:var(--mono); font-weight:400;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:7px;
}
/* 学历牌子：独占一行，挂在校名下面 */
.badge-row{margin:9px 0 10px}
.badge{
  display:inline-block;
  font-family:var(--mono); font-weight:400; font-size:9.5px;
  letter-spacing:.13em; line-height:1; color:#6B5115;
  background:rgba(214,178,90,.26);
  border:1px solid rgba(140,107,31,.34);
  border-radius:2px; padding:4px 7px;
}
.badge + .badge{margin-left:5px}
.lede{color:var(--lede); font-size:16px; max-width:32ch; margin-bottom:40px}
.lede b{color:var(--ink); font-weight:400}

nav{display:flex; flex-direction:column; gap:1px; margin-bottom:34px}
nav a{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mute);
  text-decoration:none; padding:9px 0;
  transition:color .3s ease;
}
nav a .tick{
  height:1px; width:24px; background:var(--rule-gold);
  transition:width .34s cubic-bezier(.22,1,.36,1),background .3s ease;
}
nav a:hover,nav a:focus-visible,nav a.on{color:var(--gold)}
nav a:hover .tick,nav a:focus-visible .tick,nav a.on .tick{width:64px;background:var(--gold)}

.socials{display:flex; gap:18px}
.socials a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--mute); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .25s ease,border-color .25s ease;
}
.socials a:hover,.socials a:focus-visible{color:var(--gold); border-color:var(--gold)}

/* ── 右栏 ─────────────────────────────────────────────────── */
.feed{position:relative; margin-left:-38px; padding:13vh 0 26vh 38px}

/* 右上原本是一片空白。放三个数字，每个标注出处，
   等于在读任何正文之前就先给了证据，也预告了下面三个项目 */
.headline{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule-gold);
  border-bottom:1px solid var(--rule);
  margin-bottom:104px;
}
.headline div{position:relative; padding:17px 18px 19px 0}
.headline div + div{padding-left:22px}
.headline div + div::before{
  content:''; position:absolute; left:0; top:17px; bottom:19px;
  width:1px; background:var(--rule);
}
.headline span{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--gold); margin-bottom:9px;
}
.headline b{
  display:block; font-family:var(--display);
  font-variation-settings:'opsz' 28,'wdth' 94;
  font-weight:600; font-size:clamp(15px,1.6vw,19px);
  letter-spacing:-.015em; line-height:1.25; color:var(--ink);
}
.headline i{
  display:block; margin-top:8px; font-style:normal;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--mute);
}
/* 栏间的金线：上下淡出，像烫上去的一道边饰 */
.feed::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,
    transparent 0, rgba(140,107,31,.3) 7%, rgba(140,107,31,.3) 90%, transparent 100%);
}
.block{margin-bottom:118px}
.block:last-child{margin-bottom:0}
.block-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:24px; display:flex; align-items:center; gap:12px;
}
.block-label::before{content:''; width:5px; height:5px; background:var(--foil); transform:rotate(45deg)}
.block-label::after{content:''; flex:1; height:1px; background:var(--rule)}

.intro p{font-size:19px; font-weight:300; margin-bottom:18px; max-width:50ch}
.intro p em{font-style:italic; color:var(--gold)}
.intro p:last-child{margin-bottom:0}

/* ── 卡片通用 ─────────────────────────────────────────────── */
.entry,.proj,.item{
  position:relative; display:block; text-decoration:none; color:inherit;
  padding:24px; margin:0 -24px; border-radius:3px;
  transition:background .35s ease,box-shadow .35s ease,transform .12s ease;
}
.entry:hover,.entry:focus-visible,
.proj:hover,.proj:focus-visible,
.item:hover,.item:focus-visible{
  background:var(--paper-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(28,26,19,.07),
             0 1px 0 rgba(255,255,255,.5);
}
.entry:active,.proj:active,.item:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(28,26,19,.13), inset 0 -1px 0 rgba(255,255,255,.55);
}
h3{
  font-family:var(--display); font-variation-settings:'opsz' 28,'wdth' 95;
  font-weight:600; font-size:20px; letter-spacing:-.015em;
  transition:color .3s ease;
}
.entry:hover h3,.proj:hover h3,.item:hover h3,
.entry:focus-visible h3,.proj:focus-visible h3,.item:focus-visible h3{color:var(--gold)}

/* 去向箭头：唯一提示"这是可点的" */
.go{
  position:absolute; top:23px; right:21px;
  font-family:var(--mono); font-size:15px; line-height:1;
  color:rgba(140,107,31,.42);
  transition:color .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.entry:hover .go,.proj:hover .go,.item:hover .go,
.entry:focus-visible .go,.proj:focus-visible .go{
  color:var(--gold); transform:translate(2px,-2px);
}

.desc{color:var(--mute); font-size:16px; font-weight:300; margin-bottom:14px; max-width:50ch}
.desc em{color:var(--ink); font-style:italic}

/* 成果：卡片上最该被扫到的一行，做成钤上去的一块 */
.result{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  font-family:var(--mono); font-size:11.5px; line-height:1.5; color:#6B5115;
  background:rgba(214,178,90,.18);
  border:1px solid rgba(140,107,31,.26); border-left:3px solid var(--gold);
  border-radius:2px; padding:6px 12px 6px 10px;
}
.result::before{
  content:'成果'; font-size:9px; letter-spacing:.2em; color:var(--gold);
  border-right:1px solid rgba(140,107,31,.25); padding-right:9px; align-self:stretch;
  display:flex; align-items:center;
}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.07em;
  color:var(--gold); border:1px solid var(--rule-gold);
  border-radius:2px; padding:3px 8px;
}

/* ── 经历：主轴是时间，所以给一条真的时间轨 ─────────────────── */
.entry{display:grid; grid-template-columns:84px 1fr; gap:24px; padding-left:0; margin-left:0}
/* 轨挂在 .entry 上而不是 .entry-time 上——日期只有三行高，
   挂在它身上的线撑不满整条经历，宽屏下就会断成一截一截 */
.entry::before{
  content:''; position:absolute; left:3px; top:41px; bottom:-26px;
  width:1px; background:var(--rule-gold);
}
#work .entry:last-child::before{display:none}
.entry-time{
  position:relative; padding-left:17px; padding-top:3px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  color:var(--mute); line-height:1.85;
}
.entry-time i{                          /* 轨上的节点 */
  position:absolute; left:0; top:6px; width:7px; height:7px;
  background:var(--foil); border:1px solid var(--gold);
  transform:rotate(45deg); transition:background .3s ease;
}
.entry:hover .entry-time i{background:var(--gold)}
/* 学历条目只是履历的一部分，不是可点的卡片 */
.entry--flat:hover,.entry--flat:active{background:none; box-shadow:none; transform:none}
.entry--flat h3{color:var(--ink)}
.entry-role{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold); margin-bottom:5px;
}

/* ── 项目：主轴是产物，所以给一块图版 ──────────────────────── */
.proj{display:grid; grid-template-columns:132px 1fr; gap:24px}
.plate{
  position:relative; width:132px; height:98px; overflow:hidden;
  background:linear-gradient(158deg,#EFEADB,#DAD2B9);
  border:1px solid rgba(140,107,31,.36);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 5px 14px rgba(62,52,26,.12);
  transition:box-shadow .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.plate::after{content:''; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.45); pointer-events:none; z-index:2}
/* 真实截图当图版：轻微偏暖 + 降饱和，让它落进这张纸的色调 */
.plate img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 0; display:block; z-index:1;
  filter:sepia(.13) saturate(.9) contrast(1.03);
}
.proj:hover .plate{transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.6), 0 9px 20px rgba(62,52,26,.17)}

/* 图版画的是这个项目在干什么，不是截图占位。坐标基于 inset 后的 100×62 内框 */
.plate--dag::before{              /* 影像 Agent：并行调度的 DAG */
  content:''; position:absolute; inset:18px 16px;
  background-image:
    linear-gradient(rgba(28,26,19,.32),rgba(28,26,19,.32)),
    linear-gradient(rgba(28,26,19,.32),rgba(28,26,19,.32)),
    linear-gradient(rgba(28,26,19,.32),rgba(28,26,19,.32)),
    linear-gradient(rgba(28,26,19,.32),rgba(28,26,19,.32)),
    linear-gradient(rgba(28,26,19,.32),rgba(28,26,19,.32)),
    linear-gradient(rgba(28,26,19,.38),rgba(28,26,19,.38)),
    linear-gradient(rgba(214,178,90,.95),rgba(214,178,90,.95)),
    linear-gradient(rgba(28,26,19,.38),rgba(28,26,19,.38)),
    linear-gradient(rgba(28,26,19,.38),rgba(28,26,19,.38));
  background-size:
    20px 1px, 10px 1px, 1px 41px, 10px 1px, 10px 1px,
    20px 14px, 20px 14px, 20px 14px, 20px 14px;
  background-position:
    20px 30px, 60px 30px, 70px 10px, 70px 10px, 70px 50px,
    0 24px, 40px 24px, 80px 4px, 80px 44px;
  background-repeat:no-repeat;
}
.plate--log::before{              /* Witness：追加式事件日志 */
  content:''; position:absolute; inset:18px 16px;
  background-image:
    linear-gradient(rgba(28,26,19,.28),rgba(28,26,19,.28)),
    linear-gradient(rgba(214,178,90,.95),rgba(214,178,90,.95)),
    linear-gradient(rgba(28,26,19,.4),rgba(28,26,19,.4)),
    linear-gradient(rgba(214,178,90,.95),rgba(214,178,90,.95)),
    linear-gradient(rgba(28,26,19,.4),rgba(28,26,19,.4)),
    linear-gradient(rgba(28,26,19,.24),rgba(28,26,19,.24)),
    linear-gradient(rgba(28,26,19,.24),rgba(28,26,19,.24)),
    linear-gradient(rgba(28,26,19,.24),rgba(28,26,19,.24)),
    linear-gradient(rgba(28,26,19,.24),rgba(28,26,19,.24));
  background-size:
    1px 62px, 6px 6px, 6px 6px, 6px 6px, 6px 6px,
    68px 3px, 52px 3px, 78px 3px, 42px 3px;
  background-position:
    5px 0, 3px 3px, 3px 20px, 3px 37px, 3px 54px,
    20px 5px, 20px 22px, 20px 39px, 20px 56px;
  background-repeat:no-repeat;
}
.plate--recall::before{           /* FixMate：双路召回 → 融合重排 */
  content:''; position:absolute; inset:18px 16px;
  background-image:
    linear-gradient(rgba(214,178,90,.95),rgba(214,178,90,.95)),
    linear-gradient(rgba(28,26,19,.34),rgba(28,26,19,.34)),
    linear-gradient(rgba(28,26,19,.3),rgba(28,26,19,.3)),
    linear-gradient(rgba(28,26,19,.3),rgba(28,26,19,.3)),
    linear-gradient(rgba(28,26,19,.3),rgba(28,26,19,.3)),
    linear-gradient(rgba(28,26,19,.3),rgba(28,26,19,.3)),
    linear-gradient(rgba(140,107,31,.9),rgba(140,107,31,.9));
  background-size:
    40px 8px, 40px 8px, 14px 1px, 14px 1px, 1px 37px, 14px 1px, 30px 16px;
  background-position:
    0 8px, 0 46px, 40px 11px, 40px 49px, 54px 11px, 54px 30px, 70px 23px;
  background-repeat:no-repeat;
}

.proj-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-right:26px; margin-bottom:4px}
.proj-sub{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold); margin-bottom:9px;
}

/* ── 写作：只是列表，不需要卡片的重量 ──────────────────────── */
.item{border-top:1px solid var(--rule); border-radius:0}
.item:first-of-type{border-top:0}
.item-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-right:26px; margin-bottom:6px}

.when{
  font-family:var(--mono); font-size:9.5px; color:var(--mute);
  letter-spacing:.13em; white-space:nowrap; text-transform:uppercase;
}
nav a:active,.socials a:active{transform:translateY(1px)}
nav a:active .tick{background:var(--foil)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .entry,.proj,.item,.intro p{
      animation:enter linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 24%;
    }
    @keyframes enter{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
  }
}
.fade{opacity:0; animation:fade .9s ease forwards}
@keyframes fade{to{opacity:1}}

@media (max-height:820px){
  .bio{padding:56px 0}
  .portrait{width:98px; height:126px; margin-bottom:20px}
}
@media (max-width:900px){
  .masthead{padding:18px 22px 0}
  .shell{grid-template-columns:1fr; gap:0; padding:0 22px}
  .bio{position:relative; height:auto; padding:12vh 0 7vh}
  .feed{margin-left:0; padding:0 0 14vh}
  .feed::before{display:none}
  .headline{grid-template-columns:1fr; margin-bottom:60px}
  .headline div,.headline div + div{padding:14px 0}
  .headline div + div::before{left:0; right:0; top:0; bottom:auto; width:auto; height:1px}
  nav{display:none}
  .lede{max-width:none}
  .entry{grid-template-columns:1fr; gap:12px}
  .entry::before{display:none}
  .entry-time{padding-left:17px; padding-top:0}
  .proj{grid-template-columns:1fr; gap:16px}
  .plate{width:100%; height:132px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  h1{background-position:30% 0}
  .fade{opacity:1}
  .gleam{display:none}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}