/* ============================================================
   林知远 · 个人主页
   方向：split stage —— 一半永远不动，一半慢慢读。
   纸与墨两支颜色，一支强调；其余交给照片。
   ============================================================ */

:root{
  --paper:#f7f9f8;
  --paper-2:#eef2f0;
  --paper-3:#e4ebe8;
  --ink:#06525c;
  --ink-2:#0b5661;
  --ink-3:#2e6b74;
  --field:#06525c;
  --field-ink:#eef2f0;

  --f-display:"Young Serif","Songti SC","Source Han Serif SC","Noto Serif SC",serif;
  --f-text:"Source Serif 4","Songti SC","Source Han Serif SC","Noto Serif SC",serif;

  --t-display:clamp(2.5rem, .95rem + 4vw, 4.6rem);
  --t-h2:clamp(1.6rem, 1.24rem + 1.1vw, 2.15rem);
  --t-lead:clamp(1.15rem, 1.02rem + .45vw, 1.375rem);
  --t-body:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-small:1rem;

  --gap:clamp(96px, 13vh, 172px);
  --pad:clamp(20px, 4.2vw, 64px);
  --e:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
[hidden]{display:none !important}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip{
  position:fixed;left:16px;top:16px;z-index:60;
  transform:translateY(-160%);
  background:var(--ink);color:var(--paper);
  padding:10px 16px;font-size:var(--t-small);
  transition:transform .3s var(--e);
}
.skip:focus{transform:none}

/* ---------- 骨架：一半固定，一半滚动 ---------- */
.site{display:grid;grid-template-columns:50% 50%}
.stage{
  position:sticky;top:0;height:100svh;
  background:var(--paper-3);
  overflow:hidden;
}
.stage__frame{position:absolute;inset:0}
.stage__img,.stage__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.2s var(--e);
  will-change:opacity,transform;
}
.stage__img.is-on,.stage__video.is-on{opacity:1}
.stage__img--print{
  object-fit:contain;object-position:center;background:var(--paper-2);
  padding:0 0 clamp(96px,13vh,150px);
  transition-duration:.55s;
}
.stage__label{
  position:absolute;left:clamp(24px,3vw,44px);right:clamp(24px,3vw,44px);bottom:clamp(22px,3.2vh,38px);
  margin:0;z-index:2;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--e),transform .5s var(--e);
  pointer-events:none;
}
.stage.is-print .stage__label{opacity:1;transform:none}
.stage.is-print .stage__cap{opacity:0}
.stage__label strong{font-family:var(--f-display);font-weight:400;font-size:var(--t-lead);color:var(--ink);letter-spacing:.01em;flex:none}
.stage__label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:var(--t-small);color:var(--ink-3)}
.stage__img--print.is-on{animation:none}
.stage__backdrop{
  position:absolute;inset:-10%;z-index:0;
  background-position:center;background-size:cover;
  filter:blur(18px) saturate(1.04);
  opacity:0;transition:opacity .9s var(--e);
  transform:scale(1.04);
  contain:paint;
}
.stage__backdrop.is-on{opacity:1}
.stage__video--contain{object-fit:contain;z-index:1}
.stage__img.is-on{animation:drift 26s ease-out forwards}
.stage__video.is-on{animation:none}
@keyframes drift{
  from{transform:scale(1)}
  to{transform:scale(1.055)}
}
.stage__cap{
  position:absolute;left:clamp(18px,2.2vw,36px);bottom:clamp(16px,2.4vw,32px);
  margin:0;z-index:2;
  font-size:var(--t-small);
  color:#f2f7f6;
  letter-spacing:.02em;
  background:rgba(5,40,45,.82);
  padding:7px 13px 8px;
  transition:opacity .5s var(--e);
}
.stage__cap::before{
  content:"";display:inline-block;width:7px;height:7px;
  background:currentColor;margin-right:10px;vertical-align:.06em;
}
.stage__cap.is-swap{opacity:0}

