/* Reasons remain within the portrait composition; only the flower toggles them. */
.about-layout{grid-template-columns:minmax(0,55%) minmax(0,1fr);gap:5%}
.reasons-portrait{width:100%;max-width:none;padding:0;aspect-ratio:.93;isolation:isolate;align-self:center}
.reasons-portrait>img{position:absolute;left:14%;bottom:15%;width:72%;height:auto;aspect-ratio:1;object-fit:contain;z-index:0}
.reasons-portrait .portrait-note{left:8%;top:6%;font-size:clamp(14px,1.3vw,21px)}
.reasons-portrait .portrait-caption{position:absolute;left:6%;bottom:4%;padding:0;font-size:8px;letter-spacing:1px;max-width:54%;line-height:1.6}
.reasons-portrait .reasons-toggle{right:4%;bottom:5%;width:31%;height:auto;min-height:90px;padding:0;display:flex;align-items:center;flex-direction:column;gap:11px;transform:none;z-index:5;color:var(--accent);font-size:initial}
.flower-glyph{display:block;width:62px;height:62px;animation:flower-breathe 3.8s infinite cubic-bezier(.45,0,.35,1)}
.flower-glyph svg{width:100%;height:100%;fill:currentColor}
.reasons-label{font-size:11px;line-height:1.45;font-weight:400;color:var(--ink);max-width:165px;letter-spacing:0;text-align:center}
.reasons-toggle:hover .flower-glyph{color:#ce301e}.reasons-toggle:focus-visible{outline-offset:8px;border-radius:8px}
.reasons-portrait[data-reasons-state="intro"] .flower-glyph,.reasons-portrait[data-reasons-state="closing"] .flower-glyph{animation-play-state:paused}
.hire-reasons{position:absolute;inset:0;z-index:3;pointer-events:none}
.hire-reason{position:absolute;width:31%;pointer-events:auto;z-index:1;transform-origin:center}
.hire-reason:nth-child(-n+5){left:1%}.hire-reason:nth-child(n+6){right:1%}
.hire-reason:nth-child(5n+1){top:17%}.hire-reason:nth-child(5n+2){top:29%}.hire-reason:nth-child(5n+3){top:41%}.hire-reason:nth-child(5n+4){top:53%}.hire-reason:nth-child(5n+5){top:65%}
.reason-chip{display:flex;align-items:center;gap:7px;width:100%;padding:9px 8px;border-radius:8px;border:1px solid #ffffff9c;background:#f8f8f5de;box-shadow:0 3px 14px #24241b04;text-align:left;font-size:12px;line-height:1.4;transition:background .2s,box-shadow .2s}
.reason-number{font-size:8px;color:var(--accent);font-variant-numeric:tabular-nums;flex:none}
.reason-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.hire-reason:hover,.hire-reason:focus-within,.hire-reason.is-detail{z-index:10}
.reason-chip:hover,.reason-chip:focus-visible{background:#fff;box-shadow:0 5px 20px #0000000a}
.reason-detail{position:absolute;left:0;top:calc(100% + 6px);width:clamp(180px,22vw,280px);padding:16px 18px;background:#fff;border:1px solid #e4e4df;border-radius:10px;box-shadow:0 14px 40px #22222212;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .25s,visibility .18s;pointer-events:none;font-size:13px;line-height:1.75;color:#666}
.hire-reason:nth-child(n+6) .reason-detail{left:auto;right:0}
.reason-detail::before{content:'';position:absolute;inset:-9px 0 auto;height:9px}
.reason-detail strong{display:block;color:#222;font-size:13px;line-height:1.5;font-weight:500}.reason-detail p{margin:8px 0 0}
.hire-reason:focus-within .reason-detail,.hire-reason.is-detail .reason-detail{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media(hover:hover){.hire-reason:hover .reason-detail{opacity:1;visibility:visible;transform:none;pointer-events:auto}}
.reasons-portrait[data-reasons-state="waiting"] .hire-reason,.reasons-portrait[data-reasons-state="closed"] .hire-reason{opacity:0;visibility:hidden;pointer-events:none}
@keyframes flower-breathe{0%,100%{transform:rotate(12deg) scale(1)}40%{transform:rotate(23deg) scale(1.07)}58%{transform:rotate(8deg) scale(.98)}74%{transform:rotate(14deg) scale(1.02)}}
@media(max-width:1100px) and (min-width:761px){.about-layout{grid-template-columns:minmax(0,52%) minmax(0,1fr);gap:4%}.reason-chip{font-size:11px;padding:8px 5px;gap:4px}.reason-number{display:none}.reasons-label{font-size:10px}.flower-glyph{width:50px;height:50px}.reasons-portrait{aspect-ratio:.8}}
@media(max-width:760px){.about-layout{grid-template-columns:minmax(0,1fr);gap:40px}.reasons-portrait{max-width:530px;aspect-ratio:.8}.reasons-portrait>img{left:7%;width:86%;bottom:19%}.reasons-portrait .portrait-note{top:7%;font-size:15px}.reasons-portrait .portrait-caption{bottom:5%;font-size:7px;letter-spacing:.5px;max-width:52%}.reason-chip{font-size:11px;padding:9px 5px;gap:4px}.reason-number{display:none}.hire-reason{width:32%}.reason-detail{width:210px;max-width:66vw;padding:13px;font-size:12px}.reasons-portrait .reasons-toggle{right:3%;bottom:4%;width:37%;gap:10px}.flower-glyph{width:50px;height:50px}.reasons-label{font-size:10px;max-width:140px}}
@media(prefers-reduced-motion:reduce){.flower-glyph{animation:none;transform:rotate(12deg)}.reason-chip,.reason-detail{transition:none}}
/* Short labels hug their text and step around the silhouette. */
.hire-reason{width:max-content;max-width:31%}
.hire-reason:nth-child(-n+5){left:auto;right:68%}
.hire-reason:nth-child(n+6){right:auto;left:68%}
.hire-reason:nth-child(1),.hire-reason:nth-child(5){right:65%}
.hire-reason:nth-child(6),.hire-reason:nth-child(10){left:65%}
.reason-chip{font-size:13px;background:#f8f8f5e8;border-color:transparent;box-shadow:none}
@media(max-width:1100px){.reason-chip{font-size:11px}}

.reasons-portrait:not([data-reasons-state="open"]) .reason-detail{opacity:0;visibility:hidden;pointer-events:none}
/* Unboxed annotations sit at equal arc-length intervals on the silhouette guides. */
.portrait-contour{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.hire-reason{width:max-content}
.reason-chip,.reason-chip:hover,.reason-chip:focus-visible{padding:6px 0;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:400;color:#4d4b46;letter-spacing:.01em;line-height:1.6}
.reason-number{display:none}
.reason-chip:disabled{opacity:1;cursor:default}
.has-detail .reason-chip{cursor:help}.has-detail .reason-chip:hover{color:#a55743}
.hire-reason:not(.has-detail) .reason-detail{display:none}
.reasons-label{max-width:210px;color:#855647;text-align:center}
.reasons-label-title{display:block;font-family:Georgia,'Times New Roman',serif;font-size:26px;font-weight:400;font-style:italic;line-height:1.12;letter-spacing:-.055em}
.reasons-label-subtitle{display:block;margin-top:7px;font-size:9px;font-weight:500;line-height:1.5;letter-spacing:.09em;color:#706a60}
.reasons-toggle:hover .reasons-label-title{color:#a74e38}
/* Detail notes open away from the portrait, with a light translucent surface. */
.reason-detail{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.72);box-shadow:0 8px 26px #3531270a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#57544e}
.hire-reason:nth-child(n+6) .reason-detail{left:0;right:auto;top:calc(100% + 8px);width:260px;transform:translateY(-4px)}
.hire-reason:nth-child(n+6) .reason-detail::before{inset:-10px 0 auto;width:auto;height:10px}
.hire-reason:nth-child(n+6):hover .reason-detail,.hire-reason:nth-child(n+6):focus-within .reason-detail,.hire-reason:nth-child(n+6).is-detail .reason-detail{transform:none}

.reasons-portrait{z-index:2}

/* Desktop About: one portrait composition balanced against a readable biography. */
@media(min-width:1000px){
 .about.page-section{padding:28px 5% 28px 0;min-height:100svh;scroll-margin-top:-30px;box-sizing:border-box;display:flex;flex-direction:column}
 .about>.section-label{margin-left:5.2632%}
 .about .about-layout{grid-template-columns:minmax(0,53%) minmax(0,1fr);gap:4%;margin-top:22px;flex:1;align-items:center}
 .about .reasons-portrait{--portrait-size:min(82%,calc(100svh - 286px));height:calc(100svh - 111px);min-height:530px;aspect-ratio:auto;margin:0;align-self:stretch;background:#f1f0ec}
 .about .reasons-portrait>img{width:var(--portrait-size);left:calc((100% - var(--portrait-size))/2 + 4%);bottom:90px}
 .about .reasons-portrait .portrait-note{left:10%;top:38px;font-size:clamp(20px,1.65vw,26px);font-weight:400;font-style:normal;letter-spacing:-.045em;transform:none;color:#514d46;line-height:1.4}
 .about .reasons-portrait .portrait-caption{left:10%;bottom:36px;max-width:47%;font-size:8px;letter-spacing:1.1px;line-height:1.5;color:#8c877d}
 .about .reasons-portrait .reasons-toggle{right:36px;bottom:36px;width:max-content;max-width:42%;min-height:0;flex-direction:row;gap:14px;align-items:center}
 .about .flower-glyph{width:44px;height:44px;flex:none}
 .about .reasons-label{text-align:left;max-width:150px}
 .about .reasons-label-title{font-size:24px;letter-spacing:-.045em;color:#805f4f}
 .about .reasons-label-subtitle{font-size:8px;letter-spacing:.055em;margin-top:5px;color:#878074}
 .about .about-content{width:100%;max-width:580px;justify-self:center}
 .about .about-name{align-items:baseline;gap:16px;margin-bottom:22px}
 .about .about-name h2{font-size:clamp(26px,2.15vw,34px);font-weight:500;letter-spacing:-1px;line-height:1.25;margin:0}
 .about .about-name>span{font-size:10px;color:#9a9690}
 .about .about-bio p{font-size:14px;line-height:1.8;margin:0 0 12px;color:#686660}
 .about .contact-row{margin:21px 0 25px}
 .about .currently{padding:19px 0;border-color:#e7e4df}
 .about .eyebrow{font-size:10px;letter-spacing:.12em;color:#9a9388}
 .about .currently>p:last-child{font-size:13px;line-height:1.75;margin-top:10px;color:#514f49}
 .about .education{margin-top:23px}
 .about .school{padding-top:18px;gap:16px;align-items:center}
 .about .school h3{font-size:14px;font-weight:500}
 .about .school p{margin-top:4px;font-size:11px;line-height:1.6;color:#8a877f}
 .about .school .degree{font-size:12px;color:#68645e}
 .about .school time{font-size:9px;color:#969188}
 html[lang="en"] .about .school-top{display:flex;gap:12px}
 html[lang="en"] .about .school time{margin-top:0}
 .about .hire-reason:nth-child(n+6) .reason-detail{width:min(240px,var(--detail-room,240px))}
 .about .reason-chip{font-size:12px;color:#666056}
 .about .hire-reason:nth-child(-n+5) .reason-chip{justify-content:flex-end;text-align:right}
}
@media(min-width:1000px) and (max-height:800px){
 .about .about-name{margin-bottom:17px}
 .about .about-bio p{font-size:13px;line-height:1.7;margin-bottom:9px}
 .about .contact-row{margin:15px 0 18px}
 .about .currently{padding:15px 0}
 .about .education{margin-top:17px}
 .about .school{padding-top:14px}
}

/* Supplied university marks replace the letter placeholders. */
.about .school{grid-template-columns:56px minmax(0,1fr)}
.school-logo{width:56px;height:44px;display:flex;align-items:center;justify-content:center}
.school-logo img{display:block;width:56px;height:44px;object-fit:contain}
.school-logo img[src$="shanghaitech.svg"]{width:44px}

/* Small orange markers sit outside the text without changing its alignment. */
.hire-reason .reason-chip{position:relative}
.hire-reason .reason-chip::before{content:"";position:absolute;left:-11px;top:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(244,67,42,.08);transform:translateY(-50%);pointer-events:none}