.venue {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #363636;
  margin: -0.5rem 0 1rem;
}

.venue-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 180, 139, 0.12);
  color: #00765b;
  font-size: 1.05rem;
  vertical-align: 0.1rem;
}

.publication-links {
  margin-top: 1rem;
}

.figure-img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.figure-caption {
  margin-top: 1rem;
  color: #4a4a4a;
  text-align: justify;
}

.figure-caption.caption-above {
  margin: 0 0 1rem;
}

.legend {
  padding: 0 0.3rem;
  border-radius: 3px;
}

.legend.best,
.results td.best {
  background: rgba(0, 180, 139, 0.12);
  color: #00765b;
}

.legend.second,
.results td.second {
  background: rgba(239, 99, 75, 0.12);
  color: #b5361f;
}

.results {
  width: 100%;
  font-size: 0.85rem;
  background: transparent;
}

.table.results th,
.table.results td {
  padding: 0.3rem 0.45rem;
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}

.table.results th {
  text-align: center;
}

.table.results thead th[rowspan] {
  text-align: left;
}

.results td.model,
.results td.method {
  text-align: left;
}

.results td.model {
  font-weight: 600;
}

.results tr.ours td.method {
  font-weight: 700;
  color: #00765b;
}

.results tbody + tbody {
  border-top: 2px solid #dbdbdb;
}

.resource {
  height: 100%;
}

.resource-title {
  font-family: 'Google Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Title lines are sized to the title's width: at 4.1cqi the second line (23.45em) takes 96% of it, so
   it stays on one line; on phones it wraps into two rows and the first line stays whole. */
.publication-title {
  container-type: inline-size;
}

.publication-title .title-line {
  display: block;
  font-size: max(4.1cqi, min(7cqi, 1.75rem));
  text-wrap: balance;
}

/* Bulma centers .container with auto margins, which makes it shrink-to-fit inside a .hero (a flex
   column); a full width keeps wide content such as the results table inside the viewport. */
.hero > .container {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .has-text-justified,
  .figure-caption {
    text-align: left !important;
  }

  .table.results td.method,
  .table.results thead tr:first-child th:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f5f5f5;
    box-shadow: inset -1px 0 0 #dbdbdb;
  }
}

.icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

@media print {
  .table-container {
    overflow: visible;
  }

  #BibTeX pre {
    white-space: pre-wrap;
  }
}