:root {
  /* root color variables */
  --bright-blue: #007bff;
  --nd-blue: #20364c;
  --body-background: #f6f7fb;
  --ghost-white: ghostwhite;
  --alice-blue: aliceblue;
  --footer-slate: #e6e8f1;
  --white: white;
  --body-font: #666;
  --slate-gray: lightslategray;
  --silver: silver;
  --graphite: #506578;
  --trench-blue: #406885;
  --light-blue: #d0e9fe;
  --chocolate: rgb(210, 105, 30);
  --maroon: #660000;
  --lightest-gray: #e9ecef;
}

html {
  font-size: 18px;
}

body {
  box-sizing: border-box;
  font-family: 'Roboto', "Arial", sans-serif;
  color: var(--body-font);
  background: var(--body-background);
  font-size: 1rem;
}

p, ul, li, table, tr, td, dd, dt {
  color: var(--graphite);
  font-size: 1rem;
}

h1, h2, h3 {
  color: var(--maroon) !important;
}

h4, h5, h6 {
  color: var(--trench-blue) !important;
}

h4 {
  font-size: 1.35rem;
}

/* Lines after headers */
h3 {
  margin-bottom: 1.2rem;
  margin-top: 3rem;
}

h3 {
  position: relative;
}

h3 span {
  background-color: var(--body-background);
  padding-right: 10px;
}

h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.5em;
  border-top: 2px solid var(--silver);
  z-index: -1;
}

.position-title {
  font-size: 1.1rem;
  color: var(--trench-blue) !important;
  font-weight: 600;
}

#contact-table td {
  font-size: 1rem !important;
}

#contact-table td:first-of-type {
  color: var(--trench-blue);
}

#contact-table tr:first-child td {
  border: none !important;
}

.list-group-item a,
.list-group-item a i {
  color: var(--bright-blue);
}

/* Projects ---------------------------------------------------------------- */
#projects-div {
  margin-top: 3.5rem;
}

#projects-div .card {
  margin-bottom: 2rem;
  cursor: pointer;
}

#projects-div .card-body {
  padding: 3rem 2rem 2rem;
  text-align: left;
}

#projects-div .card-body h5 {
  text-align: left;
  color: var(--maroon) !important;
  margin-top: -1rem;
  z-index: 1000;
}

.card-action {
  background: transparent;
  margin-top: -4.05rem;
  margin-bottom: 3rem;
  z-index: 1;
}

.card-action span {
  color: var(--bright-blue);
  border: 1px solid rgba(0, 0, 0, .125);
  background: var(--white);
  padding: 2rem .8rem 1rem;
  border-radius: 90px;
}

/* Filter buttons */
#filter-buttons {
  margin-bottom: 2rem;
}

#filter-buttons button {
  margin-bottom: 1rem;
}

#filter-buttons button.active {
  background: var(--graphite);
  border: none;
}

/* Teaching section --------------------------------------------------------- */
#teaching-section .card {
  border: none;
  border-bottom: 1px dotted var(--silver) !important;
  background: none;
}

#teaching-section .card-header {
  background: transparent !important;
  padding: .3rem 0rem 0 .3rem;
  border-bottom: none !important;
}

#teaching-section .card-body {
  background: transparent !important;
  padding: .3rem 1rem 0 1rem;
  border-bottom: none !important;
}

#teaching-section button {
  text-align: left;
}

.fa-rotate-45 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  transition-property: all;
  transition-duration: .2s;
}

.fa-rotate-90 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  transition-property: all;
  transition-duration: .2s;
}

/* Research section --------------------------------------------------------- */
#reseach-bullets li {
  margin-bottom: .75rem;
}

/* Publications — flat magazine flow (no card chrome) */
.pub-section {
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.pub-section:first-of-type {
  margin-top: 0;
}

.pub-section-title {
  color: var(--maroon) !important;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 1.25rem 0 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--maroon);
  letter-spacing: .01em;
}

.pub-section:first-of-type .pub-section-title {
  margin-top: 0;
}

.pub-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each publication: thumbnail on left, content on right, divider between.
   Uses CSS table so the row is guaranteed side-by-side at every viewport
   (no grid edge cases, no flex wrap). */
.pub-card {
  list-style: none;
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 0 0 2rem;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--lightest-gray);
  border-collapse: separate;
}

.pub-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pub-thumb {
  display: table-cell;
  vertical-align: top;
  width: 170px;
  overflow: visible;
  position: relative;
}