.column{padding:0 var(--pad) 0;position:relative;container-type:inline-size}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:clamp(22px,3.4vh,34px) 0 clamp(60px,9vh,110px);
  flex-wrap:wrap;
}
.wordmark{display:flex;align-items:baseline;gap:12px}
.wordmark__cn{font-family:var(--f-display);font-size:var(--t-lead);letter-spacing:.02em}
.wordmark__en{font-size:var(--t-small);letter-spacing:.04em;color:var(--ink-3)}
.nav{display:flex;gap:clamp(14px,1.8vw,26px);font-size:var(--t-small)}
.nav a{color:var(--ink-3);padding:2px 0;transition:color .3s var(--e),transform .35s var(--e)}
.nav a:hover,.nav a:focus-visible{color:var(--ink);transform:translateY(-1px)}
.nav a.is-here{color:var(--ink)}

/* ---------- 首屏 ---------- */
.hero{padding-bottom:clamp(84px,13vh,150px)}
.hero__title{
  font-family:var(--f-display);
  font-weight:400;
  /* 按栏宽自适应：保证第二行「也懂 AI 产品落地。」在任何宽度都不断行 */
  font-size:clamp(1.85rem, 5.2vw, 3.9rem);
  font-size:min(3.9rem, 10.2cqw);
  line-height:1.08;
  letter-spacing:-.015em;
  display:flex;flex-direction:column;
}
.hero__title span{display:block}
.js .hero__title{opacity:0;transform:translateY(.28em);animation:rise .8s var(--e) .05s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero__lead{
  margin-top:clamp(22px,3vh,32px);
  max-width:34ch;
  font-size:var(--t-lead);
  line-height:1.6;
  color:var(--ink);
}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4.2vh,44px)}
.js .hero__lead,.js .hero__acts,.js .links{opacity:0;animation:softUp .8s var(--e) forwards}
.js .hero__lead{animation-delay:.16s}
.js .hero__acts{animation-delay:.26s}
.js .links{animation-delay:.34s}
@keyframes softUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);
  padding:14px 24px;
  font-size:var(--t-small);
  letter-spacing:.02em;
  transition:background .3s var(--e),color .3s var(--e),transform .35s var(--e);
}
.btn:hover,.btn:focus-visible{background:var(--ink-2);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:var(--paper-3);color:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);color:var(--paper)}
.btn small{font-size:inherit;color:currentColor;opacity:.66;letter-spacing:.02em;margin-left:2px}

.links{display:flex;gap:22px;flex-wrap:wrap;margin-top:clamp(30px,4.6vh,46px);font-size:var(--t-small)}
.links a,.textbtn{
  color:var(--ink-2);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(6,82,92,.32);
  transition:color .3s var(--e),text-decoration-color .3s var(--e);
}
.links a:hover,.links a:focus-visible,.textbtn:hover{color:var(--ink);text-decoration-color:currentColor}

/* ---------- 通用节 ---------- */
main > section{padding-bottom:var(--gap)}
.sec-title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-h2);
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:clamp(18px,2.6vh,28px);
}
.sec-title:empty{display:none}

.noscript{
  background:var(--paper-2);padding:clamp(18px,3vw,26px);
  margin-bottom:var(--gap);font-size:var(--t-small);line-height:1.8;color:var(--ink);
}
.noscript p{margin-bottom:10px;max-width:42ch}
.noscript a{text-decoration:underline;text-underline-offset:.22em}

/* ---------- 关于 ---------- */
.prose p{max-width:40ch;margin-bottom:1.1em;color:var(--ink)}
.prose p:first-child{color:var(--ink);font-size:var(--t-lead);line-height:1.55;margin-bottom:1.2em;max-width:30ch}
.prose p:last-child{margin-bottom:0}

