@font-face{font-family:"Google Sans Flex";src:url("./assets/901a158112dce608.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Portfolio UI Grade";src:url("./assets/d9af48eaa4f62563.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./assets/91fc39ff748ec023.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./assets/a65150d97b693a85.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("./assets/4e05ca4e23830abe.woff2") format("woff2");font-weight:200;font-display:swap}

/* Small Latin delivery font; the original face covers other characters. */




:root {
  /* Keep underlines continuous below letter descenders on every page. */
  --underline-offset: .35em;
  text-decoration-skip-ink: none;
  text-underline-offset: var(--underline-offset);
  /* Figma Color variables, shared by Home and Projects. */
  --color-black: #181820;
  --color-white: #fff;
  --color-blue: rgb(52.6 77.718 204.4);
  --color-red: #dd3c3c;
  --color-light-grey: #bababd;
  --color-yellow: rgb(255 221.667 51);
  color-scheme: light;
  /* Keep short pages aligned with scrollable pages during navigation. */
  scrollbar-gutter: stable;
  --page-margin: 20px;
  --nav-item-gap: 32px;
  --nav-mobile-item-gap: 20px;
  --relation-word-gap: var(--nav-item-gap);
  --muted-opacity: .3;
  --ui-text-size: 16px;
  --gap: 20px;
  --word-size: 32px;
  /* Figma letter spacing -5% = -0.05em; preserve the glyph proportions. */
  --accent-font-family: "IBM Plex Mono", monospace;
  --accent-font-weight: 400;
  --accent-font-weight-hover: 400;
  --accent-font-weight-pressed: 400;
  --accent-letter-spacing: -0.05em;
  --bar-height: 56px;
  --control-stroke: 1px;
  --ui-ease: cubic-bezier(.2, 0, 0, 1);
  --ui-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ui-feedback-duration: 200ms;
  --ui-press-duration: 100ms;
  --ui-font-family: "Portfolio UI Grade", "Google Sans Flex", sans-serif;
  --ui-font-weight: 350;
  --ui-grade-default: 50;
  --ui-grade-hover: 150;
  --ui-grade-pressed: -50;
  --ui-enter-duration: 280ms;
  --ui-exit-duration: 200ms;
  font-family: "Google Sans Flex", sans-serif;
  font-size: var(--ui-text-size);
  font-weight: 350;
  font-optical-sizing: none;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 95;
  line-height: 1.3;
  color: var(--color-black);
  background: var(--color-white);
}
* { box-sizing: border-box; letter-spacing: 0; }
body { position: relative; margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.content { width: min(1440px, calc(100% - 2 * var(--page-margin))); margin-inline: auto; }
a { color: inherit; text-decoration: none; }
:where(:root:not(.is-pointer-input)) :is(a, button, [role="button"]):focus-visible { outline: 2px solid var(--color-blue); outline-offset: 4px; }
:root.is-pointer-input :is(a, button, [role="button"]):focus { outline: none; }
:is(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.home-header { min-height: var(--bar-height); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 20px; position: relative; }
.brand, nav a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-viewport { display: contents; }
nav { display: flex; flex-wrap: wrap; gap: 0 var(--nav-item-gap); }
.home-header nav a[aria-current="page"], .project-filter-inner button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: var(--control-stroke); text-underline-offset: var(--underline-offset); }
.menu-toggle { --menu-stroke: var(--control-stroke); border: 0; color: inherit; background: transparent; padding: 10px; margin-right: -10px; width: 44px; height: 44px; flex-shrink: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--ui-feedback-duration) var(--ui-ease); }
@media (hover: hover) {
  :where(:root:not(.is-touch-input)) .menu-toggle:hover { color: var(--color-blue); }
}
:where(:root:not(.is-pointer-input)) .menu-toggle:focus-visible { color: var(--color-blue); }
.menu-toggle:active { color: var(--color-black); transition-duration: var(--ui-press-duration); }
.menu-icon { display: block; width: 24px; height: 24px; position: relative; }
.menu-icon span { position: absolute; left: 0; top: calc(12px - var(--menu-stroke) / 2); width: 24px; height: var(--menu-stroke); background: currentColor; transition: transform var(--menu-duration, 420ms) var(--ui-ease); }
.menu-icon span:first-child { transform: translateY(-4px) rotate(0deg); }
.menu-icon span:last-child { transform: translateY(4px) rotate(0deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span { transition: transform var(--menu-duration, 420ms) var(--ui-ease); }
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(0) rotate(-45deg); }
/* Dim the whole document, including content beneath translucent browser bars.
   A viewport-fixed layer can stop at Safari's visible-content boundary. */
.menu-backdrop { position: absolute; inset: 0; z-index: 10; background: rgb(24 24 32 / 35%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--menu-duration, 420ms) var(--ui-ease), visibility 0s var(--menu-duration, 420ms); }
.menu-open .menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--menu-duration, 420ms) var(--ui-ease), visibility 0s; }
[hidden] { display: none !important; }
/* Biography and one responsive relationship field share the same content grid. */
.home-page { --ui-text-size: 16px; }
.home-page body { min-height: 100dvh; height: auto; }
.home-page .home-header, .home-page .home-footer { flex-shrink: 0; }
.home-header .brand, .home-header nav a { font-size: var(--ui-text-size); }
.home-main { flex: 1 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: center; gap: 64px; padding-block: 0; }
.home-introduction { min-width: 0; font-size: var(--ui-text-size); font-weight: 350; line-height: 1.55; }
.home-introduction p { margin: 0 0 24px; font: inherit; text-wrap: wrap; }
.home-introduction .bio-link { color: var(--color-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); }
.home-introduction .bio-link { text-decoration-color: color-mix(in srgb, var(--color-black) 30%, transparent); }
.home-contact-links { color: #6a6b70; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--nav-item-gap); row-gap: 0; }
.home-profile-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--nav-item-gap); }
.home-contact-email { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
@media (max-width: 767px) {
  .home-contact-links { column-gap: var(--nav-mobile-item-gap); }
  .home-profile-links { column-gap: var(--nav-mobile-item-gap); }
}
.home-contact-link { --link-rest-color: #6a6b70; color: var(--link-rest-color); display: inline-flex; flex: none; align-items: center; min-height: 44px; font-size: var(--ui-text-size); white-space: nowrap; text-decoration: none; }
.home-contact-link:focus-visible { outline-offset: -2px; }
.bio-tooltip-trigger { position: relative; --wavy-center-adjustment: 2px; display: inline; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-variation-settings: inherit; text-align: inherit; cursor: help; text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: var(--color-blue); text-decoration-thickness: 1px; text-underline-offset: calc(var(--underline-offset) - var(--wavy-center-adjustment)); text-decoration-skip-ink: none; }
.bio-tooltip-trigger::after { content: ""; position: absolute; top: 50%; left: -8px; right: -8px; height: max(44px, 100%); transform: translateY(-50%); }
/* Align the wave's center, compensating for each engine's extra wavy offset
   at our fixed 1px stroke. WebKit adds 1px; Blink adds thickness + 1px. */
@supports (background-image: -webkit-named-image(i)) {
  .bio-tooltip-trigger { --wavy-center-adjustment: 1px; }
}
.bio-tooltip { position: fixed; z-index: 9; width: 320px; max-width: calc(100vw - 24px); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--color-black) 12%, transparent); border-radius: 10px; background: var(--color-white); color: var(--color-black); box-shadow: 0 6px 24px rgb(24 24 32 / 10%); font: var(--accent-font-weight) 13px/1.5 var(--accent-font-family); font-variation-settings: normal; font-synthesis: none; letter-spacing: var(--accent-letter-spacing); text-align: left; --tooltip-max-height: calc(100dvh - 24px); }
.bio-tooltip :is(strong, span, a) { letter-spacing: inherit; }
.bio-tooltip strong { display: block; margin-bottom: 6px; font: inherit; color: var(--color-blue); }
.bio-tooltip span { display: block; max-height: max(0px, calc(var(--tooltip-max-height) - 60px)); overflow-y: auto; overscroll-behavior: contain; }
.bio-tooltip a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--color-black) 30%, transparent); text-underline-offset: var(--underline-offset); }
.bio-tooltip::after { content: ""; position: absolute; left: var(--tooltip-arrow-x, 50%); width: 10px; height: 10px; background: var(--color-white); border: inherit; transform: translateX(-50%) rotate(45deg); }
.bio-tooltip[data-side="above"]::after { bottom: -6px; border-top: 0; border-left: 0; }
.bio-tooltip[data-side="below"]::after { top: -6px; border-bottom: 0; border-right: 0; }
.interactive-approach { width: 100%; min-width: 0; margin: 0; aspect-ratio: 1; position: relative; color: var(--color-blue); touch-action: pan-y; cursor: pointer; }
#relation-canvas, .relation-words { position: absolute; inset: 0; width: 100%; height: 100%; }
#relation-canvas { pointer-events: none; }
.relation-words { display: grid; align-content: center; justify-content: center; gap: 48px; }
.relation-group { display: flex; justify-content: center; gap: var(--relation-word-gap); align-items: center; opacity: 1; transition: opacity 150ms cubic-bezier(.22, 1, .36, 1); }
.relation-words:has([aria-pressed="true"]) .relation-group:not(:has([aria-pressed="true"])) { opacity: var(--muted-opacity); }
.relation-nouns { display: flex; align-items: center; gap: var(--relation-word-gap); }
.relation-words [data-node] { display: inline-block; position: relative; transform: translate(var(--mx, 0px), var(--my, 0px)); font-family: var(--accent-font-family); font-weight: var(--accent-font-weight); font-variation-settings: normal; font-synthesis: none; letter-spacing: var(--accent-letter-spacing); font-size: var(--ui-text-size); white-space: nowrap; background: transparent; }
.relation-action { z-index: 1; justify-self: start; border: 0; padding: 8px 0; min-height: 44px; color: var(--color-blue); line-height: 1.3; text-align: left; cursor: pointer; }
.relation-action::after { content: ""; position: absolute; inset: 0 -8px; }
.relation-noun::after { content: ""; position: absolute; top: 50%; left: -8px; right: -8px; height: max(44px, 100%); transform: translateY(-50%); }
.relation-action[aria-pressed="true"] { text-decoration: none; }
.relation-noun { color: var(--color-black); line-height: 1.5; }
/* Hover is an invitation to click, independent of the currently selected shape. */
@media (hover: hover) {
  :where(:root:not(.is-touch-input)) .relation-words .relation-group:has([data-node]:hover) { opacity: 1; }
}
:where(:root:not(.is-pointer-input)) .relation-words .relation-group:has(.relation-action:focus-visible) { opacity: 1; }
@media (min-width: 1280px) {
  .home-main {
    /* At 1632px the three gutters meet at 96px; at 1280px all reach 20px.
       Percentage tracks use the available width, including scrollbar insets. */
    --home-gutter: clamp(var(--page-margin), calc(20px + (100% - 1280px) * 19 / 88), 96px);
    --home-side-gutter: max(var(--home-gutter), calc((100% - 1440px) / 2));
    width: 100%;
    grid-template-columns: var(--home-side-gutter) minmax(0, 1fr) var(--home-gutter) minmax(0, 1fr) var(--home-side-gutter);
    gap: 0;
  }
  .home-introduction { grid-column: 2; }
  /* Reserve the header/footer; retain enough height for all three text rows. */
  .interactive-approach { grid-column: 4; max-height: max(228px, calc(100dvh - 2 * var(--bar-height))); }
}
@media (max-width: 1279px) {
  /* Carry the mobile column into tablet sizes without a gutter jump. */
  .home-main {
    width: min(calc(768px - 2 * var(--page-margin)), calc(100% - 2 * var(--page-margin)));
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(32px, calc(6.25vw - 16px), 48px) 32px;
    gap: clamp(32px, calc(96px - 6.25vw), 48px);
  }
  .interactive-approach { grid-column: 1; width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 767px) {
  .home-page { --ui-text-size: 16px; }
  .home-introduction { text-align: left; }
  .relation-words { gap: 24px; }
  .interactive-approach { --relation-word-gap: 16px; }
}
@media (max-width: 459px) {
  .relation-words { gap: 24px; }
  .relation-group, .relation-nouns { display: flex; flex-direction: column; row-gap: 0; column-gap: 16px; }
  .relation-action { min-height: 22px; line-height: 22px; padding: 0; text-align: center; }
  .relation-action::after { content: ""; position: absolute; inset: -11px -8px; }
  .relation-noun { line-height: 22px; }
}
.home-footer { min-height: var(--bar-height); display: flex; align-items: center; justify-content: flex-start; color: color-mix(in srgb, var(--color-black) 30%, transparent); font: 250 13px/24px "Google Sans Flex", sans-serif; font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 95, "slnt" 0; text-transform: none; text-align: left; }
.home-footer p { margin-block: 8px; overflow-wrap: anywhere; }
.home-page .home-footer { padding-block: 16px; }
.home-page .home-footer p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 767px) {
  .menu-viewport { display: block; position: fixed; top: var(--bar-height); left: 0; right: 0; overflow: clip; pointer-events: none; }
  .js .menu-toggle { display: block; }
  .js .home-header { height: var(--bar-height); flex-shrink: 0; flex-wrap: nowrap; }
  .js nav { display: flex; position: relative; flex-direction: column; align-items: stretch; gap: var(--nav-mobile-item-gap); padding: 14px 20px; max-height: calc(100dvh - var(--bar-height)); overflow-y: auto; overscroll-behavior: contain; background: var(--color-white); box-shadow: 0 8px 12px rgb(24 24 32 / 4%); transform: translateY(-100%); visibility: hidden; pointer-events: none; transition: transform var(--menu-duration, 420ms) var(--ui-ease), visibility 0s var(--menu-duration, 420ms); }
  .js nav.is-open { transform: translateY(0); visibility: visible; pointer-events: auto; transition-duration: var(--menu-duration, 420ms), 0s; transition-delay: 0s; }
  .js nav a { height: 44px; flex-shrink: 0; }
  .menu-layer .home-header { z-index: 11; }
  .menu-layer .home-header::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--bar-height); background: var(--color-white); z-index: -1; }
}
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .menu-backdrop { visibility: hidden; opacity: 0; transition: none; pointer-events: none; }
}
@media (min-width: 1280px) {
  :root { --gap: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand, nav a, .menu-toggle, .menu-icon span, .js nav, .menu-backdrop, .relation-group, .relation-words [data-node] { transition: none !important; }
}

.projects-page {
  /* Match tablet spacing at 1280px, reaching the wide layout at 1536px. */
  --project-column-gap: clamp(20px, calc(4.6875vw - 40px), 32px);
  --project-row-gap: clamp(48px, calc(3.125vw + 8px), 56px);
  --project-title-size: 16px;
  --project-body-size: 16px;
  --project-meta-size: 13px;
  --filter-padding: 18px;
  padding-top: var(--bar-height);
}
.project-header { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar-height); background: var(--color-white); }
.project-header .home-header { height: var(--bar-height); }
.projects-page .menu-backdrop { z-index: 40; }
.menu-layer .project-header { z-index: 50; }
/* Start as an inline filter row beneath the page title. The row keeps its
   dimensions when it sticks, so cards and the scroll position never jump. */
