/* Portfolio: neutral editorial surfaces, one action accent, one type family. */
:root {
  color-scheme:dark;
  --bg:#111111;
  --surface:#191919;
  --fg:#f5f5f5;
  --muted:#b8b8b8;
  --quiet:#a3a3a3;
  --line:#343434;
  --accent:#315efb;
  --sans:'DM Sans',system-ui,sans-serif;
  --radius:14px
}

*,*::before,*::after {
  box-sizing:border-box
}

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

body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased
}

button,input {
  font:inherit
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:5px
}

a:hover {
  text-decoration:underline
}

a,button {
  transition:background .18s,border-color .18s,color .18s
}

button,a {
  -webkit-tap-highlight-color:transparent
}

:focus-visible {
  outline:2px solid var(--fg);
  outline-offset:5px
}

::selection {
  color:#111;
  background:#e5e5e5
}

img {
  max-width:100%;
  height:auto
}

svg,.icon {
  flex-shrink:0
}

.icon {
  display:inline-block;
  vertical-align:middle
}

[hidden] {
  display:none!important
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--sans);
  font-weight:600;
  line-height:1.2;
  text-wrap:balance;
  letter-spacing:-.025em
}

h2 {
  font-size:clamp(30px,3.5vw,44px)
}

h3 {
  font-size:22px
}

h1 em,h2 em,h3 em,.wordmark em {
  font-style:normal;
  font-weight:inherit
}

p {
  color:var(--muted)
}

.container {
  max-width:1216px;
  margin-inline:auto;
  padding-inline:32px
}

.section {
  padding-block:104px
}

.section-compact {
  padding-block:72px
}

.section:nth-of-type(even) {
  background:var(--surface)
}

.split {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:72px;
  align-items:start
}

.two-col {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:72px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px;
  margin-bottom:48px
}

.section-intro {
  font-size:16px;
  margin-top:24px;
  max-width:42ch
}

.eyebrow,.mono {
  display:block;
  font-size:13px;
  line-height:1.6;
  color:var(--quiet)
}

.eyebrow {
  font-weight:600;
  margin-bottom:12px
}

.section-label {
  margin-top:12px;
  color:var(--quiet);
  font-size:14px
}

.text-link {
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:underline;
  text-decoration-color:#737373
}

.split>div>.text-link {
  margin-top:24px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  padding:12px 22px;
  background:var(--accent);
  border:1px solid transparent;
  border-radius:12px;
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1.5
}

.button:hover {
  background:var(--accent);
  text-decoration:none;
  box-shadow:inset 0 0 0 2px #ffffff55
}

.button-outline {
  background:transparent;
  color:var(--fg);
  border-color:#606060
}

.button-outline:hover {
  background:#292929;
  box-shadow:none
}

.skip-link {
  position:fixed;
  top:8px;
  left:16px;
  z-index:100;
  transform:translateY(-200%);
  padding:10px 16px;
  background:var(--fg);
  color:var(--bg)
}

.skip-link:focus {
  transform:none
}

.site-nav {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line)
}

.nav-inner {
  height:80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px
}

.wordmark {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.03em;
  white-space:nowrap
}

#primary-nav {
  display:flex;
  align-items:center;
  gap:22px
}

#primary-nav>a {
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  position:relative
}

#primary-nav>a:hover,#primary-nav>a.active {
  color:var(--fg)
}

#primary-nav>a.active:not(.button) {
  text-decoration:underline;
  text-decoration-thickness:2px
}

.nav-divider {
  height:16px;
  width:1px;
  background:var(--line)
}

#primary-nav>.nav-contact {
  color:var(--fg);
  font-size:13px;
  padding:10px 16px;
  min-height:44px
}

.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:var(--fg);
  padding:12px;
  min-width:44px;
  min-height:44px
}

.menu-toggle span {
  display:block;
  width:20px;
  height:2px;
  background:currentColor;
  margin:4px 0
}

.hero {
  position:relative;
  padding:172px 0 88px
}

.hero h1 {
  font-size:clamp(52px,7.2vw,96px);
  line-height:1.05;
  letter-spacing:-.04em;
  max-width:100%
}

