@import "light.min.css";

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Header / Nav ── */
header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--b-line);
  position: sticky;
  top: 0;
  background: var(--b-bg-1);
  z-index: 100;
}

header h1 {
  margin-bottom: 0;
}


header nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

header nav ul li {
  margin-left: 24px;
  margin-top: 0;
}

header nav ul li a {
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

header nav ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--b-link);
  transition: width 0.25s ease;
}

header nav ul li a:hover::after {
  width: 100%;
}

header nav ul li a:hover {
  text-decoration: none;
}

nav ul {
  list-style-type: none;
  margin: 1rem;
  padding: 0;
  text-align: left;
}

nav ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

nav ul li::before {
  content: "";
  margin-right: .15rem;
  margin-left: .25rem;
}

nav ul li:first-child::before {
  content: "";
  margin: 0;
  padding: 0;
}

/* ── Links ── */
a {
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* ── Footer ── */
footer {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: .65rem;
}

/* ── Two-column layout ── */
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.column {
  padding: 10px;
}

.small {
  flex: 0 0 30%;
}

.large {
  flex: 0 0 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column.small {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column.small p {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.column.large p {
  text-align: justify;
}

/* ── Profile photo ── */
.img {
  max-width: 75%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ── Social icons ── */
.social-icons {
  display: flex;
  gap: 0.25rem;
  margin-top: -0.5rem;
}

.social-icons a {
  font-size: 22px;
  color: var(--b-link);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icons a:hover {
  color: #004a7c;
  transform: scale(1.15);
  text-decoration: none;
}

/* ── Section headings with accent underline ── */
h2 {
  padding-bottom: 0.3rem;
  border-bottom: 3px solid var(--b-link);
  display: inline-block;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ── Updates: date badges ── */
.update-date {
  display: inline-block;
  background: var(--b-link);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  margin-right: 0.35rem;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* ── Publications list ── */
.pub-list {
  list-style: none;
  padding-left: 0;
}

.pub-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--b-line);
}

.pub-list li:last-child {
  border-bottom: none;
}

.pub-list li {
  transition: background-color 0.2s ease;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.25rem;
}

.pub-list li:hover {
  background-color: var(--b-bg-2);
}


/* ── Publication venue ── */
.pub-venue {
  color: #666;
  font-size: 0.9em;
}

/* ── Award badge ── */
.pub-award {
  display: inline-block;
  background: #f5e6c8;
  color: #8b6914;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  margin-left: 0.25rem;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* ── Job-market callout ── */
.callout {
  background: var(--b-bg-2);
  border-left: 4px solid var(--b-link);
  padding: 0.9rem 1.2rem;
  border-radius: 0 0.25rem 0.25rem 0;
  margin-bottom: 1.5rem;
}

.callout p {
  margin: 0;
}

/* ── Updates list ── */
.updates-list {
  list-style: none;
  padding-left: 0;
}

.updates-list li {
  padding: 0.4rem 0;
}

/* ── Older updates toggle ── */
.older-updates {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 0;
}

.older-updates summary {
  color: var(--b-link);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.3rem 0;
}

.older-updates summary:hover {
  text-decoration: underline;
}

.older-updates[open] .updates-list {
  max-height: 10rem;
  overflow-y: auto;
  margin-top: 0.5rem;
  padding-right: 0.5rem;
}

.older-updates .updates-list {
  margin-top: 0.5rem;
}

/* ── Responsive ── */
@media screen and (max-width: 480px) {
  body {
    font-size: .9rem;
  }

  header {
    flex-direction: column;
    position: static;
  }
  header nav ul {
    display: inline-block;
    padding-top: 20px;
    justify-content: center;
  }
  header nav ul li {
      display: inline-block;
      margin-left: 0;
      text-align: center;
  }

  header nav ul li a {
    display: inline-block;
    font-size: 0.7em;
  }

  footer {
    font-size: .6rem;
  }

  .container {
    flex-direction: column;
  }

  .column.small, .column.large {
    flex: 1 1 100%;
    width: 100%;
  }

  .img {
    max-width: 60%;
    margin: 0 auto;
  }

  nav ul {
    display: block;
  }

  nav ul li {
      display: block;
  }
}

@media screen and (max-width: 375px) {
  body {
    font-size: .65rem;
  }

  header {
    flex-direction: column;
  }
  header nav ul {
    display: inline-block;
    padding-top: 20px;
    justify-content: center;
  }
  header nav ul li {
      display: inline-block;
      margin-left: 0;
      text-align: center;
  }

  header nav ul li a {
    display: inline-block;
    font-size: 0.7em;
  }

  nav ul li::before {
    content: "·";
    margin-right: .3rem;
    margin-left: .15rem;
  }

  footer {
    font-size: .45rem;
  }

  .container {
    flex-direction: column;
  }

  .column.small, .column.large {
    flex: 1 1 100%;
    width: 100%;
  }

  nav ul {
    display: block;
  }

  nav ul li {
      display: inline-block;
  }
}

/* ── Phase 2 overrides (diverges from the reference clone) ── */

/* Nav anchors landed underneath the sticky header, hiding the section
   heading you just clicked. Offset the scroll target by the header height. */
h2[id] {
  scroll-margin-top: 6rem;
}

/* Let "More updates" cascade down the page instead of trapping 11 items
   in a 10rem inner scroll box. */
.older-updates[open] .updates-list {
  max-height: none;
  overflow-y: visible;
}

@media screen and (max-width: 480px) {
  /* Header is static below 480px, so no sticky offset is needed. */
  h2[id] {
    scroll-margin-top: 1rem;
  }
}

/* Date badges were auto-width (74px to 79px depending on the month), so every
   description started at a slightly different x. Fix the badge column so all
   descriptions align on one tab stop, with a hanging indent when they wrap.
   Done with text-indent rather than flex: flex would treat each inline <a> as a
   separate flex item and add gaps around every link. */
.updates-list li {
  padding-left: 5.6rem;
  text-indent: -5.6rem;
}

.updates-list li .update-date {
  width: 5.25rem;
  text-align: center;
  text-indent: 0;
}

/* Badge list: same fixed tab stop as Updates, reused for Teaching.
   Wider column because "Spring 2026" is longer than any month badge. */
.badge-list {
  list-style: none;
  padding-left: 0;
}

.badge-list li {
  padding: 0.4rem 0 0.4rem 6.75rem;
  text-indent: -6.75rem;
}

.badge-list li .update-date {
  width: 6.4rem;
  text-align: center;
  text-indent: 0;
}

/* Awards and service: flat single-level lists. The previous markup nested a
   bulleted category inside a bulleted list, which double-indented every entry
   and pushed lines into a second row. Bold lead-ins carry the hierarchy now. */
.award-list,
.service-list {
  list-style: none;
  padding-left: 0;
}

.award-list li,
.service-list li {
  padding: 0.3rem 0 0.3rem 1rem;
  text-indent: -1rem;
}

.award-list li::before,
.service-list li::before {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--b-link);
  vertical-align: 0.2em;
  margin-right: 0.55rem;
  text-indent: 0;
}

/* Subsection headings. Plain h3 in this design is bold dark text at 1.25rem
   with no decoration, so it read at almost the same weight as the h2 above it
   and the hierarchy collapsed. Small uppercase eyebrow label instead: clearly
   a heading, clearly subordinate to the accented h2. */
h3.subhead {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--b-txt);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  margin-bottom: 0.45rem;
}

/* Hairline running to the right margin gives the label horizontal presence
   without competing with the h2's thicker blue underline. */
h3.subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 100, 164, 0.22);
}

h3.subhead + .service-list {
  margin-top: 0;
}

/* Intro paragraphs sat 1.5rem apart (the global p margin), which read as a
   bigger break than two paragraphs of one bio need. */
.column.large p {
  margin-bottom: 0.75rem;
}

.column.large p:last-child {
  margin-bottom: 0;
}