.projects-main { flex: 1; width: 100%; padding-top: var(--listing-top-space); padding-bottom: 20px; }
.projects-heading .page-title { margin-bottom: calc(clamp(24px, 3.125vw, 40px) - var(--filter-padding)); }
.projects-content { padding-top: calc(var(--section-label-gap) - var(--filter-padding)); }
.project-filters { position: sticky; top: var(--bar-height); z-index: 20; background: transparent; }
.project-filters.is-stuck { background: var(--color-white); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-black) 8%, transparent); }
.project-filter-inner { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 24px var(--nav-item-gap); padding-block: var(--filter-padding); }
/* Only labels occupy the row. Their centered hit areas do not add spacing. */
.project-filter-inner button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: max-content; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; color: var(--color-black); opacity: 1; font: var(--accent-font-weight) var(--section-label-size)/var(--section-label-leading) var(--accent-font-family); font-variation-settings: normal; font-synthesis: none; letter-spacing: var(--accent-letter-spacing); text-align: left; white-space: nowrap; cursor: pointer; transition: color var(--ui-feedback-duration) var(--ui-ease); }
.project-filter-inner button::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(44px, calc(100% + 16px)); height: max(44px, 100%); transform: translate(-50%, -50%); }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--project-row-gap) var(--project-column-gap); }
.project-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.project-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.project-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.project-heading { display: flex; flex-direction: column; gap: 4px; }
.project-card h2 { margin: 0; font-size: var(--project-title-size); font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; }
.project-card p { margin: 0; overflow-wrap: anywhere; }
.project-description { font-size: var(--project-body-size); line-height: 1.45; }
.project-date { color: var(--color-light-grey); font-size: var(--project-meta-size); line-height: 1.3; }
.project-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.project-badge { max-width: 100%; padding: 4px 8px; font: var(--accent-font-weight) var(--project-meta-size)/1.3 var(--accent-font-family); font-variation-settings: normal; font-synthesis: none; letter-spacing: var(--accent-letter-spacing); overflow-wrap: anywhere; color: var(--color-white); background: var(--color-black); }
.badge-ongoing { background: var(--color-light-grey); }
.badge-award { background: var(--color-yellow); color: var(--color-black); }
.badge-publication { background: var(--color-blue); }
.badge-nda { background: var(--color-red); }

@media (min-width: 768px) {
  .projects-main { padding-bottom: 80px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .project-heading { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
  .project-card h2 { flex: 1 1 220px; }
  .project-card .project-date { margin-left: auto; white-space: nowrap; }
}
@media (min-width: 1280px) {
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-card h2 { flex-basis: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-filter-inner button { transition: none; }
}

.listing-page {
  --main-margin: clamp(20px, calc(10.9375vw - 120px), 48px);
  --page-margin: var(--main-margin);
  --listing-content-width: min(1440px, calc(100% - 2 * var(--main-margin)));
  --section-label-size: 16px;
  --section-label-leading: 1.3;
  --section-label-gap: clamp(24px, 3.125vw, 32px);
  --listing-top-space: clamp(32px, 4.166667vw, 48px);
  --listing-section-gap: clamp(40px, 4.166667vw, 56px);
  padding-top: var(--bar-height);
}
.listing-header { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar-height); background: var(--color-white); }
.listing-header .home-header { height: var(--bar-height); }
/* One width rule keeps every listing header, main and footer on the same edges. */
.listing-page :is(.home-header, .listing-main, .projects-heading, .projects-content, .project-filter-inner, .home-footer) { width: var(--listing-content-width); }
.listing-page .menu-backdrop { z-index: 40; }
.menu-layer .listing-header { z-index: 50; }
.listing-main { flex: 1; padding-block: var(--listing-top-space) 64px; }
.page-title { margin: 0 0 clamp(24px, 3.125vw, 40px); font: var(--accent-font-weight) 28px/1.3 var(--accent-font-family); font-variation-settings: normal; font-synthesis: none; letter-spacing: var(--accent-letter-spacing); text-transform: lowercase; }
.publication-years { display: flex; flex-direction: column; gap: var(--listing-section-gap); max-width: 1120px; }
.publication-year { min-width: 0; }
.publication-year h2 { margin: 0 0 var(--section-label-gap); font: var(--accent-font-weight) var(--section-label-size)/var(--section-label-leading) var(--accent-font-family); font-variation-settings: normal; font-synthesis: none; letter-spacing: var(--accent-letter-spacing); }
.record-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; max-width: 1120px; }
.record { min-width: 0; }
.record h3, .record h2 { margin: 0 0 8px; font: 550 16px/1.45 "Google Sans Flex", sans-serif; overflow-wrap: anywhere; }
.record p { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.record p + p { margin-top: 4px; }
.record-authors, .record-venue { color: color-mix(in srgb, var(--color-black) 55%, transparent); }
.record-authors .author-self { color: var(--color-blue); text-decoration: none; }
.record-venue strong { color: var(--color-black); font-weight: inherit; }
.record .record-links { display: flex; flex-wrap: wrap; align-items: center; gap: max(0px, calc(44px - 1.5em)) 24px; margin-top: 4px; }
/* Lay out the labels themselves; keep centered hit areas out of the flow. */
.record-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 0; min-width: 0; padding: 0; margin: 0; font-size: 13px; white-space: nowrap; }
.record-links a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(44px, calc(100% + 16px)); height: max(44px, 100%); transform: translate(-50%, -50%); }
.record-links a:active { color: var(--color-black); }
.fun-empty { margin: 0; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--color-black) 55%, transparent); }
.listing-page .home-footer { font-weight: 350; }
@media (min-width: 768px) {
  .page-title { font-size: 32px; }
  .listing-main { padding-bottom: 80px; }
}


