/* Hallmark · macrostructure: Ecosystem Index · tone: personal academic · anchor hue: green
 * theme: original-site identity · nav: profile links · footer: inline credits
 * audience: research collaborators and software users · use: explore work and code
 * pre-emit critique: P4 H4 E4 S5 R5 V4 · contrast: pass · mobile: pass
 */
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: var(--space-md); }
body { margin: 0; overflow-x: clip; background: var(--color-page); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; }
::selection { background: var(--color-selection); color: var(--color-heading); }
img { display: block; max-width: 100%; height: auto; }
h1,h2,h3 { margin-top: 0; color: var(--color-heading); font-family: var(--font-display); font-style: normal; line-height: 1.3; overflow-wrap: anywhere; }
h1 { font-size: var(--text-name); font-weight: 700; margin-bottom: var(--space-xs); }
h2 { font-size: var(--text-section); font-weight: 700; margin-bottom: var(--space-md); }
h3 { font-size: var(--text-item); font-weight: 600; margin-bottom: var(--space-xs); }
p { margin: 0 0 var(--space-sm); max-width: 70ch; }
a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover,a:active { color: var(--color-link-hover); }
a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
h3 a { color: inherit; text-decoration: none; }
h3 a:hover { color: var(--color-link-hover); text-decoration: underline; }
.wrap { width: min(100% - 40px, 1140px); margin-inline: auto; }
.header { border-top: 10px solid var(--color-slate); background: var(--color-header); padding-block: var(--space-lg); }
.profile { display: grid; grid-template-columns: 88px minmax(0,1fr); column-gap: var(--space-md); align-items: start; }
.portrait { width: 88px; border-radius: 50%; }
.profile-text { min-width: 0; }
.profile-description { color: var(--color-muted); margin-bottom: var(--space-xs); font-size: var(--text-item); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-md); font-weight: 700; font-size: var(--text-sm); }
.links a { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; padding-block: 8px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.link-icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.location { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-lg); padding-block: var(--space-lg); grid-template-areas: "main" "sidebar"; align-items: start; }
main { grid-area: main; min-width: 0; padding: var(--space-md); background: var(--color-sheet); }
.sidebar { grid-area: sidebar; min-width: 0; }
.sheet { padding: var(--space-xl) 0 0; margin: var(--space-xl) 0 0; border-top: 1px solid var(--color-rule); }
.sidebar .sheet { padding: var(--space-md) 0 0; margin: 0 0 var(--space-lg); border-color: var(--color-slate); }
.sidebar dd,.sidebar p { color: var(--color-ink); }
.introduction > p { font-size: var(--text-item); }
.sheet > :last-child { margin-bottom: 0; }
.item { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.item:first-of-type { border-top: 0; padding-top: 0; }
.item:last-child { padding-bottom: 0; }
.item p { margin-bottom: var(--space-xs); }
.summary { color: var(--color-muted); }
.media { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-sm); align-items: start; }
.image-link { display: block; }
.project-image { width: 100%; border: 1px solid var(--color-rule); }
.project-logo { height: 40px; width: auto; max-width: 220px; border: 0; margin-bottom: var(--space-sm); }
[data-project="PyPulseq"] .project-logo { height: 32px; }
.figure-wide { margin: var(--space-sm) 0 0; }
[data-project="PhD research"] .figure-wide { max-width: 560px; }
.figure-wide a { display: block; }
.figure-wide figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.papers { list-style: none; padding: 0; margin: 0; }
.paper { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-xs); padding-bottom: var(--space-md); }
.paper:last-child { padding-bottom: 0; }
.paper h3 { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; font-weight: 700; margin-bottom: 4px; }
.paper h3 a { text-decoration: underline; }
.paper p { margin-bottom: 2px; font-size: var(--text-sm); }
.paper-year { font-family: var(--font-display); font-weight: 600; color: var(--color-muted); }
.paper-year:empty { display: none; }
.venue { color: var(--color-muted); }
.paper > div > a { font-size: var(--text-sm); display: inline-block; padding-block: var(--space-xs); }
dl { margin: 0; }
dt { font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
dd { color: var(--color-muted); margin: 0 0 var(--space-md); font-size: var(--text-sm); }
dd:last-child { margin-bottom: 0; }
.footer { color: var(--color-footer-ink); background: var(--color-footer); padding-block: var(--space-md); font-size: var(--text-sm); }
.footer p { margin: 0; max-width: none; }
.footer a { color: var(--color-footer-ink); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: var(--space-sm); top: -100px; background: var(--color-sheet); padding: var(--space-sm); z-index: 2; }
.skip-link:focus { top: var(--space-sm); }
@media (max-width: 599px) {
  .layout { width: 100%; padding-top: var(--space-sm); }
  .profile-description,.profile .location,.profile .links { margin-inline-start: calc(-88px - var(--space-md)); margin-top: var(--space-sm); }
  main { padding: 24px 20px; }
  .sidebar { padding-inline: 20px; }
  .sheet { padding-top: var(--space-lg); margin-top: var(--space-lg); }
}
@media (min-width: 600px) {
  .profile { grid-template-columns: 120px minmax(0,1fr); }
  .portrait { width: 120px; }
  .media { grid-template-columns: minmax(0, 34%) minmax(0,1fr); gap: var(--space-md); }
  .paper { grid-template-columns: 56px minmax(0,1fr); gap: var(--space-sm); }
  .paper-year:empty { display: block; }
  main { padding: var(--space-lg); }
}
@media (min-width: 960px) {
  .layout { grid-template-columns: minmax(0,1fr) 260px; gap: var(--space-lg); padding-block: var(--space-xl); grid-template-areas: "main sidebar"; }
  .profile-description { max-width: 60ch; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
