:root { --canvas:#fff; --paper:#f4f3ef; --ink:#17213b; --indigo:#314d8e; --slate:#647084; --line:#d9dde4; --copper:#b96f43; --serif:"Cormorant Garamond", Georgia, serif; --sans:Manrope, Arial, sans-serif; --gutter:clamp(1.25rem,5vw,5rem); --section:clamp(4.5rem,10vw,9rem); scroll-behavior:smooth; scrollbar-color:var(--indigo) var(--paper); scrollbar-width:thin; }
* { box-sizing:border-box; } html { background:var(--canvas); overflow-x:hidden; } body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--canvas); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } ::selection { color:#fff; background:var(--indigo); } ::-webkit-scrollbar { width:12px; } ::-webkit-scrollbar-track { background:var(--paper); } ::-webkit-scrollbar-thumb { background:var(--indigo); border:3px solid var(--paper); } a { color:inherit; } button { font:inherit; } img { display:block; max-width:100%; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip-link { position:fixed; z-index:20; left:1rem; top:-4rem; padding:.75rem 1rem; color:#fff; background:var(--ink); } .skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:5; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.8rem var(--gutter); } .wordmark { font-family:var(--serif); font-size:1.5rem; text-decoration:none; letter-spacing:-.03em; } .site-nav { display:flex; align-items:center; gap:clamp(1.1rem,2.5vw,2.8rem); font-size:.84rem; } .site-nav a { text-decoration:none; padding:.35rem 0; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; } .site-nav a:hover, .site-nav a:focus-visible { color:var(--indigo); border-color:var(--copper); } .menu-toggle { display:none; }
.hero { position:relative; min-height:730px; min-height:min(880px,100vh); display:grid; grid-template-columns:minmax(0,1fr) minmax(430px,.93fr); overflow:hidden; isolation:isolate; padding:8.6rem var(--gutter) 0; } .hero__copy { position:relative; z-index:2; align-self:center; padding-bottom:5rem; } .line-mark { display:block; width:4.6rem; height:2px; margin-bottom:2rem; background:var(--copper); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:500; } h1 { margin-bottom:1.05rem; font-family:var(--serif); font-size:clamp(4rem,7vw,7.3rem); line-height:.8; letter-spacing:-.065em; } .hero__role { margin-bottom:1.15rem; color:#536077; font-family:var(--serif); font-size:clamp(1.5rem,2.2vw,2.15rem); letter-spacing:-.035em; } .hero__role span { color:var(--copper); } .hero__statement { max-width:100%; margin-bottom:2.25rem; overflow-wrap:anywhere; color:var(--slate); font-family:var(--serif); font-size:clamp(1.22rem,1.8vw,1.65rem); } .hero__actions { display:flex; align-items:center; gap:2.5rem; } .button { display:inline-flex; align-items:center; gap:2rem; padding:1rem 1.35rem; font-size:.87rem; font-weight:600; text-decoration:none; transition:transform .2s ease, background .2s ease; } .button--ink { color:#fff; background:var(--indigo); } .button--ink:hover,.button--ink:focus-visible { background:var(--ink); transform:translateY(-2px); } .button span { color:#dbb19a; font-size:1.45rem; line-height:0; } .underlined-link { display:inline-block; border:0; border-bottom:1px solid var(--ink); padding:0 0 .3rem; background:none; cursor:pointer; color:var(--ink); font-size:.88rem; font-weight:600; text-decoration:none; transition:border-color .2s ease,color .2s ease; } .underlined-link:hover,.underlined-link:focus-visible { color:var(--indigo); border-color:var(--copper); } .hero__aside { margin:4.25rem 0 0; color:#5c6980; font-family:var(--serif); font-size:1.45rem; font-style:italic; line-height:1.03; } .hero__aside::after { content:""; display:block; width:3.7rem; height:1px; margin-top:1.3rem; background:var(--copper); }
.hero__portrait { position:relative; z-index:1; align-self:end; height:calc(100% - 2rem); } .portrait-crop { position:absolute; inset:0 0 0 0; overflow:hidden; } .portrait-crop::after { position:absolute; content:""; inset:auto 0 0; height:18%; background:linear-gradient(transparent,rgba(255,255,255,.96)); pointer-events:none; } .portrait-crop img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:saturate(.9) contrast(1.02); } .hero__equations { position:absolute; z-index:0; right:0; bottom:3%; width:67%; height:74%; color:#5d76a9; pointer-events:none; } .hero__equations svg { position:absolute; right:-9%; bottom:0; width:111%; height:85%; overflow:visible; } .hero__equations path,.research__curve path { stroke:#8ba0ca; stroke-width:1.1; opacity:.68; } .equation { position:absolute; font-family:var(--serif); font-size:clamp(1.8rem,3vw,3rem); font-style:italic; color:#7d8db0; } .equation--one { top:20%; left:10%; } .equation--two { top:14%; right:3%; }
.section { padding:var(--section) var(--gutter); } .section-label { margin-bottom:1.75rem; color:var(--copper); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } h2 { font-family:var(--serif); font-size:clamp(3rem,5.1vw,5.8rem); line-height:.88; letter-spacing:-.06em; } h2 em { color:var(--indigo); font-weight:500; } .about { padding-top:clamp(3.75rem,6vw,5.5rem); } .about__layout { display:grid; grid-template-columns:1.12fr .88fr; align-items:start; gap:clamp(2rem,8vw,11rem); } .about h2 { margin:0; } .about__copy { max-width:34rem; padding-top:.7rem; color:#40506b; font-size:1.02rem; } .about__copy p { margin-bottom:1.35rem; }
.section--paper { background:var(--paper); } .research { position:relative; overflow:hidden; } .research__masthead { position:relative; z-index:1; display:grid; grid-template-columns:1fr 2.2fr; align-items:start; border-bottom:1px solid #cdd3dd; padding-bottom:3.4rem; } .research__masthead .section-label { margin:1rem 0 0; } .research__masthead h2 { margin:0; } .research__areas { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,5rem); padding-top:4rem; } .research__areas article { border-top:1px solid #bfc8d6; padding-top:1.2rem; } .research__areas span { color:var(--copper); font-size:.7rem; font-weight:700; letter-spacing:.1em; } .research__areas h3 { margin:.75rem 0 1rem; font-family:var(--serif); font-size:clamp(1.85rem,2.6vw,2.7rem); line-height:.93; letter-spacing:-.045em; } .research__areas p { max-width:18rem; margin:0; color:#536077; font-size:.88rem; } .research__curve { position:absolute; z-index:0; left:0; right:0; bottom:-1rem; width:100%; height:15rem; opacity:.55; }
.publications__header { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding-bottom:3rem; border-bottom:1px solid var(--ink); } .publications__header .section-label { margin-bottom:1rem; } .publications__header h2 { margin:0; } .publications__header > p { max-width:25rem; margin:0 0 .3rem; color:var(--slate); font-family:var(--serif); font-size:1.32rem; line-height:1.2; } .publication-list { margin:0; padding:0; list-style:none; } .publication-list li { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:1rem; border-bottom:1px solid var(--line); padding:1.55rem 0 1.45rem; transition:padding-left .2s ease, background .2s ease; } .publication-list li:hover { padding-left:.7rem; background:#fafafa; } .pub-year { color:var(--copper); font-size:.76rem; font-weight:700; letter-spacing:.08em; } .publication-list h3 { margin:0 0 .35rem; max-width:61rem; font-family:var(--serif); font-size:clamp(1.35rem,2.2vw,2rem); line-height:1; letter-spacing:-.035em; } .publication-list p { margin:0; color:var(--slate); font-size:.77rem; } .is-extra { display:none !important; } .publication-list.is-expanded .is-extra { display:grid !important; } .publication-toggle { margin-top:2rem; }
.teaching__intro { display:grid; grid-template-columns:1fr 2.2fr; padding-bottom:4rem; border-bottom:1px solid #cdd3dd; } .teaching__intro .section-label { margin:1rem 0 0; } .teaching__intro h2 { margin:0; } .teaching__grid { display:grid; grid-template-columns:.8fr 1.8fr; gap:clamp(3rem,11vw,13rem); padding-top:4rem; } .courses h3 { margin-bottom:1.1rem; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .courses ul { margin:0; padding:0; list-style:none; border-top:1px solid #c5cbd4; } .courses li { border-bottom:1px solid #c5cbd4; padding:.68rem 0; font-family:var(--serif); font-size:1.24rem; line-height:1.15; } .career-timeline { margin:0; padding:0; list-style:none; } .career-timeline li { display:grid; grid-template-columns:9rem 1fr; gap:1rem; padding:0 0 1.8rem; border-top:1px solid #c5cbd4; padding-top:1.1rem; } .career-timeline time,.credentials time { color:var(--copper); font-size:.71rem; font-weight:700; letter-spacing:.08em; } .career-timeline h3 { margin:0 0 .2rem; font-family:var(--serif); font-size:1.62rem; line-height:1; } .career-timeline p { margin:0; color:var(--slate); font-size:.84rem; }
.credentials { display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; } .credentials h2 { margin:0; } .credentials__list { border-top:1px solid var(--ink); } .credentials__list article { display:grid; grid-template-columns:8rem 1fr; gap:1rem; border-bottom:1px solid var(--line); padding:1.25rem 0; } .credentials__list h3 { margin:0 0 .25rem; font-family:var(--serif); font-size:1.5rem; line-height:1; } .credentials__list p { margin:0; color:var(--slate); font-size:.83rem; }
.impact-factor { display:inline-block; margin-left:.65rem; color:var(--indigo); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; } .service__heading { display:grid; grid-template-columns:1fr 2.2fr; border-bottom:1px solid #cdd3dd; padding-bottom:3.6rem; } .service__heading .section-label { margin:1rem 0 0; } .service__heading h2 { margin:0; } .service__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.5rem clamp(2rem,9vw,10rem); padding-top:4rem; } .service__panel h3 { margin:0 0 1.15rem; color:var(--copper); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .inline-list,.rule-list { margin:0; padding:0; list-style:none; } .inline-list { display:flex; flex-wrap:wrap; gap:.65rem; } .inline-list li { border:1px solid #bfc8d6; padding:.45rem .7rem; font-family:var(--serif); font-size:1.3rem; line-height:1; } .rule-list { border-top:1px solid #c5cbd4; } .rule-list li { border-bottom:1px solid #c5cbd4; padding:.78rem 0; color:#45536b; font-family:var(--serif); font-size:1.1rem; line-height:1.18; } .service__panel--wide { grid-column:span 2; }
.contact { position:relative; overflow:hidden; padding:clamp(4.5rem,9vw,8rem) var(--gutter) 1.8rem; color:#fff; background:var(--ink); } .contact__small { position:relative; z-index:1; max-width:18rem; margin:0 0 1.7rem; color:#b8c2d2; font-size:.72rem; font-weight:600; letter-spacing:.1em; line-height:1.55; text-transform:uppercase; } .contact h2 { position:relative; z-index:1; max-width:55rem; margin-bottom:3rem; color:#fff; } .contact__email { position:relative; z-index:1; display:inline-flex; gap:1rem; border-bottom:1px solid #b4c4e4; padding-bottom:.55rem; color:#fff; font-family:var(--serif); font-size:clamp(1.55rem,3vw,3.15rem); line-height:1; text-decoration:none; transition:border-color .2s ease,color .2s ease; } .contact__email:hover,.contact__email:focus-visible { color:#dbe6ff; border-color:var(--copper); } .contact__email span { color:#d7a68b; font-family:var(--sans); font-size:.7em; } .contact__curve { position:absolute; top:-2.5rem; right:4%; color:#5270ad; font-family:var(--serif); font-size:clamp(7rem,18vw,18rem); font-style:italic; opacity:.35; } .contact__foot { position:relative; z-index:1; display:flex; justify-content:space-between; gap:1rem; margin-top:6rem; border-top:1px solid #405271; padding-top:1.25rem; color:#bdc8d8; font-size:.7rem; } .contact__foot a { color:#fff; text-decoration:none; } .contact__foot a:hover,.contact__foot a:focus-visible { color:#d7a68b; }
:focus-visible { outline:2px solid var(--copper); outline-offset:4px; } @media (max-width:760px) { .site-header { position:absolute; padding-top:1.25rem; } .menu-toggle { position:relative; z-index:7; display:grid; gap:5px; width:42px; padding:12px 8px; border:0; background:transparent; cursor:pointer; } .menu-toggle__line { display:block; width:25px; height:1px; background:var(--ink); transition:transform .2s ease; } .menu-toggle[aria-expanded="true"] .menu-toggle__line:first-child { transform:translateY(3px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__line:last-child { transform:translateY(-3px) rotate(-45deg); } .site-nav { position:absolute; top:0; right:0; width:min(100%,23rem); display:none; flex-direction:column; align-items:flex-start; gap:1.35rem; padding:5.5rem 2rem 2rem; background:#fff; box-shadow:0 8px 30px rgba(23,33,59,.12); font-size:1rem; } .site-nav.is-open { display:flex; } .hero { min-height:auto; grid-template-columns:1fr; padding:8.25rem var(--gutter) 0; } .hero__copy { padding-bottom:2.5rem; } .hero__aside { display:none; } h1 { font-size:clamp(3.7rem,17vw,5rem); } .hero__actions { gap:1.25rem; flex-wrap:wrap; } .hero__portrait { height:min(112vw,38rem); margin:0 calc(var(--gutter) * -1); } .portrait-crop img { object-position:50% 10%; } .hero__equations { right:-25%; bottom:3%; width:123%; height:45%; } .equation--one { display:none; } .equation--two { top:0; right:10%; } .about__layout,.credentials { grid-template-columns:1fr; gap:2.3rem; } .research__masthead,.teaching__intro { display:block; padding-bottom:2.8rem; } .research__masthead .section-label,.teaching__intro .section-label { margin:0 0 1.6rem; } .research__areas { grid-template-columns:1fr; padding-top:2.75rem; } .research__areas article { display:grid; grid-template-columns:3rem 1fr; column-gap:1rem; } .research__areas article span { grid-row:span 2; padding-top:.25rem; } .research__areas h3 { margin:0 0 .55rem; } .research__areas p { grid-column:2; } .publications__header { display:block; padding-bottom:2.2rem; } .publications__header > p { margin-top:1.4rem; } .publication-list li { grid-template-columns:3.4rem 1fr; } .publication-list h3 { font-size:1.45rem; } .teaching__grid { grid-template-columns:1fr; gap:3.5rem; padding-top:2.8rem; } .career-timeline li { grid-template-columns:6.4rem 1fr; } .credentials__list article { grid-template-columns:1fr; gap:.55rem; } .contact__foot { margin-top:4rem; flex-direction:column; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media (max-width:760px) { .menu-toggle { position:absolute; top:.9rem; right:var(--gutter); border:1px solid #aeb7c7; background:#fff; } }
@media (max-width:760px) { .service__heading { display:block; padding-bottom:2.8rem; } .service__heading .section-label { margin:0 0 1.6rem; } .service__grid { grid-template-columns:1fr; gap:3rem; padding-top:2.8rem; } .service__panel--wide { grid-column:auto; } .impact-factor { display:block; width:max-content; margin:.35rem 0 0; } }
.contact__linkedin { position:relative; z-index:1; display:block; width:max-content; max-width:100%; margin-top:1.3rem; border-bottom:1px solid #7890bd; padding-bottom:.3rem; color:#dbe6ff; font-size:.82rem; font-weight:700; text-decoration:none; transition:border-color .2s ease,color .2s ease; } .contact__linkedin:hover,.contact__linkedin:focus-visible { color:#fff; border-color:var(--copper); } .contact__linkedin span { color:#d7a68b; }
.articles-page .site-header { position:relative; border-bottom:1px solid var(--line); } .articles-main { min-height:50vh; } .articles-hero { max-width:78rem; padding:clamp(5.5rem,11vw,10rem) var(--gutter) clamp(4.5rem,9vw,8rem); } .articles-hero .line-mark { margin-bottom:2.5rem; } .articles-hero .section-label { margin-bottom:1.3rem; } .articles-hero h1 { margin:0 0 1.8rem; font-size:clamp(4.2rem,8vw,8.4rem); } .articles-hero h1 em { color:var(--indigo); font-weight:500; } .articles-hero > p:last-child { max-width:39rem; margin:0; color:var(--slate); font-family:var(--serif); font-size:clamp(1.35rem,2.15vw,2rem); line-height:1.15; } .articles-index { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2.5rem,9vw,11rem); align-items:start; } .articles-index__intro .section-label { margin-bottom:1.3rem; } .articles-index h2 { margin:0; } .articles-empty { border-top:1px solid #bdc6d4; padding-top:1.3rem; } .articles-empty p { max-width:31rem; margin-bottom:2rem; color:#536077; font-family:var(--serif); font-size:1.45rem; line-height:1.2; }
@media (max-width:760px) { .articles-page .site-header { position:relative; } .articles-hero { padding-top:5.5rem; } .articles-hero h1 { font-size:clamp(3.8rem,18vw,5.5rem); } .articles-index { grid-template-columns:1fr; gap:2.75rem; } }