/* Homepage co-founder cards + inline profile panel.
   Hover (with intent delay) or click a card: the shared panel opens below and the section grows.
   Desktop: panel spans both cards, notch points at the active card. Narrow: panel sits right under
   the tapped card. Markup generated by build_cf.py; behaviour in /cf-cards.js. */
.hp-cf { display: grid; grid-template-columns: 140px 1fr; gap: 20px 24px; align-items: start; margin-top: 26px; }
.hp-cf-k { padding-top: 46px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-ink-muted); }
.hp-cf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp-cf-btn { grid-column: 2; justify-self: start; }
.hp-cf .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* card = toggle button */
.hp-cf-card { all: unset; box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; background: #fff; border: 1px solid var(--border-paper); border-radius: 16px; transition: border-color .3s, box-shadow .4s var(--e, ease), transform .4s var(--e, ease); }
.hp-cf-card:hover { border-color: rgba(11,26,74,.24); box-shadow: 0 16px 34px -26px rgba(11,26,74,.45); transform: translateY(-2px); }
.hp-cf-card:focus-visible { outline: 2px solid var(--ink-2, #2F55A8); outline-offset: 3px; }
.hp-cf-card[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 16px 34px -26px rgba(11,26,74,.45); transform: none; }
.hp-cf-list.has-open .hp-cf-card[aria-expanded="false"] { opacity: .72; }
.hp-cf-list.has-open .hp-cf-card[aria-expanded="false"]:hover { opacity: 1; }
.hp-cf-card img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1px var(--border-paper), 0 0 0 4px #fff, 0 0 0 5px rgba(11,26,74,.08); }
.hp-cf-t { display: block; flex: 1; min-width: 0; }
.hp-cf-t b { display: block; font: 500 20px/1.2 var(--font-display); color: var(--ink); }
.hp-cf-t .hp-cf-en { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--font-body); color: var(--text-ink-soft); }
.hp-cf-r { display: block; margin-top: 4px; font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); }
.hp-cf-t em { display: block; margin-top: 7px; font-style: normal; font-size: 13.5px; line-height: 1.45; color: var(--text-ink-soft); }
.hp-cf-t .nw { white-space: nowrap; }
.hp-cf-plus { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-paper); transition: background .3s, border-color .3s, transform .45s var(--e, ease); }
.hp-cf-plus::before, .hp-cf-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); border-radius: 1px; transition: background .3s; }
.hp-cf-plus::after { transform: rotate(90deg); }
.hp-cf-card:hover .hp-cf-plus { border-color: rgba(11,26,74,.35); }
.hp-cf-card[aria-expanded="true"] .hp-cf-plus { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); }
.hp-cf-card[aria-expanded="true"] .hp-cf-plus::before, .hp-cf-card[aria-expanded="true"] .hp-cf-plus::after { background: #fff; }

/* panel: in the flow, height animates 0fr -> 1fr so the section opens */
.hp-cf-panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; margin-top: -16px; transition: grid-template-rows .55s var(--e, cubic-bezier(.2,.7,.2,1)), margin-top .55s var(--e, ease); }
.hp-cf-panel.is-open { grid-template-rows: 1fr; margin-top: 0; }
.hp-cf-clip { min-height: 0; overflow: hidden; padding-top: 10px; }
.hp-cf-box { position: relative; margin-bottom: 2px; background: #fff; border: 1px solid var(--border-paper); border-radius: 18px; }
.hp-cf-box::before { content: ""; position: absolute; top: -8px; left: var(--nx, 56px); width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--border-paper); border-top: 1px solid var(--border-paper); transform: rotate(45deg); transition: left .45s var(--e, ease); }
.hp-cf-prof { padding: 34px 38px 0; animation: cfIn .5s var(--e, ease) both; }
.hp-cf-prof[hidden] { display: none; }
@keyframes cfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hp-cf-lab { margin: 0 0 14px; font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-ink-muted); }
.hp-cf-quote { margin: 0; position: relative; padding-left: 22px; max-width: 46em; }
.hp-cf-quote::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--coral, #E59375); }
.hp-cf-quote p { margin: 0; font: italic 400 24px/1.42 var(--font-display); color: var(--ink); text-wrap: pretty; }
.hp-cf-pe { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border-paper); }
.hp-cf-exp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
.hp-cf-exp li { display: flex; flex-direction: column; gap: 10px; }
.hp-cf-lg { display: flex; align-items: center; gap: 12px; height: 30px; }
.hp-cf-lg img { display: block; height: 24px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.hp-cf-lg img[src*="brown"], .hp-cf-lg img[src*="harvard"] { height: 28px; }
.hp-cf-lg img[src*="mckinsey"] { height: 14px; max-width: 140px; }
.hp-cf-lg img[src*="deloitte"], .hp-cf-lg img[src*="caltech"] { height: 18px; }
.hp-cf-lg img[src*="microsoft"] { height: 20px; }
.hp-cf-lg img[src*="apple"] { height: 22px; }
.hp-cf-lg img[src*="tsinghua"] { height: 30px; }
.hp-cf-lg img[src*="kimi"] { height: 15px; }
.hp-cf-lg img[src*="yc"] { height: 24px; }
.hp-cf-x b { display: block; font-weight: 500; font-size: 14px; line-height: 1.35; color: var(--ink); }
.hp-cf-x span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--text-ink-soft); }
.hp-cf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 30px -38px 0; padding: 16px 38px; border-top: 1px solid var(--border-paper); background: rgba(239,227,212,.35); border-radius: 0 0 17px 17px; font-size: 14px; }
.hp-cf-links a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2, #2F55A8); text-decoration: none; }
.hp-cf-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-cf-links .tlink { font-weight: 500; margin-right: auto; }

