:root {
  --paper:#f8f7f2;
  --ink:#23342e;
  --muted:#65726b;
  --accent:#405b48;
  --line:#d9ded3;
  --wash:#e6eadf
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

a:hover {
  color:#55744f
}

header {
  max-width:1160px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:29px 40px;
  border-bottom:1px solid var(--line)
}

.brand {
  font-family:Georgia,serif;
  font-size:26px;
  letter-spacing:-.7px
}

.brand span {
  display:block;
  margin-top:6px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:10px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--muted)
}

nav {
  display:flex;
  gap:30px;
  align-items:center;
  font-size:13px
}

nav a[aria-current] {
  text-decoration:underline;
  text-underline-offset:7px
}

.contact {
  border:1px solid var(--line);
  padding:10px 15px;
  border-radius:3px
}

.contact span {
  margin-left:10px
}

main {
  max-width:1080px;
  margin:auto;
  padding:0 40px
}

.hero {
  display:grid;
  grid-template-columns:1fr 230px;
  gap:60px;
  align-items:center;
  padding:74px 0 62px;
  border-bottom:1px solid var(--line)
}

.eyebrow {
  font-size:10px!important;
  font-weight:650;
  letter-spacing:2px;
  line-height:1.8!important;
  color:var(--muted);
  margin:0 0 24px
}

h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:64px;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-2.4px;
  margin:0 0 26px
}

h1 em {
  font-weight:400;
  color:var(--accent)
}

.standfirst {
  font-size:17px;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 29px
}

.text-link {
  font-size:12px;
  font-weight:600;
  border-bottom:1px solid var(--accent);
  padding-bottom:8px;
  display:inline-flex;
  gap:29px
}

.portrait {
  margin:10px 0 0;
  text-align:center
}

.portrait img {
  width:208px;
  height:208px;
  object-fit:cover;
  object-position:center 35%;
  border-radius:50%;
  filter:saturate(.72)
}

.portrait figcaption {
  font-family:Georgia,serif;
  font-size:20px;
  margin-top:17px
}

.portrait figcaption span {
  display:block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;
  color:var(--muted);
  margin-top:7px
}

.body {
  font-size:16px;
  line-height:1.85
}

.body p {
  margin:0 0 20px
}

.body a {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:#9dab96;
  text-underline-offset:3px
}

.body strong {
  font-weight:600
}

.home-body {
  padding-top:43px;
  max-width:870px
}

.home-body>p:first-of-type {
  margin-bottom:20px
}

.body h2 {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.5px;
  font-size:30px;
  line-height:1.3;
  margin:43px 0 22px
}

.body ul {
  padding-left:22px
}

.body li {
  padding:4px 0
}

.research-list {
  list-style:none;
  padding:0!important;
  counter-reset:projects;
  margin-bottom:42px
}

.research-list li {
  position:relative;
  padding:23px 5px 23px 51px;
  border-top:1px solid var(--line);
  counter-increment:projects;
  font-size:14px;
  color:var(--muted);
  line-height:1.75
}

.research-list li:last-child {
  border-bottom:1px solid var(--line)
}

.research-list li:before {
  content:"0" counter(projects);
  position:absolute;
  left:2px;
  top:26px;
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted)
}

.research-list li strong {
  font-size:19px;
  display:block;
  margin-bottom:5px;
  font-weight:500;
  letter-spacing:-.4px
}

.research-list li strong a {
  text-decoration:none
}

.research-list li em {
  font-size:12px;
  color:var(--accent);
  white-space:normal
}

.project {
  padding-top:36px;
  max-width:900px
}

.back {
  display:inline-block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:49px
}

.project>h1 {
  font-size:48px;
  max-width:780px;
  margin-bottom:36px
}

.project>.eyebrow {
  margin-bottom:16px
}

.project .body {
  border-top:1px solid var(--line);
  padding-top:30px
}

