.about-section { position:relative; min-height:100svh; padding:82px max(6vw,24px) 135px; background:transparent; color:#112f59; scroll-margin-top:34px; font-family:"Helvetica Neue","Arial","PingFang SC","Microsoft YaHei",sans-serif; }
.about-heading { display:flex; align-items:center; justify-content:space-between; gap:32px; max-width:1280px; margin:0 auto 55px; }
.about-title { position:relative; width:min(56%,650px); aspect-ratio:2450/860; overflow:hidden; margin:0; }
.about-title img { position:absolute; width:136.49%; height:auto; max-width:none; left:-18.37%; top:-54.65%; }
.about-position { text-align:right; font-size:13px; }.about-position>span { background:#d5eaff; padding:6px 10px; color:#255ac5; }.about-position p { color:#617c98; line-height:1.8; }
.about-layout { display:grid; grid-template-columns:.9fr 1.2fr; gap:7%; max-width:1280px; margin:auto; }
.portrait-stage { position:relative; min-height:460px; align-self:start; padding:32px 28px 76px; }
.portrait-card { display:grid; grid-template-columns:55px 1fr; margin:0; padding:16px; background:#f7fcff; border:1px solid #fff; box-shadow:0 18px 38px #3068a122; transform:rotate(-6deg); transition:transform .45s cubic-bezier(.2,.8,.2,1); border-radius:5px; }
.portrait-card:hover { transform:rotate(-1deg); }.portrait-side { writing-mode:vertical-rl; font-size:20px; font-weight:800; letter-spacing:.1em; padding:12px 8px; }.portrait-side small { font-size:8px; font-weight:400; margin-top:20px; letter-spacing:.1em; }
.portrait-placeholder { aspect-ratio: .8; background:radial-gradient(circle at 50% 30%,#f2fbff,#c9e3f6); border:1px dashed #9cbfdc; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:#537ca0; }.portrait-placeholder>span { font-size:65px; font-weight:200; color:#8eafd0; }.portrait-placeholder strong { font-size:14px; font-weight:500; }.portrait-placeholder small { font-size:11px; }
.portrait-card figcaption { grid-column:1/-1; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.09em; padding:16px 0 2px; }
.about-tag { position:absolute; z-index:2; border:1px solid #fff; border-radius:14px; padding:15px 23px; font:600 17px system-ui; box-shadow:0 6px 15px #3979b725; cursor:grab; touch-action:none; color:#fff; background:#2468ed; transform:translate(var(--tag-x,0px),var(--tag-y,0px)) rotate(var(--tag-angle,-8deg)); transition:box-shadow .2s; }
.tag-product { top:15px; left:0; }.tag-visual { right:0; bottom:65px; background:#f2f9ff; color:#2561c6; --tag-angle:8deg; }
.about-tag:hover,.about-tag:focus-visible { box-shadow:0 10px 25px #3979b744; outline:2px solid #72adff; outline-offset:3px; }
.about-tag>span { position:absolute; pointer-events:none; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); padding:7px 11px; border-radius:8px; background:#163c68; color:white; font-size:11px; font-weight:400; white-space:nowrap; opacity:0; transition:opacity .2s; }.about-tag:hover>span,.about-tag:focus>span { opacity:1; }
.about-tag.is-dragging { cursor:grabbing; }.tag-instruction { text-align:center; font-size:10px; letter-spacing:.1em; color:#6488a8; margin-top:36px; }
.about-facts { margin:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #8fb1ce66; }.about-facts>div { padding:15px 18px 18px 0; border-bottom:1px solid #8fb1ce66; }.about-facts dt { color:#6f88a1; font-size:10px; letter-spacing:.08em; }.about-facts dd { margin:8px 0 0; font-size:35px; font-weight:700; }.about-facts dd.placeholder-copy { color:#6c839b; font-size:14px; font-weight:400; line-height:1.7; }
.about-experience h3 { font-size:14px; margin:30px 0 20px; }.about-experience h3 span { font-size:10px; letter-spacing:.12em; margin-left:10px; color:#8aa0b6; font-weight:400; }.about-experience article { padding:0 0 22px 20px; border-left:1px solid #a6c8e3; position:relative; }.about-experience article::before { content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#488ce9; left:-4px; top:5px; }.about-experience small { font-size:11px; color:#7b94ac; }.about-experience h4 { font-size:16px; font-weight:600; margin:9px 0; }.about-experience h4 span { margin-left:15px; font-size:12px; color:#6a85a0; font-weight:400; }.about-experience p { font-size:12px; color:#6a85a0; line-height:1.8; margin:0; }
.about-contact { border-top:1px solid #8fb1ce66; padding:20px 0; display:flex; justify-content:space-between; gap:20px; align-items:center; scroll-margin-top:80px; }.about-contact small { font-size:9px; letter-spacing:.08em; color:#7d94aa; }.about-contact p { font-size:13px; color:#6a85a0; margin:8px 0; }.about-contact button { border:1px solid #adc7df; padding:10px 14px; border-radius:25px; color:#7b92a7; background:#ffffff70; cursor:not-allowed; }.about-next { display:flex; justify-content:space-between; text-decoration:none; font-size:12px; padding:14px 0; color:#2a6ad2; }
@keyframes tag-arrive { from { opacity:0; translate:0 18px; scale:.92; } 70% { translate:0 -3px; scale:1.025; } to { opacity:1; translate:0 0; scale:1; } }
.about-section.is-visible .about-tag { animation:tag-arrive .65s both; }.about-section.is-visible .tag-visual { animation-delay:.1s; }
@media(max-width:760px) { .about-section { padding:65px 24px 125px; }.about-heading { gap:18px; margin-bottom:30px; }.about-title { width:68%; }.about-position { font-size:10px; }.about-position p { display:none; }.about-layout { grid-template-columns:1fr; gap:15px; }.portrait-stage { width:min(100%,400px); margin:auto; min-height:0; }.about-facts dd { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { .about-section.is-visible .about-tag { animation:none; }.portrait-card,.about-tag>span { transition:none; } }

/* Editorial typography: expressive artwork, strong headings, quiet metadata. */
.about-position>span { background:#ffffff66; color:#143c78; font-size:14px; font-weight:700; letter-spacing:.04em; }
.about-position p { color:#34567b; font-size:14px; }
.about-facts dt,.about-experience small,.about-experience h3 span,.about-contact small,.portrait-card figcaption { font-family:"SFMono-Regular",Consolas,"Microsoft YaHei",monospace; font-size:10px; font-weight:500; letter-spacing:.07em; color:#3c6085; }
.about-facts dd { font-size:clamp(40px,4.2vw,62px); font-weight:900; letter-spacing:-.055em; line-height:1.2; color:#102e60; margin-top:12px; }
.about-facts dd.placeholder-copy { font-size:15px; font-weight:500; letter-spacing:.015em; line-height:1.8; color:#375779; }
.about-facts>div { padding-top:19px; padding-bottom:23px; }
.about-experience h3 { font-size:20px; font-weight:800; letter-spacing:-.025em; margin:30px 0 24px; }
.about-experience h4 { font-size:19px; font-weight:750; letter-spacing:-.02em; line-height:1.5; margin:9px 0; }
.about-experience h4 span { font-size:13px; color:#36597e; font-weight:500; letter-spacing:0; }
.about-experience p { font-size:14px; line-height:1.95; color:#345578; }
.about-experience article { padding-bottom:27px; }
.about-contact p { font-size:14px; color:#345578; }
.about-next { font-size:14px; font-weight:600; color:#124ea8; }
.about-tag { font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; font-size:18px; font-weight:700; letter-spacing:.035em; }
.portrait-side { font-family:"Arial Black","Helvetica Neue",sans-serif; font-size:23px; font-weight:900; letter-spacing:-.035em; }
.portrait-side small { font-family:Consolas,monospace; font-size:9px; letter-spacing:.09em; }
.portrait-placeholder strong { font-size:16px; font-weight:600; color:#375d85; }
.portrait-placeholder small,.tag-instruction { font-size:11px; color:#426588; }
@media(max-width:760px) { .about-facts dd { font-size:42px; }.about-experience h4 { font-size:18px; }.about-position>span { font-size:11px; }.about-tag { font-size:16px; } }

/* One continuous reading column instead of independent metadata tiles. */
.about-details { align-self:start; padding-top:12px; }
.about-bio h3 { margin:0; font-size:clamp(40px,4.2vw,60px); font-weight:900; letter-spacing:-.055em; line-height:1.15; color:#102e60; }
.about-role { margin:12px 0 0; font-size:17px; font-weight:600; color:#245d9e; letter-spacing:.02em; }
.about-summary { max-width:38em; margin:18px 0 0; font-size:14px; line-height:1.95; color:#345578; text-wrap:pretty; }
.about-education { display:flex; flex-wrap:wrap; gap:6px 12px; margin:14px 0 0; font-size:12px; line-height:1.7; color:#476787; }
.about-education>span { color:#345578; font-weight:600; }
.about-details .about-experience { margin-top:28px; padding-top:22px; border-top:1px solid #507fab33; }
.about-details .about-experience h3 { margin:0 0 18px; font-size:15px; letter-spacing:.02em; }
.about-details .about-experience article { border:0; padding:0; margin:0 0 22px; }
.about-details .about-experience article:last-child { margin-bottom:0; }
.about-details .about-experience article::before { display:none; }
.about-details .about-experience h4 { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0 0 3px; font-size:17px; }
.about-details .about-experience h4 span { margin:0; font-size:12px; }
.about-details .about-experience small { font-family:inherit; letter-spacing:.02em; font-size:11px; color:#476787; }
.about-details .about-experience p { margin-top:6px; font-size:13px; line-height:1.8; }
.about-details .about-contact { justify-content:flex-start; gap:20px; margin-top:26px; padding:18px 0 0; border-top:1px solid #507fab33; }
.about-details .about-contact p { display:flex; flex-wrap:wrap; gap:5px 10px; margin:0; font-size:12px; font-weight:600; }
.about-contact p>span { font-weight:400; color:#476787; }
.about-details .about-contact button { flex-shrink:0; font-size:12px; padding:9px 13px; }
.about-details .about-next { justify-content:flex-start; gap:18px; margin-top:14px; padding:6px 0; font-size:12px; }
@media(max-width:760px) { .about-details { padding-top:0; }.about-role { font-size:16px; }.about-summary { margin-top:14px; }.about-details .about-contact { gap:14px; } }