/* One shared row for the demo and cards; a distinct mobile reading order. */
#about .about-layout{display:grid;grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);grid-template-areas:"profile overview" "profile intro" "demo cards" ". summary";column-gap:2.5rem;row-gap:1rem;align-items:start}
#about .about-layout>*{min-width:0;max-width:none}
#about .profile-demo-column{grid-area:profile}
#about .profile-demo-column .avatar-wrapper{width:160px!important;height:160px!important;margin-bottom:0!important}
#about .profile-demo-column .avatar{width:160px!important;height:160px!important}
#about .profile-demo-column>:not([hidden])~:not([hidden]){margin-top:1rem!important;margin-bottom:0!important}
#about .profile-demo-column h1{font-size:2.5rem;line-height:1.12}
#about .profile-demo-column .space-y-3>*+*{margin-top:.5rem!important}
#about .profile-demo-column .space-y-3>p{font-size:1.25rem;line-height:1.45}
#about .profile-demo-column .space-y-3>div p{font-size:1rem;line-height:1.6}
#about .profile-demo-column>.flex a{width:42px;height:42px}
#about .about-overview{grid-area:overview}
#about .about-overview>div:first-child{margin-bottom:1.4rem!important}
#about .bio-history .bio-text>p:first-child{margin-top:0}
#about .bio-history .bio-text>p:last-child{margin-bottom:0}
#about .bio-school-logos{gap:1.3rem}
#about .research-intro{grid-area:intro;align-self:end;scroll-margin-top:6rem}
#about .research-intro p{margin:0}
#about .research-card-stack{grid-area:cards;align-self:stretch}
#about .research-card-stack .research-interest-cards{margin:0;height:100%;grid-auto-rows:1fr}
#about .research-card-stack .research-interest-cards>li{font-size:1.05rem;line-height:1.8;padding:1.05rem 1.2rem}
#about .research-card-stack .research-interest-cards>li strong{font-size:1.12rem}
#about .research-summary{grid-area:summary;margin-top:.4rem}
#about .research-summary p{margin:0}
#about .research-motion-figure{grid-area:demo;align-self:stretch;position:relative;margin:0;width:100%;min-height:0}
#about .research-motion-stage{position:absolute;inset:0;overflow:hidden;border-radius:22px;border:1px solid #dce7f3;box-shadow:0 12px 40px #23408f07;background:#f9fcff}
#about .research-motion-video,#about .research-motion-poster{position:absolute;inset:0;display:block;margin:0;width:100%;height:100%;object-fit:contain}
#about .research-motion-video{opacity:0}
#about .research-motion-stage.is-ready .research-motion-video{opacity:1}
#about .research-motion-figure figcaption{position:absolute;top:100%;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:9px 4px 0;color:#6e839c;font-size:.76rem;line-height:1.4}
#about .research-motion-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
#about .research-motion-figure button{font:inherit;color:#3d6292;border:1px solid #cbd9eb;border-radius:999px;background:#ffffff9e;padding:5px 12px;cursor:pointer}
.dark #about .research-motion-stage{border-color:#3c526e}
.dark #about .research-motion-figure figcaption{color:#b1c2d7}
.dark #about .research-motion-figure button{background:#23364e;color:#d8e7fb;border-color:#3c526e}
@media(min-width:768px) and (max-width:1050px){#about .about-layout{column-gap:1.5rem}#about .bio-with-institutions{grid-template-columns:1fr}#about .bio-school-logos{flex-direction:row;justify-content:center;gap:1rem}}
@media(max-width:767px){
 #about .about-layout{grid-template-columns:1fr;grid-template-areas:"profile" "overview" "intro" "cards" "summary" "demo";row-gap:1.25rem}
 #about .profile-demo-column{margin-bottom:.75rem}
 #about .profile-demo-column h1{font-size:2.15rem}
 #about .bio-with-institutions{grid-template-columns:1fr;gap:1.25rem}
 #about .bio-school-logos{flex-direction:row;justify-content:center;gap:1.25rem;padding-top:0}
 #about .research-card-stack .research-interest-cards{height:auto;grid-auto-rows:auto}
 #about .research-card-stack .research-interest-cards>li{font-size:1rem}
 #about .research-motion-figure{max-width:560px;justify-self:center;margin-top:.5rem}
 #about .research-motion-stage{position:relative;inset:auto;aspect-ratio:32/27}
 #about .research-motion-figure figcaption{position:static}
}

/* Keep the original optional biography sections while sharing grid placement. */
#about .about-layout>.bio-main-column,#about .about-layout .bio-summary{display:contents}

/* Compact the desktop introduction without shrinking the reading text. */
@media(min-width:1051px){
 #about .about-layout{column-gap:2rem;row-gap:.75rem}
 #about .profile-demo-column{align-self:end}
 #about .about-layout .about-overview{margin-bottom:0!important}
 #about .profile-demo-column .avatar-wrapper,#about .profile-demo-column .avatar{width:144px!important;height:144px!important}
 #about .profile-demo-column>:not([hidden])~:not([hidden]){margin-top:.75rem!important}
 #about .profile-demo-column h1{font-size:2.35rem}
 #about .about-overview>div:first-child{margin-bottom:.75rem!important}
 #about .about-overview h2{margin-bottom:0!important}
 #about .bio-with-institutions{grid-template-columns:minmax(0,1fr) 64px;column-gap:1rem}
 #about .bio-history .bio-text>p{margin-bottom:0}
 #about .bio-history .bio-text>p+p{margin-top:1rem}
 #about .bio-school-logos{gap:.5rem;padding-top:0}
 #about .bio-school-logos .school-logo{width:60px;height:60px;flex-basis:60px}
 #about .bio-school-logos .school-logo>span{transform:scale(.75)}
}

/* Bring the introductory content closer to the navigation. */
#about.hbb-section{padding-top:1rem!important}