/* =====================================================================
   BS3 jumbotron-equivalent. Original .jumbotron at >=768 has padding-top
   and padding-bottom: 48px and NO horizontal padding (the +60px horizontal
   only applies to `.container .jumbotron`, which prod sections weren't —
   they were direct body children). Matching that exactly here.
   ===================================================================== */

#mainHome,
#maincv,
#mainPub,
#mainlectures {
  padding: 30px 0;
  background-color: var(--c-page-bg);
}

@media (min-width: 768px) {
  #mainHome,
  #maincv,
  #mainPub,
  #mainlectures {
    padding: 48px 0;
  }
}

/* =====================================================================
   Home page (#mainHome)
   ===================================================================== */

#mainHome {
  margin-top: 80px;
  position: relative;
  z-index: 1000;
}

/* Scoped to the hero container (.text-center) so the secondary
   "Last updated" container in the same section keeps default block layout. */
#mainHome .container.text-center {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* "Last updated" band sits BELOW #mainHome (between the section and the footer).
   Original position is preserved; only the band background changes from the
   body's white to the same pale blue as the section, so it visually extends
   the section bg downward to the footer.
   `display: flow-root` establishes a new BFC so the inner <p>'s default 14px
   top/bottom margins paint INSIDE the band — otherwise they collapse out and
   only a 20px text-height strip shows the background. */
#lastUpdatedBand {
  background-color: var(--c-page-bg);
  display: flow-root;
}

#lastUpdatedBand p {
  font-family: var(--f-body);
}

#mainHome .home-photo {
  flex: 0 0 auto;
  width: 33.333%;
  /* The photo image is 280px wide. At BS3's 768-991 band the
     container is 750px, so 33.333% would be only 250px and the
     image (280) would bleed into the bio column. min-width 310
     (280 image + 30 padding) keeps the column at least as wide
     as the photo at that band; at >=992 the 33.333% already
     resolves to >=323 so this min-width is inert. */
  min-width: 310px;
  padding: 0 15px;
}

#mainHome .home-info {
  /* flex-basis 0 (instead of 66.667%) so the bio column never demands
     its own slice of the container; it just grows into whatever remains
     beside the photo. At >=992 the final width is identical to the old
     66.667% (photo takes 33.333%, info grows into the rest). At 768-991
     this avoids photo(310) + info(500) > container(750) → flex-wrap
     dropping the bio onto a new line. */
  flex: 1 1 0;
  width: 66.667%;
  padding: 0 15px;
  margin-top: 30px;
}

/* Match the original layout where the image and h1 baseline aligned:
   #profimg has margin-top: 20px (image starts at column y=20).
   #info has margin-top: 30px and #myName has margin-top: -10px,
   so the h1 baseline lands at column y=20 too. */

@media (max-width: 767px) {
  #mainHome .home-photo,
  #mainHome .home-info {
    width: 100%;
  }
}

/* Middle desktop bands (768-1199). BS3's container in this range is
   750 or 970, so 33.333% gives only 250 or 323 px for the photo
   column — too narrow to leave any breathing room around the 280-wide
   photo. The base min-width: 310 above just barely contains the image
   and leaves only ~15-22 px before the bio. Bump the photo column to
   380 here so the photo has the same right-side air as the >=1200
   band, where 33.333% × 1170 = 390 already gives ~55 px of gap.
   text-align:center on the column re-centers the photo inside the
   widened column, so the visual gap to the bio matches across widths. */
@media (min-width: 768px) and (max-width: 1199px) {
  #mainHome .home-photo {
    min-width: 380px;
  }
}

#profimg {
  height: 350px;
  border-bottom: 0 solid black;
  box-shadow: 4px 4px 5px #888888;
  margin-top: 20px;
  margin-right: -30px;
}

/* Reset the desktop `margin-right: -30px` on the photo so the
   centering algorithm sees the true 280px image box. Without this,
   text-align:center centers a 250-wide layout box and the painted
   image lands ~15px right of true center, while the centered name
   lands at true center → asymmetric. Placed AFTER the base #profimg
   rule so equal-specificity source-order resolves in this rule's favor. */
@media (max-width: 767px) {
  #profimg {
    margin-right: 0;
  }
}

#myName {
  margin-top: -10px;
  margin-bottom: 30px;
  font-size: 46px;
  font-family: var(--f-display);
  color: black;
}

#info p {
  text-indent: 0;
  font-family: var(--f-body);
  margin-bottom: 25px;
  /* Prod inherits these from BS3 `.jumbotron`: the section's p elements
     render at 21px / weight 200 / lh 30 (= 21 × body's 1.428571 inherited
     line-height). The .subtext rule below overrides only font-size. */
  font-size: 21px;
  font-weight: 200;
}

#info .subtext {
  font-size: 16px;
}

/* Match the stacking breakpoint (max-width: 767 above) so that
   "stacked" and "centered" are always coterminous: side-by-side
   layouts are left-aligned, stacked layouts are centered. */
@media screen and (min-width: 768px) {
  #info #myName,
  #info p {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  #info #myName,
  #info p {
    text-align: center;
  }
}