/* ---------- 作品 ---------- */
.work__head{display:block}
.work__hint{font-size:var(--t-small);color:var(--ink-2);margin:0 0 clamp(16px,2.4vh,22px)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vh,32px)}
.filters button{
  padding:7px 14px;font-size:var(--t-small);
  color:var(--ink-2);background:var(--paper-2);
  transition:background .3s var(--e),color .3s var(--e);
}
.filters button:hover{background:var(--paper-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.ledger{display:flex;flex-direction:column}
.ledger__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:4px 18px;
  padding:clamp(18px,2.5vh,26px) clamp(8px,1.2vw,14px);
  transition:opacity .35s var(--e),background .35s var(--e),color .3s var(--e);
}
.ledger__row:hover .ledger__meta,.ledger__row.is-focus .ledger__meta{color:var(--ink-2)}
.ledger__row:hover,.ledger__row.is-focus{background:var(--paper-2)}
.ledger.is-hovering .ledger__row:not(:hover):not(.is-focus){opacity:.42}
.ledger__row button{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:4px 16px;
  text-align:left;width:100%;
}
.ledger__name{
  font-family:var(--f-display);font-size:var(--t-lead);
  line-height:1.3;letter-spacing:.01em;
  transition:transform .4s var(--e);
}
.ledger__row:hover .ledger__name,
.ledger__row.is-focus .ledger__name{transform:translateX(4px)}
.ledger__year{font-size:var(--t-small);color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;grid-row:1;grid-column:2}
.ledger__meta{font-size:var(--t-small);color:var(--ink-3);grid-column:1/-1}
.ledger__lead{
  grid-column:1/-1;max-width:38ch;margin-top:6px;
  font-size:var(--t-small);line-height:1.55;color:var(--ink-2);
  transition:color .3s var(--e);
}
.ledger__row:hover .ledger__lead,.ledger__row.is-focus .ledger__lead{color:var(--ink)}
.ledger__thumb{display:none}
.ledger__empty{font-size:var(--t-small);color:var(--ink-3);padding:18px 0}

/* 经历：同一套账本，第二列是职位 */
.ledger--exp .ledger__row{padding:clamp(16px,2.4vh,24px) clamp(8px,1.2vw,14px)}
.ledger--exp .ledger__name{font-size:var(--t-body)}
.ledger--exp .ledger__note{font-size:var(--t-small);color:var(--ink-3);grid-column:1/-1}

/* ---------- 能力：一张印刷的纸 ---------- */
.skills__note{max-width:36ch;font-size:var(--t-small);color:var(--ink);margin:0 0 clamp(22px,3vh,32px)}
.sheet{
  background:var(--field);color:var(--field-ink);
  padding:clamp(26px,4vw,44px) clamp(22px,3.4vw,40px);
  columns:2;column-gap:clamp(26px,3.6vw,46px);
  margin-left:calc(var(--pad) * -.28);
  margin-right:calc(var(--pad) * -.28);
}
.sheet__group{break-inside:avoid;margin-bottom:clamp(22px,3.4vh,32px)}
.sheet__group:last-child{margin-bottom:0}
.sheet__group h3{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-body);letter-spacing:.04em;
  color:#bcd6d8;margin-bottom:14px;
}
.sheet__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:10px 0}
.sheet__item + .sheet__item{margin-top:6px}
.sheet__item b{font-weight:400;font-size:var(--t-body)}
.sheet__item em{font-style:normal;font-size:var(--t-small);color:#a9c8cb;display:block;margin-top:2px}
.sheet__item span{font-size:var(--t-small);color:#cfe2e3;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 联系 ---------- */
.contact__lead{max-width:34ch;font-size:var(--t-lead);color:var(--ink);margin-bottom:clamp(24px,3.6vh,36px)}
.rows{display:flex;flex-direction:column}
.rows li{display:block}
.rows a,.rows .rowpad{
  display:grid;grid-template-columns:minmax(60px,84px) minmax(0,1fr);align-items:baseline;gap:16px;
  padding:clamp(14px,2vh,20px) clamp(10px,1.4vw,18px);
  font-family:var(--f-display);
  font-size:var(--t-h2);
  line-height:1.3;
  transition:background .35s var(--e),color .3s var(--e);
}
.rows__label{font-family:var(--f-text);font-size:var(--t-small);color:var(--ink-3);letter-spacing:.04em}
.rows a:hover .rows__label,.rows a:focus-visible .rows__label{color:#cfe2e3}
.rows__value{min-width:0}
.rows li:nth-child(odd) a,.rows li:nth-child(odd) .rowpad{background:var(--paper-2)}
.rows a:hover,.rows a:focus-visible{background:var(--ink);color:var(--paper)}
.rows small{font-family:var(--f-text);font-size:var(--t-small);color:var(--ink-3);letter-spacing:.02em}
.rows a:hover small,.rows a:focus-visible small{color:#cfe2e3}
.contact__foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,4vh,40px)}

/* ---------- 页脚：画面一半，菜单一半 ---------- */
.close{
  display:grid;grid-template-columns:50% 50%;
  background:var(--field);color:var(--field-ink);
  margin-top:clamp(60px,8vh,110px);
}
.close__media{position:relative;min-height:min(78svh,720px);overflow:hidden}
.close__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.close__menu{padding:clamp(30px,4.4vw,60px) var(--pad);display:flex;flex-direction:column}
.close__mark{font-size:var(--t-small);letter-spacing:.02em;color:#cfe2e3}
.close__nav{display:flex;flex-direction:column;gap:clamp(4px,.8vh,10px);margin:clamp(24px,4vh,44px) 0 clamp(30px,5vh,54px)}
.close__nav a{
  font-family:var(--f-display);
  font-size:var(--t-h2);
  line-height:1.3;
  transition:transform .4s var(--e),color .3s var(--e);
  align-self:flex-start;
}
.close__nav:hover a{color:#9cc3c6}
.close__nav a:hover,.close__nav a:focus-visible{color:var(--field-ink);transform:translateX(10px)}
.close__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;font-size:var(--t-small);line-height:1.9}
.close__label{color:#bcd6d8;margin-bottom:8px}
.close__cols a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(238,242,240,.35);transition:text-decoration-color .3s var(--e)}
.close__cols a:hover{text-decoration-color:var(--field-ink)}
.muted{color:#cfe2e3}
.close__legal{margin-top:auto;padding-top:clamp(28px,4vh,44px);font-size:var(--t-small);color:#e4efee}
.credits{margin-top:10px}
.credits summary{color:#cfe2e3;cursor:pointer;width:max-content}
.credits ul{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-width:52ch;line-height:1.7}

/* ---------- 案例详情 ---------- */
.detail:focus{outline:none}
.detail{
  position:fixed;inset:0;z-index:40;
  background:var(--paper);
  overflow:auto;
  overscroll-behavior:contain;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s var(--e),transform .5s var(--e);
}
.detail.is-open{opacity:1;transform:none}
.detail__bar{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(14px,2vh,20px) clamp(18px,4vw,56px);
  background:var(--paper);
  font-size:var(--t-small);
}
.detail__back{color:var(--ink-2);display:inline-flex;gap:8px;transition:color .3s var(--e),transform .35s var(--e)}
.detail__back:hover,.detail__back:focus-visible{color:var(--ink);transform:translateX(-3px)}
.detail__pos{color:var(--ink-3);margin-left:auto;margin-right:auto}
.detail__close{
  position:absolute;right:clamp(18px,4vw,56px);top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:15px;border-radius:50%;
  transition:background .3s var(--e),color .3s var(--e);
}
.detail__close svg{display:block}
.detail__close:hover,.detail__close:focus-visible{background:var(--ink);color:var(--paper)}
.detail__bar{position:sticky}
.detail__article{max-width:820px;margin:0 auto;padding:clamp(24px,5vh,56px) clamp(20px,4vw,40px) clamp(40px,6vh,72px)}
.detail__title{font-family:var(--f-display);font-size:clamp(1.9rem,1.15rem + 2.2vw,3.2rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.detail__sub{font-size:var(--t-lead);color:var(--ink-2);margin-top:12px}
.detail__lead{font-size:var(--t-lead);line-height:1.6;margin-top:clamp(22px,3vh,30px);max-width:36ch;color:var(--ink)}
.detail__meta{
  display:grid;grid-template-columns:1.55fr .9fr .9fr .9fr;gap:18px 24px;
  margin:clamp(26px,4vh,38px) 0 clamp(30px,4.6vh,46px);
  padding:18px 0;
  background:var(--paper-2);
  padding-left:clamp(14px,2vw,22px);padding-right:clamp(14px,2vw,22px);
  font-size:var(--t-small);
}
.detail__meta dt{color:var(--ink-3);margin-bottom:4px}
.detail__meta dd{line-height:1.5}
.detail__meta dd{margin:0}
.detail__article h3{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-lead);
  margin:clamp(30px,4.4vh,44px) 0 12px;
}
.detail__article p{max-width:44ch;color:var(--ink);margin-bottom:1em}
.detail__article p a,.prose a{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:rgba(6,82,92,.36);
  transition:text-decoration-color .3s var(--e);
}
.detail__article p a:hover,.detail__article p a:focus-visible,.prose a:hover{text-decoration-color:currentColor}
.detail__article blockquote{
  font-family:var(--f-display);
  font-size:var(--t-lead);
  line-height:1.45;
  color:var(--ink);
  margin:clamp(28px,4vh,40px) 0;
  max-width:26ch;
}
.detail figure{margin:clamp(28px,4.4vh,44px) 0}
.detail figure img{width:100%;height:auto;background:var(--paper-2);cursor:zoom-in;transition:opacity .3s var(--e)}
.detail figure img:hover{opacity:.9}
.detail figure.crop img{height:clamp(220px,34vw,420px);object-fit:cover}
.detail figure.crop--phone img{object-fit:cover;object-position:6% 20%;height:clamp(260px,40vw,500px)}
.detail figcaption{font-size:var(--t-small);color:var(--ink-3);margin-top:10px}
.detail figure video{width:100%;height:auto;background:var(--paper-2)}
.detail figure video.is-portrait{max-width:min(100%,26rem);margin-inline:auto}

.attach{margin-top:clamp(34px,5vh,52px);padding-top:clamp(20px,3vh,28px);background:var(--paper-2);padding:clamp(18px,3vw,26px)}
.attach h3{margin:0 0 4px;font-family:var(--f-display);font-size:var(--t-body)}
.attach p{font-size:var(--t-small);color:var(--ink-3);margin-bottom:14px}
.attach a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;
  transition:color .3s var(--e),padding-left .35s var(--e);
}
.attach a + a{margin-top:2px}
.attach a:hover,.attach a:focus-visible{color:var(--ink);padding-left:6px}
.attach b{font-weight:400}
.attach em{font-style:normal;display:block;font-size:var(--t-small);color:var(--ink-3);margin-top:2px}
.attach span{font-size:var(--t-small);color:var(--ink-3);white-space:nowrap}

.detail__nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,14px);padding:0 clamp(18px,4vw,56px) clamp(30px,5vh,54px);max-width:820px;margin:0 auto}
.detail__nav a{
  background:var(--paper-2);padding:clamp(20px,3vw,30px) clamp(18px,2.4vw,30px);
  display:flex;flex-direction:column;gap:6px;
  transition:background .35s var(--e);
}
.detail__nav a:hover,.detail__nav a:focus-visible{background:var(--field);color:var(--field-ink)}
.detail__nav small{font-size:var(--t-small);color:var(--ink-3)}
.detail__nav a:hover small{color:#cfe2e3}
.detail__nav b{font-family:var(--f-display);font-weight:400;font-size:var(--t-body)}
.detail__nav a:last-child{text-align:right;align-items:flex-end}
.detail__nav{margin-top:auto}

/* ---------- 大图 ---------- */
.lightbox:focus{outline:none}
.lightbox{
  position:fixed;inset:0;z-index:50;
  background:rgba(4,30,34,.975);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  opacity:0;transition:opacity .35s var(--e);
}
.lightbox.is-open{opacity:1}
.lightbox img{max-width:100%;max-height:76svh;width:auto;object-fit:contain}
.lightbox__close{
  position:absolute;top:clamp(12px,2.4vw,24px);right:clamp(12px,2.4vw,24px);
  color:#eef2f0;font-size:var(--t-small);padding:10px 14px;letter-spacing:.06em;
  transition:transform .3s var(--e);
}
.lightbox__close:hover{transform:rotate(90deg)}
.lightbox__cap{color:#cfe2e3;font-size:var(--t-small);margin-top:16px;text-align:center;max-width:60ch}

/* ---------- 复制提示 ---------- */
.copy-toast{
  position:fixed;left:50%;bottom:28px;z-index:55;
  margin:0;transform:translate(-50%,20px);
  background:var(--ink);color:var(--paper);
  padding:11px 20px;font-size:var(--t-small);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--e),transform .35s var(--e);
}
.copy-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- 入场 ---------- */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.is-in{opacity:1;transform:none;transition:opacity .75s var(--e),transform .75s var(--e)}
.js .rv.is-in:nth-child(2){transition-delay:.07s}
.js .rv.is-in:nth-child(3){transition-delay:.14s}

/* 平板：首屏左右两栏，标题在左，自述与动作在右，避免右侧整片空着 */
@media (min-width:601px) and (max-width:900px){
  .hero{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    column-gap:clamp(24px,4vw,44px);align-items:start;
  }
  .hero__title{grid-column:1/-1;grid-row:1}
  .hero__lead{grid-column:1;grid-row:2;margin-top:clamp(18px,3vh,26px);max-width:28ch}
  .hero__acts{grid-column:2;grid-row:2;margin-top:clamp(18px,3vh,26px);align-self:start;flex-direction:column;align-items:stretch}
  .hero__acts .btn{justify-content:space-between}
  .links{grid-column:1/-1}
}

/* ---------- 窄屏：固定的那一半先出现 ---------- */
@media (max-width:900px){
  .site{grid-template-columns:1fr}
  .stage{position:relative;height:clamp(240px,44svh,420px)}
  .stage__cap{color:#f2f7f6}
  .column{padding:0 clamp(18px,5vw,28px)}
  .topbar{padding:20px 0 44px}
  .wordmark__en{display:none}
  .hero{padding-bottom:clamp(56px,9vh,84px)}
  .hero__lead{max-width:30ch}
  .close{grid-template-columns:1fr}
  .close__media{min-height:46svh}
  .ledger__row{padding:16px 0}
  /* 用更高特异度压过入场动画的 opacity:1 */
  .js .ledger .ledger__row.is-in{opacity:.62}
  .js .ledger .ledger__row.is-in.is-focus{opacity:1;background:var(--paper-2)}
  .ledger__row{transition:opacity .45s var(--e),background .45s var(--e)}
  .ledger__row.is-focus .ledger__name{transform:none}
  .ledger__lead{color:var(--ink-2)}
  .ledger__row.is-focus .ledger__lead{color:var(--ink-2)}
  .ledger__thumb{
    display:block;grid-column:1/-1;margin:10px 0 4px;
    width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--paper-2);
  }
  .detail__nav{grid-template-columns:1fr}
  .detail__nav a:last-child{text-align:left;align-items:flex-start}
  .detail__meta{grid-template-columns:1fr 1fr}
  .rows a,.rows .rowpad{grid-template-columns:1fr;gap:2px;padding:14px 16px;align-items:start}
  .attach a{flex-direction:column;align-items:flex-start;gap:4px}
  .attach span{color:var(--ink-3)}
  .ledger__row button{grid-template-columns:minmax(0,1fr) auto}
  .ledger__meta{grid-column:1/-1}
  .ledger__year{grid-row:1;grid-column:2}
  .sheet{margin-left:calc(clamp(18px,5vw,28px) * -.4);margin-right:calc(clamp(18px,5vw,28px) * -.4)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none}
  .js .hero__title,.js .hero__lead,.js .hero__acts,.js .links{opacity:1;transform:none;animation:none}
  .stage__img.is-on{animation:none}
}

/* ---------- 打印：这一页就是简历 ---------- */
@media print{
  @page{margin:16mm}
  html,body{background:#fff;color:#000;font-size:10.5pt}
  .stage,.topbar,.nav,.filters,.work__hint,.hero__acts,.links,.contact__foot,
  .close__media,.detail,.lightbox,.copy-toast,.skip,.attach-btn{display:none !important}
  .site{display:block}
  .column{padding:0}
  .hero{padding-bottom:12pt}
  .hero__title{font-size:26pt;line-height:1.1;display:block}
  .hero__title span{display:inline;overflow:visible}
  .hero__lead{font-size:11pt;color:#333}
  main>section{padding-bottom:14pt;break-inside:avoid}
  .sec-title{font-size:14pt;margin-bottom:6pt}
  .ledger__row{padding:5pt 0;border-top:1px solid #ccc} /* taste-skill-ignore 打印的简历是真表格 */
  .ledger__thumb{display:none}
  .sheet{background:#eee;color:#000;padding:10pt}
  .sheet__group h3,.sheet__item em,.sheet__item span{color:#333}
  .rows a,.rows .rowpad{font-size:12pt;padding:5pt 6pt;background:#fff !important}
  .close{display:block;background:#fff;color:#000}
  .close__menu{padding:12pt 0 0}
  .close__mark,.close__label,.muted,.close__legal{color:#333}
  .close__nav{flex-direction:row;gap:10pt;margin:8pt 0}
  .close__nav a{font-size:11pt}
  a{text-decoration:none;color:#000}
}

/* ---------- 附件查看器 ---------- */
.viewer{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;
  background:var(--paper-2);
  opacity:0;transform:translateY(10px);
  transition:opacity .35s var(--e),transform .4s var(--e);
}
.viewer.is-open{opacity:1;transform:none}
.viewer:focus{outline:none}
.viewer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(12px,2vh,18px) clamp(16px,3.4vw,40px);
  background:var(--ink);color:var(--paper);
}
.viewer__name{font-size:var(--t-small);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer__acts{display:flex;align-items:center;gap:18px;flex:none}
.viewer__dl{font-size:var(--t-small);text-decoration:underline;text-underline-offset:.22em;text-decoration-color:rgba(247,249,248,.5);transition:text-decoration-color .3s var(--e)}
.viewer__dl:hover,.viewer__dl:focus-visible{text-decoration-color:var(--paper)}
.viewer__close{
  font-size:var(--t-small);letter-spacing:.04em;
  padding:8px 14px;background:var(--paper);color:var(--ink);
  transition:background .3s var(--e),color .3s var(--e);
}
.viewer__close:hover,.viewer__close:focus-visible{background:var(--paper-3)}
.viewer__body{flex:1;min-height:0;background:var(--paper-3);position:relative;display:flex;flex-direction:column}
.viewer__hint{
  margin:0;padding:12px clamp(16px,3.4vw,40px);
  background:var(--paper-2);color:var(--ink-2);font-size:var(--t-small);
}
.viewer__body iframe{flex:1;min-height:0;width:100%;border:0;display:block;background:#fff}