:root { --paper: #f7f7f5; --ink: #282b2f; --muted: #646b73; --line: #d8dcde; --blue: #c8e6f6; --green: #afe67c; --yellow: #ffdc60; --spring: cubic-bezier(.16,1,.3,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.8 "DM Sans","Noto Sans SC","Microsoft YaHei",sans-serif; letter-spacing: 0; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-underline-offset: 5px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #27739e; outline-offset: 5px; }
.wrap { width: min(1100px,calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 100; padding: 10px 18px; background: var(--yellow); }.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 20; background: #f7f7f5ed; backdrop-filter: blur(12px); border-bottom: 1px solid #282b2f12; }
.nav { display: flex; align-items: center; gap: 26px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 10px/1.1 "DM Sans",sans-serif; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 11px; background: #fff; box-shadow: 2px 3px 0 var(--ink); font-size: 13px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }.nav-links a, .nav-github { font-size: 12px; font-weight: 600; text-decoration: none; }.nav-links a:hover, .nav-github:hover { text-decoration: underline; }
.nav-links a[aria-current] { text-decoration: underline; text-decoration-color: #80bd5e; text-decoration-thickness: 3px; }.nav-github { border-left: 1px solid var(--line); padding-left: 26px; }.menu-button, .mobile-nav { display: none; }
.intro-stage { position: relative; padding-top: 58px; text-align: center; }.eyebrow { margin: 0 0 14px; color: var(--muted); font-size: 11px; font-weight: 700; }h1, h2, h3, p { margin-top: 0; }
.intro-stage h1 { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.3; }.name { position: relative; display: block; width: fit-content; margin: 12px auto 14px; font: 700 82px/1.2 "Playfair Display","STZhongsong","SimSun",serif; }.name-mark { position: absolute; top: 4px; right: -42px; color: #51983c; font: 34px/1 "DM Sans",sans-serif; transform: rotate(12deg); }
.intro-role { margin-bottom: 17px; font-size: 16px; font-weight: 600; }.intro-role > span { margin-inline: 10px; color: #a1a5a9; }.intro-summary { margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.9; }
.intro-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 25px; }.primary-link { display: inline-flex; gap: 25px; align-items: center; min-height: 43px; padding: 8px 17px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 3px 4px 0 var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; transition: transform 180ms,box-shadow 180ms; }.primary-link:hover { transform: translate(2px,2px); box-shadow: 1px 2px 0 var(--ink); }.text-link { font-size: 13px; font-weight: 600; text-decoration: none; }.text-link:hover { text-decoration: underline; }
.margin-note { position: absolute; left: 18px; top: 112px; width: 160px; transform: rotate(-7deg); }.sticker { display: inline-block; width: fit-content; padding: 7px 11px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 3px 4px 0 var(--ink); font-size: 10px; font-weight: 800; line-height: 1.4; white-space: nowrap; }.sticker-yellow { background: var(--yellow); }.sticker-green { background: var(--green); }.sticker-blue { background: var(--blue); }.handwritten { display: block; margin-top: 22px; color: #6c757d; font: 19px/1.5 "Patrick Hand","KaiTi",cursive; }
.identity-collage { position: absolute; top: 110px; right: 12px; width: 162px; height: 198px; transform: rotate(7deg); }.identity-paper { position: relative; height: 173px; padding: 14px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 5px 6px 0 #c1dced,7px 8px 0 var(--ink); text-align: left; }.identity-paper > span { font-size: 8px; font-weight: 700; }.identity-paper strong { position: relative; display: block; font: 700 60px/1.4 "Playfair Display",serif; }.identity-paper small { display: block; border-top: 1px solid var(--line); padding-top: 8px; font-size: 8px; }.identity-dot { display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 2px solid var(--ink); border-radius: 50%; background: #a5dd75; }.identity-collage .sticker { position: absolute; bottom: 3px; right: -12px; transform: rotate(-12deg); }
.bio-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 49px; padding: 23px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; }.bio-strip > div { padding-inline: 28px; border-right: 1px solid var(--line); }.bio-strip > div:first-child { padding-left: 0; }.bio-strip > div:last-child { border-right: 0; }.bio-strip span, .bio-strip strong, .bio-strip small { display: block; }.bio-strip span { color: var(--muted); font-size: 10px; }.bio-strip strong { margin-top: 5px; font-size: 14px; font-weight: 600; }.bio-strip small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.chapter { display: grid; grid-template-columns: 155px minmax(0,1fr); gap: 28px; padding-block: 82px; }.chapter-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }.chapter-label span:first-child { color: #717981; font-size: 10px; font-weight: 600; }.chapter-label span:last-child { font-weight: 600; }.about-body { display: grid; grid-template-columns: .9fr 1.2fr; gap: 46px; }h2 { font: 700 32px/1.5 "Playfair Display","STZhongsong","SimSun",serif; }.highlight { text-decoration: underline; text-decoration-color: #b6df9c; text-decoration-thickness: 10px; text-underline-offset: -4px; text-decoration-skip-ink: none; }.about-copy p { margin-bottom: 14px; color: #555f68; font-size: 14px; line-height: 1.95; }.about-copy p:last-child { margin-bottom: 0; }
.focus-section { background: #edf1f3; padding: 64px 0 72px; border-block: 1px solid #dfe5e8; }.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 35px; }.section-heading .chapter-label { flex-direction: row; gap: 18px; align-items: baseline; margin-bottom: 18px; }.section-heading h2 { margin-bottom: 0; }.section-heading > .sticker { transform: rotate(6deg); margin-right: 16px; }
.focus-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 10px 3px; }.focus-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 335px; padding: 23px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 5px 6px 0 #283039; background: #fff; transition: transform 280ms var(--spring),box-shadow 280ms; }.focus-card:nth-child(1) { transform: rotate(-1.5deg); }.focus-card:nth-child(2) { transform: translateY(8px) rotate(1deg); background: #f5faef; }.focus-card:nth-child(3) { transform: rotate(-1deg); background: #fff9e8; }.focus-card:hover { transform: translateY(-5px) rotate(0); box-shadow: 5px 11px 0 #283039; }
.card-index { font-size: 9px; font-weight: 600; color: #65717a; }.object-art { position: absolute; right: 14px; top: 13px; width: 75px; height: 75px; background: url('../lab/assets/agent-object-sprite.png') no-repeat; background-size: 200% 200%; filter: drop-shadow(0 5px 3px #24364520); }.art-ops { background-position: 0 0; }.art-sec { background-position: 0 100%; }.art-aaw { background-position: 100% 0; }
.focus-card h3 { margin: 48px 0 14px; font-size: 22px; font-weight: 600; }.focus-card p { margin-bottom: 20px; color: #535e66; font-size: 13px; line-height: 1.9; }.focus-card ul { list-style: none; padding: 0; margin: auto 0 20px; font-size: 11px; color: #5c6670; }.focus-card li::before { content: '+'; display: inline-block; width: 15px; color: #397250; }.focus-card a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid #cdd5d7; font-size: 11px; font-weight: 600; text-decoration: none; }.focus-card a:hover { text-decoration: underline; }
.journey-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 26px; }.journey-heading h2 { margin: 0; }.journey-heading .handwritten { margin: 0; color: #5b8164; transform: rotate(-5deg); }.timeline { border-top: 1px solid var(--line); }.timeline-row { position: relative; display: grid; grid-template-columns: 142px minmax(0,1fr); gap: 30px; padding: 29px 0; border-bottom: 1px solid var(--line); }.timeline-row time { font-size: 11px; color: #69757d; padding-top: 4px; }.timeline-copy h3 { margin-bottom: 6px; font-size: 19px; font-weight: 600; }.timeline-copy h3 > span { font-size: 13px; color: #6b747b; margin-left: 8px; }.timeline-copy p { color: #5e6870; font-size: 13px; line-height: 1.9; margin-bottom: 10px; }.timeline-copy p:last-child { margin-bottom: 0; }.timeline-copy .job-role { color: #303b44; font-size: 12px; margin-bottom: 14px; }.job-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }.current-tag { color: #386426; font-size: 10px; white-space: nowrap; }.current-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #6aab50; }
.contact-section { border-top: 1px solid var(--line); background: #fff; padding: 70px 0 68px; }.contact-inner { position: relative; text-align: center; }.contact-inner > .sticker { transform: rotate(-9deg); margin-bottom: 24px; }.contact-inner .eyebrow { font-size: 11px; font-weight: 400; }.contact-inner h2 { font-size: 40px; line-height: 1.4; margin-bottom: 20px; }.contact-intro { color: #68727a; font-size: 13px; line-height: 1.9; margin-bottom: 25px; }.email-link { display: inline-flex; align-items: center; gap: 24px; font-size: 23px; font-weight: 500; text-decoration: none; border-bottom: 2px solid #a3cf87; padding-bottom: 6px; }.email-link:hover { border-color: var(--ink); }.contact-secondary { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 22px; font-size: 11px; }.contact-secondary > span { color: #b8bfc4; }.contact-secondary a { text-decoration: none; }.contact-secondary a:hover { text-decoration: underline; }.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; color: #747d83; font-size: 10px; }.footer a { text-decoration: none; }.footer a:hover { color: var(--ink); }
@keyframes paper-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }.identity-collage, .margin-note { animation: paper-arrive 650ms var(--spring) both; }.identity-collage { animation-delay: 90ms; }
@media (min-width: 721px) and (max-height: 760px) { .intro-stage { padding-top: 32px; }.name { font-size: 68px; }.bio-strip { margin-top: 30px; padding-block: 17px; }.intro-summary { font-size: 15px; }.intro-actions { margin-top: 20px; } }
@media (max-width: 1050px) { .margin-note { left: 0; width: 145px; }.identity-collage { right: 0; width: 136px; }.identity-paper strong { font-size: 53px; }.identity-paper { height: 158px; }.identity-collage .sticker { bottom: 16px; }.about-body { gap: 26px; }.chapter { grid-template-columns: 110px minmax(0,1fr); gap: 25px; }.focus-card { padding: 20px; }.focus-grid { gap: 18px; }.timeline-row { grid-template-columns: 122px minmax(0,1fr); gap: 20px; } }
@media (max-width: 850px) { .identity-collage, .margin-note { display: none; }.chapter { grid-template-columns: 1fr; gap: 26px; }.chapter > .chapter-label { flex-direction: row; gap: 18px; align-items: baseline; }.focus-grid { grid-template-columns: 1fr; gap: 25px; }.focus-card { min-height: 0; padding: 26px; }.focus-card h3 { margin-top: 27px; }.focus-card p { max-width: 560px; }.focus-card ul { margin-bottom: 20px; }.focus-card:nth-child(n) { transform: none; }.focus-card:hover { transform: translateY(-3px); }.object-art { width: 88px; height: 88px; } }
@media (max-width: 720px) {
  html { scroll-padding-top: 86px; }.wrap { width: calc(100% - 40px); }.nav { min-height: 68px; }.nav-links, .nav-github { display: none; }.menu-button { display: grid; place-content: center; gap: 6px; width: 40px; height: 40px; margin-left: auto; border: 0; background: transparent; color: var(--ink); }.menu-button span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .2s; }.menu-button[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }.menu-button[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }.mobile-nav.open { display: flex; flex-direction: column; padding: 14px 20px 24px; border-bottom: 1px solid var(--line); }.mobile-nav a { padding: 9px 0; text-decoration: none; font-size: 14px; }.mobile-nav { position: absolute; top: 68px; width: 100%; background: var(--paper); }
  .intro-stage { padding-top: 30px; }.eyebrow { font-size: 10px; margin-bottom: 12px; }.intro-stage h1 { font-size: 17px; }.name { font-size: 55px; margin-top: 8px; margin-bottom: 12px; }.name-mark { font-size: 24px; right: -28px; }.intro-role { font-size: 13px; margin-bottom: 16px; }.intro-role > span { margin-inline: 5px; }.intro-summary { font-size: 14px; line-height: 1.85; }.desktop-break { display: none; }.intro-actions { margin-top: 21px; gap: 25px; }.primary-link { min-height: 41px; font-size: 12px; }.bio-strip { margin-top: 31px; padding: 15px 0; gap: 12px; grid-template-columns: 1fr 1fr; }.bio-strip > div { padding: 0; border: 0; }.bio-strip > div:last-child { display: none; }.bio-strip strong { font-size: 12px; line-height: 1.7; }.bio-strip small { font-size: 10px; }.bio-strip span { font-size: 9px; }
  .chapter { padding-block: 46px; gap: 23px; }.about-body { grid-template-columns: 1fr; gap: 18px; }h2 { font-size: 28px; line-height: 1.5; }.about-body h2 { margin-bottom: 0; }.about-copy p { font-size: 13px; }.focus-section { padding: 42px 0 46px; }.section-heading { display: block; margin-bottom: 26px; }.section-heading > .sticker { margin-top: 20px; margin-right: 0; transform: rotate(-3deg); font-size: 9px; }.section-heading .chapter-label { margin-bottom: 16px; }.focus-grid { gap: 23px; padding: 0 5px 0 0; }.focus-card { padding: 22px; }.focus-card h3 { font-size: 21px; }.focus-card p { font-size: 13px; }.focus-card a { font-size: 11px; }.focus-card ul { font-size: 10px; }.journey-heading { display: block; margin-bottom: 20px; }.journey-heading .handwritten { display: none; }.timeline-row { grid-template-columns: 1fr; gap: 12px; padding-block: 24px; }.timeline-copy h3 { font-size: 18px; }.timeline-copy p { font-size: 13px; }.contact-section { padding-block: 46px; }.contact-inner h2 { font-size: 33px; }.contact-intro { font-size: 12px; }.email-link { font-size: 19px; gap: 14px; }.contact-secondary { gap: 12px; }.footer { flex-wrap: wrap; gap: 8px 20px; padding-block: 23px; min-height: 80px; }.footer a:last-child { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }