/* Theme measurements from pirl.unc.edu, October 2026. */
:root {
  color-scheme: light;
  --paper: #fff; --ink: #000; --link: hsl(9.52380952, 36%, 65.68627451%);
  --body: "adobe-garamond-pro", Garamond, Baskerville, Georgia, serif;
  --heading: "Cormorant Garamond", Garamond, Georgia, serif;
  --gutter: 4vw; --wrap: 1200px;
  --body-size: min(calc(1rem + .24vw), 1.2rem);
  --large-size: min(calc(1rem + .6vw), 1.5rem);
  --h2-size: min(calc(1rem + 2.16vw), 2.8rem);
  --h3-size: min(calc(1rem + 1.44vw), 2.2rem);
  --h4-size: min(calc(1rem + .72vw), 1.6rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-padding-top: 210px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--body-size); font-weight: 300; line-height: 1.8; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
p a, .links a, .subscribe a, .more { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { opacity: .8; }
strong { font-weight: 700; }
h1, h2, h3 { margin: 2rem 0; font-family: var(--heading); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
h1, h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
p { margin: 1rem 0; }
ul, ol { padding: 0; margin: 0; list-style: none; }
:focus-visible { outline: 2px solid #4b9cd3; outline-offset: 5px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -100px; left: 1rem; z-index: 30; padding: .5rem 1rem; background: #fff; color: #000; }
.skip:focus { top: 1rem; }

/* Full-width header, original logo sizes, compact mobile navigation. */
.masthead { position: sticky; top: 0; z-index: 20; background: #fff; }
.masthead-inner { display: flex; align-items: center; padding: 3vw var(--gutter); transition: padding 140ms ease-in-out; }
.masthead.is-scrolled .masthead-inner { padding-block: 1.8vw; }
.brand { display: block; flex: 0 1 auto; max-width: 44%; }
.brand img { width: auto; max-height: 114px; }
.nav { display: flex; align-items: center; justify-content: flex-end; flex: 1; padding-left: 1.6vw; }
.nav > ul { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; column-gap: 1.4vw; }
.nav a { display: inline-block; color: #000; line-height: 1.8; white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.nav .social { flex-wrap: nowrap; margin-left: 1.6vw; }
.social a, .social svg { display: block; width: 24px; height: 24px; }
.menu-toggle { display: none; }

main { padding: var(--gutter) 0 6.6vmax; min-height: 33vh; }
.page-title { text-align: center; margin: 0 0 34px; }
.lede { margin: 0 0 34px; }
.statement p { font-family: var(--body); font-size: var(--large-size); line-height: 1.8; margin: 0; }
.posts { margin-top: 2rem; }
.posts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.posts-head h2 a { color: inherit; }
.posts-head h2 { margin: 0; font-size: var(--h3-size); font-weight: 700; }
.more, .subscribe, .note { font-size: 1rem; }
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; }
.post { min-width: 0; border-top: 1px solid #ddd; padding-top: 20px; }
.post-cover { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #fff; margin-bottom: 18px; }
.post-cover img { width: 100%; height: 100%; object-fit: contain; }
.post time { display: block; margin-bottom: 6px; font-family: Poppins, sans-serif; font-size: .75rem; color: #555; }
.post h3 { margin: 0; font-size: var(--h4-size); }
.post h3 a { color: #000; }
.post-body p { margin: .4rem 0 0; }
.subscribe { margin-top: 24px; }

/* Portrait crops, original three/four-column layouts, centered captions. */
.page-people main { padding-top: 0; padding-bottom: 0; }
.people-group { padding: 3.3vmax 0; }
.people-group > h2 { text-align: center; font-family: var(--body); font-weight: 300; font-size: var(--large-size); margin: 0 0 40px; }
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px; }
.person { min-width: 0; text-align: center; }
.person img, .person-placeholder { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; margin: 0 auto 4%; }
.person h3 { font-size: var(--h4-size); margin: 0; }
.person .role, .person .links { font-size: 1rem; line-height: 1.8; margin: 1% 0 0; }
.person .links { display: block; }
.person .links li { display: inline; }
.person .links li + li::before { content: " | "; color: #000; }
.people-group-investigators .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.people-group-investigators .person img { width: 64%; }
.people-group-investigators .person h3, .people-group-investigators .person .links { max-width: 75%; margin-inline: auto; }
.people-group-alumni { padding: 6.6vmax 0; }
.people-group-alumni > h2 { margin-bottom: 70px; }
.people-group-alumni .people-grid { gap: 100px; }
.people-group-alumni .person img { margin-bottom: 8%; }
.people-group-alumni .person h3 { font-size: var(--body-size); }
.people-group-alumni .person .role, .people-group-alumni .person .links { font-size: .9rem; margin-top: 4%; }

/* Original publication figures on the left and article text on the right. */
.paper { display: grid; grid-template-columns: 1fr 2fr; gap: 34px; padding: 17px 0 51px; }
.paper-text-only { grid-template-columns: 1fr; border-top: 1px solid var(--line, #ddd); padding-top: 34px; }
.paper-images { display: grid; align-content: start; gap: 34px; }
.paper-images img { margin-inline: auto; width: 100%; }
.paper-images-rounded img { max-width: 375px; border-radius: 10px; }
.paper h2 { font-size: var(--h4-size); margin: 0 0 2rem; }
.paper .authors { margin: 0 0 1rem; }
.paper .summary { margin: 1rem 0; }

/* The Code page occupies 75% of the normal content width. */
.page-code main { width: min(900px, (100% - 2 * var(--gutter)) * .75); }
.featured-tools { display: block; }
.tool { margin: 34px 0 51px; }
.tool h2 { font-size: var(--h3-size); margin: 0 0 34px; }
.tool-body { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.tool-body.tool-text-only { grid-template-columns: 1fr; }
.tool-body img { width: auto; margin-inline: auto; }
.tool-body p { margin: 0; }
.repos { margin-top: 4rem; }
.repos h2 { font-size: var(--h3-size); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid #ddd; }
td:last-child { white-space: nowrap; }

/* Addresses and the original investigator portraits. */
.page-contact main { padding-block: 6.6vmax; }
.contact-grid { display: grid; grid-template-columns: 5fr 3fr 4fr; }
.contact-details { grid-column: 1; padding-right: 17px; }
.contact-block h2 { margin: 0 0 2rem; }
.contact-block + .contact-block { margin-top: 2rem; }
.contact-details a { overflow-wrap: anywhere; }
.contact-investigators { grid-column: 3; padding-left: 17px; text-align: center; }
.contact-investigators > h2 { margin: 0 0 34px; }
.contact-investigators figure { margin: 0 0 34px; }
.contact-investigators img { width: 100%; object-fit: cover; aspect-ratio: 1 / 1.262; }
.contact-investigators figcaption { font-size: 1rem; margin-top: 10px; }
.contact-investigators a { overflow-wrap: anywhere; }
.footer { padding-top: 17px; padding-bottom: 6.6vmax; }
.footer-inner { border-top: 1px solid #aaa; padding-top: 51px; }
.footer-inner > a { display: block; width: 66.6667%; margin-inline: auto; padding-inline: 17px; }
.footer img { width: 100%; }

@media (max-width: 799px), (pointer: coarse) and (max-width: 1024px) {
  :root { --gutter: 6vw; }
  html { scroll-padding-top: 130px; }
  .masthead-inner, .masthead.is-scrolled .masthead-inner { padding-block: 6vw; flex-wrap: wrap; justify-content: space-between; }
  .brand { max-width: calc(100% - 60px); }
  .brand img { max-height: 75px; }
  .js .menu-toggle { display: flex; position: relative; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; border: 0; padding: 8px; background: transparent; cursor: pointer; }
  .menu-toggle span { display: block; width: 28px; height: 1px; background: #000; transition: transform .15s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav { flex: 0 0 100%; padding: 24px 0 0; display: flex; flex-direction: column; gap: 24px; }
  .js .nav { display: none; }
  .js .nav.is-open { display: flex; max-height: calc(100dvh - 150px); overflow-y: auto; }
  .nav > ul { justify-content: center; gap: 10px 24px; }
  .nav > ul:not(.social) { flex-direction: column; font-size: 1.8rem; }
  .nav .social { margin-left: 0; gap: 24px; }
}
@media (max-width: 767px) {
  :root {
    --body-size: calc(1rem + .0024 * min(100vh, 900px));
    --large-size: calc(1rem + .006 * min(100vh, 900px));
    --h2-size: calc(1rem + .0216 * min(100vh, 900px));
    --h3-size: calc(1rem + .0144 * min(100vh, 900px));
    --h4-size: calc(1rem + .0072 * min(100vh, 900px));
  }
  .posts-head { display: block; }
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .people-grid, .people-group-alumni .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .people-group-investigators .people-grid { grid-template-columns: 1fr; gap: 40px; }
  .people-group-investigators .person img { width: 64%; max-width: 340px; }
  .people-group-alumni .person h3 { font-size: 1.2rem; }
  .paper, .tool-body { grid-template-columns: 1fr; gap: 34px; }
  .paper { padding-bottom: 3rem; }
  .paper-images { max-width: 420px; margin-inline: auto; }
  .page-code main { width: calc(100% - 2 * var(--gutter)); }
  .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
  .contact-details, .contact-investigators { grid-column: 1; padding: 0; }
  .contact-investigators figure { max-width: 380px; margin-inline: auto; }
  .footer-inner > a { width: 100%; padding: 0; }
}
@media (max-width: 575px) {
  .post-list { grid-template-columns: 1fr; }
  .people-grid, .people-group-alumni .people-grid { grid-template-columns: 1fr; }
  .person img { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}