/* Shadow + rounding live on the image, not the cell. The cell is a table-cell
   so it stretches to the (often taller) text column; when it did, its maroon
   background showed as a big block below the cover. Keeping the treatment on
   the image means any extra cell height below the cover is just transparent. */
.pub-thumb img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  border-radius: 2px;
  transition: width .25s ease, box-shadow .25s ease;
}

/* Hover zoom: enlarge the cover over the citation column so readers can
   inspect the first page without leaving the list. We grow the image's real
   width (repainting from the high-res source) rather than transform: scale,
   which would GPU-upscale the thumbnail-size texture and blur the text.
   Absolute + top/left:0 anchors it to the resting position so it grows in
   place; z-index lifts it over neighbors. */
.pub-thumb:hover {
  z-index: 5;
}

.pub-thumb:hover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 240%;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
  .pub-thumb img,
  .pub-thumb:hover img {
    transition: none;
  }
}

.pub-content {
  display: table-cell;
  vertical-align: top;
  padding-left: 1.5rem;
}

/* AEA-style citation block */
.pub-citation {
  color: var(--graphite);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 .85rem;
  max-width: 56rem;
}

.pub-citation em {
  color: var(--trench-blue);
  font-style: italic;
}

.pub-citation .author-self {
  color: var(--maroon);
  font-weight: 700;
}

.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: .75rem 0 0;
}

.pub-links a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 0;
  background: transparent;
  color: var(--maroon) !important;
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.pub-links a:hover {
  color: var(--maroon) !important;
  border-bottom-color: var(--maroon);
}

/* The single underline is the border-bottom above. Override the inherited
   `#wrapper a:hover { text-decoration: underline }` so links don't get a
   second underline on top of the border. */
#wrapper .pub-links a,
#wrapper .pub-links a:hover,
#wrapper .pub-links a:focus {
  text-decoration: none;
}

/* Icons take the secondary accent (trench blue) so they read distinctly from
   the maroon link text beside them. A direct rule on the <i> overrides the
   maroon color inherited from the parent <a>. */
.pub-links a i {
  font-size: .8rem;
  color: var(--trench-blue);
}

.pub-note {
  color: var(--slate-gray);
  font-size: .9rem;
  font-style: italic;
  margin: .35rem 0 0;
  max-width: 56rem;
}

.pub-note a {
  color: var(--trench-blue);
}

.pub-description {
  color: var(--graphite);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 .35rem;
  max-width: 56rem;
}

/* Working Papers / Selected Work in Progress — magazine flow without thumbnails */
ul.journal-articles {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul.journal-articles > li {
  padding: 0 0 .2rem;
  margin: 0 0 .2rem;
  line-height: 1.5;
  color: var(--graphite);
  border-bottom: 1px solid var(--lightest-gray);
}

/* Working Papers only: .425rem above + below the divider = .85rem of
   whitespace between cards, matching the title-to-description gap within an
   entry (see below). Selected Work in Progress keeps the tighter default. */
ul.journal-articles.working-papers > li {
  padding-bottom: .425rem;
  margin-bottom: .425rem;
}

ul.journal-articles > li > .pub-citation {
  margin-bottom: 0;
}

/* When a working paper has a description, match the published cards'
   title-to-description gap (.pub-citation margin-bottom: .85rem there).
   The citation stays flush for link-only entries, so add the gap above
   the description instead. */
ul.journal-articles > li > .pub-description {
  margin-top: .85rem;
}

ul.journal-articles > li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Status icon (clipboard-check) + "<em>Under Review</em>" — same color/size as the Working Paper link */
.pub-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--maroon);
  font-size: .9rem;
  font-weight: 500;
}

.pub-status em {
  font-style: italic;
  color: var(--maroon);
  font-weight: 500;
}

/* Match the link icons: status icon in trench blue, the status text stays maroon. */
.pub-status i {
  color: var(--trench-blue);
}

/* WP-version link strip — matches .pub-links style from peer-reviewed cards */
ul.journal-articles .pub-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .9rem;
  margin: .55rem 0 0;
}

#conference-presentations,
#invited-talks {
  margin-left: 1.25rem;
}

#conference-presentations dt {
  font-weight: 600;
}

#conference-presentations dd {
  margin-bottom: 1rem;
}

/* Research Advising — portrait cards in a grid ------------------------------ */
.advisee-col {
  margin-bottom: 1.75rem;
}

