/* Shared academic shell for Jekyll collections and Hugo articles. */
:root { --bg: #faf9f6; --surface: #f1f1ec; --text: #252c29; --text-soft: #4d5651; --muted: #69726b; --faint: #838c85; --accent: #416b5f; --accent-strong: #295447; --accent-soft: rgba(65,107,95,.06); --paper-accent: #6b7868; --border: rgba(37,44,41,.11); --border-strong: rgba(37,44,41,.18); }
html[data-theme="dark"] { --bg: #151918; --surface: #1d2320; --text: #e9ece6; --text-soft: #bdc6be; --muted: #929e95; --faint: #7d8a80; --accent: #a7c7b2; --accent-strong: #c2ddca; --accent-soft: rgba(167,199,178,.06); --paper-accent: #b0bba2; --border: rgba(233,236,230,.10); --border-strong: rgba(233,236,230,.18); }
.site-nav { background: color-mix(in srgb, var(--bg) 96%, transparent); box-shadow: none; backdrop-filter: blur(16px); }
.brand-mark { border: 0; border-radius: 0; box-shadow: none; font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -.08em; color: var(--text); }
.nav-right { justify-content: space-between; flex-wrap: wrap; row-gap: 0; }
.nav-links, .nav-controls { flex-shrink: 0; }
.nav-controls { margin-left: auto; }
.segmented-control { border-color: transparent; border-radius: 5px; background: none; box-shadow: none; backdrop-filter: none; }
.segmented-control button { border-radius: 4px; color: var(--muted); font-weight: 500; }
.segmented-control button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.avatar-frame::before { border-radius: 12px; }
.avatar-orbit { border-radius: 24px; }
.avatar { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.identity-copy { margin-top: 22px; }
.profile-links a { font-family: var(--sans); font-size: 13px; font-weight: 400; padding-left: 0; }
.profile-link-icon { color: var(--muted); font-size: 14px; }
.profile-links a:hover { color: var(--accent); }
.role { font-weight: 400; }
.identity-rail.reveal-target, html[data-motion="ready"] .identity-rail.reveal-target { opacity: 1; filter: none; clip-path: none; transition: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
sup[title] { font-size: .8em; cursor: help; }

.site-shell { width: min(1280px, calc(100% - 72px)); grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-top: 52px; }
.nav-inner { width: min(1280px, calc(100% - 72px)); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; min-height: 68px; }
.nav-links { display: flex; }
.nav-links { gap: 22px; }
.nav-links a { padding: 12px 0; font-size: 14px; font-weight: 500; border-radius: 0; }
.nav-links a::after { left: 0; right: 0; bottom: 4px; }
.nav-links a:hover { background: none; }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.identity-rail { top: 90px; max-height: calc(100vh - 106px); padding: 18px 18px 8px; margin: -18px -18px 0; }
.identity-rail .name { font-size: 30px; line-height: 1.12; font-weight: 500; letter-spacing: -.025em; margin-bottom: 14px; }
.name-line { display: block; white-space: nowrap; }
.name a { color: inherit; text-decoration: none; }
.avatar-frame { width: 142px; }
.profile-links { margin-top: 20px; }
.profile-links a { min-height: 34px; }
.identity-rail.reveal-target { opacity: 1; transform: none; }
.flow-field { opacity: .35; }
html[data-theme="dark"] .flow-field { opacity: .45; }
.collection-heading { padding: 0 0 28px; border-bottom: 1px solid var(--border); }
.collection-title-row { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; }
.collection-heading h1 { margin: 0; font: 500 clamp(34px, 3.8vw, 44px)/1.15 var(--serif); letter-spacing: -.035em; }
.collection-description { max-width: 42rem; color: var(--muted); margin: 16px 0 0; font-size: 14px; line-height: 1.75; }
/* The home page introduces the person and research before the collections. */
.about-section { max-width: 48rem; scroll-margin-top: 112px; }
.about-section + .about-section { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.about-section h1 { margin: 0 0 20px; font: 500 clamp(34px, 3.8vw, 44px)/1.15 var(--serif); letter-spacing: -.035em; }
.about-section h2 { margin: 0 0 18px; font: 500 30px/1.2 var(--serif); letter-spacing: -.025em; }
.about-section p { margin: 0 0 16px; font-size: 15px; line-height: 1.85; color: var(--text-soft); }
.about-section .about-bio { margin-bottom: 0; font-size: 17px; line-height: 1.9; }
.about-section strong { color: var(--text); font-weight: 600; }
.about-section a { text-decoration-color: var(--border-strong); }
.about-section a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.research-scope { margin: 0; padding-left: 20px; }
.research-scope li { margin: 14px 0 0; padding-left: 4px; color: var(--text-soft); font-size: 15px; line-height: 1.85; }
.research-scope li::marker { color: var(--accent); font-size: .75em; }
.updates-list { margin: 0; padding: 0; list-style: none; }
.updates-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px; padding: 12px 0; }
.updates-list li + li { border-top: 1px solid var(--border); }
.updates-list time { padding-top: 3px; color: var(--muted); font: 12px/1.85 var(--sans); white-space: nowrap; }
.update-copy p { margin: 0; font-size: 14px; line-height: 1.85; }

.publication-card, .project-card { display: grid; grid-template-columns: minmax(200px, 29%) minmax(0, 1fr); gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--border); }
.publication-figure, .project-figure { display: flex; align-items: center; align-self: start; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 5px; background: #fff; }
.publication-figure img, .project-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: contain; padding: 8px; transition: transform 200ms; }
.publication-figure:hover img, .project-figure:hover img { transform: scale(1.025); }
.research-video { min-width: 0; align-self: start; margin: 0; }
.research-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #091623; border: 1px solid var(--border); border-radius: 5px; }
.publication-card .research-video video, .project-card .research-video video { aspect-ratio: 1.6; }
.paper-hero .research-video video { max-height: 440px; }
.research-video video:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.research-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.research-video figcaption a { color: inherit; text-underline-offset: 3px; }
.publication-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--muted); font: 12px/1.6 var(--sans); }
.venue-label { color: var(--paper-accent); font-weight: 600; }
.status-label { font-size: 11px; color: var(--muted); }
.publication-copy { min-width: 0; }
.publication-copy h2, .project-card h2 { margin: 8px 0 12px; font: 500 24px/1.28 var(--serif); letter-spacing: -.015em; }
.publication-copy h2 a, .project-card h2 a { text-decoration: none; }
.publication-copy h2 a:hover, .project-card h2 a:hover { color: var(--accent); }
.publication-authors { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.publication-authors strong { color: var(--text-soft); font-weight: 650; }
.publication-tldr { color: var(--text-soft); font-size: 14px; line-height: 1.75; margin: 14px 0; }
.tldr-label { margin-right: 6px; font: 600 10px var(--sans); letter-spacing: .02em; color: var(--muted); }
.resource-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.resource-link { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-soft); text-decoration: none; font: 500 12px/1.6 var(--sans); cursor: pointer; }
.resource-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.resource-primary { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.citation-link { border-style: solid; }
.project-copy { min-width: 0; }
.project-card h2 { margin-top: 0; }
.project-card p { font-size: 14px; line-height: 1.8; color: var(--text-soft); margin: 12px 0; }
.back-link { font: 12px var(--mono); color: var(--muted); text-decoration: none; }
.detail-heading { margin: 30px 0; }
.detail-heading h1 { margin: 14px 0; font: 550 clamp(28px, 3vw, 40px)/1.15 var(--serif); letter-spacing: -.025em; }
.paper-hero { margin: 32px 0; }
.paper-hero img { width: 100%; max-height: 440px; object-fit: contain; background: white; padding: 12px; border-radius: 5px; }
.paper-hero figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; }
.paper-summary h2, .citation-heading h2 { font: 500 25px var(--serif); margin: 0; }
.paper-summary p { color: var(--text-soft); }
.citation-section { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border); scroll-margin-top: 104px; }
.citation-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.citation-section pre { overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font: 12px/1.65 var(--mono); }
.citation-feedback { color: var(--accent); font-size: 12px; min-height: 20px; }
.site-footer { font: 12px var(--sans); text-transform: none; letter-spacing: 0; margin-top: 40px; border-top: 0; color: var(--muted); }
@media (max-width: 1120px) {
  .site-shell, .nav-inner { grid-template-columns: 192px minmax(0, 1fr); gap: 36px; }
  .identity-rail .name { font-size: 27px; }
  .publication-card, .project-card { grid-template-columns: 30% minmax(0, 1fr); gap: 24px; }
  .nav-right { gap: 10px; }
  .brand-copy { display: none; }
}
@media (max-width: 760px) {
  .site-shell { display: block; width: calc(100% - 36px); padding-top: 28px; }
  .nav-inner { width: calc(100% - 36px); display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; min-height: 60px; }
  .nav-right { display: contents; }
  .nav-links { margin-left: auto; gap: 18px; }
  .nav-links a { font-size: 13px; padding: 8px 0; }
  .nav-controls { justify-content: flex-end; width: 100%; }
  .identity-rail { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px 22px; position: static; max-height: none; overflow: visible; padding: 8px 0 24px; margin: 0 0 30px; border-bottom: 1px solid var(--border); }
  .avatar-frame { width: 84px; margin: 4px 0 0; }
  .avatar { border-radius: 6px; }
  .avatar-frame::before { border-radius: 20px; }
  .avatar-orbit { display: none; }
  .identity-copy { margin: 0; }
  .identity-rail .name { font-size: 27px; margin: 0 0 8px; }
  .identity-kicker { font-size: 8px; }
  .role { font-size: 12px; }
  .profile-date { font-size: 9px; }
  .profile-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin-top: 2px; padding-top: 0; border: 0; gap: 2px 10px; }
  .profile-links a { display: flex; gap: 6px; padding: 3px 0; font-size: 11px; min-height: 30px; }
  .profile-link-icon { width: 16px; font-size: 12px; }
  .external-mark { display: none; }
  .collection-heading h1 { font-size: 36px; }
  .publication-copy h2 { font-size: 22px; }
  .citation-section { scroll-margin-top: 132px; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 520px) {
  .about-section { scroll-margin-top: 128px; }
  .about-section .about-bio { font-size: 16px; }
  .about-section h2 { font-size: 28px; }
  .updates-list li { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; }
  .updates-list time { padding-top: 0; }
  .nav-links { gap: 14px; }
  .publication-card, .project-card { grid-template-columns: 1fr; gap: 22px; }
  .publication-figure img, .project-figure img { max-height: 210px; }
  .publication-card .research-video video, .project-card .research-video video { max-height: 210px; }
  .publication-meta { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-field, html[data-theme="dark"] .flow-field { opacity: .24; }
}