/* Four independent visual directions; shared content and accessible native controls. */
:root {
  --page: #fff;
  --ink: #22272d;
  --muted: #626972;
  --accent: #1769aa;
  --line: #e2e5e8;
  --soft: #f5f7f9;
  --figure: #fff;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --heading-font: var(--body-font);
  --measure: 900px;
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: 24px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.65 var(--body-font); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--heading-font); line-height: 1.3; margin: 0; overflow-wrap: break-word; }
p { margin: 0 0 15px; }
strong { font-weight: 600; }
summary { color: var(--accent); cursor: pointer; width: fit-content; }
summary:hover { text-decoration: underline; text-underline-offset: 3px; }
details[open] > summary { margin-bottom: 12px; }
.skip-link { position: absolute; left: 12px; top: -100px; padding: 10px 18px; background: var(--page); z-index: 10; }
.skip-link:focus { top: 12px; }
.design-switcher { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px max(24px, calc((100% - 1140px) / 2)); border-bottom: 1px solid var(--line); font: 12px/1.5 var(--body-font); background: var(--page); }
.design-switcher__home { color: var(--muted); white-space: nowrap; }
.design-switcher__options { display: flex; flex-wrap: wrap; gap: 7px 20px; }
.design-switcher__options a { color: var(--muted); }
.design-switcher__options [aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.page-shell { width: min(var(--measure), calc(100% - 64px)); margin: 0 auto; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 176px; column-gap: 58px; align-items: start; padding: 64px 0 44px; }
.profile__photo { grid-column: 2; grid-row: 1; width: 176px; height: 176px; border-radius: 50%; object-fit: cover; }
.profile__text { grid-column: 1; grid-row: 1; min-width: 0; }
.profile h1 { font-size: 34px; font-weight: 500; letter-spacing: -1.1px; margin-bottom: 21px; }
.profile__affiliation { font-size: 15px; }
.profile__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 21px 0 18px; font-size: 14px; }
.profile__background { font-size: 14px; }
.profile__background > summary { color: var(--muted); }
.profile__background p { margin-top: 12px; }
.section-nav { display: flex; gap: 24px; margin-top: 27px; font-size: 13px; }
.section-nav a { color: var(--muted); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.section-heading h2 { font-size: 24px; font-weight: 500; letter-spacing: -.45px; }
.section-heading > a, .section-heading > span { font-size: 13px; }
.section-heading > span, .section-note { color: var(--muted); }
.section-note { font-size: 12px; margin: 7px 0 23px; }
.publications-more { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.publications-more > summary { font-size: 14px; }
.publications-more > .paper-list { margin-top: 28px; }
.publications-more__open { display: none; }
.publications-more[open] > summary .publications-more__closed { display: none; }
.publications-more[open] > summary .publications-more__open { display: inline; }
.research-year { margin-top: 28px; }
.year-label { font: 500 14px/1.5 var(--body-font); color: var(--muted); margin-bottom: 20px; }
.paper { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 26px; margin-bottom: 34px; align-items: start; }
.paper__figure { display: flex; align-items: center; justify-content: center; min-height: 140px; background: var(--figure); border-radius: 3px; overflow: clip; }
.paper__figure img { width: 100%; max-height: 165px; object-fit: contain; }
.paper__text { min-width: 0; }
.paper__title { font: 600 16px/1.45 var(--body-font); margin: 0 0 8px; }
.paper__title a { color: var(--ink); }
.paper__authors { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 6px; }
.paper__authors strong { color: var(--ink); }
.paper__venue { font-size: 13px; margin-bottom: 8px; }
.paper__resources { --resource-gap: 14px; font-size: 12px; line-height: 2; }
.paper__resources > a { display: inline-block; margin-inline-end: var(--resource-gap); }
/* Keep the native toggle inline while its expanded content fills the row below. */
.paper__abstract { display: inline; }
.paper__abstract > summary { display: inline list-item; list-style-position: inside; white-space: nowrap; }
.paper__abstract[open] > summary { margin-bottom: 0; }
.paper__abstract > div { color: var(--muted); font-size: 14px; line-height: 1.7; padding: 13px 16px; margin-top: 12px; background: var(--soft); border-left: 2px solid var(--line); }
.paper__abstract p:last-child { margin-bottom: 0; }
.paper__expandable-figure { font-size: 12px; margin-top: 5px; }
.paper__expandable-figure img { width: 100%; max-height: 320px; object-fit: contain; background: var(--figure); }
.writing { margin-top: 64px; }
.writing-entry { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 24px; margin-top: 26px; padding-top: 25px; border-top: 1px solid var(--line); }
.writing-entry time { font-size: 12px; color: var(--muted); padding-top: 3px; }
.writing-entry h3 { font: 600 16px/1.5 var(--body-font); margin-bottom: 7px; }
.writing-entry h3 a { color: var(--ink); }
.writing-entry__summary { font-size: 14px; color: var(--muted); margin: 10px 0; }
.page-footer { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 64px 0 34px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.page-footer a { color: var(--muted); }

/* Folio: a warm, typographic research journal. */
.design-folio { --page: #faf8f3; --ink: #34352e; --muted: #696a60; --accent: #47624d; --line: #dcdcd0; --soft: #eeeee4; --heading-font: Georgia, "Times New Roman", serif; --measure: 940px; }
.design-folio .profile { grid-template-columns: 180px minmax(0, 1fr); column-gap: 50px; padding-top: 66px; padding-bottom: 48px; }
.design-folio .profile__photo { grid-column: 1; width: 180px; height: 230px; border-radius: 2px; object-position: 50% 35%; }
.design-folio .profile__text { grid-column: 2; }
.design-folio .profile h1 { font-size: 46px; line-height: 1.12; font-weight: 400; letter-spacing: -1.8px; }
.design-folio .profile__intro { font-size: 17px; }
.design-folio .section-heading { padding-top: 24px; border-top: 1px solid var(--ink); }
.design-folio .section-heading h2 { font-size: 30px; font-weight: 400; }
.design-folio .research-year { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 26px; margin-top: 30px; }
.design-folio .year-label { font: 23px/1.5 var(--heading-font); }
.design-folio .paper { grid-template-columns: minmax(0, 1fr) 180px; gap: 36px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.design-folio .paper__figure { grid-column: 2; grid-row: 1; min-height: 125px; padding: 8px; border: 1px solid var(--line); }
.design-folio .paper__text { grid-column: 1; grid-row: 1; }
.design-folio .paper__title { font: 400 21px/1.35 var(--heading-font); }
.design-folio .writing-entry h3 { font: 400 22px/1.4 var(--heading-font); }
.design-folio .paper__year { display: none; }
.design-folio .writing { margin-top: 44px; }

/* Index: a persistent profile beside a concise, text-first bibliography. */
.design-index { --ink: #242a29; --muted: #646d6a; --accent: #176c58; --line: #dfe6e2; --soft: #f2f7f4; --measure: 1060px; }
.design-index .page-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 64px; padding-top: 56px; }
.design-index .profile { display: flex; flex-direction: column; padding: 0; gap: 24px; align-self: start; }
.design-index .profile__photo { width: 100px; height: 100px; border-radius: 4px; }
.design-index .profile h1 { font-size: 29px; line-height: 1.15; letter-spacing: -.9px; }
.design-index .profile__intro, .design-index .profile__affiliation { font-size: 14px; }
.design-index .profile__links { gap: 5px 15px; font-size: 12px; }
.design-index .profile__background { font-size: 12px; }
.design-index .section-nav { flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 20px; }
.design-index .section-heading h2 { font-size: 22px; }
.design-index .research-year { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 22px; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 23px; }
.design-index .year-label { font-size: 12px; padding-top: 2px; }
.design-index .paper { display: block; margin-bottom: 25px; }
.design-index .paper__title { font-size: 15px; }
.design-index .paper__authors, .design-index .paper__venue { font-size: 12px; }
.design-index .paper__year { display: none; }
.design-index .paper__resources { --resource-gap: 12px; }
.design-index .writing { margin-top: 40px; }
.design-index .writing-entry { grid-template-columns: 64px minmax(0, 1fr); gap: 17px; }
.design-index .page-footer { grid-column: 1 / -1; }
@media (min-width: 861px) and (min-height: 850px) {
  .design-index .profile { position: sticky; top: 32px; }
}

/* Gallery: generous figures and a two-column project collection. */
.design-gallery { --ink: #202e43; --muted: #647186; --accent: #2458a2; --line: #dce3ec; --soft: #f3f6fa; --measure: 1100px; }
.design-gallery .profile { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 100px; padding: 68px 0 54px; }
.design-gallery .profile__photo { width: 240px; height: 240px; border-radius: 10px; }
.design-gallery .profile h1 { font-size: 52px; line-height: 1.05; font-weight: 600; letter-spacing: -2.5px; }
.design-gallery .profile__intro { font-size: 18px; line-height: 1.7; }
.design-gallery .section-heading { border-top: 1px solid var(--line); padding-top: 28px; }
.design-gallery .research-year { margin-top: 28px; }
.design-gallery .year-label { font-size: 15px; }
.design-gallery .paper-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
.design-gallery .paper { display: flex; flex-direction: column; gap: 20px; margin: 0; padding-bottom: 30px; }
.design-gallery .paper__figure { width: 100%; height: 238px; padding: 22px; border: 1px solid var(--line); border-radius: 6px; }
.design-gallery .paper__figure img { max-height: 194px; }
.design-gallery .paper__title { font-size: 19px; line-height: 1.4; }
.design-gallery .paper__authors, .design-gallery .paper__venue { font-size: 14px; }
.design-gallery .paper__resources { font-size: 13px; }
.design-gallery .writing { margin-top: 42px; }

@media (max-width: 860px) {
  .profile { column-gap: 32px; }
  .design-index .page-shell { display: block; padding-top: 0; }
  .design-index .profile { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 24px; padding: 42px 0; }
  .design-index .profile__photo { grid-column: 2; grid-row: 1; }
  .design-index .section-nav { flex-direction: row; gap: 24px; border: 0; padding: 0; }
  .design-gallery .profile { grid-template-columns: minmax(0, 1fr) 175px; column-gap: 42px; }
  .design-gallery .profile__photo { width: 175px; height: 205px; }
  .design-gallery .profile h1 { font-size: 42px; }
  .design-gallery .paper__figure { height: 190px; padding: 16px; }
  .design-gallery .paper__figure img { max-height: 155px; }
  .design-folio .profile { grid-template-columns: 130px minmax(0, 1fr); column-gap: 32px; }
  .design-folio .profile__photo { width: 130px; height: 180px; }
  .design-folio .profile h1 { font-size: 38px; }
  .design-folio .research-year { grid-template-columns: 48px minmax(0, 1fr); gap: 20px; }
  .design-folio .paper { grid-template-columns: minmax(0, 1fr) 130px; gap: 24px; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .page-shell { width: calc(100% - 40px); }
  .design-switcher { padding: 12px 20px; gap: 12px; }
  .design-switcher__options { gap: 16px; }
  .design-switcher__options span { display: none; }
  .profile, .design-folio .profile, .design-index .profile, .design-gallery .profile { display: flex; flex-direction: column; padding: 36px 0; gap: 24px; }
  .profile__photo, .design-folio .profile__photo, .design-index .profile__photo, .design-gallery .profile__photo { width: 92px; height: 92px; }
  .profile h1, .design-index .profile h1 { font-size: 31px; }
  .design-folio .profile h1 { font-size: 39px; }
  .design-gallery .profile h1 { font-size: 42px; letter-spacing: -1.8px; }
  .design-gallery .profile__intro, .design-folio .profile__intro { font-size: 16px; }
  .section-heading h2, .design-index .section-heading h2 { font-size: 22px; }
  .design-folio .section-heading h2 { font-size: 28px; }
  .paper { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .paper__figure { min-height: 90px; }
  .paper__figure img { max-height: 110px; }
  .paper__title { font-size: 15px; }
  .paper__authors { font-size: 12px; }
  .paper__venue { font-size: 12px; }
  .paper__resources { --resource-gap: 12px; }
  .design-folio .research-year, .design-index .research-year { display: block; }
  .design-folio .year-label { margin-bottom: 18px; }
  .design-folio .paper { grid-template-columns: minmax(0, 1fr) 90px; gap: 18px; }
  .design-folio .paper__figure { min-height: 85px; padding: 4px; }
  .design-folio .paper__title { font-size: 19px; }
  .design-gallery .paper-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .design-gallery .paper__figure { height: 220px; }
  .design-gallery .paper__figure img { max-height: 185px; }
  .writing { margin-top: 38px; }
  .writing-entry, .design-index .writing-entry { display: block; }
  .writing-entry time { display: block; margin-bottom: 10px; }
  .page-footer { margin-top: 44px; }
}
@media (max-width: 380px) {
  .paper, .design-folio .paper { display: flex; flex-direction: column; gap: 14px; }
  .paper__figure { width: 100%; min-height: 140px; }
  .paper__figure img { max-height: 160px; }
}
@media print {
  .design-switcher, .skip-link, .section-nav, .page-footer > a:last-child { display: none; }
  .page-shell { width: 100%; }
  .profile, .design-index .profile { position: static; }
  .paper { break-inside: avoid; }
}