@font-face{font-family:Inter;src:url('./assets/fonts/inter-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Stack Sans Notch';src:url('./assets/fonts/stack-sans-notch-light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Stack Sans Notch';src:url('./assets/fonts/stack-sans-notch-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Pixelify Sans';src:url('./assets/fonts/pixelify-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

:root{--ink:#2c3554;--pink:#ed8aed;--pale-pink:rgba(255,219,255,.29);--heading:'Stack Sans Notch',sans-serif;--body:Inter,sans-serif;--content:1088px;--header-height:86px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}
body{margin:0;background:#fff;color:#000;font-family:var(--body);font-weight:400}
body:has(dialog[open]){overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
button:not(:disabled),a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0;font-weight:400}
.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;left:16px;top:-100px;z-index:100;background:#fff;padding:12px 18px;border:2px solid var(--ink)}
.skip-link:focus{top:12px}
.site-header{position:fixed;inset:0 0 auto;z-index:10;height:var(--header-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px 0 30px;background:rgba(255,255,255,.9);backdrop-filter:blur(5px);color:var(--ink);font-family:var(--heading)}
.wordmark{justify-self:start;font-size:26px;font-weight:300;white-space:nowrap}
.site-header nav{display:flex;align-items:center;gap:40px;height:100%}
.nav-link{position:relative;font-size:21px;font-weight:300;opacity:.8;padding:10px 0}
.nav-link:hover,.nav-link.is-active{opacity:1}
.nav-link.is-active{font-weight:400}
.nav-link.is-active::after{content:'';position:absolute;width:21px;height:2px;background:url('./assets/images/nav-underline.svg') center no-repeat;bottom:0;left:50%;transform:translateX(-50%)}
.flower{position:relative;display:inline-block;flex-shrink:0}
.flower img{position:absolute;max-width:none;transform:rotate(90deg)}
.flower .flower-center{position:absolute;background:var(--pink)}
.header-flower{width:41px;height:41px;justify-self:end;transition:transform .3s}
.header-flower:hover{transform:rotate(90deg)}
.header-flower .petals{left:3.5px;top:4.5px}
.header-flower .outline{left:0;top:0}
.header-flower .flower-center{width:13px;height:12px;left:14px;top:15px}
.section-container{width:calc(100% - 48px);max-width:var(--content);margin-inline:auto}
.hero{position:relative;isolation:isolate;height:900px;overflow:hidden}
.hero-gradient{position:absolute;z-index:-2;top:-63px;left:50%;transform:translateX(-50%);width:max(100%,1501px);height:905px;overflow:hidden;pointer-events:none}
.hero-gradient img{position:absolute;width:100%;max-width:none;height:843.73px;top:61.54px;left:0}
main{overflow-x:clip;overflow-y:visible}
.hero h1{position:absolute;top:117px;left:0;width:100%;text-align:center;font-size:110px;line-height:116px;letter-spacing:-2.2px;color:var(--ink)}
.hero-role{position:absolute;top:215px;left:0;width:100%;height:166px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:var(--heading);font-size:150px;line-height:1.1}
.hero-role span{display:block}
.portrait{position:absolute;top:310px;left:calc(50% - 365px);width:730px;height:554px;overflow:hidden;pointer-events:none}
.portrait img{position:absolute;max-width:none;width:730px;height:730px;left:0;top:-176px}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 806px,#fff 845px);pointer-events:none}
.hero-fade span{position:absolute;width:638px;height:425px;background:linear-gradient(to bottom,transparent,#fff 9.135%)}
.hero-fade span:nth-child(1){left:calc(50% - 308px);top:806px}
.hero-fade span:nth-child(2){left:calc(50% - 738px);top:812px;transform:rotate(6.74deg)}
.hero-fade span:nth-child(3){left:calc(50% + 135px);top:807px;transform:rotate(-6.74deg)}
.resume-button{position:absolute;left:max(47px,calc((100% - 1280px)/2 + 47px));top:526px;width:382px;height:82px;border:0;padding:0;background:transparent;filter:drop-shadow(0 4px 4.1px rgba(0,0,0,.21));transition:transform .2s}
.resume-background{width:100%;height:100%}
.resume-button span{position:absolute;top:23px;left:64px;font-family:'Pixelify Sans',monospace;font-size:24px;line-height:29px;white-space:nowrap}
.pixel-cursor{position:absolute;left:315px;top:39px;width:59px;height:63px}
.resume-button:hover{transform:translateY(-4px)}
h2{font-family:var(--heading);font-size:32px;line-height:1.25;display:flex;align-items:center;gap:18px}
.section-flower{width:30px;height:30px}
.section-flower .petals{left:2.561px;top:3.2927px}
.section-flower .outline{left:0;top:0}
.section-flower .flower-center{width:9.5122px;height:8.7805px;left:10.2439px;top:10.9756px}
.about{padding-top:30px;display:grid;grid-template-columns:minmax(0,534px) minmax(0,469px);gap:59px;height:474px}
.about h2{height:31px}
.body-copy{font-size:22px;line-height:36px}
.about .body-copy{margin-top:28px;padding-left:3px}
.body-copy ul{padding-left:33px;margin:36px 0 0}
.about-photo{position:relative;overflow:hidden;isolation:isolate;border:13px solid #ffe5ff;border-radius:42px;aspect-ratio:469/444;align-self:start}
.about-photo img{position:absolute;max-width:none;width:99.89%;height:131.87%;top:-24.6%;left:.02%}
.affiliations{overflow:hidden;width:100%;margin:81px auto 33px;height:121.236px;padding-block:6px}
.affiliation-track{display:flex;width:max-content;align-items:center;animation:scroll-affiliations 70s linear infinite}
.affiliation-cycle{display:flex;align-items:center;justify-content:space-around;min-width:100vw;flex-shrink:0}
.affiliation-set{display:flex;align-items:center;flex-shrink:0;gap:16px;padding-inline:8px}
.affiliation-logo{transform:scale(1);transition:transform .25s ease}
.affiliation-logo:hover{transform:scale(1.05)}
.affiliations:hover .affiliation-track,.affiliations:focus-within .affiliation-track{animation-play-state:paused}
.affiliations:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@keyframes scroll-affiliations{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ubc-logo{width:109.236px;height:109.236px;object-fit:cover;flex-shrink:0}
.uva-logo{display:block;position:relative;width:259.142px;height:74.908px;overflow:hidden;flex-shrink:0}
.uva-logo img{position:absolute;width:100%;max-width:none;height:345.95%;top:-121.62%;left:0}
.kaust-logo{width:172.803px;height:93.915px;object-fit:cover;flex-shrink:0}
.research{background:var(--pale-pink);min-height:623px;padding:29px 0 98px}
.research h2{height:77px}
.research-grid{display:grid;grid-template-columns:minmax(0,649fr) minmax(0,376fr);align-items:start;gap:37px;max-width:1062px}
.research-grid>*{min-width:0}
.research-photos{position:relative;aspect-ratio:649/419}
.research-photo{width:86.5948%;height:100%;object-fit:fill;object-position:bottom;border-radius:26px}
.islets-photo{position:absolute;right:0;top:-36px;width:37.9045%;height:auto;aspect-ratio:1;border:3px solid #fff;border-radius:50%;object-fit:cover;object-position:bottom}
.design{padding-top:44px;scroll-margin-top:-20px}
.design h2{height:77px}
.design-intro{margin-top:2px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 44px;margin:49px auto 0;max-width:1018px}
.project-card{display:flex;flex-direction:column;border:0;border-radius:37px;padding:0;background:var(--pale-pink);overflow:hidden;text-align:left;min-width:0;transition:transform .25s,box-shadow .25s}
button.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(44,53,84,.1)}
.project-art{position:relative;display:block;width:100%;aspect-ratio:487/325;overflow:hidden}
.portfolio-art{background:rgba(255,158,255,.47)}
.portfolio-art img{position:absolute;left:1.85%;top:11.385%;width:96.1%;height:86.77%;object-fit:cover;filter:drop-shadow(4px 3px 4px rgba(0,0,0,.25))}
.project-card:is([data-project="magazine"],[data-project="science"]){background:#fff}
.project-card:is([data-project="magazine"],[data-project="science"]) .project-title{background:var(--pale-pink)}
.magazine-art,.science-art{container-type:inline-size}
.magazine-art{background:rgba(80,119,36,.56)}
/* Positions and shadow lengths scale from Figma's 487px thumbnail width. */
.magazine-stack{position:absolute;inset:0}
.magazine-stack .paper{position:absolute;left:15.8428953%;top:17.6512154%;width:71.7004107%;aspect-ratio:349.181/493.801;background:#fff;border:.0410678cqw solid #000;box-shadow:0 .8213552cqw 3.0800821cqw rgba(0,0,0,.1)}
.magazine-stack .paper-back{transform:rotate(-9.74deg)}
.magazine-stack .paper-middle{transform:rotate(-4.16deg);box-shadow:0 .8213552cqw 3.0390144cqw rgba(0,0,0,.1)}
.magazine-stack img{position:absolute;left:15.863922%;top:17.7126154%;width:71.6954825%;height:auto;transform:rotate(1.72deg);object-fit:cover;box-shadow:0 .8213552cqw 3.0390144cqw rgba(0,0,0,.1)}
.science-art{background:rgba(165,209,254,.47);aspect-ratio:487/326}
.poster-crop{position:absolute;left:6.9815195%;top:17.1779141%;width:85.6262834%;height:87.7300613%;border-radius:2.6694045cqw 2.6694045cqw 0 0;box-shadow:1.026694cqw -1.026694cqw 2.7926078cqw rgba(0,0,0,.25);overflow:hidden}
.science-art+.project-title{min-height:102px}
.poster-crop img{position:absolute;left:0;top:-.02%;width:100%;height:109.47%;object-fit:fill}
.construction-art{background:rgba(255,239,158,.47)}
.construction-art img{position:absolute;max-width:none;width:142.5%;height:213.74%;left:-21.44%;top:-57.02%}
.project-title{display:flex;align-items:center;min-height:103px;padding:20px 38px;font-family:var(--heading);font-size:26px;line-height:1.3}
.site-footer{max-width:1280px;margin:58px auto 0;text-align:center;color:var(--ink);overflow:hidden}
.site-footer>a{display:inline-block;font-family:var(--heading);font-size:18px;margin-bottom:44px;border-bottom:1px solid #ed8aed;padding-bottom:4px}
.site-footer>a:hover{border-color:var(--ink)}
.site-footer>p{font-family:var(--heading);font-size:clamp(52px,17.1875vw,220px);line-height:.95;letter-spacing:-.035em;white-space:nowrap;transform:translateY(.11em)}
dialog{border:0;border-radius:24px;padding:48px;max-width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);color:var(--ink);box-shadow:0 20px 90px rgba(44,53,84,.25)}
dialog::backdrop{background:rgba(44,53,84,.5);backdrop-filter:blur(5px)}
dialog h2{font-size:28px;margin-bottom:20px;padding-right:20px}
dialog p{font-size:17px;line-height:1.7}
.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;border-radius:50%;width:40px;height:40px;font-size:30px;color:var(--ink);line-height:1}
.dialog-close:hover{background:var(--pale-pink)}
.text-link{display:inline-block;margin-top:20px;border-bottom:2px solid var(--pink);padding-bottom:4px}
.project-dialog{max-width:min(960px,calc(100vw - 32px))}
.project-dialog>img{max-height:70dvh;width:100%;object-fit:contain;background:var(--pale-pink);border-radius:8px}
.project-dialog>p{margin-top:16px}

@media(min-width:769px) and (max-width:1150px){
  .about{gap:40px;grid-template-columns:531fr 469fr}.body-copy{font-size:19px;line-height:32px}
  .research-grid{gap:28px}.research{min-height:0;padding-bottom:72px}
  .about{height:auto}.affiliations{margin-top:70px}
  .project-title{font-size:23px;padding-inline:26px}
}
@media(max-width:768px){
  :root{--header-height:108px}
  .site-header{grid-template-columns:1fr auto;grid-template-rows:58px 50px;padding:0 22px}
  .wordmark{font-size:23px}.header-flower{transform:scale(.75);transform-origin:right center}
  .site-header nav{grid-row:2;grid-column:1/-1;justify-content:center;gap:clamp(20px,6vw,42px);padding-bottom:8px}
  .nav-link{font-size:17px;padding:6px 0 9px}
  .hero{height:720px}
  .hero h1{top:146px;font-size:clamp(45px,10vw,76px);line-height:1.1;letter-spacing:-.04em}
  .hero-role{top:208px;font-size:clamp(57px,13.4vw,103px);height:105px}
  .portrait{top:300px;left:calc(50% - 280px);width:560px;height:425px}
  .portrait img{width:560px;height:560px;top:-135px}
  .hero-gradient{width:max(100%,1000px);top:45px;height:680px}
  .hero-gradient img{height:680px;top:0}
  .hero-fade{background:linear-gradient(to bottom,transparent 674px,#fff 713px)}
  .hero-fade span:nth-child(1){left:calc(50% - 319px);top:674px}
  .hero-fade span:nth-child(2){left:calc(50% - 750px);top:680px}
  .hero-fade span:nth-child(3){left:calc(50% + 130px);top:680px}
  .resume-button{left:22px;top:576px;width:275px;height:59px}
  .resume-button span{font-size:17px;line-height:21px;left:46px;top:16px}
  .pixel-cursor{width:42px;height:45px;left:227px;top:28px}
  .section-container{width:calc(100% - 44px)}
  h2{font-size:28px;gap:14px}
  .body-copy{font-size:17px;line-height:29px}
  .body-copy ul{margin-top:24px;padding-left:24px}
  .about{grid-template-columns:1fr;gap:32px;padding-top:22px;height:auto}
  .about .body-copy{margin-top:24px;padding-left:0}
  .about-photo{width:min(100%,469px);justify-self:center;border-width:10px;border-radius:34px}
  .affiliations{margin:42px auto 28px;height:88px}
  .ubc-logo{width:76px;height:76px}.uva-logo{width:180px;height:52px}.kaust-logo{width:120px;height:65px}
  .research{min-height:0;padding:22px 0 42px}
  .research h2,.design h2{height:58px}
  .research-grid{grid-template-columns:1fr;gap:28px;margin-top:18px}
  .research-photos{margin-top:8px}
  .islets-photo{top:-22px;border-width:2px}
  .research-photo{border-radius:20px}
  .design{padding-top:28px}
  .design-intro{margin-top:12px}
  .project-grid{gap:24px;margin-top:30px;grid-template-columns:1fr;max-width:487px}
  .project-card{border-radius:28px}
  .project-title{min-height:82px;padding:18px 26px;font-size:23px}
  .science-art+.project-title{min-height:82px}
  .site-footer{margin-top:44px}.site-footer>a{font-size:16px;margin-bottom:36px}
  .site-footer>p{font-size:17.1vw}
  dialog{padding:42px 24px 28px}dialog h2{font-size:24px}
}
@media(min-width:540px) and (max-width:768px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:20px}
  .project-title{font-size:19px;padding:16px;min-height:82px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}