.advisee-card {
  height: 100%;
  text-align: center;
  padding: 1.5rem 1.1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--lightest-gray);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.advisee-photo {
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto .9rem;
  border: 3px solid var(--maroon);
  background: var(--lightest-gray);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  transform-origin: center;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

/* Hover zoom: enlarge the circular headshot in place (center-anchored, so the
   layout never shifts) and lift it above neighboring cards with a deeper
   shadow. GPU-cheap via transform-origin + will-change. */
.advisee-card:hover .advisee-photo,
.advisee-photo:hover {
  transform: scale(1.28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
}

@media (prefers-reduced-motion: reduce) {
  .advisee-photo,
  .advisee-card:hover .advisee-photo,
  .advisee-photo:hover {
    transition: none;
    transform: none;
  }
}

.advisee-name {
  color: var(--maroon) !important;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 .15rem;
}

.advisee-meta {
  color: var(--graphite);
  font-size: .9rem;
  margin: 0 0 .4rem;
}

.advisee-role {
  color: var(--trench-blue);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .6rem;
}

.advisee-topic,
.advisee-now {
  color: var(--graphite);
  font-size: .9rem;
  line-height: 1.45;
  margin: 0 0 .35rem;
}

.advisee-label {
  font-weight: 600;
  color: var(--trench-blue);
}

/* "Current student" pill */
.advisee-now--current {
  display: inline-block;
  background: rgba(102, 0, 0, .06);
  color: var(--maroon);
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border: 1px solid rgba(102, 0, 0, .2);
  border-radius: 999px;
  margin-top: .15rem;
}

/* Personal-site / LinkedIn row — reuses .pub-links visuals, centered */
.advisee-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .9rem;
  margin: .7rem 0 0;
}

/* Format the social-professional network icons ------------------------------ */
.social-icons {
  list-style-type: none;
  padding:0;
}

.social-icons li {
  padding: 0 .55rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.social-icons li:last-child {
  padding-right: 0;
}

.social-icons li a {
  color: var(--white);
}

.social-icons li a:hover {
  color: var(--lightest-gray);
}

/* Color --------------------------------------------- */
.bright-blue {
  color: var(--bright-blue);
}

.chocolate {
  color: var(--chocolate);
}

.trench-blue {
  color: var(--trench-blue) !important;
}

.ghost-white {
  color: var(--ghost-white);
}

.bright-blue {
  color: var(--bright-blue);
}

.light-blue {
  color: var(--light-blue);
}

.footer-slate {
  color: var(--footer-slate);
}

.white {
  color: var(--white);
}

.slate-gray {
  color: var(--slate-gray);
}

.silver {
  color: var(--silver);
}

.graphite {
  color: var(--graphite);
}

.bg-alice-blue {
  background: var(--alice-blue);
}

/* Navbar -------------------------------------------- */
.bg-navbar,
.bg-footer {
  background: var(--maroon);
}

#page-navbar nav {
  padding: 0 1.5rem;
  height: 4.5rem;
  min-height: 4.5rem;
}

#page-navbar img {
  width: 30px;
}

.navbar-brand {
  font-size: 1.5rem !important;
}

#page-lead {
  margin-bottom: 2rem !important;
}

#page-footer {
  background: var(--maroon);
  width: 100%;
  height: 4.5rem;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
}

#page-footer > footer {
  flex: 1 1 auto;
  width: 100%;
  padding: 0 1.5rem;
}

#page-footer > footer > .container-fluid {
  padding: 0;
}

#acknowledge {
  margin-top: 75px;
}

blockquote,
cite {
  font-style: normal;
}

/* Back to top button  --------------------------------------- */
#back-to-top {
  display: none;
  position: fixed;
  bottom: 40%;
  right: 0;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--bright-blue);
  color: var(--white) !important;
  padding: 8px 4px 10px 4px;
  border-radius: 2px 0 0 2px;
  font-size: 1rem;
  cursor: pointer !important;
}

#back-to-top:hover {
  background-color: var(--bright-blue);
  color: var(--white);
}

#page-navbar .active {
  border-bottom: 3px solid white;
}

/* Set cursor as pointer */
.pointer {
  cursor: pointer;
}

/* Education section ---------------------------------------- */
#education {
  border: none !important;
}

#education li {
  padding: .25rem 0;
  background: transparent;
  border: none !important;
}

/* Updates list on About Me ----------------------------- */
.update-list {
  border: none !important;
  padding-left: 0;
  margin-bottom: 1rem;
}

.update-list .list-group-item {
  padding: .55rem .9rem;
  background: rgba(102, 0, 0, .04);
  border: 1px solid rgba(102, 0, 0, .15) !important;
  border-radius: 4px;
  margin-bottom: .5rem;
  color: var(--graphite);
}

.update-list .list-group-item i.fa {
  color: var(--maroon);
}

