:root{--ink:#0b0b0b;--mute:#6b6b6b;--line:#e6e6e6;--sans:"Inter Tight",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--serif:"Instrument Serif","Playfair Display",Georgia,serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:#fff;color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.nav{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:10}
.navin{display:flex;justify-content:space-between;align-items:center;height:64px;font-size:15px}
.brand{font-weight:600;text-decoration:none}


.hero{padding-top:180px;padding-bottom:120px;align-items:end}
.meta p{font-size:14px;color:var(--mute);line-height:1.7}.meta a{color:var(--ink)}
h1{font-size:clamp(44px,7.4vw,108px);line-height:.98;font-weight:700;letter-spacing:-.045em}
h1 em{font-size:1.08em;letter-spacing:-.01em}
.sec{padding:96px 40px;border-top:1px solid var(--line)}
h2{font-size:clamp(34px,4vw,52px);line-height:1;font-weight:700;letter-spacing:-.035em}
h2 em{font-size:1.1em}
.body{max-width:760px}.body p{margin-bottom:18px}
.lead{font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.015em;margin-bottom:24px!important}
.ul{text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px;font-weight:500}
.rows{margin-top:72px}
.row{padding:56px 0;border-top:1px solid var(--line);align-items:center}
.row figure{background:#f6f6f6;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center}
.row img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.num{display:block;font-size:13px;color:var(--mute);margin-bottom:10px}
.tag{display:inline-block;font-size:12px;border:1px solid var(--ink);border-radius:999px;padding:3px 12px;margin-bottom:18px}
.row h3{font-size:clamp(20px,2vw,26px);line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.row p{color:var(--mute);margin-bottom:18px}
.doi{font-size:14px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink)}
.doi.muted{border:0;color:var(--mute);font-weight:400}
.allpubs{margin-top:72px;padding-top:72px;border-top:1px solid var(--line)}
h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);font-weight:500;margin:8px 0 16px}
.pubs{list-style:none;margin-bottom:40px}
.pubs li{font-size:15px;line-height:1.55;padding:12px 0;border-bottom:1px solid var(--line)}
.pubs a{font-weight:500;margin-left:4px}
.courses{list-style:none;margin-bottom:36px}
.courses li{display:flex;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.courses em{font-family:var(--sans);font-style:normal;color:var(--mute);font-size:14px;white-space:nowrap}
.big{font-size:clamp(24px,3.2vw,42px);line-height:1.25;letter-spacing:-.03em;font-weight:600}
.big a{text-decoration:none}.big a:hover{border-bottom:2px solid}
.links a{margin-right:28px}
.foot{display:flex;justify-content:space-between;padding:40px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.foot a{text-decoration:none}
.js .fade{will-change:opacity,transform;opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .fade.in{opacity:1;transform:none}

/* menu */
.menu{position:relative;padding:12px 0}
.menubtn{font:500 15px var(--sans);background:none;border:0;cursor:pointer;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--ink)}
.menu nav{position:absolute;right:0;top:100%;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:12px 0 8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease,visibility 0s .25s}
.menu nav a{text-decoration:none;color:var(--mute);font-size:15px;background:#fff;padding:2px 0}.menu nav a:hover,.menu nav a:focus{color:var(--ink)}
.menu:hover nav,.menu:focus-within nav,.menu.open nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .25s ease,visibility 0s}
/* page split with vertical line */
.page{position:relative;max-width:1240px;margin:0 auto}
.page::before{content:"";position:absolute;top:0;bottom:0;left:calc(40px + (100% - 80px)*.35);border-left:1px solid var(--line);pointer-events:none}
.page .wrap{max-width:none}
.split{display:grid;grid-template-columns:35fr 65fr;gap:0}
.split>:first-child{padding-right:48px}.split>:last-child{padding-left:48px}
.side{position:sticky;top:96px;align-self:start}
.hero .side{position:static;align-self:end}
.rows{margin-top:72px}
.rowtext{align-self:center}
.allpubs{margin-top:0}
.body{max-width:none}
.js .rowtext.fade{transform:translateX(-24px)}.js .rowtext.fade.in{transform:none}
@media (max-width:860px){
.wrap{padding:0 20px}.sec{padding:64px 20px}
.page::before{display:none}
.split{grid-template-columns:1fr;gap:24px}.split>:first-child,.split>:last-child{padding:0}
.side{position:static}
.row figure{order:-1}
.hero{padding-top:120px;padding-bottom:72px}.hero .meta{order:2}
.courses li{flex-direction:column;gap:2px}.foot{padding:28px 20px}}
.split>figure{padding-left:0;margin-left:48px}@media (max-width:860px){.split>figure{margin-left:0}}

/* v4: menu at start of right column, expands horizontally */
.navin{display:grid;grid-template-columns:35fr 65fr;justify-content:initial}
.menu{padding:0 0 0 48px;display:flex;align-items:center;gap:28px;height:64px}
.menu nav{position:static;flex-direction:row;align-items:center;gap:28px;padding:0;opacity:1;visibility:visible;transform:none;transition:none;pointer-events:none}
.menu nav a{opacity:0;transform:translateX(-12px);transition:opacity .3s ease,transform .3s ease;transition-delay:0s;white-space:nowrap}
.menu:hover nav,.menu:focus-within nav,.menu.open nav{pointer-events:auto}
.menu:hover nav a,.menu:focus-within nav a,.menu.open nav a{opacity:1;transform:none}
.menu:hover nav a:nth-child(2),.menu:focus-within nav a:nth-child(2),.menu.open nav a:nth-child(2){transition-delay:.05s}
.menu:hover nav a:nth-child(3),.menu:focus-within nav a:nth-child(3),.menu.open nav a:nth-child(3){transition-delay:.1s}
.menu:hover nav a:nth-child(4),.menu:focus-within nav a:nth-child(4),.menu.open nav a:nth-child(4){transition-delay:.15s}
.menu:hover nav a:nth-child(5),.menu:focus-within nav a:nth-child(5),.menu.open nav a:nth-child(5){transition-delay:.2s}
@media (max-width:860px){.navin{display:flex;justify-content:space-between}.menu{padding:0;gap:14px;flex-direction:row-reverse}.menu nav{gap:12px}.menu nav a{font-size:13px;transform:translateX(12px)}.menu:hover nav,.menu:not(.open):not(:focus-within) nav{pointer-events:none}.menu:not(.open):not(:focus-within):hover nav a{opacity:0}.menu.open nav{pointer-events:auto}}
@media (prefers-reduced-motion:reduce){.menu nav a{transition:none}}
/* v4.1 hard reset for menu button + inline row */
.menu .menubtn{-webkit-appearance:none;appearance:none;border:0;border-radius:0;background:none;box-shadow:none;margin:0;padding:2px 0;font:500 15px var(--sans);color:var(--ink);line-height:1.2;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;flex:0 0 auto}
@media (min-width:861px){.menu{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.menu nav{display:flex;flex-direction:row;position:static}}

.tlink{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s}
.tlink:hover{background-size:100% 1px}
/* v4.2 teaching: match body sizes */
#teaching .body>p{font-size:17px;line-height:1.65;color:var(--ink,#111)}
.courses li{font-size:15px}
.courses em{font-size:13px}
/* v5 */
.hero .side{align-self:center}
.social{display:flex;align-items:center;gap:14px;margin-top:18px}
.social a{color:#8a8a8a;display:inline-flex;transition:color .2s}.social a:hover{color:#111}
.social .mail{font-size:13px;text-decoration:none}
.rowtext p.fill .w{color:#c8c8c8;transition:color .25s}.rowtext p.fill .w.on{color:#111}
.vlink{display:contents}
.cc,.cc a,.cc button{cursor:none}
.cdot,.cring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .2s}
.cshow .cdot,.cshow .cring{opacity:1}
.cdot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#111;border-radius:50%}
.cring{width:0;height:0}
.cring::before{content:"";position:absolute;width:32px;height:32px;left:-16px;top:-16px;border:1px solid rgba(0,0,0,.18);border-radius:50%;transition:all .3s ease}
.cring span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);font:500 14px var(--sans);color:#111;opacity:0;transition:all .3s ease;white-space:nowrap}
.cring.view::before{width:90px;height:90px;left:-45px;top:-45px;background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cring.view span{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.cring::before,.cring span,.rowtext p .w{transition:none}}
.side h2 em{display:block}

/* v6 research banner */
body{overflow-x:clip}
.rbanner{position:relative;z-index:2;width:100vw;margin:-96px 0 96px calc(50% - 50vw);background:#f2f2f2;padding:20px 40px;display:flex;justify-content:center;border-bottom:1px solid var(--line)}
.rbanner svg{width:100%;max-width:1200px;height:auto;max-height:300px;display:block}
.rbanner .bl{font:700 30px var(--sans);fill:#0b0b0b;letter-spacing:-.01em}
.rbanner .bs{font:italic 400 30px var(--serif);fill:#0b0b0b}
.js .rbanner.fade{transform:none}
.js .rbanner .lobe,.js .rbanner .core{opacity:0;transition:opacity 1s ease}
.js .rbanner .l2{transition-delay:.25s}.js .rbanner .core{transition-delay:.5s}
.js .rbanner.in .lobe,.js .rbanner.in .core{opacity:1}
@media (max-width:700px){.rbanner{padding:16px 12px;margin-bottom:64px}.rbanner .bl,.rbanner .bs{font-size:40px}}
@media (prefers-reduced-motion:reduce){.rbanner .lobe,.rbanner .core{opacity:1!important;transition:none!important}}
.rbanner{flex-direction:column;align-items:center}.rbanner .bcap{max-width:640px;text-align:center;font-size:15px;line-height:1.6;color:#444;margin:4px auto 8px}.rbanner .bcap em{color:#0b0b0b;font-size:17px}
.rbanner{width:100vw;left:50%;margin-left:-50vw!important;margin-right:0}
.rbanner{left:0;margin-left:calc(50% - 50vw)!important}
.pubs .ptag{display:inline-block;margin-left:.4em;padding:.05em .55em;border:1px solid currentColor;border-radius:999px;font-size:.72em;letter-spacing:.04em;text-transform:uppercase;opacity:.6;vertical-align:middle}

.pubs li.more{list-style:none}
.pubs li.more::before{content:none!important}
.pubs a.gs{color:#8a8a8a;display:inline-flex;vertical-align:-3px;margin-left:6px;transition:color .2s}.pubs a.gs:hover{color:#111}
#teaching h4{text-transform:none!important;letter-spacing:-.01em!important;color:var(--ink)!important;font-size:17px!important;font-weight:600!important;margin:28px 0 6px}
.pubs em,.body li em:not(.courses em){font-family:var(--sans);font-style:italic;letter-spacing:normal}
@keyframes jig{0%,100%{transform:rotate(0)}30%{transform:rotate(-.4deg)}65%{transform:rotate(.3deg)}}
.row img{transition:transform .4s ease}
.row figure:hover img{animation:jig .45s ease-out 1}
@media (prefers-reduced-motion:reduce){.row figure:hover img{animation:none}}
/* shorter rows */
#research .row{padding:36px 0}
#research .row figure{aspect-ratio:16/9;max-height:52vh}
#research .rows{margin-top:48px}
.headshot{display:block;width:100%;max-width:240px;margin-top:32px;filter:grayscale(1)}
/* M3 lab mark */
.hero .side{align-self:stretch!important;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.hero .lab .m3{display:block;font:600 clamp(120px,17.5vw,260px)/.74 var(--sans);letter-spacing:-.05em;color:var(--ink)}
.hero .lab .m3 sup{font-size:.45em;vertical-align:top;position:relative;top:.05em;margin-left:.02em}
.hero .lab .mmm{display:block;margin-top:14px;font-size:15px;color:var(--mute);letter-spacing:.01em}
.hero .kw p{margin:0}
.hero h1{margin-bottom:0}
@media (max-width:860px){.hero .side{gap:28px}}
.hero .kw{position:relative;top:-16px}
.hero .lab .m3{margin-left:-.05em}
.hero h1{align-self:start}
.hero .kw{margin-top:auto}
.hero h1{position:relative;top:-7px}
.hero .kw p{font-size:12.5px;line-height:1.7;color:#9a9a9a;letter-spacing:.01em}
.hero .kw .social{margin-top:12px}.hero .kw .social svg{width:15px;height:15px}.hero .kw .social a{color:#a8a8a8}.hero .kw .social .mail{font-size:12px}
/* aura background */
.hero{position:relative;isolation:isolate}
.aura{position:absolute;z-index:-1;top:-120px;bottom:0;left:calc(50% - 50vw);width:100vw;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.aura i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-8vw;background:#c9d6c2;animation:drift1 26s ease-in-out infinite alternate}
.aura i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:-12vw;background:#ecd3bf;animation:drift2 30s ease-in-out infinite alternate}
.aura i:nth-child(3){width:38vw;height:38vw;left:30vw;top:18vw;background:#cfd9e3;animation:drift3 34s ease-in-out infinite alternate}
.aura i:nth-child(4){width:30vw;height:30vw;right:12vw;top:22vw;background:#e3c7c3;opacity:.4;animation:drift1 38s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(8vw,6vw) scale(1.1)}}
@keyframes drift2{to{transform:translate(-10vw,8vw) scale(.92)}}
@keyframes drift3{to{transform:translate(6vw,-8vw) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.aura i{animation:none}}
.nav{background:transparent;backdrop-filter:none;transition:background .3s}
.nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.menu nav a{background:transparent}
.aura i{opacity:.8}.aura i:nth-child(4){opacity:.6}
/* mono aura */
.aura i:nth-child(1){background:#d4d4d4}.aura i:nth-child(2){background:#e2e2e2}.aura i:nth-child(3){background:#c8c8c8}.aura i:nth-child(4){background:#dadada}
.aura i{opacity:.7}.aura i:nth-child(4){opacity:.5}
.hero .kw .social a{transition:color .2s,transform .2s}
.hero .kw .social a:hover,.hero .kw .social a:focus-visible{color:var(--ink);transform:translateY(-2px)}
.hero .kw .social .mail:hover{text-decoration:underline;text-underline-offset:3px}