.hero-role {
  font-size:clamp(18px,2.2vw,24px);
  font-weight:500;
  line-height:1.5;
  color:var(--fg);
  margin-top:24px
}

.hero-description {
  max-width:65ch;
  font-size:18px;
  line-height:1.75;
  margin:24px 0 32px
}

.hero-topics {
  color:var(--quiet);
  font-size:14px;
  margin-bottom:24px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px
}

.hero-affiliation {
  margin-top:48px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  font-size:13px;
  color:var(--quiet)
}

.hero-affiliation i {
  width:24px;
  height:1px;
  background:var(--line)
}

.profile-strip {
  background:var(--surface);
  padding-block:56px
}

.profile-inner {
  display:flex;
  gap:40px;
  align-items:center
}

.profile-photo {
  flex-shrink:0;
  margin:0
}

.portrait {
  display:block;
  width:160px;
  height:160px;
  object-fit:cover;
  object-position:50% 25%;
  border-radius:50%;
  border:1px solid #555
}

.profile-photo figcaption {
  margin-top:12px;
  text-align:center;
  color:var(--quiet);
  font-size:12px
}

.profile-copy {
  flex:1;
  min-width:0
}

.profile-copy h2 {
  font-size:24px;
  margin-bottom:8px
}

.profile-copy p {
  font-size:14px;
  max-width:70ch
}

.profile-role {
  color:var(--fg)
}

.profile-copy .profile-bio {
  margin-top:12px
}

.social-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:20px
}

.social-links a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:500;
  min-height:44px;
  color:var(--muted)
}

.social-links a:hover {
  color:var(--fg)
}

.cell-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px
}

.cell-grid.three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.research-cell,.work-card {
  padding:28px 0;
  border-top:1px solid var(--line);
  position:relative
}

.research-cell h3 {
  font-size:17px;
  line-height:1.5;
  margin-bottom:12px
}

.research-cell p {
  font-size:15px;
  line-height:1.75
}

.research-cell .card-arrow {
  position:absolute;
  right:0;
  top:28px
}

.research-cell:has(a) h3 {
  padding-right:24px
}

.research-cell a::after {
  content:'';
  position:absolute;
  inset:0
}

.work-card {
  display:flex;
  flex-direction:column;
  padding-block:32px
}

.card-top {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:20px
}

.card-top>.tag {
  margin-left:auto
}

.card-arrow,.record-arrow {
  color:var(--quiet)
}

.work-card h3 {
  font-size:24px;
  margin-bottom:14px
}

.work-card>p {
  font-size:16px;
  flex:1;
  margin-bottom:24px;
  max-width:65ch
}

.tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.tag {
  display:inline-block;
  padding:4px 10px;
  background:#242424;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  line-height:1.6;
  color:var(--muted)
}

.card-link {
  margin-top:24px
}

.featured-label {
  font-size:12px;
  font-weight:600;
  color:var(--quiet);
  margin-bottom:12px
}

.record-row {
  display:flex;
  gap:32px;
  padding:32px 0;
  border-bottom:1px solid var(--line)
}

.record-meta {
  width:140px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:12px;
  font-size:13px;
  color:var(--quiet)
}

.badge {
  font-size:12px;
  font-weight:500;
  padding:4px 9px;
  background:#242424;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--muted)
}

.record-body {
  flex:1;
  min-width:0
}

.record-body h3 {
  font-size:21px;
  font-weight:600;
  line-height:1.45;
  margin-bottom:12px
}

.record-body>p,.citation {
  font-size:15px;
  max-width:75ch
}

.record-venue {
  color:var(--quiet);
  font-size:13px;
  margin-bottom:8px
}

.resource-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:20px
}

.resource-links>a {
  display:inline-flex;
  align-items:center;
  font-size:14px;
  font-weight:500;
  min-height:44px;
  text-decoration:underline
}

.resource-links>.button {
  text-decoration:none
}

.compact-records .record-row {
  gap:24px;
  padding:28px 0
}

.compact-records .record-meta {
  width:110px
}

.compact-records .record-body h3 {
  font-size:20px
}

.compact-records .record-body>p {
  font-size:15px
}