/* =====================================================================
   CV page (#maincv)
   ===================================================================== */

#maincv {
  position: relative;
  margin-top: 80px;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  /* Overrides the jumbotron-padding rule above for the right side only. */
  padding-right: calc(10vw);
}

#maincv h2 {
  color: black;
  font-size: 24px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
  font-family: var(--f-serif);
  /* Prod h2: margin: 20px 0 10px — overrides browser-default 0.83em both sides
     so the gap to the following <ul> is 10px (not ~20px). */
  margin: 20px 0 10px;
}

#maincv ul {
  list-style-type: none;
  /* Prod ul: margin: 0 0 10px — overrides browser-default 1em both sides. */
  margin: 0 0 10px;
}

#maincv li {
  color: black;
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#maincv .label-year {
  width: 150px;
  float: left;
}

#maincv .label-year.multi {
  white-space: normal;
  height: auto;
  line-height: 1.15;
}

#maincv #Refereed {
  display: block;
  margin-bottom: 100px;
}

@media (max-width: 1000px) {
  #maincv li {
    margin-left: -30px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  #maincv {
    flex-direction: column;
    align-items: center;
    /* The 10vw right padding made sense as a desktop right-margin to
       keep the CV anchored left; on a phone it just steals row width. */
    padding-right: 15px;
  }

  /* Stack the year label above the description on narrow screens.
     With the desktop 150px float-left in place, the description column
     was only ~70-170 px on a phone and broke every line to 2-3 words.
     The label becomes a full-row block (still left-anchored by its
     border-left), and the description flows on the next line and fills
     the row. */
  #maincv .label-year {
    float: none;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
  }

  /* Center the description text; the label-year rule above keeps its
     own left alignment. margin-left:0 cancels the -30px shift inherited
     from the (max-width: 1000) rule, which was a float-era compensation. */
  #maincv li {
    text-align: center;
    margin-left: 0;
  }

  /* "Research Interests" uses an empty &nbsp;&nbsp; spacer label to
     keep alignment with the other entries when laid out side-by-side
     on desktop. Once stacked, that empty label is just a tiny block
     with a 2px border-left and no content — visual noise. Hide it. */
  #maincv .label-year.empty {
    display: none;
  }

  /* #Refereed's 100px margin-bottom (defined above) extended the
     floated label's box so the journal lines could wrap next to it
     on desktop. Stacked, the float is gone and that margin just
     becomes a literal 100px gap before "SIAM Journal...". */
  #maincv #Refereed {
    margin-bottom: 6px;
  }
}

/* =====================================================================
   Research page (#mainPub)
   ===================================================================== */

#mainPub {
  margin-top: 80px;
}

#mainPub .container {
  width: 85%;
  margin-left: 15%;
}

@media (max-width: 1600px) {
  #mainPub .container {
    width: 90%;
    margin-left: 5%;
  }
}

@media (max-width: 480px) {
  #mainPub .container {
    width: 95%;
    margin-left: 2.5%;
  }
}

#mainPub #preprints {
  font-size: 25px;
}

#mainPub .article {
  color: black;
  font-size: 16px;
  font-family: var(--f-serif);
}

#mainPub ul {
  list-style-type: none;
}

#mainPub li {
  margin-top: 20px;
  margin-bottom: 16px;
}

@media (max-width: 1600px) {
  #mainPub li {
    margin-top: 25px;
    margin-bottom: 20px;
  }
}

@media (max-width: 900px) {
  #mainPub li {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
  }
}

#mainPub .footnote {
  color: black;
  font-size: 12px;
  font-family: var(--f-serif);
}

#mainPub .researchyears {
  background-color: transparent;
  color: black;
  border-left: 2px solid black;
  border-radius: 2px;
  float: left;
  width: 100px;
  height: 25px;
  font-size: 14px;
  font-family: var(--f-serif);
  /* Prod year pill inherits bold from BS3 `.label { font-weight: 700 }`. */
  font-weight: 700;
  padding: 0.2em 0.6em 0.3em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  #mainPub .researchyears {
    margin-left: -30px;
  }
}

/* Mirror the CV narrow-layout pattern: stack the year label above the
   citation/pill row so the article text isn't fighting a 100px float.
   The (max-width: 900) li rule above already centers the description;
   here we just drop the float on the year and undo the -30px shift
   that paired with the desktop float. */
@media (max-width: 768px) {
  #mainPub .researchyears {
    float: none;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
    margin-left: 0;
  }
}

#mainPub .publink {
  color: black;
  text-decoration: none;
}

#StyleComment {
  font-size: 10px;
  font-family: var(--f-serif);
  /* Prod inherits weight 200 from BS3 `.jumbotron` on the surrounding section. */
  font-weight: 200;
}

#divStyleComment {
  padding-top: 60px;
  margin-bottom: -40px;
}

/* =====================================================================
   Lectures page (#mainlectures)
   ===================================================================== */

#mainlectures {
  position: relative;
  margin-top: 60px;
  z-index: 1000;
}

#mainlectures ul {
  list-style-type: none;
  margin-top: 20px;
}