/* Small Latin delivery font; the original face covers other characters. */

.external-link { display: inline-flex; align-items: center; column-gap: 4px; }
.external-link-icon { display: inline-block; flex: none; align-self: center; width: 16px; height: 17px; padding-top: 1px; box-sizing: border-box; pointer-events: none; }
.external-link-icon svg { display: block; width: 16px; height: 16px; stroke-width: var(--link-arrow-stroke, 2); transition: stroke-width var(--link-feedback-duration, 200ms) cubic-bezier(.2, 0, 0, 1); }

/* Padding expands the real hit box; negative margins preserve visible gaps. */
.home-header .brand, .home-header nav a, .cv-open, .home-contact-link {
  box-sizing: border-box;
  width: max-content;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  margin-inline: -8px;
  align-self: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .home-header nav a { align-self: flex-start; }
}
/* The older mobile menu stretched the label alone, displacing the arrow. */
.global-nav__link.external-link { min-width: 44px; min-height: 44px; justify-content: center; }
.global-nav__link.external-link > span { width: auto; }

/* Bio and navigation use exactly the same resting face, size and outline grade.
   Grade changes preserve glyph advances, so hover never reflows the biography. */
.home-introduction, .home-header .brand, .home-header nav a {
  font-family: var(--ui-font-family);
  font-size: var(--ui-text-size);
  font-weight: var(--ui-font-weight);
  font-optical-sizing: none;
  font-variation-settings: "GRAD" var(--ui-grade-default), "ROND" 0, "wdth" 95;
}
/* Keep mono controls at Regular weight through hover and press. */
.project-filter-inner button, .bio-tooltip a {
  --link-font-family: var(--accent-font-family);
  --link-font-variations: normal;
  font-synthesis: none;
}
:root :is(.project-filter-inner button, .bio-tooltip a)[data-link-feedback] {
  font-weight: var(--link-accent-weight, var(--accent-font-weight));
  letter-spacing: var(--accent-letter-spacing);
}
/* One feedback contract for text links, buttons and both navigation bands. */
:root [data-link-feedback] {
  --link-grade: var(--link-default-grade, var(--ui-grade-default, 50));
  --link-accent-weight: var(--accent-font-weight);
  --link-arrow-stroke: 2;
  --link-feedback-duration: var(--ui-feedback-duration, 200ms);
  font-family: var(--link-font-family, var(--ui-font-family, "Portfolio UI Grade"));
  color: var(--link-rest-color, var(--color-black, var(--yjk-system-color-on-surface)));
  font-variation-settings: var(--link-font-variations, "GRAD" var(--link-grade), "ROND" 0, "wdth" 95);
  transition: font-variation-settings var(--link-feedback-duration) var(--ui-ease, cubic-bezier(.2, 0, 0, 1)), color var(--link-feedback-duration) var(--ui-ease, cubic-bezier(.2, 0, 0, 1)), text-decoration-color var(--link-feedback-duration) var(--ui-ease, cubic-bezier(.2, 0, 0, 1)), opacity var(--ui-press-duration, 100ms) var(--ui-ease, cubic-bezier(.2, 0, 0, 1));
}
:root [data-link-feedback].is-link-hover:where(:not(.is-link-pressed)),
:root[data-link-input="keyboard"] [data-link-feedback]:focus-visible:where(:not(.is-link-pressed)) {
  --link-grade: var(--ui-grade-hover, 150);
  --link-accent-weight: var(--accent-font-weight-hover);
  --link-arrow-stroke: 3.2;
  color: var(--link-rest-color, var(--color-black, var(--yjk-system-color-on-surface)));
  text-decoration-color: var(--color-blue);
}
:root [data-link-feedback].is-link-pressed {
  --link-grade: var(--ui-grade-pressed, -50);
  --link-accent-weight: var(--accent-font-weight-pressed);
  --link-arrow-stroke: 1;
  --link-feedback-duration: 0ms;
  /* Transient press feedback is shared by both font families. */
  opacity: .6;
  color: var(--link-rest-color, var(--color-black, var(--yjk-system-color-on-surface)));
}
.global-nav__link[data-link-feedback][aria-current="page"] {
  --link-default-grade: var(--nav-link-grad-selected);
  --link-rest-color: var(--nav-selected-text);
  --link-hover-color: var(--nav-selected-text);
  --link-rest-background: var(--nav-selected-bg);
  --link-hover-background: var(--nav-selected-hover-bg);
  --link-press-background: var(--nav-selected-pressed-bg);
}
:root .global-nav__link[data-link-feedback] { background: var(--link-rest-background, transparent); }
:root .global-nav__link[data-link-feedback].is-link-hover:where(:not(.is-link-pressed)),
:root[data-link-input="keyboard"] .global-nav__link[data-link-feedback]:focus-visible:where(:not(.is-link-pressed)) { background: var(--link-hover-background, var(--state-layer-hover-bg)); }
:root .global-nav__link[data-link-feedback].is-link-pressed { background: var(--link-press-background, var(--state-layer-pressed-bg)); }
:root .global-nav__link[data-link-feedback] > span,
:root .global-nav__brand[data-link-feedback] .global-nav__brand-line {
  font-family: inherit;
  font-variation-settings: "wght" var(--nav-desktop-font-weight), "GRAD" var(--link-grade), "opsz" var(--yjk-sys-typescale-label-large-opsz);
  transition-duration: var(--link-feedback-duration);
}
:root[data-link-input="keyboard"] :is(.global-nav__link, .global-nav__brand)[data-link-feedback]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :root [data-link-feedback],
  :root .global-nav__link[data-link-feedback] > span,
  :root .global-nav__brand[data-link-feedback] .global-nav__brand-line,
  .external-link-icon svg { transition: none; }
}

