/* About page polish (about.js marks the elements). */
/* section headings: same voice as the homepage headings (Urbanist, tight, the second half muted) */
h2.framer-text.lh-ab-h { font: 600 44px/1.04 Urbanist, Manrope, system-ui, sans-serif !important; letter-spacing: -.04em !important; color: #0b0b0c !important; }
h2.framer-text.lh-ab-h * { font: inherit !important; letter-spacing: inherit !important; }
h2.framer-text.lh-ab-h { white-space: nowrap; }
/* Framer sized the heading boxes for 16px text; about.js marks their wrappers so the bigger heading isn't clipped */
.lh-ab-wrap { overflow: visible !important; }
div:has(> h2.framer-text.lh-ab-h) { width: max-content !important; }
h2.framer-text.lh-ab-h .lh-mu, h2.framer-text.lh-ab-h > span { color: #9aa3b5 !important; }
/* small labels: the homepage eyebrow (mono, uppercase, blue square) */
p.framer-text.lh-ab-label { font: 500 13px/1.4 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: .08em !important; text-transform: uppercase; color: #6b6b6b !important; }
p.framer-text.lh-ab-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 1px 0; background: #224bf0; vertical-align: middle; }


/* ---- type, unified with the homepage: headings Urbanist 600 (Pixelify Sans for the name), body Manrope,
   small labels Geist Mono. The iPod and the footer keep their own type. ---- */
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_gf/pixelify/pixelify-latin.woff2) format("woff2"); }
/* "About Me" and "I'M Leqi Huang" */
.framer-w5ee1u-container [aria-label], .framer-w5ee1u-container [aria-label] * { font-family: Urbanist, Manrope, system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -.045em !important; color: #0b0b0c !important; }
/* "Me" in the pixel font, like the homepage's accent word (Framer splits the title into one span.char per letter) */
.framer-w5ee1u-container [aria-label] .char:nth-last-child(-n+2) { font-family: "Pixelify Sans", "Geist Mono", monospace !important; font-weight: 600 !important; letter-spacing: 0 !important; font-size: 1.16em; line-height: .8; }
.framer-w5ee1u-container [aria-label] .char:nth-last-child(2) { margin-left: .08em; }
.framer-wlfy5x-container, .framer-wlfy5x-container * { font-family: Urbanist, Manrope, system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -.03em !important; }
.framer-7cqdyh-container, .framer-7cqdyh-container * { font-family: "Pixelify Sans", "Geist Mono", monospace !important; font-weight: 700 !important; letter-spacing: 0 !important; }
/* the pinned note, photo captions, the Figma label */
.framer-1u2c3bm p, .framer-1ru2q8n-container, .framer-1ru2q8n-container *, .framer-1o88ibt-container, .framer-1o88ibt-container * { font-family: Manrope, system-ui, sans-serif !important; }
.framer-1u2c3bm p { font-size: 15px !important; font-weight: 500 !important; }
/* bio, study, info: homepage body copy (Manrope 17 / 1.6) */
.framer-187apgh-container h1, .framer-am7r95 h1, .framer-1n52j1h-container h1 { font-family: Manrope, system-ui, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: -.005em !important; color: #333 !important; }
.framer-187apgh-container h1 *, .framer-am7r95 h1 *, .framer-1n52j1h-container h1 * { font-family: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; }
p.framer-text.lh-ab-label { font-size: 14px !important; letter-spacing: .06em !important; }
/* value cards: homepage card title (Manrope 600) + body */
.framer-1xkt5i8 h3, .framer-1xkt5i8 h3 * { font-family: Manrope, system-ui, sans-serif !important; font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: #0b0b0c !important; }
.framer-1xkt5i8 p, .framer-1xkt5i8 p * { font-family: Manrope, system-ui, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #5f6670 !important; }
/* the desk: its heading becomes a homepage section heading, the hint uses Manrope */
.lh-ab-deskh { font-family: Urbanist, Manrope, system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -.045em !important; text-transform: none !important; color: #0b0b0c !important; }
.lh-ab-deskh .lh-px { font-family: "Pixelify Sans", "Geist Mono", monospace !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #9aa3b5; }
.lh-ab-deskhint { font-family: Manrope, system-ui, sans-serif !important; font-weight: 500 !important; }

/* ---- polish: the Study label sits flush with its text; interests and value cards respond to the pointer ---- */
.framer-1o2jzzv { justify-content: flex-start !important; }
.framer-1a3wvkx > * { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; border-radius: 12px; }
.framer-1a3wvkx > *:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -10px rgba(11,11,12,.25); }
.framer-1xkt5i8 > * { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; border-radius: 16px; }
.framer-1xkt5i8 > *:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -16px rgba(11,11,12,.3); }
/* scroll reveal (about.js adds .lh-rv, then .lh-in when the block enters the viewport). Uses the separate `translate`
   property so Framer's own transforms and the hover lift above are left alone. */
.lh-rv { opacity: 0; translate: 0 22px; transition: opacity .6s ease var(--rd, 0ms), translate .8s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms); }
.lh-rv.lh-in { opacity: 1; translate: 0 0; }
.framer-1a3wvkx > .lh-rv { transition: opacity .5s ease var(--rd, 0ms), translate .6s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms), transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.framer-1xkt5i8 > .lh-rv { transition: opacity .6s ease var(--rd, 0ms), translate .8s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms), transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { .framer-1a3wvkx > *, .framer-1xkt5i8 > * { transition: none; } .lh-rv { opacity: 1; translate: none; } }

/* ---- intro block (about.js): quick facts, lead line, keyword highlights, Study / Tools label rows.
   Same voice as the case-study pages. Framer's own Study and Info blocks (and the phone + grey squares beside Study)
   are replaced by the rows. ---- */
.framer-xkq78i, .framer-ligp3f, .framer-hxxm1k, .framer-1c03pva { display: none !important; }
#lh-ab-intro, #lh-ab-rows { width: 100%; max-width: 760px; align-self: flex-start; font-family: Manrope, system-ui, sans-serif; }
.lh-ab-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0 0 56px; padding: 0 0 28px; border-bottom: 1px solid #ececec; }
.lh-ab-facts dt { font: 500 13px/1.4 Manrope, system-ui, sans-serif; color: #8a8f98; margin: 0 0 8px; }
.lh-ab-facts dd { margin: 0; font: 500 15px/1.45 Manrope, system-ui, sans-serif; color: #0b0b0c; }
.lh-ab-facts dd span { display: block; color: #8a8f98; font-weight: 400; font-size: 14px; }
.lh-ab-lead { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid #0b0b0c; font: 500 22px/1.45 Manrope, system-ui, sans-serif; letter-spacing: -.01em; color: #0b0b0c; }
.lh-ab-lead b { font-weight: 700; }
.framer-w49vh6 { height: auto !important; align-items: flex-start !important; }
mark.lh-hl { background: #f0f1f3; color: #0b0b0c !important; padding: 1px 3px; border-radius: 5px; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lh-ab-tab { display: inline-block; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1.5px solid #0b0b0c; font: 600 14px/1.4 Manrope, system-ui, sans-serif; color: #0b0b0c; }
.lh-ab-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid #ececec; }
.lh-ab-rl { font: 600 15px/1.6 Manrope, system-ui, sans-serif; color: #0b0b0c; }
.lh-ab-rc { margin: 0; font: 400 16px/1.7 Manrope, system-ui, sans-serif; color: #5f6670; }
.lh-ab-ic { width: 18px; height: 18px; border-radius: 5px; vertical-align: -3px; object-fit: contain; }

/* ---- phone layout (≤ 809px). Framer only designed this page at 1200px; the page now uses width=device-width and these
   rules turn the desktop blocks into one column. Decorative floating objects are hidden; the desk is scaled to fit by about.js. ---- */
@media (max-width: 809.98px) {
  .framer-7TWSk, .framer-14gghkz-container, section.framer-8riUF { width: 100% !important; max-width: 100vw; }
  section.framer-8riUF { padding: 56px 20px 24px !important; overflow-x: clip; }
  section.framer-8riUF .framer-xcxl1o { width: 100% !important; gap: 48px !important; }
  section.framer-8riUF > *, section.framer-8riUF .framer-xcxl1o > * { max-width: 100%; }
  /* floating decorations */
  .framer-1afo443-container, .framer-6hc1m2, .framer-1c03pva, .framer-11bjd0x, .framer-hxxm1k, .framer-m0mbu7, .framer-1o88ibt-container { display: none !important; }
  /* hero: title, portrait, hello line, then the pinned note */
  .framer-w5ee1u-container div[aria-label] { font-size: 56px !important; }
  .framer-cbwj1r { justify-content: center !important; }
  .framer-16tbmku { gap: 28px !important; }
  .framer-16tbmku { height: auto !important; padding-bottom: 150px !important; } /* room for the pinned note, which Framer offsets below its box */
  .framer-1i5qfu9 { flex-direction: column !important; align-items: center !important; gap: 20px !important; width: 100% !important; height: auto !important; }
  .framer-1y75m99-container { flex: none !important; width: 100% !important; max-width: 330px !important; order: 0; }
  .framer-dqn1r9 { order: 1; transform: none !important; position: relative !important; inset: auto !important; align-items: center !important; }
  .framer-1tla2we-container { position: relative !important; top: auto !important; left: auto !important; order: 2; align-self: center; }
  .framer-1ru2q8n-container { display: none !important; }
  /* bio, study, info: full width, one column */
  .framer-w49vh6, .framer-xkq78i, .framer-ligp3f { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; overflow: visible !important; }
  .framer-187apgh-container, .framer-1kzaf9m, .framer-am7r95, .framer-bm643m, .framer-1n52j1h-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .framer-187apgh-container h1, .framer-am7r95 h1, .framer-1n52j1h-container h1 { line-height: 1.6 !important; }
  .framer-am7r95, .framer-am7r95 * { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; }
  /* interests and values */
  section.framer-htpem7, section.framer-35b6fe { width: 100% !important; padding: 48px 0 0 !important; overflow: visible !important; }
  .framer-nnw6g8, .framer-1r72vsv, .framer-1z0od7s, .framer-1llmlfw { width: 100% !important; padding: 0 !important; }
  h2.framer-text.lh-ab-h { font-size: 34px !important; white-space: normal; }
  div:has(> h2.framer-text.lh-ab-h) { width: 100% !important; }
  .framer-1a3wvkx { gap: 8px !important; }
  .framer-1xkt5i8 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; }
  .framer-1xkt5i8 > * { width: auto !important; min-width: 0; }
  /* the desk keeps its 1072px design and is scaled down to fit (about.js sets --dz) */
  /* transform (not zoom) so the desk component still measures itself at 1072px and keeps its layout */
  .framer-ho5kf3 { justify-content: flex-start !important; align-items: flex-start !important; width: 100% !important; height: calc(700px * var(--dz, .33)) !important; margin-top: 40px; overflow: hidden; }
  .framer-1u6vqf8-container { width: 1072px !important; flex: none !important; transform: scale(var(--dz, .33)); transform-origin: 0 0; }
}
@media (max-width: 809.98px) {
  .lh-ab-facts { grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-bottom: 40px; }
  .lh-ab-lead { font-size: 19px; padding-left: 14px; }
  .lh-ab-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
}
@media (max-width: 420px) { .framer-1xkt5i8 { grid-template-columns: 1fr !important; } }