#mainlectures h2 {
  text-align: left;
  margin-bottom: 30px;
}

#mainlectures .discussiontitle {
  margin-top: 50px;
  font-size: 26px;
}

#mainlectures li {
  margin-bottom: 25px;
  font-family: var(--f-sans);
  font-size: 17px;
  color: black;
  line-height: 30px;
  text-indent: 10px;
}

@media (max-width: 1200px) {
  #mainlectures li {
    margin-left: -30px;
  }
}

@media screen and (max-width: 700px) {
  #mainlectures li { text-align: center; }
}

@media screen and (min-width: 700px) {
  #mainlectures li { text-align: left; }
}

#mainlectures .discussion {
  background-color: transparent;
  color: black;
  border-left: 2px solid black;
  border-radius: 2px;
  text-shadow: 1px 0 3px rgba(0, 0, 0, 0.2);
  text-align: left;
  /* Prod padding: 0 0 0 15px (only the 15px left indent past the border).
     The em-based top/right/bottom from a stale .label inheritance were a
     mismatch — they pushed Winter 2025 down and ate horizontal room. */
  padding: 0 0 0 15px;
  /* line-height: 32px (not 1) — prod inherits 32 from its broad
     `#mainlectures span` rule. With line-height 1, the year text's baseline
     sits ~12px from the float top while the description (line-height 30)
     baseline sits ~22px → 10px vertical misalignment. Matching prod's 32px
     lands both baselines at the same y. */
  line-height: 32px;
  white-space: nowrap;
  float: left;
  width: 100px;
  height: 25px;
  /* Bold "Winter 2025" (~89px) overflows the 85px content area; the prod
     5px margin-right is what keeps the following description text from
     colliding with the overflow. */
  margin-right: 5px;
  /* Reset the 10px text-indent inherited from #mainlectures li. The span is
     float: left → block-level box → text-indent applies. Without this reset,
     text starts at +25 inside the span (15 padding + 10 indent), leaving only
     75px for "Winter 2025" (~89.5px bold) — overflow then overlaps the
     description. Prod's broad `#mainlectures span` rule does this reset. */
  text-indent: 0;
  font-size: 14px;
  /* Prod year pill inherits bold from BS3 .label (font-weight: 700). */
  font-weight: 700;
  font-family: var(--f-serif);
}

#ulClassPresentation {
  margin-bottom: 80px;
}

#ulLectureNotes {
  margin-bottom: 20px;
}

/* In-class presentation PDFs are button-shaped — replaces the original
   <span class="label label-default lecyear"><a>pdf</a></span> wrapper-span
   pattern with a single <a class="pill"> styled to match.
   Original: 100×30 with line-height: 32 (text overflows the 30 visually,
   centered via line-height).
   #ulLectureNotes shares the same pill styling so the Lecture Notes section
   at the top of the page matches the in-class presentations section. */
#ulClassPresentation .pill,
#ulClassPresentation .pill:hover,
#ulLectureNotes .pill,
#ulLectureNotes .pill:hover {
  /* `float: left` keeps the pill out of inline flow so it's not shifted by
     the li's `text-indent: 10px`, and the description text sits next to it. */
  float: left;
  width: 100px;
  height: 30px;
  /* `line-height: 30px` (= height) is the cross-browser-deterministic way to
     vertically center a single text line inside a fixed-height box: the line
     box exactly fills the content area, so neither Chrome nor Firefox has any
     overflow to interpret. Prod uses line-height:32 which works in Chrome but
     Firefox shifts text down a few px because of how it handles line-box
     overflow inside floats. Flex centering was the opposite problem — it
     centered the line box including the `p` descender, pulling the visible
     glyph above true center. line-height = height avoids both. */
  line-height: 30px;
  padding: 0 5px;
  text-align: center;
  /* Reset inherited text-indent: 10px from #mainlectures li. */
  text-indent: 0;
  border-radius: 3px;
  font-family: var(--f-button);
  font-size: 13px;
  font-weight: 600;
  color: rgb(220, 240, 240);
  text-shadow: 1px 0 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 110px -13px black;
  margin-right: 5px;
  /* Prod stacks two 0.5-alpha layers (label SPAN + inner A), giving an
     effective ~0.75 alpha. We render a single element so bake that in. */
  background-color: rgba(46, 104, 83, 0.75);
}

#ulClassPresentation .pill:hover,
#ulLectureNotes .pill:hover {
  background-color: rgba(46, 104, 83, 0.2);
  text-shadow: 1px 0 3px black;
}

/* Mirror the CV/Research narrow-layout pattern only for `.discussion`
   year spans (Courses at UMich, Discussions at USC). The `.pill` PDF
   buttons in Lecture Notes and Presentations in Class deliberately
   stay floated next to the description — the pill is a small button
   that pairs naturally with the title at any width, so stacking would
   leave it stranded above the title. */
@media (max-width: 768px) {
  #mainlectures .discussion {
    float: none;
    display: block;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
    margin-right: 0;
  }

  #mainlectures li {
    text-align: center;
    margin-left: 0;
    text-indent: 0;
  }
}