.about-list {
  margin-top:32px
}

.about-list h3,.home-awards h3 {
  font-size:17px;
  letter-spacing:0;
  margin:32px 0 16px
}

.about-list p {
  font-size:15px;
  margin-bottom:12px
}

.about-list strong {
  color:var(--fg);
  font-weight:500
}

.about-copy p {
  margin-bottom:20px;
  font-size:16px
}

.about-copy .text-link {
  margin-top:12px
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px
}

.contact-copy {
  max-width:42ch;
  margin-top:24px;
  font-size:16px
}

.contact-card {
  padding:28px 0;
  border-top:1px solid var(--line)
}

.contact-card h3 {
  font-size:22px;
  margin-bottom:16px
}

.contact-card p {
  font-size:15px;
  margin-bottom:12px
}

.contact-card .text-link {
  margin-top:8px
}

.contact-card+.contact-card {
  margin-top:16px
}

.page-hero {
  padding:152px 0 64px;
  background:var(--surface)
}

.page-hero h1 {
  font-size:clamp(36px,5vw,64px);
  line-height:1.14;
  max-width:1050px;
  overflow-wrap:break-word
}

.page-hero .mono {
  margin-top:24px
}

.page-subtitle {
  max-width:65ch;
  margin-top:24px;
  font-size:17px
}

.back-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  color:var(--muted);
  margin-bottom:24px
}

.archive-content {
  padding-block:72px
}

.archive-content>.prose {
  margin-bottom:48px
}

.archive-content>.prose:last-child {
  margin:56px 0 0
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px
}

.filters button {
  padding:10px 18px;
  min-height:44px;
  background:transparent;
  border:1px solid #606060;
  color:var(--muted);
  border-radius:12px;
  font-size:14px
}

.filters button:hover {
  background:#242424;
  color:var(--fg)
}

.filters button[aria-pressed=true] {
  color:var(--bg);
  border-color:var(--fg);
  background:var(--fg)
}

.filter-status {
  color:var(--quiet);
  font-size:14px;
  margin-bottom:24px
}

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px
}

.stat-card {
  text-align:left
}

.stat-number {
  display:block;
  font-size:40px;
  line-height:1.2;
  font-weight:600
}

.stat-card p {
  font-size:15px;
  color:var(--fg);
  margin-top:12px
}

.stat-card small {
  font-size:13px;
  color:var(--quiet)
}

.group-label {
  display:flex;
  align-items:center;
  gap:24px;
  margin:48px 0 16px;
  font-size:16px;
  font-weight:600
}

.group-label::after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1
}

.group-label:first-child {
  margin-top:0
}

.skills-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px
}

.skill-group {
  border-top:1px solid var(--line);
  padding-top:24px
}

.skill-group h3 {
  font-size:17px;
  line-height:1.5;
  letter-spacing:0;
  min-height:52px;
  margin-bottom:24px
}

.skill-list {
  list-style:none;
  padding:0;
  margin:0
}

.skill-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}

.skill-name {
  min-width:0;
  font-size:14px;
  overflow-wrap:anywhere
}

.skills-note {
  font-size:13px;
  color:var(--quiet);
  margin-top:20px
}

.skills-intro {
  margin:0 0 24px;
  max-width:75ch
}

.skills-supplement {
  margin-top:48px
}

.detail-container {
  padding-block:64px;
  max-width:1000px
}

.detail-container>.prose {
  max-width:75ch
}

.detail-next {
  border-top:1px solid var(--line);
  margin-top:56px;
  padding-top:32px
}

.detail-next>a {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  font-size:18px;
  border-bottom:1px solid var(--line)
}

.prose {
  color:var(--muted);
  overflow-wrap:anywhere;
  font-size:16px
}

.prose p {
  margin-bottom:20px
}

.prose h2 {
  font-size:30px;
  margin:40px 0 20px;
  color:var(--fg)
}

.prose h3 {
  font-size:23px;
  margin:32px 0 16px;
  color:var(--fg)
}

.prose h2:first-child {
  margin-top:0
}

.prose a:not(.button):not(.resource-unavailable) {
  color:var(--fg);
  text-decoration:underline;
  text-decoration-color:#737373
}

