/* The 950px column leaves a wide empty margin on a laptop. Keep the sidebar
   column and give the extra width to the text. */
/* Match the reading scale of https://www.cs.princeton.edu/~danqic/:
   body 17px / 1.65, bio a touch larger and looser. */

/* Ubuntu on the previous site only shipped 300 and 400, so weights through
   599 drew the regular cut. Iowan's own bold is heavier than that regular.
   Keep the same weight numbers, and draw anything under 600 with the roman. */
@font-face {
  font-family: "Iowan Old Style";
  font-style: normal;
  font-weight: 100 599;
  src: local("Iowan Old Style Roman"), local("Iowan Old Style");
}
@font-face {
  font-family: "Iowan Old Style";
  font-style: italic;
  font-weight: 100 599;
  src: local("Iowan Old Style Italic");
}
@font-face {
  font-family: "Iowan Old Style";
  font-style: normal;
  font-weight: 600 900;
  src: local("Iowan Old Style Bold");
}
@font-face {
  font-family: "Iowan Old Style";
  font-style: italic;
  font-weight: 600 900;
  src: local("Iowan Old Style Bold Italic");
}

body {
  font-size: 17px;
  line-height: 1.65;
  /* Roman is a lighter drawing than Ubuntu Regular at the same color.
     A hairline stroke brings the ink back in line with kkakkkka.github.io. */
  -webkit-text-stroke: 0.45px currentColor;
  paint-order: stroke fill;
}
code, pre, kbd, samp {
  -webkit-text-stroke: 0;
}
#about p {
  font-size: 16.5px;
  line-height: 1.5;
  padding-left: 18px;
}
#news-list > li {
  font-size: 16.5px;
  line-height: 1.5;
  padding: 5px 0;
}
#news-list {
  max-height: calc(6 * (16.5px * 1.5 + 10px));
  overscroll-behavior: contain;
  cursor: grab;
  user-select: none;
}
#news-list:active {
  cursor: grabbing;
}
h2 {
  font-size: 22px;
  line-height: 1.2;
}
@media screen and (min-width: 961px) {
  body {
    font-size: 17px;
  }
  /* Center the portrait column in the gutter from the viewport edge to the text. */
  header {
    left: 0;
    top: 50px;
    bottom: 0;
    width: calc((100vw - min(1160px, 100vw - 100px)) / 2 + 251px);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header .personal-links {
    position: absolute;
    left: 50%;
    bottom: 36px;
    width: max-content;
    max-width: calc(100% - 16px);
    margin: 0;
    transform: translateX(-50%);
    flex-wrap: nowrap;
  }
  .wrapper {
    width: min(1160px, 100%);
  }
  section.outer {
    /* Keep the text column the same width. The extra 48px of separation from
       the profile comes out of the right gutter. */
    width: calc(100% - 251px - 24px);
    margin-right: 24px;
  }
  section.outer :is(section, .carousel, .timeline) {
    width: 100%;
    float: none;
  }
}

/* ldkong.css hides section.pub until its own script runs. */
section.pub.publication-item {
  display: block;
  padding-bottom: 0;
}

section.pub.publication-item.is-hidden {
  display: none;
}

/* Most demos are already 16:9, so that frame keeps every row the same height as the
   text block. Near matches fill it; the rest stay fully visible inside it. */
:is(.publication-item, .tech-report-item) .pub-card {
  --pub-row-gap: 14px;
  display: grid;
  grid-template-columns: clamp(108px, 22%, 160px) minmax(0, 1fr);
  column-gap: 16px;
  align-items: stretch;
  min-width: 0;
  border-bottom: none;
  padding: var(--pub-row-gap) 0 0;
}
:is(.publication-item, .tech-report-item) .pub-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: var(--pub-row-gap);
  line-height: 1.48;
}
:is(.publication-item, .tech-report-item) .pub-thumb {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  margin-bottom: 26px;
  align-self: center;
}
:is(.publication-item, .tech-report-item) .pub-content > :is(.title, .authors, .venue),
:is(.publication-item, .tech-report-item) .pub-content .title p {
  margin: 0;
  padding: 0;
  line-height: 1.55;
}
:is(.publication-item, .tech-report-item) .pub-content > .title,
:is(.publication-item, .tech-report-item) .pub-content .title p {
  font-size: 18px;
  line-height: 1.5;
}
:is(.publication-item, .tech-report-item) .pub-content > .authors {
  font-size: 16px;
}
:is(.publication-item, .tech-report-item) .pub-content > .venue,
:is(.publication-item, .tech-report-item) .pub-content > .pub-links,
:is(.publication-item, .tech-report-item) .pub-content > .pub-links a {
  font-size: 15px;
}
:is(.publication-item, .tech-report-item) .pub-content > .authors + .venue {
  margin-top: 0;
}
:is(.publication-item, .tech-report-item) .pub-thumb :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
  border-radius: 6px;
  background: transparent;
}
.pub-thumb img:hover,
.pub-thumb video:hover {
  transform: none;
}
:is(.publication-item, .tech-report-item) .pub-content::before {
  height: auto;
  bottom: 6px;
}
:is(.publication-item, .tech-report-item) .pub-card::after,
.paper-intelligence-flow {
  inset: 6px -8px 6px;
}
@media (max-width: 767px) {
  :is(.publication-item, .tech-report-item) .pub-card {
    --pub-row-gap: 12px;
    grid-template-columns: clamp(96px, 30%, 140px) minmax(0, 1fr);
    column-gap: 12px;
  }
  :is(.publication-item, .tech-report-item) .pub-content::before {
    height: auto;
    bottom: 6px;
  }
}