/* Preserve content and established layout; refine only the presentation. */
:root{--page-margin:clamp(20px,calc(10.9375vw - 120px),48px);--shared-content-width:min(1440px,calc(100% - 2 * var(--page-margin)));--accent-font-family:"IBM Plex Mono",monospace;--accent-font-weight:400;--accent-font-weight-hover:400;--accent-font-weight-pressed:400;--type-secondary-size:13px;--accent-letter-spacing:-.05em;--ui-feedback-duration:140ms;text-decoration-skip-ink:none}
*,*::before,*::after{border-radius:0!important}
body{padding-top:var(--bar-height)}
.content,.listing-page :is(.home-header,.listing-main,.home-footer){width:var(--shared-content-width);margin-inline:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:30;height:var(--bar-height);background:white}
.site-header .home-header{height:var(--bar-height)}
.menu-layer .site-header{z-index:50}
.menu-backdrop{z-index:40}
main[hidden]{display:none!important}
.home-main{min-height:calc(100dvh - 2 * var(--bar-height));flex:1}
.home-page .home-footer{padding-block:0}
.home-introduction p{font-size:16px;line-height:1.55}
.home-contact-link{color:#6a6b70}
.home-header :is(.brand,nav a){font-size:16px}
.home-footer{color:#77797e;font-weight:350}
.listing-page{--listing-top-space:clamp(32px,4.166667vw,48px);--listing-content-width:var(--shared-content-width)}
.listing-main{padding-top:var(--listing-top-space);padding-bottom:64px;min-height:calc(100dvh - 2 * var(--bar-height))}
.listing-heading{margin:0;padding:0}
.page-title{font-family:var(--accent-font-family);font-weight:var(--accent-font-weight);font-size:32px;line-height:1.3;letter-spacing:-.05em;margin:0 0 32px;font-synthesis:none}
:is(.projects-page,.fun-page){--project-column-gap:clamp(20px,calc(4.6875vw - 40px),32px);--project-row-gap:32px;--project-title-size:16px;--project-body-size:16px;--project-meta-size:13px}
.project-filters{margin-top:-18px;margin-bottom:14px;position:sticky;top:var(--bar-height);background:white;z-index:20}
.listing-page .project-filter-inner{width:100%;margin:0;padding-block:18px;gap:20px 32px}
.project-filter-inner button{color:var(--color-black);font-family:var(--accent-font-family);font-size:var(--type-secondary-size);font-weight:var(--accent-font-weight);letter-spacing:-.05em;text-decoration:none!important}
.project-filter-inner button[aria-pressed=true]{color:var(--color-black)}
.project-filter-inner button[aria-pressed=true]::before{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;pointer-events:none}
.project-filter-inner button::after{min-width:44px;min-height:44px}
.project-grid{align-items:start}
.project-card{display:flex;flex-direction:column;gap:8px;align-self:start;min-height:0;height:auto}
.project-media{display:block}
.project-image{aspect-ratio:16/9;object-fit:cover;border:0}
.project-copy{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.project-heading{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.project-card h2{flex:1 1 200px;font-size:16px;font-weight:550;line-height:1.3;margin:0}
.project-card .project-date{margin:0 0 0 auto;white-space:nowrap;flex:0 0 auto;color:#85878b;font:350 13px/1.3 "Google Sans Flex",sans-serif}
.project-description{min-height:0;height:auto;margin:0;font-size:16px;line-height:1.45;color:#62656b}
.project-badges{margin:0;padding:0;gap:4px 6px;align-items:baseline}
.project-badge{padding:3px 6px;background:#f0f1f3;font:var(--accent-font-weight) var(--type-secondary-size)/1.45 var(--accent-font-family);letter-spacing:-.05em;color:#34383f}
.badge-publication{color:#3045a8;background:#edf0ff}.badge-nda{color:#a12e2e;background:#fff0ee}.badge-ongoing{color:#6b7077;background:#f4f5f6}.badge-company{color:#245e55;background:#eaf4f0}.badge-award{color:#71500e;background:#fff5d7}
.project-card:hover h2 a{text-decoration:none}
.project-media:active{opacity:.9}
.publication-list{max-width:1120px;display:flex;flex-direction:column;gap:32px}
.publication-row{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px 24px;align-items:start}
.pub-year{grid-column:1;grid-row:1;margin:0;font:var(--accent-font-weight) 16px/1.45 var(--accent-font-family);letter-spacing:-.05em}
.pub-copy{grid-column:2;min-width:0}
.pub-copy h2{font:550 16px/1.45 "Google Sans Flex",sans-serif;margin:0 0 8px}
.pub-authors,.pub-venue-full{margin:0;color:#74777c;font-size:13px;line-height:1.5}
.pub-venue-full{margin-top:4px;color:#565960}
.pub-venue-full strong{font-weight:450;display:inline;color:inherit}
.pub-authors .author-self{color:var(--color-blue);text-decoration:none}
.pub-links{grid-column:2;display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding-bottom:10px}
.pub-links a,.detail-links a{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0;min-width:0;min-height:0;font:var(--accent-font-weight) var(--type-secondary-size)/1.5 var(--accent-font-family);letter-spacing:-.05em;white-space:nowrap;color:#363940}
.pub-links a::after,.detail-links a::after{content:"";position:absolute;left:50%;top:50%;width:max(44px,calc(100% + 14px));height:44px;transform:translate(-50%,-50%)}
.pub-links a:hover,.detail-links a:hover{text-decoration:none}
.pub-links .resource-arrow{width:13px;height:13px;flex:none}
.fun-empty{color:#74777c}
.detail-title{font:var(--accent-font-weight) 32px/1.3 var(--accent-font-family);letter-spacing:-.05em;margin:0 0 16px;max-width:1000px}
.detail-description{font-size:16px;line-height:1.55;max-width:800px;margin:0 0 8px}
.detail-date{font-size:13px;color:#74777c;margin:0 0 24px}
.detail-image{width:min(100%,1000px);height:auto;display:block;margin:0 0 28px}
.detail-links{display:flex;gap:28px;flex-wrap:wrap;padding-block:8px}
.detail-note{font-size:13px;color:#74777c;margin-top:24px}
/* Hover is transient; the continuous selection underline stays still. */
.home-header nav a[aria-current="page"]{text-decoration:none;position:relative}
.home-header nav a[aria-current="page"]::before{content:"";position:absolute;left:8px;right:8px;top:calc(50% + .65em + 5px);height:1px;background:currentColor;pointer-events:none}
.interaction-link{transition:color 140ms var(--ui-ease),opacity 90ms var(--ui-ease)}
.interaction-link:focus-visible{outline:2px solid var(--color-blue);outline-offset:4px}
.interaction-link:active{opacity:.6}
.wave-label{display:inline-block;position:relative;white-space:pre;font:inherit;letter-spacing:inherit;line-height:inherit;pointer-events:none}
.wave-char{display:inline;position:relative;font:inherit;letter-spacing:inherit;pointer-events:none}
:root{--text-link-arrow-size:8px;--text-link-arrow-gap:2px;--text-link-underline-offset:.2em;--text-link-underline-thickness:.5px}
.home-introduction :is(.bio-link,.home-contact-link){font-weight:inherit;font-variation-settings:inherit}
.home-introduction .bio-link{color:var(--color-black)}
.home-introduction .home-contact-link{color:var(--link-rest-color)}
.home-introduction .bio-link,.home-contact-link,.bio-tooltip a,.pub-links a,.detail-links a{column-gap:0;text-decoration:none}
.text-link-label{display:inline;font:inherit;letter-spacing:inherit}
:root{
  --text-link-underline-thickness:.5px;
  --link-underline-solid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='4' viewBox='0 0 18 4'%3E%3Cpath d='M0 2H18' fill='none' stroke='%23181820' stroke-opacity='.35' stroke-width='.5'/%3E%3C/svg%3E");
  --link-underline-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='4' viewBox='0 0 18 4'%3E%3Cpath d='M0 2H18' fill='none' stroke='%23354ecc' stroke-width='.5'/%3E%3C/svg%3E");
  --link-underline-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2C2 .4 4 .4 6 2S10 3.6 12 2' fill='none' stroke='%23181820' stroke-opacity='.35' stroke-width='.5'/%3E%3C/svg%3E");
  --link-underline-wave-hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2C2 .4 4 .4 6 2S10 3.6 12 2' fill='none' stroke='%23354ecc' stroke-width='.5'/%3E%3C/svg%3E");
}
.text-link-label{
  text-decoration:none;padding-bottom:3px;background-image:var(--link-underline-rest,var(--link-underline-solid));
  background-size:var(--link-underline-period,18px) 4px;background-position:left bottom;background-repeat:repeat-x;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.home-introduction .bio-tooltip-trigger{--link-underline-rest:var(--link-underline-wave);--link-underline-emphasis:var(--link-underline-wave-hover);--link-underline-period:12px;text-decoration:none}
.text-link:focus-visible .text-link-label{background-image:var(--link-underline-emphasis,var(--link-underline-hover))}
@media(hover:hover){:root:not(.is-touch-input) .text-link:hover .text-link-label{background-image:var(--link-underline-emphasis,var(--link-underline-hover))}}
.text-link-tail{display:inline;white-space:nowrap;font:inherit;letter-spacing:inherit}
.bio-tooltip :is(.text-link-label,.text-link-tail){display:inline;max-height:none;overflow:visible}
.link-arrow{display:inline-block;flex:none;width:var(--text-link-arrow-size);height:var(--text-link-arrow-size);margin-left:var(--text-link-arrow-gap);padding:0;vertical-align:.25em;overflow:visible;pointer-events:none;stroke-width:1;transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
.text-link:focus-visible .link-arrow{color:var(--color-blue)}
.text-link:focus-visible .link-arrow:not(.link-help){transform:translate(1px,-1px)}
.back-to-top:focus-visible .link-arrow{transform:translateY(-2px)}
@media(hover:hover){
  :root:not(.is-touch-input) .text-link:hover .link-arrow{color:var(--color-blue)}
  :root:not(.is-touch-input) :is(.home-header nav a,.project-filter-inner button):hover::before{background:var(--color-blue)}
}
:is(.home-header nav a,.project-filter-inner button):focus-visible::before{background:var(--color-blue)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :root:not(.is-touch-input) .text-link:hover .link-arrow:not(.link-help){transform:translate(1px,-1px)}
  :root:not(.is-touch-input) .back-to-top:hover .link-arrow{transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){.interaction-link,.link-arrow{transition:none!important}.link-arrow{transform:none!important}.wave-char{top:0!important}}
/* One type rule governs both navigation and footer on every route. */
.home-header :is(.brand,nav a),.home-footer{
  font-family:var(--ui-font-family);font-size:var(--ui-text-size);font-weight:var(--ui-font-weight);
  line-height:1.3;font-optical-sizing:none;font-variation-settings:"GRAD" var(--ui-grade-default),"ROND" 0,"wdth" 95;letter-spacing:0;
}
.home-footer{display:flex;align-items:center;min-height:var(--bar-height);padding-block:6px;color:#77797e}
.home-page .home-footer{padding-block:6px}
.home-footer .footer-copyright{margin:0;text-align:left;white-space:nowrap;overflow-wrap:normal}
@media(max-width:899px){
  .home-footer,.home-page .home-footer{padding-block:16px}
}
/* Floating upward action, kept separate from the footer and clear of its links. */
.back-to-top{position:fixed;z-index:35;--back-top-side-gap:max(20px,env(safe-area-inset-right,0px));--back-top-bottom-gap:max(20px,calc(env(safe-area-inset-bottom,0px) + 20px));left:calc(var(--back-top-right-edge,100%) - 44px - var(--back-top-side-gap));top:calc(var(--back-top-bottom-edge,100%) - 44px - var(--back-top-bottom-gap));display:grid;place-items:center;width:44px;height:44px;margin:0;padding:9px;border:1px solid #18182024;background:white;color:var(--color-black);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms var(--ui-ease),color 140ms var(--ui-ease),visibility 0s 180ms}
@media(min-width:960px){.back-to-top{--back-top-side-gap:0px}}
.back-to-top svg{display:block;width:24px;height:24px;pointer-events:none}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
:root:is(.menu-open,.menu-layer) .back-to-top{opacity:0;visibility:hidden;pointer-events:none;transition:none}
@media(hover:hover){.back-to-top:hover{color:var(--color-blue);border-color:var(--color-blue)}}
@media(hover:none) and (pointer:coarse){.back-to-top{--back-top-bottom-gap:max(56px,calc(env(safe-area-inset-bottom,0px) + 20px))}}
@media(min-width:1280px){.home-main{--home-gutter:clamp(20px,calc(20px + (100% - 1280px) * 19 / 88),96px);--home-side-gutter:max(var(--page-margin),calc((100% - 1440px) / 2));width:100%;grid-template-columns:var(--home-side-gutter) minmax(0,1fr) var(--home-gutter) minmax(0,1fr) var(--home-side-gutter)}}
@media(max-width:1279px){.home-main{min-height:0;width:min(728px,calc(100% - 40px));padding-block:32px;gap:32px}.interactive-approach{width:min(100%,560px)}}
@media(max-width:959px){.project-heading{flex-direction:column;align-items:flex-start}.project-card h2{flex:0 1 auto}.project-card .project-date{margin-left:0}}
@media(max-width:767px){.page-title,.detail-title{font-size:28px}.publication-row{grid-template-columns:1fr;gap:8px}.pub-year,.pub-copy,.pub-links{grid-column:1;grid-row:auto}.pub-year{margin-bottom:4px}.pub-links{gap:16px 24px;padding-bottom:14px}.project-heading{gap:4px 12px}.listing-page .project-filter-inner{gap:24px}.project-grid{gap:28px 16px}.relation-action{min-height:44px!important}.relation-words{gap:16px}.bio-tooltip{max-width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}