.prose strong,.prose b {
  font-weight:600;
  color:var(--fg)
}

.prose ul,.prose ol {
  padding-left:24px
}

.prose li {
  margin:8px 0
}

.prose blockquote {
  border-left:1px solid #737373;
  padding:8px 0 8px 24px;
  margin:24px 0
}

.prose hr {
  border:0;
  border-top:1px solid var(--line);
  margin:32px 0
}

.prose details {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 24px;
  margin-bottom:16px;
  background:var(--surface)
}

.prose summary {
  cursor:pointer;
  color:var(--fg);
  font-weight:600;
  min-height:28px
}

.prose details[open]>summary {
  margin-bottom:20px
}

.prose .legacy-panel {
  border:1px solid var(--line);
  background:var(--surface);
  padding:28px;
  margin:24px 0;
  border-radius:var(--radius)
}

.prose .legacy-panel:has(>details) {
  border:0;
  padding:0;
  background:transparent
}

.prose .tag {
  font-size:12px;
  margin:4px 3px 4px 0;
  vertical-align:middle;
  max-width:100%
}

.prose .tag img {
  height:20px;
  width:auto;
  vertical-align:middle;
  margin-right:6px
}

.prose .resource-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid #606060;
  border-radius:12px;
  margin:4px 5px 4px 0;
  font-size:14px
}

.prose .resource-unavailable {
  display:inline-block;
  padding:4px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--quiet);
  font-size:13px;
  margin:3px 4px 3px 0
}

.prose .resource-unavailable::after {
  content:' · unavailable'
}

.prose object,.prose iframe,.prose embed {
  max-width:100%;
  border:1px solid var(--line)
}

.prose object {
  width:100%;
  height:80vh;
  min-height:400px
}

.prose pre {
  overflow:auto;
  padding:20px;
  background:#242424
}

.prose table {
  display:block;
  max-width:100%;
  overflow:auto;
  border-collapse:collapse
}

.prose td,.prose th {
  padding:8px;
  border:1px solid var(--line)
}

.prose .record-content {
  font-size:15px
}

.record-content>p {
  margin-bottom:16px
}

.record-content>br {
  display:none
}

.home-awards {
  margin-top:32px
}

.home-awards ul {
  padding-left:18px;
  margin:0
}

.home-awards li {
  margin-bottom:10px;
  font-size:15px;
  color:var(--muted)
}

.site-footer {
  border-top:1px solid var(--line);
  padding:40px 0;
  background:var(--surface)
}

.footer-primary {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px
}

.footer-primary p,.footer-links {
  font-size:13px;
  color:var(--quiet)
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:16px
}

.footer-links a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px
}

.detail-sharing {
  border-top:1px solid var(--line);
  padding-top:32px;
  margin-top:48px
}

.detail-sharing .resource-links a {
  border:1px solid #606060;
  border-radius:12px;
  padding:8px 14px
}

.research-approach {
  margin-top:40px
}

.section-tail {
  margin-top:32px
}

.single-result .work-card {
  grid-column:1/-1
}

.archive__item {
  padding:24px 0;
  border-bottom:1px solid var(--line)
}

.archive__item h2 {
  font-size:25px
}

.archive__item-teaser img {
  max-height:200px;
  width:auto
}

.prose .archive__item-excerpt {
  font-size:15px
}

/* Only the introduction moves;
all content is visible before enhancement. */
@keyframes intro {
  from {
    transform:translateY(8px)
  }

  to {
    transform:none
  }

}

.hero h1 {
  animation:intro .5s cubic-bezier(.16,1,.3,1)
}

html {
  scrollbar-color:#666 var(--bg);
  scrollbar-width:thin
}

::-webkit-scrollbar {
  width:8px
}

::-webkit-scrollbar-track {
  background:var(--bg)
}

::-webkit-scrollbar-thumb {
  background:#666;
  border-radius:4px
}

.no-js .menu-toggle {
  display:none
}

@media(max-width:1100px) {
  #primary-nav {
    gap:14px
  }

  .nav-inner {
    gap:20px
  }

  .skills-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .split,.two-col {
    gap:40px
  }

}