.body img {
  display:block;
  max-width:100%;
  height:auto;
  margin:28px auto 10px;
  background:white
}

.body img+p em {
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  display:block
}

footer {
  max-width:1080px;
  margin:70px auto 0;
  padding:25px 40px 35px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted)
}

footer div {
  display:flex;
  gap:25px
}

@media(min-width:1300px) {
  .hero {
    padding-top:92px;
    padding-bottom:80px
  }
  h1 {
    font-size:72px
  }
}

@media(max-width:700px) {


  header {
    padding:23px 22px;
    align-items:flex-start;
    flex-direction:column;
    gap:23px
  }
  .brand {
    font-size:26px
  }
  nav {
    width:100%;
    gap:22px;
    font-size:12px
  }
  .contact {
    margin-left:auto;
    border:0;
    padding:0
  }
  .contact span {
    margin-left:3px
  }
  main {
    padding:0 23px
  }
  .hero {
    grid-template-columns:1fr 90px;
    gap:13px;
    padding:42px 0 35px;
    align-items:start
  }
  .eyebrow {
    font-size:8px!important;
    letter-spacing:1.5px;
    margin-bottom:19px
  }
  h1 {
    font-size:40px;
    letter-spacing:-1.5px;
    line-height:1.13
  }
  .hero h1 {
    font-size:38px
  }
  .standfirst {
    font-size:14px;
    line-height:1.6
  }
  .desktop {
    display:none
  }
  .portrait {
    margin-top:44px
  }
  .portrait img {
    width:85px;
    height:85px
  }
  .portrait figcaption {
    font-size:13px
  }
  .portrait figcaption span {
    font-size:9px;
    line-height:1.6
  }
  .text-link {
    font-size:11px
  }
  .body {
    font-size:15px;
    line-height:1.8
  }
  .home-body {
    padding-top:30px
  }
  .body h2 {
    font-size:28px;
    margin-top:35px
  }
  .research-list li {
    padding-left:34px
  }
  .research-list li strong {
    font-size:17px;
    line-height:1.5
  }
  .research-list li:before {
    top:26px
  }
  .project {
    padding-top:25px
  }
  .project>h1 {
    font-size:37px;
    letter-spacing:-1px
  }
  .back {
    margin-bottom:35px
  }
  footer {
    margin-top:45px;
    padding:25px 23px;
    gap:20px;
    flex-wrap:wrap
  }
  footer div {
    gap:20px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

/* Homepage */
.home .hero {
  padding:48px 0 35px;
  gap:48px;
  grid-template-columns:1fr 190px;
  align-items:start
}

.home .hero h1 {
  font-size:40px;
  letter-spacing:-1px;
  line-height:1.2;
  margin:0 0 24px
}

.home .hero .body p:last-child {
  margin-bottom:0
}

.home .portrait {
  margin-top:3px
}

.home .portrait img {
  width:170px;
  height:170px
}

.home .home-body {
  padding-top:0
}

.home .home-body>h2:first-child {
  margin-top:34px
}

@media(max-width:700px) {
  .home .hero {
    padding-top:30px;
    gap:22px;
    display:flex;
    flex-direction:column
  }
  .home .hero h1 {
    font-size:34px
  }
  .home .portrait {
    display:flex;
    align-items:center;
    gap:18px;
    order:-1;
    text-align:left;
    margin:0
  }
  .home .portrait img {
    width:70px;
    height:70px
  }
  .home .portrait figcaption {
    margin:0;
    font-size:20px
  }
  .home .portrait figcaption span {
    font-size:11px
  }
}

.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px 18px;
  z-index:10
}

.skip-link:focus {
  top:12px
}

.body {
  overflow-wrap:anywhere
}

.body img {
  max-width:100%
}

nav a {
  white-space:nowrap
}

.research-list li:before {
  content:counter(projects,decimal-leading-zero)
}

@media (max-width: 380px) {
  nav {
    flex-wrap: wrap;
    gap: 16px;
  }
}