/* Category filters stay on one line, a little narrower than the cards. */
.categories {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: calc(100% - 36px);
  max-width: 100%;
  gap: 6px;
  container-type: inline-size;
  overflow-x: auto;
}
.categories .category-btn {
  flex: 1 1 auto;
  margin: 0;
  padding: 3px clamp(4px, 0.7cqi, 10px);
  font-size: clamp(11px, 1.85cqi, 15px);
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
}

/* Sit on the venue. Only the leftover under a taller 16:9 frame pushes this row down. */
:is(.publication-item, .tech-report-item) .pub-content > .pub-links {
  margin-top: auto;
  padding-top: 3px;
}

/* One venue per line. The abbreviation stays dark so the list can be scanned. */
#services {
  margin-top: 6px;
}
#services h2 {
  margin-bottom: 0;
}
#services h3 {
  /* List items already pad 4px, so 8px here is 12px of blank on both sides. */
  margin: 8px 0;
  font-size: 18px;
  line-height: 1.5;
}
#services h2 + h3 {
  margin-top: 12px;
}
#services .service-list {
  list-style: disc;
  margin: 0;
  padding-left: 1.2em;
}
#services .service-list li {
  margin: 0;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1.65;
  color: #5c5c5c;
}
/* Keep the portrait, name, and links on one narrow measure, closer to the body type. */
header {
  z-index: 2;
}
header br {
  display: none;
}
header .portrait-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 8px 0 0;
}
header .image.avatar {
  position: relative;
  z-index: 1;
  display: block;
  width: 132px;
  margin: 0;
}
header .image.avatar img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
header h1 {
  position: relative;
  z-index: 2;
  width: 132px;
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
header h1 b {
  font-weight: inherit;
}
header .role {
  position: relative;
  z-index: 2;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  color: #5c5c5c;
}
header .role span {
  display: block;
}
header .role span + span {
  margin-top: 12px;
}
header .personal-links {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
header .personal-link {
  width: 38px;
  height: 38px;
  border-width: 1px;
  border-radius: 8px;
}
header .personal-link svg,
header .personal-link[aria-label="Google Scholar"] svg {
  width: 19px;
  height: 19px;
}

/* Ink blue for the accent. Venue lines stay gray so the list is not a column of color. */
h2::before,
.carousel-badge,
.carousel-dot.active {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
}
h3, h4, h5, h6,
.timeline-role,
a:link,
a:visited,
span.tag,
span.tag a:link,
span.tag a:visited,
span.venue,
span.venue a:link,
span.venue a:visited {
  color: #1e3a5f;
}
.timeline-role {
  background: rgba(30, 58, 95, 0.08);
}
div.venue,
div.venue-highlight {
  color: #4a4a4a;
}
#scroll-progress {
  background: linear-gradient(90deg, #1e3a5f, #4d74a3, #1e3a5f);
}
header .personal-link {
  color: #1e3a5f;
  border-color: #1e3a5f;
}
header .personal-link:hover,
header .personal-link:focus-visible,
header .personal-link:active {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.12);
}
.categories .category-btn {
  color: #1e3a5f;
  border-color: #1e3a5f;
}
.categories .category-btn:hover,
.categories .category-btn.active {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}
.pub-card .pub-links .paper-resource-link,
.carousel-links .paper-resource-link {
  color: #1e3a5f;
}
.paper-resource-link:hover::before,
.paper-resource-link:focus-visible::before,
.carousel-btn:hover {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
}