:root { --ink: #20302a; --ink-soft: #52605a; --cream: #f6f1e8; --paper: #fffdf8; --clay: #ae613b; --sage: #c9d0b9; --line: #d8d5cc; --display: "Fraunces", Georgia, serif; --body: "Manrope", Arial, sans-serif; --mono: "DM Mono", monospace; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.55; } a { color: inherit; } .site-header { align-items: center; background: rgba(255,253,248,.94); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 20px clamp(24px, 6vw, 96px); position: sticky; top: 0; z-index: 4; } .wordmark { font-size: 22px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; } .wordmark span { color: var(--clay); font-family: var(--mono); font-size: 11px; letter-spacing: 0; margin-left: 5px; vertical-align: top; } nav { display: flex; gap: clamp(17px, 2.4vw, 36px); } nav a, footer { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-decoration: none; } nav a:hover, .text-link:hover, footer a:hover { color: var(--clay); } .menu { display: none; }
.hero { background: var(--cream); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 690px; padding-left: clamp(24px, 9vw, 146px); } .hero-copy { align-self: center; max-width: 710px; padding: 64px 48px 64px 0; } .eyebrow { color: var(--clay); font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .09em; margin: 0 0 17px; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; } h1 { font-size: clamp(46px, 5.6vw, 76px); margin-bottom: 27px; } h2 { font-size: clamp(36px, 4.6vw, 62px); margin-bottom: 25px; } .lede { color: var(--ink-soft); font-size: 20px; max-width: 585px; } .actions { align-items: center; display: flex; flex-wrap: wrap; gap: 25px; margin-top: 40px; } .button { background: var(--ink); color: white; display: inline-block; font-size: 13px; font-weight: 700; padding: 14px 21px; text-decoration: none; } .button:hover { background: var(--clay); } .text-link { color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; } .text-link span { color: var(--clay); font-size: 17px; padding-left: 2px; } .hero-portrait { background: #71401f; margin: 0; min-height: 690px; overflow: hidden; position: relative; } .hero-portrait img { height: 100%; object-fit: cover; object-position: center 49%; position: absolute; transform: none; width: 100%; } figcaption { background: var(--paper); bottom: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 11px 15px; position: absolute; right: 0; text-transform: uppercase; }
.focus, .publications, .about, .contact { padding: clamp(76px, 11vw, 160px) clamp(24px, 9vw, 146px); } .focus { background: var(--ink); color: var(--cream); padding-top: clamp(56px, 8vw, 112px); } .focus .eyebrow { color: var(--sage); } .focus > p:last-child { font-size: clamp(18px, 2vw, 26px); line-height: 1.45; margin: 0; max-width: 720px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 50px; } .section-heading h2 { margin: 0; } .section-heading > p { color: var(--ink-soft); font-size: 14px; margin: 0; } .publication-list { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; } .publication-list li { border-bottom: 1px solid var(--line); display: grid; gap: 24px; grid-template-columns: 110px 1fr; padding: 29px 0 28px; } .publication-list li > span { color: var(--clay); font-family: var(--mono); font-size: 14px; padding-top: 3px; } .publication-list h3 { font-family: var(--display); font-size: clamp(20px, 2vw, 29px); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 8px; max-width: 900px; } .publication-list h3 a { text-decoration: none; } .publication-list h3 a:hover { color: var(--clay); } .publication-list h3 span { color: var(--clay); font-family: var(--mono); font-size: 14px; margin-left: 5px; vertical-align: middle; } .publication-list p { color: var(--ink-soft); font-size: 13px; margin-bottom: 4px; } .publication-list .journal { color: var(--ink); font-style: italic; } .all-research { display: inline-block; margin-top: 30px; }
.about { background: #e7e5da; display: grid; gap: clamp(42px, 9vw, 145px); grid-template-columns: .8fr 1fr; } .about figure { margin: 0; min-height: 530px; overflow: hidden; } .about img { display: block; height: 100%; object-fit: cover; object-position: center center; width: 100%; } .about > div { align-self: center; max-width: 650px; } .about p:not(.eyebrow) { color: var(--ink-soft); font-size: 17px; } .cv { background: var(--clay); color: white; padding: clamp(75px, 11vw, 155px) clamp(24px, 9vw, 146px); } .cv .eyebrow { color: #ffe0bf; } .cv h2 { max-width: 700px; } .cv > p:not(.eyebrow) { font-size: 17px; max-width: 530px; } .button.light { background: var(--paper); color: var(--ink); margin-top: 14px; }.button.light:hover { background: var(--ink); color: white; }
.contact { display: grid; grid-template-columns: 1fr 1fr; } .contact h2 { margin: 0; } .contact > div:last-child { font-size: 16px; padding-top: 20px; } .email { color: var(--clay); display: inline-block; font-family: var(--display); font-size: clamp(25px, 3vw, 43px); letter-spacing: -.035em; margin-bottom: 36px; text-decoration: none; } .address { color: var(--ink-soft); font-size: 14px; } footer { background: var(--ink); color: var(--cream); display: flex; justify-content: space-between; padding: 27px clamp(24px, 9vw, 146px); } footer a { text-decoration: none; }
@media (max-width: 760px) { .site-header { padding: 17px 24px; } .menu { background: transparent; border: 0; color: var(--ink); display: block; font: 600 12px var(--body); padding: 8px 0; } nav { background: var(--paper); border-bottom: 1px solid var(--line); display: none; flex-direction: column; left: 0; padding: 20px 24px 25px; position: absolute; right: 0; top: 61px; } .nav-open nav { display: flex; } .hero { display: flex; flex-direction: column; min-height: 0; padding: 0; } .hero-copy { padding: 80px 24px 65px; } .hero-portrait { min-height: 520px; } .hero-portrait img { object-position: center 49%; } .focus, .about, .contact { display: block; } .focus > p { margin-top: 34px; } .section-heading { align-items: start; display: block; } .section-heading > p { margin-top: 18px; } .publication-list li { grid-template-columns: 74px 1fr; } .about figure { min-height: 430px; margin-bottom: 48px; } .contact > div:last-child { padding-top: 22px; } footer { gap: 20px; } }