html[lang="zh-CN"] .hp-cf-quote p { font-style: normal; font-family: var(--font-body); font-size: 19px; line-height: 1.75; }

@media (max-width: 1100px) { .hp-cf-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .hp-cf { grid-template-columns: 1fr; gap: 16px; }
  .hp-cf-k { padding-top: 0; text-align: center; }
  .hp-cf-btn { grid-column: 1; justify-self: center; }
}
@media (max-width: 700px) {
  .hp-cf-list { grid-template-columns: 1fr; gap: 12px; }
  .hp-cf-panel { margin-top: -12px; }
  .hp-cf-card { padding: 14px; gap: 14px; }
  .hp-cf-card img { width: 60px; height: 60px; }
  .hp-cf-t b { font-size: 18px; }
  .hp-cf-prof { padding: 22px 18px 0; }
  .hp-cf-links { margin: 24px -18px 0; padding: 14px 18px; }
  .hp-cf-links .tlink { margin-right: 0; flex-basis: 100%; }
  .hp-cf-quote p { font-size: 19px; }
  html[lang="zh-CN"] .hp-cf-quote p { font-size: 17px; }
  .hp-cf-exp { grid-template-columns: 1fr; gap: 0; }
  .hp-cf-exp li { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(11,26,74,.07); }
  .hp-cf-exp li:first-child { border-top: 0; padding-top: 0; }
  .hp-cf-pe { margin-top: 22px; padding-top: 20px; }
  .hp-cf-lg img, .hp-cf-lg img[src*="mckinsey"] { max-width: 84px; }
  .hp-cf-lg img[src*="mckinsey"] { height: 11px; }
  .hp-cf-lg img[src*="tsinghua"] { height: 26px; }
  .hp-cf-btn { justify-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-cf-card, .hp-cf-panel, .hp-cf-plus, .hp-cf-box::before { transition: none !important; }
  .hp-cf-prof { animation: none; }
  .hp-cf-card:hover { transform: none; }
}

/* Team logo rows as opposing slow marquees (logo-marquee.js adds .hp-marq / .is-marq) */
.hp-marq { overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hp-marq ul.is-marq { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; width: max-content; animation: hpMarq var(--marq-dur, 60s) linear infinite; }
.hp-marq ul.is-marq.is-rev { animation-direction: reverse; }
.hp-marq ul.is-marq li { flex: none; padding: 0 30px; min-height: 48px; }
.hp-marq:hover ul.is-marq { animation-play-state: paused; }
@keyframes hpMarq { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .hp-marq ul.is-marq li { padding: 0 20px; min-height: 36px; } }

/* fade the panel in with the unfurl, and back out as it folds */
.hp-cf-box { opacity: 0; transition: opacity .35s ease; }
.hp-cf-panel.is-open .hp-cf-box { opacity: 1; transition-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .hp-cf-box { transition: none; } }

/* Panel polish: tinted quote band, speaker line, uniform logo slots */
.hp-cf-prof { padding: 0 !important; }
.hp-cf-pq { padding: 32px 38px 28px; background: linear-gradient(180deg, rgba(239,227,212,.42), rgba(239,227,212,.12)); border-radius: 17px 17px 0 0; }
.hp-cf-cite { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 22px; font-size: 13.5px; color: var(--text-ink-soft); }
.hp-cf-cite img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1px var(--border-paper); }
.hp-cf-cite b { font-weight: 500; color: var(--ink); }
.hp-cf-cite span::before { content: "·"; margin-right: 8px; color: var(--text-ink-muted); }
.hp-cf-pe { margin: 0 !important; padding: 28px 38px 30px !important; border-top: 1px solid var(--border-paper); }
.hp-cf-exp { gap: 28px 36px !important; }
.hp-cf-exp li { gap: 12px !important; }
.hp-cf-lg { height: 34px !important; align-items: center; }
.hp-cf-lg img { opacity: .82 !important; }
.hp-cf-lg img[src*="caltech"] { height: 16px !important; }
.hp-cf-lg img[src*="mckinsey"] { height: 14px !important; max-width: 150px !important; }
.hp-cf-lg img[src*="goldman"] { height: 27px !important; }
.hp-cf-lg img[src*="harvard"] { height: 27px !important; }
.hp-cf-lg img[src*="brown"] { height: 29px !important; }
.hp-cf-lg img[src*="yc"] { height: 24px !important; }
.hp-cf-lg img[src*="tsinghua"] { height: 31px !important; }
.hp-cf-lg img[src*="microsoft"] { height: 18px !important; }
.hp-cf-lg img[src*="apple"] { height: 23px !important; }
.hp-cf-lg img[src*="deloitte"] { height: 17px !important; max-width: 90px !important; }
.hp-cf-lg img[src*="kimi"] { height: 15px !important; }
.hp-cf-x b { font-size: 14.5px !important; letter-spacing: -.005em; }
.hp-cf-x span { margin-top: 3px !important; font-size: 13.5px !important; color: var(--text-ink-muted) !important; }
.hp-cf-links { margin: 0 !important; padding: 16px 38px !important; border-radius: 0 0 17px 17px; }
@media (max-width: 700px) {
  .hp-cf-pq { padding: 22px 18px 20px; }
  .hp-cf-cite { margin-left: 0; }
  .hp-cf-pe { padding: 20px 18px 22px !important; }
  .hp-cf-links { padding: 14px 18px !important; }
  .hp-cf-lg img[src*="mckinsey"] { height: 11px !important; max-width: 84px !important; }
  .hp-cf-lg img[src*="deloitte"] { max-width: 70px !important; }
}

/* standard logo heights: emblems/stacked marks at one height, flat wordmarks at one cap height */
.hp-cf-lg img[src*="brown"], .hp-cf-lg img[src*="harvard"], .hp-cf-lg img[src*="tsinghua"], .hp-cf-lg img[src*="goldman"] { height: 28px !important; }
.hp-cf-lg img[src*="apple"] { height: 25px !important; }
.hp-cf-lg img[src*="yc"] { height: 24px !important; }
.hp-cf-lg img[src*="microsoft"] { height: 21px !important; }
.hp-cf-lg img[src*="caltech"] { height: 15px !important; }
.hp-cf-lg img[src*="deloitte"] { height: 14px !important; }
.hp-cf-lg img[src*="kimi"] { height: 15px !important; }
.hp-cf-lg img[src*="mckinsey"] { height: 13px !important; }

/* English pages: the logos already carry the institution names, so the name is kept for screen readers only
   and the role becomes the visible line. Chinese pages keep both (the logos have no Chinese, except Tsinghua). */
.hp-cf-x b.sr-only + span { margin-top: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }

/* Experience logos: bigger, and every logo printed at the same visible height (each file is trimmed to its ink;
   the Microsoft AI file carries 25% empty margin, so it gets a taller box to match). Text sizes unchanged. These come last and win over the earlier per-logo !important tuning above. */
.hp-cf-lg { height: 40px !important; }
.hp-cf-lg img, .hp-cf-lg img[src*="brown"], .hp-cf-lg img[src*="harvard"], .hp-cf-lg img[src*="mckinsey"], .hp-cf-lg img[src*="deloitte"],
.hp-cf-lg img[src*="caltech"], .hp-cf-lg img[src*="apple"], .hp-cf-lg img[src*="tsinghua"], .hp-cf-lg img[src*="kimi"], .hp-cf-lg img[src*="yc"],
.hp-cf-lg img[src*="goldman"] { height: 34px !important; width: auto !important; max-width: 100% !important; object-position: left center; }
.hp-cf-lg img[src*="microsoft"] { height: 45px !important; max-width: 100% !important; object-position: left center; margin-left: -1px; }
@media (max-width: 700px) {
  /* phones: logo above its role, so long wordmarks (McKinsey) keep the shared height instead of shrinking into a narrow column */
  .hp-cf-exp li { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px !important; padding: 14px 0; }
  .hp-cf-lg { height: 30px !important; }
  .hp-cf-lg img, .hp-cf-lg img[src*="mckinsey"], .hp-cf-lg img[src*="tsinghua"], .hp-cf-lg img[src*="brown"], .hp-cf-lg img[src*="harvard"],
  .hp-cf-lg img[src*="deloitte"], .hp-cf-lg img[src*="caltech"], .hp-cf-lg img[src*="apple"], .hp-cf-lg img[src*="kimi"], .hp-cf-lg img[src*="yc"],
  .hp-cf-lg img[src*="goldman"] { height: 26px !important; max-width: 100% !important; }
  .hp-cf-lg img[src*="microsoft"] { height: 35px !important; }
}
/* Optical balance (JJ, Oct 2): relative to the shared 34px (phones 26px): Deloitte x0.8, Brown x1.5,
   Tsinghua x1.3, Harvard x1.3, Apple x1.2, Goldman x1.2. The logo row grows to fit the tallest; logos stay centered in it. */
.hp-cf-lg { height: 52px !important; }
.hp-cf-lg img[src*="deloitte"] { height: 27px !important; }
.hp-cf-lg img[src*="brown"] { height: 51px !important; }
.hp-cf-lg img[src*="tsinghua"] { height: 44px !important; }
.hp-cf-lg img[src*="harvard"] { height: 44px !important; }
.hp-cf-lg img[src*="apple"] { height: 41px !important; }
.hp-cf-lg img[src*="goldman"] { height: 41px !important; }
@media (max-width: 700px) {
  .hp-cf-lg { height: 40px !important; }
  .hp-cf-lg img[src*="deloitte"] { height: 21px !important; }
  .hp-cf-lg img[src*="brown"] { height: 39px !important; }
  .hp-cf-lg img[src*="tsinghua"] { height: 34px !important; }
  .hp-cf-lg img[src*="harvard"] { height: 34px !important; }
  .hp-cf-lg img[src*="apple"] { height: 31px !important; }
  .hp-cf-lg img[src*="goldman"] { height: 31px !important; }
}