/* Mansa Saxena — academic website. Adapted from the existing two-column layout. */
:root {
  --text: #303030;
  --heading: #272727;
  --muted: #696969;
  --link: #2c6e9b;
  --border: #e2e2e2;
  --button: #f4f4f4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid #207bb3; outline-offset: 3px; }

/* The left profile stays in place while the research column scrolls. */
.home-layout {
  width: min(1360px, 100%);
  margin: 0 auto;
  padding: 74px 52px 105px;
  display: grid;
  grid-template-columns: minmax(215px, 295px) minmax(0, 1fr);
  gap: clamp(52px, 7vw, 112px);
  align-items: start;
}
.profile { position: sticky; top: 44px; min-width: 0; }
.profile-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 4px;
  background: #f0f0f0;
}
.profile h1 {
  margin: 25px 0 7px;
  color: var(--heading);
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -.65px;
  line-height: 1.2;
}
.profile-affiliation { margin: 0 0 19px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.profile-contact, .profile-cv { margin: 0 0 9px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.main-content { min-width: 0; }

/* About section */
.biography { padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.biography p { margin: 0 0 19px; color: #4f4f4f; font-size: 18px; line-height: 1.73; }
.biography .job-market { margin: 27px 0 0; color: var(--heading); }

/* Research entries; action buttons intentionally match the small gray buttons
   in the reference website. */
.research-section { padding-top: 29px; }
.research-section + .research-section { border-top: 1px solid var(--border); }
h2 { margin: 0 0 29px; color: #474747; font-size: 29px; line-height: 1.3; font-weight: 700; letter-spacing: -.4px; }
.paper { margin: 0 0 43px; }
.paper:last-child { margin-bottom: 34px; }
.paper h3 { margin: 0 0 4px; color: var(--heading); font-size: 21px; line-height: 1.38; font-weight: 700; letter-spacing: -.2px; }
.paper-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 11px; }
.paper-heading h3 { flex: 0 1 auto; }
.paper-label {
  flex: 0 0 auto;
  border-radius: 3px;
  border: 1px solid #dadada;
  background: #f5f5f5;
  padding: 2px 7px;
  font-size: 11px;
  color: #3c3c3c;
  font-weight: 700;
  letter-spacing: .9px;
  line-height: 1.35;
  white-space: nowrap;
}
.coauthors { margin: 3px 0 0; color: var(--muted); font-size: 16px; }
.project-status { margin: 3px 0 0; color: var(--muted); font-style: italic; font-size: 15px; }
.paper-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 11px; }
.paper-button {
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  background: var(--button);
  color: #5c5c5c;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 5px 13px;
  cursor: pointer;
}
.paper-button:hover, .paper-button[aria-expanded="true"] {
  background: #eaeaea;
  color: #303030;
  text-decoration: none;
}
.paper-expanded { border-left: 2px solid #dedede; padding-left: 16px; margin-top: 16px; max-width: 100%; }
.paper-expanded[hidden] { display: none; }
.paper-expanded p { color: #555; font-size: 16px; line-height: 1.69; margin: 0; }

/* Teaching */
.supplementary-section { border-top: 1px solid var(--border); padding-top: 31px; margin-top: 2px; }
#teaching { margin-top: 30px; }
.teaching-item { margin-bottom: 25px; }
.teaching-item h3 { font-size: 18px; font-weight: 700; color: var(--heading); margin: 0; }
.teaching-item p { color: var(--muted); margin: 2px 0; font-size: 16px; }

@media (max-width: 850px) {
  .home-layout { grid-template-columns: 1fr; padding: 30px 25px 70px; gap: 35px; }
  .profile { position: static; display: grid; grid-template-columns: 138px minmax(0,1fr); column-gap: 20px; align-content: start; }
  .profile-photo { grid-row: span 4; height: 180px; aspect-ratio: auto; }
  .profile h1 { margin: 0 0 5px; font-size: 27px; }
  .profile-affiliation { font-size: 15px; margin: 0 0 9px; }
  .profile-contact, .profile-cv { font-size: 14px; margin-bottom: 7px; }
  .biography p { font-size: 16px; }
  .paper h3 { font-size: 19px; }
  h2 { font-size: 27px; }
}
@media (max-width: 480px) {
  .home-layout { padding: 23px 18px 60px; }
  .profile { grid-template-columns: 105px minmax(0,1fr); column-gap: 15px; }
  .profile-photo { height: 146px; }
  .profile h1 { font-size: 24px; }
  .profile-affiliation { font-size: 13px; }
  .profile-contact, .profile-cv { font-size: 12px; }
  h2 { font-size: 25px; }
}