/* wrapper -------------------------------------------------- */
#wrapper {
  padding-top: 5rem;
}

#wrapper a {
  font-size: inherit;
  color: var(--maroon);
}

#wrapper a:hover {
  color: var(--maroon);
  text-decoration: underline;
}

/* Search-box */
#search-box {
  margin-top: 3rem;
  outline: none;
  background: var(--lightest-gray);
  padding: 1rem 1rem .25rem;
  margin-bottom: 1.5rem;
  /* border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important; */
}

#search-box input {
  text-shadow: none !important;
  color: var(--graphite);
  border: none !important;
  background: var(--lightest-gray) !important;
}

/* Utilities */
.small-caps {
  font-variant: small-caps;
}

.badge {
  padding: .4rem .6rem;
}

/* Override Bootstrap blue for the More/Less badge. */
html body span#badge-more,
html body span#badge-more.badge,
html body span#badge-more.badge-primary,
html body span#badge-more.badge.badge-primary {
  background-color: #660000 !important;
  background: #660000 !important;
  color: #ffffff !important;
}

html body span#badge-more:hover,
html body span#badge-more.badge.badge-primary:hover {
  background-color: #660000 !important;
  background: #660000 !important;
  color: #ffffff !important;
  opacity: .85;
}

.urls {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

input::placeholder {
  color: var(--slate-gray) !important;
  text-shadow: none;
}

.card-header button {
  font-size: 1.1rem !important;
}

/* Media queries ------------------------------------------- */

/* Collapsed-navbar item styling — matches the navbar-expand-md breakpoint
   (was 560px, so 561–767px showed the hamburger menu with unstyled items). */
@media screen and (max-width: 767.98px) {
  /* The desktop rule pins the bar to height: 4.5rem so it matches the footer.
     On mobile that fixed height stops the maroon bar from growing when the
     hamburger menu opens, so the expanded items (white text) spill onto the
     light page below and vanish — only "About Me" stayed readable. Let the
     bar grow to fit the open menu; min-height keeps the collapsed bar at
     4.5rem. */
  #page-navbar nav {
    height: auto;
  }

  #page-navbar .nav-item {
    padding: .1rem 2rem .1rem 1.5rem;
    margin-top: .35rem;
    border-bottom: 1px dotted var(--silver);
  }

  #page-navbar #projects {
    border: none !important;
  }

  /* Publication cards: stop forcing thumbnail + text side-by-side. Below the
     desktop breakpoint the table layout crammed the citation into a narrow
     column AND, because the cell stretches to the (taller) text, left a big
     empty block below the cover. Stack the cover on top, text full-width.
     Applied across the whole collapsed-navbar range (incl. landscape phones,
     601–767px) so the side-by-side gap never shows on small screens. */
  .pub-card {
    display: block;
  }

  .pub-thumb {
    display: block;
    width: 120px;
    margin-bottom: 1rem;
  }

  /* No hover zoom on touch / small-screen layouts: the stacked column has no
     open space for the enlarged cover to occupy, and most small-screen users
     are touch-only (so :hover is sticky / unreliable). */
  .pub-thumb:hover img {
    position: static;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  }

  .pub-content {
    display: block;
    padding-left: 0;
  }

  .pub-citation {
    font-size: 1rem;
  }
}

/* Phone layout (≤600px) ----------------------------------------------------- */
@media screen and (max-width: 600px) {
  #my-photo {
    margin-top: -4rem;
  }

  /* Reclaim horizontal space: the `px-4` wrapper + `mx-4`/`mx-3` row margins
     stack up to ~63px of inset per side on a phone, squeezing the content
     column. Tighten them on small screens only (desktop is untouched). */
  #wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #wrapper .row.mx-4,
  #wrapper .row.mx-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Read-more disclosure -------------------------------------------------------
   CSS-only collapsible (native <details>) used to hide longer asides behind a
   "Read more" link that swaps to "Read less" when expanded. No JS required. */
.read-more {
  margin-bottom: 1rem;
}

.read-more-toggle {
  display: inline-block;
  cursor: pointer;
  color: var(--trench-blue);
  font-weight: 600;
  list-style: none;          /* Firefox: remove default disclosure triangle */
  outline-offset: 3px;
}

.read-more-toggle::-webkit-details-marker {
  display: none;             /* WebKit/Blink: remove default triangle */
}

.read-more-toggle::after {
  content: "Read more \25BC";  /* ▼ */
}

.read-more[open] > .read-more-toggle::after {
  content: "Read less \25B2";  /* ▲ */
}

.read-more-toggle:hover {
  text-decoration: underline;
}