/* me.zyw052.com 名片站样式 —— 与主站同 main.css 规则子集，全部经 var(--token) 引用 */
html, body { overflow-x: clip; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans);
  font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 44rem; margin-inline: auto; padding-inline: var(--s-16); }

.nav { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.nav-brand { font-weight: 700; color: var(--text); text-decoration: none; }
.nav-links { display: flex; gap: var(--s-24); font-size: var(--fs-14); }
.nav-links a { color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); }

.card { padding-block: var(--s-48) var(--s-96); }
.card-head { display: flex; align-items: center; gap: var(--s-24); padding-block: var(--s-32); }
.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--bg-elev); }
.avatar-fb { display: none; align-items: center; justify-content: center; width: 72px; height: 72px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev);
  color: var(--accent); font-weight: 800; font-size: var(--fs-29); }
.card-id h1 { margin: 0; font-size: var(--fs-29); font-weight: 800; letter-spacing: var(--tr-tight2); line-height: var(--lh-tight); }
.role { margin: var(--s-8) 0 0; color: var(--text-muted); font-size: var(--fs-14); }
.headline { margin: var(--s-32) 0 0 0; font-size: var(--fs-19); font-weight: 600; letter-spacing: var(--tr-tight2); }
.bio { margin: var(--s-16) 0 0; color: var(--text-muted); max-width: var(--maxw-text); }

.sec { padding-block: var(--s-32) 0; border-top: 1px solid var(--border); margin-top: var(--s-32); }
.sec h2 { margin: 0 0 var(--s-16); font-size: var(--fs-19); font-weight: 700; display: flex; gap: var(--s-16); align-items: baseline; }
.no { color: var(--accent); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tr-wide); }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.tags li { font-size: var(--fs-14); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 6px 14px; background: var(--bg-elev); }

.works { list-style: none; margin: 0; padding: 0; }
.work { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--s-16); align-items: baseline;
  padding: var(--s-16) 0; border-bottom: 1px solid var(--border); }
.w-no { color: var(--text-faint); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.w-body h4 { margin: 0; font-size: var(--fs-16); font-weight: 700; display: inline; }
.w-body p { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-14); }
.w-meta { font-size: var(--fs-12) !important; color: var(--text-faint) !important; }
.w-src { font-size: var(--fs-12); color: var(--accent); text-decoration: none; white-space: nowrap; }
.w-src:hover, .w-src:focus-visible { color: var(--accent-ink); text-decoration: underline; }
.w-src-void { color: var(--text-faint); }

.foot h2 { margin: 0 0 var(--s-16); font-size: var(--fs-19); font-weight: 700; display: flex; gap: var(--s-16); align-items: baseline; }
.foot-line { margin: 0; font-size: var(--fs-16); display: flex; gap: var(--s-16); flex-wrap: wrap; }
.foot-line a { color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.foot-line a:hover, .foot-line a:focus-visible { color: var(--accent-ink); }
.foot-sub { margin: var(--s-8) 0 0; color: var(--text-faint); font-size: var(--fs-12); }
.foot-sub a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 639px) { .work { grid-template-columns: 2.25rem 1fr; } .w-src { grid-column: 2; justify-self: start; } }