@font-face { font-family: Barlow; src: url('media/fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url('media/fonts/BarlowCondensed-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
:root { color-scheme: light; --paper:#f0f3f7; --white:#fff; --ink:#25344b; --muted:#59667a; --orange:#ff9c36; --line:#d1dae5; --blue:#176199; font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--header-height, 200px) + 20px); }
body { margin:0; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; background:linear-gradient(118deg,#e2eaf5 0,transparent 520px) no-repeat; }
a { color:inherit; text-underline-offset:5px; }
button { font:inherit; }
button,a,summary { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
a:hover { color:var(--blue); }
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
[hidden] { display:none !important; }
.wrap { width:min(1400px,calc(100% - 96px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:5; background:var(--white); border-bottom:1px solid var(--line); box-shadow:0 3px 12px #25344b0a; }
.header-nav { display:grid; grid-template-columns:190px minmax(0,1fr) auto; align-items:center; gap:28px; padding-block:18px; }
.header-nav .name { white-space:nowrap; }
.header-nav>.name,.header-nav>.main-nav { margin-top:0; }
.header-nav>.main-nav { gap:18px; }
.name { display:flex; gap:13px; align-items:center; text-decoration:none; font-size:17px; font-weight:650; min-height:44px; }
.name small { display:block; font-size:12px; font-weight:500; color:var(--muted); }
.monogram { display:grid; place-items:center; width:46px; height:46px; font:italic 700 28px Barlow,sans-serif; background:var(--ink); color:white; border-bottom:4px solid var(--orange); transform:skew(-7deg); }
nav { display:flex; align-items:center; gap:27px; }
nav a { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:550; text-decoration:none; }
nav .immersive-link { background:white; padding-inline:18px; border:1px solid var(--line); border-bottom:3px solid var(--orange); border-radius:3px; }
.intro { padding-block:34px 26px; max-width:950px; }
h1,h2,h3,p { margin:0; }
h1 { font:italic 700 64px/1.04 Barlow,"Arial Narrow",sans-serif; letter-spacing:0; text-wrap:balance; }
.intro p { margin-top:16px; font-size:16px; color:var(--muted); }
.intro .availability { flex-shrink:0; border-left:4px solid var(--orange); padding:3px 0 3px 16px; margin:0; font-size:12px; }
.availability strong { display:block; font:600 25px Barlow,sans-serif; color:var(--ink); }
.work-layout { display:grid; grid-template-columns:224px minmax(0,1fr); gap:32px; align-items:start; }
.work-layout:has(.skill-library[hidden]) { grid-template-columns:minmax(0,1fr); }
.skill-library { position:sticky; top:calc(var(--header-height, 200px) + 20px); max-height:calc(100dvh - var(--header-height, 200px) - 40px); overflow:auto; padding:0 12px 12px 4px; margin-left:-4px; scrollbar-width:thin; }
.skill-library summary { display:flex; justify-content:space-between; align-items:center; min-height:44px; font:600 25px Barlow,sans-serif; cursor:pointer; list-style:none; padding-bottom:8px; }
summary::-webkit-details-marker { display:none; }
summary span { font:400 22px "Avenir Next",sans-serif; }
details[open]>summary span { transform:rotate(45deg); }
.filters { padding-top:8px; }
.filters button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:44px; margin-block:3px; padding:9px 12px; border:1px solid transparent; border-radius:3px; background:transparent; color:var(--ink); font-size:13px; text-align:left; cursor:pointer; transition:background-color .15s,transform .15s; }
.filters button:hover { background:white; border-color:var(--line); transform:translateX(3px); }
.filters button[aria-pressed="true"] { background:var(--orange); border-color:var(--orange); color:#202f44; font-weight:650; box-shadow:3px 3px 0 #d9e0e9; }
.skill-count { font-size:11px; font-variant-numeric:tabular-nums; min-width:21px; text-align:center; border:1px solid #aab5c4; border-radius:3px; }
button[aria-pressed="true"] .skill-count { border-color:#b2691f; }
.skill-group { margin-top:18px; }
.skill-group h3 { margin:0 0 5px 12px; font:650 12px/1.5 "Avenir Next",Avenir,"Segoe UI",sans-serif; color:var(--muted); }
.work-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; min-height:44px; }
.work-bar h2 { font:italic 700 33px/1.1 Barlow,sans-serif; }
.work-bar p { color:var(--muted); font-size:13px; white-space:nowrap; }
.projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.project { min-width:0; background:white; border:1px solid #d9e0e9; border-radius:4px; display:flex; flex-direction:column; position:relative; box-shadow:0 4px 0 #e2e7ee; }
.project::before { content:""; position:absolute; top:0; left:20px; width:48px; height:4px; background:var(--orange); z-index:1; }
.project-media { margin:0; min-width:0; }
.project-media img,.project-media video { display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:contain; background:#e7edf4; border-radius:3px 3px 0 0; }
.project-media video { background:#1b2739; }
figcaption { padding:9px 22px 0; color:var(--muted); font-size:11px; line-height:1.45; }
.project-copy { padding:23px 25px 21px; display:flex; flex-direction:column; flex:1; }
.project-type { color:var(--muted); font-size:12px; margin-bottom:7px; }
.project-context { margin-top:9px; color:var(--blue); font-size:12px; font-weight:600; line-height:1.5; }
h3 { font:600 32px/1.05 Barlow,sans-serif; text-wrap:balance; }
.description { margin-top:11px; font-size:16px; line-height:1.5; max-width:48ch; }
dl { margin:17px 0 0; }
dt { margin-top:14px; font-size:12px; font-weight:700; }
dt:first-child { margin-top:0; }
dd { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.project-link { display:inline-flex; align-items:center; align-self:flex-start; min-height:44px; margin-top:auto; padding-top:12px; font-size:13px; font-weight:650; color:var(--blue); }
.project-actions { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:auto; }
.text-project { background:#dfe8f2; padding:28px; justify-content:flex-start; }
.text-project::before { left:28px; width:64px; }
.text-project .project-copy { padding:0; flex:1; }
.text-project .description { margin-bottom:4px; }
.about { margin-top:72px; padding:44px 0; display:grid; grid-template-columns:minmax(200px,300px) minmax(0,680px); justify-content:center; gap:64px; border-top:5px solid var(--orange); background:transparent; border-radius:0; }
.portrait { margin:0; }
.portrait img { width:100%; height:340px; object-fit:cover; object-position:center 35%; border-radius:3px; }
.portrait figcaption { padding:10px 0 0; font-size:12px; }
.about h2 { font:italic 700 48px/1.05 Barlow,sans-serif; }
.about .about-lead { font-size:20px; color:var(--ink); line-height:1.4; margin-top:16px; }
.about p { font-size:15px; color:var(--muted); margin-top:14px; max-width:63ch; }
.contact-link { display:inline-flex; align-items:center; justify-content:center; background:var(--orange); min-height:44px; padding:8px 22px; margin-top:22px; font-weight:650; font-size:14px; text-decoration:none; border-radius:3px; }
.contact-link:hover { color:var(--ink); background:#ffb15f; }
footer { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:35px 0; font-size:13px; color:var(--muted); }
footer a { display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:10; left:20px; top:-100px; background:var(--ink); color:white; padding:12px 20px; }
.skip-link:focus { top:14px; color:white; }
@media (max-width:1100px) {
 .wrap { width:calc(100% - 56px); }
 .work-layout { grid-template-columns:190px minmax(0,1fr); gap:24px; }
 .projects { gap:18px; }
 .project-copy { padding:19px; }
 .intro { align-items:flex-start; }
 .intro .availability { margin-top:8px; }
 .about { gap:35px; padding:32px 0; }
}
@media (max-width:850px) {
 .work-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
 .skill-library { position:static; max-height:none; overflow:visible; margin:0; padding:0; }
 .skill-library summary { background:#e0e8f1; padding:10px 16px; border-radius:3px; font-size:23px; }
 .filters { display:flex; flex-wrap:wrap; gap:12px; padding-block:12px; }
 .filters>button { width:100%; }
 .skill-group { flex:1 1 220px; margin:0; }
 .skill-group h3 { margin-left:0; }
 .skill-options { display:flex; flex-wrap:wrap; gap:5px; }
 .skill-options button { width:auto; padding-inline:11px; }
 .work-bar { margin-bottom:15px; }
 .intro { padding-block:32px; }
 .intro .availability { display:none; }
 .about { gap:28px; grid-template-columns:210px minmax(0,1fr); }
 .about h2 { font-size:40px; }
 .portrait img { height:300px; }
}
@media (max-width:600px) {
 .wrap { width:calc(100% - 36px); }
 .name { font-size:16px; }
 nav { width:100%; gap:23px; }
 nav a { font-size:13px; }
 nav .immersive-link { margin-left:auto; padding-inline:11px; }
 .intro { padding:29px 0; }
 h1 { font-size:44px; }
 .intro p { font-size:14px; line-height:1.6; max-width:35ch; }
 .projects { grid-template-columns:minmax(0,1fr); gap:23px; }
 .project-copy { padding:22px; }
 .project-link { margin-top:8px; }
 h3 { font-size:32px; }
 .text-project { padding:24px; }
 .about { grid-template-columns:minmax(0,1fr); padding:24px 0; margin-top:45px; gap:28px; }
 .portrait img { height:320px; object-position:center 33%; }
 .about h2 { font-size:44px; }
 footer { flex-direction:column; align-items:flex-start; gap:4px; padding-block:24px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* Each affiliation uses the same mark-and-text rhythm as the identity. */
.brand-strip { display:block; min-width:0; width:100%; }
.brand-links { display:grid; grid-template-columns:1fr 1.15fr 1.25fr 2fr; gap:16px; align-items:center; }
.academic-affiliation { display:grid; grid-template-columns:.9fr 1.1fr; column-gap:18px; min-width:0; }
.academic-affiliation .brand-nvidia { position:relative; }
.academic-affiliation .brand-nvidia::before { content:""; position:absolute; left:-10px; top:10px; height:32px; width:1px; background:var(--line); }
.brand-link { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:10px; min-width:0; min-height:56px; padding:5px 3px; text-decoration:none; border:1px solid transparent; border-radius:3px; }
.brand-uchicago { grid-template-columns:68px minmax(0,1fr); }
.brand-usc { grid-template-columns:48px minmax(0,1fr); }
.brand-nvidia { grid-template-columns:36px minmax(0,1fr); }
.brand-link:hover,.brand-link[aria-current="true"] { background:var(--paper); border-color:var(--line); color:var(--ink); }
.brand-link[aria-current="true"] { box-shadow:inset 0 -3px var(--orange); }
.brand-mark { display:flex; align-items:center; justify-content:center; width:100%; height:40px; gap:12px; }
.brand-mark img { width:100%; max-width:106px; height:40px; object-fit:contain; mix-blend-mode:multiply; }
.brand-edwards img { max-width:42px; }
.brand-jelsert img { max-width:54px; }
.brand-usc img { max-width:62px; }
.brand-uchicago img { max-width:114px; }
.research-nvidia { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.research-nvidia img { width:34px; height:28px; filter:brightness(0); }
.research-nvidia strong { font:700 11px Arial,sans-serif; letter-spacing:0; }
.brand-relation { display:block; font-size:12px; font-weight:550; line-height:1.4; color:var(--ink); text-align:left; overflow-wrap:normal; }
.brand-relation>span { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-top:3px; }
.research-label { justify-self:center; }
.project-contribution { flex:1; margin-top:12px; color:var(--muted); font-size:14px; line-height:1.65; }
.project-details { border-top:1px solid var(--line); margin-top:18px; }
.project-details summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; color:var(--muted); font-size:12px; font-weight:600; }
.project-details summary::after { content:"+"; font-size:20px; font-weight:400; }
.project-details[open] summary::after { content:"−"; }
.project-details p { padding:8px 0 12px; font-size:13px; color:var(--muted); line-height:1.6; }
.project:has(.project-contribution) .project-link { padding-top:8px; }
.intro .intro-context { font-size:13px; margin-top:10px; }
.immersive-invitation { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; padding:20px 26px; margin-bottom:34px; border-block:2px solid #d57a21; background:var(--orange); color:#202f44; text-decoration:none; }
.immersive-invitation:hover { background:#ffb15f; color:#202f44; }
.invitation-copy { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 20px; }
.invitation-copy strong { font:italic 700 32px/1.1 Barlow,sans-serif; }
.invitation-copy>span { font-size:16px; text-decoration:underline; text-underline-offset:4px; }
.invitation-arrow { flex-shrink:0; font-size:32px; line-height:1; }
.experience-context { border-left:3px solid var(--orange); padding:9px 14px; margin:0 0 20px; font-size:13px; color:var(--muted); background:#e2eaf4; }
.work-bar { flex-wrap:wrap; }
.work-bar h2 { margin-right:auto; }
.reset-filter { display:inline-flex; align-items:center; min-height:44px; color:var(--blue); font-size:12px; }
.project-skills { margin-top:18px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.5; }
.alma-preview { background:#0f0b09 !important; }
#scarlet .project-media img { background:#300910; }
@media (max-width:850px) {
 h1 { font-size:54px; }
 .skill-library { position:static; max-height:none; }
}
@media (max-width:1350px) {
 .header-nav { grid-template-columns:1fr auto; gap:12px 20px; padding-block:12px 8px; }
 .header-nav .brand-strip { grid-column:1 / -1; grid-row:2; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; padding-block:8px 2px; border-top:1px solid var(--line); scroll-padding-inline:4px; }
 .header-nav .main-nav { grid-column:2; grid-row:1; }
 .brand-links { grid-template-columns:minmax(150px,1fr) minmax(165px,1.15fr) minmax(178px,1.25fr) minmax(284px,2fr); gap:20px; }
}
@media (max-width:700px) {
 .header-nav { column-gap:12px; }
 .header-nav .brand-strip { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; padding:4px; margin-inline:-4px; width:calc(100% + 8px); scroll-padding-inline:4px; }
 .brand-links { width:max-content; grid-template-columns:170px 190px 200px 320px; gap:20px; }
 .brand-link { min-height:56px; }
 .brand-relation { font-size:12px; }
 .header-nav .name { font-size:15px; gap:9px; }
 .header-nav .main-nav { width:auto; gap:12px; }
 .name small { display:none; }
 .monogram { width:36px; height:40px; font-size:24px; }
}
@media (max-width:600px) {
 .intro { padding-block:24px; }
 h1 { font-size:44px; }
 .intro p { max-width:100%; }
 .intro .intro-context { font-size:12px; }
 .immersive-invitation { padding:16px; margin-bottom:25px; gap:10px; }
 .invitation-copy strong { font-size:28px; }
 .invitation-copy>span { font-size:14px; }
 .invitation-arrow { font-size:26px; }
 .work-bar { gap:4px 16px; }
 .work-bar h2 { font-size:30px; }
 .work-bar p { white-space:normal; }
}
@media (max-width:380px) {
 .header-nav { grid-template-columns:minmax(0,1fr) auto; }
 .header-nav .name { white-space:normal; max-width:95px; font-size:14px; line-height:1.25; }
 .header-nav .monogram { display:none; }
 .header-nav .main-nav { grid-column:2; grid-row:1; }
 .header-nav .brand-strip { grid-row:2; }
}