/* Traditional academic typography, using fonts already on the reader's device. */
html {
  font-family: "Times New Roman", Times, serif;
  font-size: 100%;
  line-height: 1.4;
  color: #000;
  background: #fff;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: bold;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

h2, #writing-heading {
  margin: 0 0 0.65rem;
  font-size: 1.5rem;
}

h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}

#writing {
  margin-top: 2rem;
}

#projects > article > h3, #education > article > h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

h4 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

p, ul {
  margin: 0 0 0.65rem;
}

ul {
  padding-left: 1.5rem;
}

.details {
  font-style: italic;
}

.site-guide {
  margin-top: 1.5rem;
}

.site-guide h3 {
  font-size: 1.5rem;
  margin-bottom: 0.65rem;
}

.site-guide p + p {
  margin-top: 1rem;
}

address {
  font-style: normal;
}

/* Active tab media on the left, with text and navigation on the right. */
body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  column-gap: 2rem;
  height: 100dvh;
  margin: 0;
  padding: 1.5rem 8px 2rem;
  overflow-wrap: anywhere;
}

main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
}

.media-panel { display: none; }

body:has(input[name="section"][value="about"]:checked) #about-media,
body:has(input[name="section"][value="experience"]:checked) #about-media,
body:has(input[name="section"][value="education"]:checked):has(input[name="school"][value="madison"]:checked) #about-media,
body:has(input[name="section"][value="education"]:checked):has(input[name="school"][value="pku"]:checked) #pku-media,
body:has(input[name="section"][value="projects"]:checked):has(input[name="project"][value="localization"]:checked) #localization-media,
body:has(input[name="section"][value="projects"]:checked):has(input[name="project"][value="planner"]:checked) #planner-media,
body:has(input[name="section"][value="projects"]:checked):has(input[name="project"][value="simulator"]:checked) #simulator-media {
  display: block;
}

/* Exact 3px scrollbar in Chrome, Edge, and Safari; thin fallback elsewhere. */
@supports selector(::-webkit-scrollbar) {
  main {
    scrollbar-width: auto;
  }

  main::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  main::-webkit-scrollbar-track {
    background: transparent;
  }

  main::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }

  main::-webkit-scrollbar-button {
    display: none;
  }
}

.sidebar {
  grid-area: sidebar;
  min-width: 0;
  align-self: start;
  /* Keep the left panel stationary without creating a scroll container. */
  max-height: 100%;
  overflow: clip;
}

.section-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 1rem;
  background: #fff;
  text-align: center;
}

.section-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-inline-size: 0;
  gap: 0.5rem 1.25rem;
  border: 0;
  padding: 0;
  margin: 1rem auto 0;
}

.section-tabs legend,
.section-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.section-tabs label {
  padding: 0.25rem 0;
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}

.section-tabs label:has(:checked) {
  color: #000;
  font-weight: bold;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3rem;
}

.section-tabs label:has(:focus-visible) {
  outline: 2px solid #0000ee;
  outline-offset: 3px;
}

main:has(input[value="about"]:checked) > section:not(#about),
main:has(input[value="education"]:checked) > section:not(#education),
main:has(input[value="experience"]:checked) > section:not(#experience),
main:has(input[value="projects"]:checked) > section:not(#projects) {
  display: none;
}

main:not(:has(input[name="section"][value="projects"]:checked)) .project-tabs,
main:has(input[name="project"][value="localization"]:checked) #projects > article:not(#localization-project),
main:has(input[name="project"][value="planner"]:checked) #projects > article:not(#planner-project),
main:has(input[name="project"][value="simulator"]:checked) #projects > article:not(#midplanner-simulator) {
  display: none;
}

main:not(:has(input[name="section"][value="experience"]:checked)) .experience-tabs,
main:has(input[name="affiliation"][value="wa"]:checked) #experience > article:not(#wa-experience),
main:has(input[name="affiliation"][value="people-robots"]:checked) #experience > article:not(#people-robots-research),
main:has(input[name="affiliation"][value="rosenberg"]:checked) #experience > article:not(#rosenberg-research),
main:not(:has(input[name="affiliation"][value="people-robots"]:checked)) #writing {
  display: none;
}

main:not(:has(input[name="section"][value="education"]:checked)) .education-tabs,
main:has(input[name="school"][value="madison"]:checked) #pku-education,
main:has(input[name="school"][value="pku"]:checked) #madison-education {
  display: none;
}

#projects > article, #experience > article, #education > article {
  margin-top: 0;
}

.sidebar img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  /* Keep Ultra HDR photo highlights at the same brightness range as page white. */
  dynamic-range-limit: standard;
}

/* A compact personal sidebar, with room for contact details and reading notes. */
#about-media {
  max-width: 520px;
  padding: 0 clamp(0px, 1vw, 16px);
}

#about-media > img {
  width: auto;
  max-width: 100%;
  max-height: 30dvh;
  margin-bottom: 1rem;
}

.profile-summary {
  margin-bottom: 1.25rem;
}

#about-media h2 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

#about-media section + section {
  margin-top: 1.5rem;
}

.reading-empty {
  color: #555;
}

.reading-list {
  list-style: none;
  padding: 0;
}

.reading-list li + li {
  margin-top: 0.85rem;
}

.reading-list p {
  margin: 0.25rem 0 0;
}

section {
  margin-bottom: 1.5rem;
}

article + article {
  margin-top: 1rem;
}

article > :last-child, section > :last-child {
  margin-bottom: 0;
}

/* Media and captions share the left column and stack below text on mobile. */
.project-evidence {
  margin-top: 1rem;
}

.media-panel > .project-evidence {
  margin-top: 0;
}

.sidebar .project-evidence img {
  margin-bottom: 0;
}

.project-case-study > h4,
.research-case-study > h4,
.education-case-study > h4,
.project-case-study > .project-evidence {
  margin-top: 1.5rem;
}

.project-evidence figure {
  max-width: 720px;
  margin: 0 0 1rem;
}

.project-evidence .trajectory-comparison {
  max-width: 440px;
}

.localization-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  align-items: start;
}

.localization-gallery .trajectory-comparison {
  min-width: 0;
  max-width: none;
  margin: 0;
}

.project-evidence img {
  display: block;
  width: 100%;
  height: auto;
  dynamic-range-limit: standard;
}

.project-evidence iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.project-evidence figcaption {
  margin-top: 0.5rem;
}

.project-evidence table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

.project-evidence caption {
  text-align: left;
  margin-bottom: 0.35rem;
}

.project-evidence th, .project-evidence td {
  padding: 0.35rem 0.5rem 0.35rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

address ul {
  padding: 0;
  list-style: none;
}

address li + li {
  margin-top: 0.3rem;
}

.sidebar section {
  margin-bottom: 0;
}

/* Familiar browser link colors and visible keyboard focus. */
a {
  color: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid #0000ee;
  outline-offset: 3px;
}

main:focus-visible, .sidebar:focus-visible {
  outline: 2px solid #0000ee;
  outline-offset: -2px;
}

/* On small screens, selected media follows the text and the whole page scrolls. */
@media (max-width: 800px) {
  body {
    display: block;
    height: auto;
    padding: 1.25rem 20px 2rem;
  }

  .sidebar {
    margin-bottom: 1.5rem;
  }

  main, .sidebar {
    max-height: none;
    overflow: visible;
  }

  #about-media {
    padding: 0;
  }

  #about-media > img {
    width: 100%;
    max-height: none;
  }
}