.about-page { background: #000; }
html:has(body.about-page) { scroll-snap-type: none; scroll-padding-top: 0; }
.about-shell { width: min(100%, 1920px); }
.about-block { position: relative; width: 100%; overflow: hidden; background: #000; color: #fff; }
.about-container { width: min(1340px, calc(100% - 48px)); margin: 0 auto; }
.about-page .nav-links .is-current { color: var(--lime); }

.about-hero { height: max(720px, 100svh); min-height: 720px; }
.about-hero-center { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); text-align: center; }
.about-hero-line { position: relative; width: 80vw; max-width: 1536px; height: clamp(300px, calc(19.7917vw + 190px), 570px); margin: 0 auto; font-family: "Satoshi", "Avenir Next", Avenir, Helvetica, Arial, sans-serif; font-size: clamp(128px, calc(9.1667vw + 88px), 264px); line-height: .86; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.about-hero-line > span { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); }
.about-hero-line > span:first-child { left: 0; }
.about-hero-line > span:last-child { right: 0; }
.about-portrait-wrap { position: absolute; z-index: 2; left: 50%; top: 50%; width: clamp(300px, calc(19.7917vw + 190px), 570px); aspect-ratio: 1; transform: translate(-50%,-50%); transform-origin: center; animation: about-portrait-motion 16s linear infinite; }
.about-portrait-mask { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 275.92 275.92'%3E%3Cpath d='M79.08 0c46.85 59.21 122.08 89.51 196.84 79.08-59.2 46.74-89.37 122.02-79.08 196.84C149.99 216.71 74.76 186.41 0 196.84 59.2 150.1 89.37 74.82 79.08 0Z' fill='black'/%3E%3C/svg%3E") center / 58.0884211% 58.0884211% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 275.92 275.92'%3E%3Cpath d='M79.08 0c46.85 59.21 122.08 89.51 196.84 79.08-59.2 46.74-89.37 122.02-79.08 196.84C149.99 216.71 74.76 186.41 0 196.84 59.2 150.1 89.37 74.82 79.08 0Z' fill='black'/%3E%3C/svg%3E") center / 58.0884211% 58.0884211% no-repeat; }
.about-portrait-photo { position: absolute; inset: -15%; width: 130%; height: 130%; object-fit: cover; object-position: 50% 42%; transform-origin: center; animation: about-portrait-photo-lock 16s linear infinite; }
.about-portrait-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
@keyframes about-portrait-motion {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes about-portrait-photo-lock { from { transform: rotate(0deg) translateX(10px); } to { transform: rotate(-360deg) translateX(10px); } }
.about-resume { margin-top: 25px; }
.scroll-cue { position: absolute; bottom: 40px; left: 50%; width: 20px; height: 34px; border: 1px solid #fff; border-radius: 12px; transform: translateX(-50%); }
.scroll-cue span { position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; border-radius: 3px; background: #fff; transform: translateX(-50%); animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 0%,100%{opacity:.25;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,10px)} }

.about-intro { height: 1915px; min-height: 0; padding: 0; overflow: clip; overflow-clip-margin: 100px; background: #0a0a0a; }
.intro-layout { position: sticky; top: 70px; display: grid; grid-template-columns: 568px 738px; justify-content: space-between; align-items: start; height: calc(100svh - 70px); padding: 80px 0; overflow: clip; overflow-clip-margin: 100px; }
.intro-copy { width: 568px; }
.about-block:not(.about-hero) h2 { margin: 0; font-size: 72px; line-height: 1.2; font-weight: 900; letter-spacing: .02em; white-space: nowrap; }
.intro-copy > article { width: 532px; margin-top: 60px; }
.intro-copy > article + article { margin-top: 60px; }
.section-kicker { margin: 0; color: var(--lime); font-size: 24px; line-height: 48px; letter-spacing: .02em; }
.intro-copy h3 { width: 503px; margin: 0; font-size: 40px; line-height: 1.5; font-weight: 400; letter-spacing: .02em; text-transform: capitalize; }
.body-copy { width: 530px; margin-top: 32px; font-size: 20px; line-height: 1.8; letter-spacing: .02em; }
.body-copy p { margin: 0 0 20px; }
.body-copy p:last-child { margin-bottom: 0; }
.intro-copy article:nth-of-type(2) .body-copy { font-size: 19.5px; line-height: 36px; }
html[lang="zh-CN"] .intro-copy article:nth-of-type(2) .body-copy p { line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
.intro-copy, .intro-visuals { will-change: transform; }
.intro-visuals { position: relative; left: 40px; width: 738px; height: 1647px; }
.intro-visuals div { position: absolute; width: 450px; height: 607px; aspect-ratio: 450 / 607; background: #d9d9d9; transform-origin: center; transition: transform .35s ease; }
.intro-visuals div:hover { z-index: 2; transform: rotate(15deg); }
@media (min-width: 821px) {
  .intro-visuals div:nth-child(1):hover { transform: translate(-70px, 52px) rotate(15deg); }
  .intro-visuals div:nth-child(3):hover { transform: translateX(-70px) rotate(15deg); }
}
.intro-visuals img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-visuals div:nth-child(1) { top: 0; right: 0; }
.intro-visuals div:nth-child(2) { top: 500px; left: 0; background: #757575; }
.intro-visuals div:nth-child(3) { top: 1040px; right: 0; }

.about-statement { height: 274px; display: flex; align-items: center; padding: 10px; background: var(--lime); color: #000; }
.statement-inner { display: grid; grid-template-columns: 270px 390px 390px 270px; width: 1340px; margin: 0 auto; }
.statement-inner > div { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 18px; border-right: 1.5px solid rgba(0,0,0,.35); }
.statement-inner > div:first-child { justify-content: flex-start; }
.statement-inner > div:last-child { justify-content: flex-end; border-right: 0; }
.statement-inner strong { font-size: 52px; line-height: 1; font-weight: 500; }
.statement-inner strong.is-counting { font-variant-numeric: tabular-nums; }
.statement-inner span { font-size: 16px; line-height: 1.6; font-weight: 500; }

.about-experience { min-height: 1347px; padding: 160px 0 40px; background: #0a0a0a; }
.experience-group h2 { height: 86px; }
.education-row { display: grid; grid-template-columns: 620px 620px; justify-content: space-between; margin-top: 40px; padding: 40px 0; border-top: 1px solid #212121; border-bottom: 1px solid #212121; }
.education-row article { display: grid; grid-template-columns: 64px 501px; gap: 39px; align-items: center; }
.school-logo { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 1px solid #212121; border-radius: 13px; background: #000; }
.school-logo img { width: 100%; height: 100%; object-fit: cover; }
.education-row h3, .experience-list h3, .project-list h3, .process-list h3 { margin: 0; color: var(--lime); font-size: 20px; line-height: 1.3; letter-spacing: .02em; }
.education-row p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: .02em; }
.work-group { margin-top: 200px; }
.experience-list, .project-list, .process-list { margin-top: 40px; border-top: 1px solid #212121; }
.experience-list article, .project-list article { display: grid; grid-template-columns: 178px 1fr; gap: 39px; padding: 40px 0; border-bottom: 1px solid #212121; }
.experience-list time, .project-list time { color: #949494; font-size: 20px; line-height: 20px; font-weight: 700; letter-spacing: .02em; }
.experience-list header, .project-list header { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.experience-list header strong, .project-list header strong { font-size: 20px; line-height: 20px; text-align: right; white-space: nowrap; }
.experience-list article > div > p { margin: 16px 0 0; font-size: 16px; line-height: 1.8; letter-spacing: .02em; }
.experience-list article > div > p b { font-size: 18px; font-weight: 900; }

.about-projects { min-height: 1968px; padding: 120px 0 160px; background: #0a0a0a; }
.project-list article { grid-template-columns: 178px 1fr; }
.project-list ul { margin: 16px 0 0; padding-left: 24px; font-size: 16px; line-height: 1.8; letter-spacing: .02em; }
.project-list li { padding-left: 0; }

.about-process { min-height: 1300px; padding: 0; background: #0a0a0a; }
.process-list article { display: grid; grid-template-columns: 64px 254px 1fr; gap: 56px; align-items: center; min-height: 120px; padding: 20px 0; border-bottom: 1px solid #212121; }
.process-list article:first-child { border-top: 0; }
.process-list article > .process-icon { position: relative; width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; box-sizing: border-box; border: 1px solid #212121; border-radius: 13px; background: #0a0a0a; color: #fff; transition: border-color .2s ease, color .2s ease; }
.process-icon img { display: block; width: 37.62px; height: 37.62px; object-fit: contain; object-position: center; opacity: 0; }
.process-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 37.62px; height: 37.62px; background: currentColor; transform: translate(-50%, -50%); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.process-list article:nth-child(1) .process-icon::after { -webkit-mask-image: url("images/about-how/build-products.svg"); mask-image: url("images/about-how/build-products.svg"); }
.process-list article:nth-child(2) .process-icon::after { -webkit-mask-image: url("images/about-how/simplify-complexity.svg"); mask-image: url("images/about-how/simplify-complexity.svg"); }
.process-list article:nth-child(3) .process-icon::after { -webkit-mask-image: url("images/about-how/create-systems.svg"); mask-image: url("images/about-how/create-systems.svg"); }
.process-list article:nth-child(4) .process-icon::after { -webkit-mask-image: url("images/about-how/connect-people.svg"); mask-image: url("images/about-how/connect-people.svg"); }
.process-list article:nth-child(5) .process-icon::after { -webkit-mask-image: url("images/about-how/design-curiosity.svg"); mask-image: url("images/about-how/design-curiosity.svg"); }
.process-list article:nth-child(6) .process-icon::after { -webkit-mask-image: url("images/about-how/create-clarity.svg"); mask-image: url("images/about-how/create-clarity.svg"); }
.process-list article:nth-child(7) .process-icon::after { -webkit-mask-image: url("images/about-how/tell-stories.svg"); mask-image: url("images/about-how/tell-stories.svg"); }
.process-list article:nth-child(8) .process-icon::after { -webkit-mask-image: url("images/about-how/keep-expanding.svg"); mask-image: url("images/about-how/keep-expanding.svg"); }
.process-list article:hover > .process-icon { border-color: #e1fc00; color: #e1fc00; }
.process-list p { margin: 0; font-size: 16px; line-height: 1.8; letter-spacing: .02em; }

.about-tools { min-height: 618px; padding: 0; background: #0a0a0a; }
.tools-grid { display: grid; grid-template-columns: repeat(8, 88px); justify-content: space-between; row-gap: 60px; margin-top: 80px; }
.tools-grid figure { width: 88px; margin: 0; text-align: center; }
.tools-grid figure > div { width: 64px; height: 64px; margin: 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #212121; border-radius: 13px; background: #000; opacity: .6; transition: border-color .2s ease, opacity .2s ease; }
.tools-grid figure.is-primary > div { border-color: #212121; opacity: .6; }
.tools-grid figure:hover > div { border-color: #e1fc00; opacity: 1; }
.tools-grid img { width: 100%; height: 100%; object-fit: contain; }
.tools-grid figcaption { margin-top: 16px; font-size: 18px; line-height: 20px; font-weight: 700; white-space: nowrap; }

html[lang="zh-CN"] .about-page h1, html[lang="zh-CN"] .about-page h2, html[lang="zh-CN"] .about-page h3 { font-weight: 600; }
html[lang="zh-CN"] .about-hero-line { font-family: "Satoshi", "Avenir Next", Avenir, Helvetica, Arial, sans-serif; font-weight: 900; }
html[lang="zh-CN"] .about-projects { min-height: auto; }

@media(max-width:1024px){
  .about-hero-line{font-size:clamp(88px,14vw,144px)}
  .about-portrait-wrap{width:clamp(250px,33vw,360px)}
  .about-block:not(.about-hero) h2{font-size:clamp(50px,6vw,72px)}
  .intro-layout{grid-template-columns:42% 55%}.intro-copy,.intro-copy>article,.intro-copy h3,.body-copy{width:100%}.intro-visuals{width:100%}
  .statement-inner{grid-template-columns:repeat(4,1fr);width:100%}
  .education-row{grid-template-columns:1fr 1fr;gap:40px}.education-row article{grid-template-columns:64px 1fr}
  .experience-list article,.project-list article{grid-template-columns:160px 1fr;gap:28px}
  .process-list article{grid-template-columns:54px 220px 1fr;gap:32px}.process-list article>.process-icon{width:54px;height:54px;border-radius:11px}.process-icon img,.process-icon::after{width:29.07px;height:29.07px}
  .tools-grid{grid-template-columns:repeat(8,72px)}.tools-grid figure{width:72px}.tools-grid figure>div{width:54px;height:54px}.tools-grid figcaption{font-size:14px}
}

@media(max-width:820px){
  .about-container{width:calc(100% - 48px)}
  .about-hero{min-height:650px}
  .about-hero-line{font-size:clamp(52px,14vw,96px)}
  .about-portrait-wrap{width:min(37vw,250px)}
  .about-intro,.about-experience,.about-projects,.about-process,.about-tools{height:auto;min-height:auto;padding:80px 0;overflow:hidden}
  .about-block:not(.about-hero) h2{height:auto;font-size:clamp(42px,9vw,64px)}
  .intro-layout{position:static;grid-template-columns:1fr;height:auto;padding:0;overflow:visible}.intro-copy,.intro-visuals{transform:none!important;will-change:auto}.intro-copy{width:100%}.intro-copy>article{margin-top:48px}.section-kicker{font-size:20px}.intro-copy h3{font-size:32px}.body-copy{font-size:18px}
  .intro-visuals{left:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;height:auto;margin-top:70px}.intro-visuals div{position:static;width:100%;height:auto;aspect-ratio:480/647}.intro-visuals div:nth-child(3){grid-column:2}
  .about-statement{height:auto;padding:40px 24px}.statement-inner{grid-template-columns:1fr 1fr;gap:32px}.statement-inner>div,.statement-inner>div:first-child,.statement-inner>div:last-child{justify-content:flex-start;border:0}.statement-inner strong{font-size:44px}
  .education-row{grid-template-columns:1fr;gap:32px}.work-group{margin-top:80px}.education-row article{grid-template-columns:58px 1fr}.school-logo{width:58px;height:58px}
  .experience-list article,.project-list article{grid-template-columns:1fr;gap:18px;padding:32px 0}.experience-list header,.project-list header{flex-direction:column;gap:10px}.experience-list header strong,.project-list header strong{text-align:left;white-space:normal}
  .process-list article{grid-template-columns:54px 1fr;gap:24px;padding:28px 0}.process-list article>.process-icon{width:54px;height:54px;border-radius:11px}.process-icon img,.process-icon::after{width:29.07px;height:29.07px}.process-list p{grid-column:2}
  .tools-grid{grid-template-columns:repeat(4,72px);justify-content:space-between;row-gap:42px;margin-top:60px}
}

@media(max-width:520px){
  .about-hero-line{font-size:13.5vw}.about-portrait-wrap{width:35vw}
  .about-resume{margin-top:35px}
  .about-container{width:calc(100% - 32px)}
  .intro-copy h3{font-size:28px}.body-copy{font-size:16px}.intro-visuals{gap:12px}
  .statement-inner{grid-template-columns:1fr}.statement-inner>div{min-height:60px}.statement-inner strong{min-width:80px}
  .education-row article{grid-template-columns:48px 1fr;gap:16px}.school-logo{width:48px;height:48px;border-radius:10px}
  .education-row h3,.experience-list h3,.project-list h3,.process-list h3{font-size:17px}.experience-list time,.project-list time{font-size:17px}
  .tools-grid{grid-template-columns:repeat(3,72px)}
}

@media(prefers-reduced-motion:reduce){.scroll-cue span,.about-portrait-wrap,.about-portrait-photo{animation:none}.about-portrait-wrap{transform:translate(-50%,-50%)}}