@media(max-width:900px) {
  .menu-toggle {
    display:block
  }

  .nav-inner {
    height:72px
  }

  #primary-nav {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:20px 24px;
    max-height:calc(100dvh - 72px);
    overflow:auto
  }

  #primary-nav.open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }

  #primary-nav>a {
    padding:12px;
    font-size:15px
  }

  #primary-nav>.nav-contact {
    margin-top:12px
  }

  .nav-divider {
    height:1px;
    width:100%;
    margin:10px 0
  }

  .menu-open .menu-toggle span:first-child {
    transform:translateY(6px) rotate(45deg)
  }

  .menu-open .menu-toggle span:nth-child(2) {
    opacity:0
  }

  .menu-open .menu-toggle span:last-child {
    transform:translateY(-6px) rotate(-45deg)
  }

  .split,.two-col {
    grid-template-columns:1fr;
    gap:40px
  }

  .section {
    padding-block:80px
  }

  .cell-grid.three {
    grid-template-columns:1fr
  }

  .contact-grid {
    gap:40px
  }

  .hero {
    padding-top:144px
  }

  .record-arrow {
    display:none
  }

  .no-js .site-nav {
    position:static
  }

  .no-js .nav-inner {
    height:auto;
    display:block;
    padding-block:16px
  }

  .no-js #primary-nav {
    position:static;
    display:flex;
    flex-wrap:wrap;
    padding:16px 0 0;
    max-height:none
  }

  .no-js .hero,.no-js .page-hero {
    padding-top:64px
  }

}

@media(max-width:600px) {
  .container {
    padding-inline:24px
  }

  .hero {
    padding:128px 0 64px
  }

  .hero h1 {
    font-size:clamp(44px,11vw,64px)
  }

  .hero-role {
    font-size:18px;
    margin-top:20px
  }

  .hero-description {
    font-size:16px
  }

  .hero-actions {
    gap:12px 24px
  }

  .hero-affiliation {
    gap:12px;
    margin-top:32px;
    font-size:12px
  }

  .hero-affiliation i:last-of-type {
    display:none
  }

  .hero-affiliation span:last-child {
    width:100%
  }

  .profile-inner {
    flex-direction:column;
    align-items:start;
    gap:28px
  }

  .profile-copy {
    width:100%
  }

  .profile-strip {
    padding-block:40px
  }

  .portrait {
    width:128px;
    height:128px
  }

  .profile-photo figcaption {
    text-align:left
  }

  .section {
    padding-block:64px
  }

  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:12px;
    margin-bottom:32px
  }

  .cell-grid,.cell-grid.three,.contact-grid,.skills-grid {
    grid-template-columns:1fr
  }

  .research-cell,.work-card {
    padding-block:24px
  }

  .record-row,.compact-records .record-row {
    flex-direction:column;
    gap:16px;
    padding:28px 0
  }

  .record-meta,.compact-records .record-meta {
    width:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:12px
  }

  .record-body h3 {
    font-size:20px
  }

  .page-hero {
    padding:120px 0 48px
  }

  .page-hero h1 {
    font-size:36px
  }

  .archive-content {
    padding-block:48px
  }

  .stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:24px;
    gap:32px 20px
  }

  .stat-number {
    font-size:32px
  }

  .prose .legacy-panel,.prose details {
    padding:20px
  }

  .detail-container {
    padding-block:40px
  }

  .skill-group h3 {
    min-height:0
  }

  .footer-primary {
    flex-direction:column
  }

}

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

  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }

}

@media print {
  :root {
    color-scheme:light;
    --bg:#fff;
    --surface:#fff;
    --fg:#000;
    --muted:#333;
    --quiet:#333;
    --line:#ccc
  }

  .site-nav,.site-footer,.filters,.skip-link {
    display:none
  }

  .hero,.section,.page-hero {
    padding:24px 0
  }

  .record-row,.work-card {
    break-inside:avoid
  }

  .button {
    background:#fff;
    color:#000;
    border:1px solid #333
  }

  .tag,.badge {
    background:#fff;
    color:#333
  }

  .prose a {
    text-decoration:underline
  }

}