body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}

.results-carousel .item {
  margin: 5px;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 0;
  font-size: 0;
}

.results-carousel video {
  margin: 0;
}


.interpolation-panel {
  background: #f5f5f5;
  border-radius: 10px;
}

.interpolation-panel .interpolation-image {
  width: 100%;
  border-radius: 5px;
}

.interpolation-video-column {
}

.interpolation-panel .slider {
  margin: 0 !important;
}

.interpolation-panel .slider {
  margin: 0 !important;
}

#interpolation-image-wrapper {
  width: 100%;
}
#interpolation-image-wrapper img {
  border-radius: 5px;
}

/* A fixed 16:9 box, used by the teaser row and the results grid: every item
   renders at the same size whatever its source aspect ratio is, so cells and
   captions line up. The ratio comes from padding-top rather than
   aspect-ratio, because percentage padding resolves against the parent's
   definite width -- which holds even where aspect-ratio on a replaced element,
   <video> especially, does not. 16:9 is exact for the input frames, trims ~1%
   off the clips' sides and a little empty black off the point maps. */
.media-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

/* Square variant, for content / style / asset triplets. */
.media-1x1 {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
}

.media-16x9 > img,
.media-16x9 > video,
.media-1x1 > img,
.media-1x1 > video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Teaser row */
.teaser-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.teaser-item {
  width: 300px;
  max-width: 100%;
  text-align: center;
}

/* Results grid: one column per example, one row per stage. */
.results-grid {
  display: grid;
  grid-template-columns: 4.5rem repeat(6, 1fr);
  gap: 10px;
  align-items: center;
}

/* content.png is transparent, style.jpg is opaque and video.mp4 is white-backed,
   so without a background the content row reads as floating objects while the
   other two read as solid tiles. One white tile behind every cell lines the
   three rows up. */
.results-grid .media-1x1 {
  background: #fff;
}

/* Stage names down the left-hand side. */
.results-grid-label {
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
  padding-right: 0.5rem;
}

@media screen and (max-width: 768px) {
  /* Seven columns will not fit on a phone. Scroll the grid sideways rather
     than shrink every cell into nothing. */
  .results-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .results-grid {
    min-width: 620px;
  }
}

/* Baseline comparison: style images across the top, content image down the
   left of each row, one row group per method. Mirrors Figure 4 of the paper. */
.bl-grid {
  display: grid;
  grid-template-columns: 2.2rem repeat(6, 1fr);
  gap: 8px;
  align-items: center;
}

/* Method names, set bottom-to-top in a bracket, spanning the two content rows. */
.bl-method {
  grid-row: span 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 3px solid #b5b5b5;
  border-top: 3px solid #b5b5b5;
  border-bottom: 3px solid #b5b5b5;
}

.bl-method > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.95rem;
}

/* The split Content / Style corner of the table. */
.bl-corner {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: linear-gradient(to top right, #d5dcf1 0 49.6%, #fff2d0 50.4% 100%);
}

.bl-corner > span {
  position: absolute;
  font-weight: 600;
  font-size: 0.95rem;
}

.bl-corner > .bl-style {
  top: 12%;
  right: 10%;
}

.bl-corner > .bl-content {
  bottom: 12%;
  left: 10%;
}

@media screen and (max-width: 768px) {
  /* Seven columns will not fit on a phone; scroll the table sideways. */
  .bl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bl-grid {
    min-width: 760px;
  }
}

/* "Why not stylize in 2D first?" table: the two-step 2D->3D route against ours. */
.t2d-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: center;
}

/* content.png is transparent and the videos are white-backed; a white tile
   behind every cell keeps the rows reading as one aligned table. */
.t2d-grid .media-1x1 {
  background: #fff;
}

.t2d-grid .media-1x1.is-ours {
  outline: 2px solid #2f7d3a;
}

.t2d-group {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
}

.t2d-group.is-input { grid-column: span 2; background: #ececec; color: #4a4a4a; }
.t2d-group.is-fail  { grid-column: span 4; background: #fdecea; color: #c0341c; }
.t2d-group.is-ours  { background: #eaf6ec; color: #2f7d3a; }

.t2d-head {
  align-self: end;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  color: #4a4a4a;
}

.t2d-head small {
  display: block;
  font-weight: 400;
  font-size: 0.92em;
  color: #7a7a7a;
}

@media screen and (max-width: 768px) {
  .t2d-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .t2d-grid {
    min-width: 860px;
  }
}

/* bulma forces links inside a coloured hero to color: inherit via a selector
   specific enough (0,7,1) to beat anything reasonable here, which leaves an
   attribution or reference link looking like plain body text. Put them back on
   the blue the author links already use. */
.hero.is-light .content a {
  color: hsl(204, 86%, 53%) !important;
}

.hero.is-light .content a:hover {
  text-decoration: underline;
}