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 square box: every cell renders at the same size whatever its source
   aspect ratio is, so rows 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 does not. Sources are square or 16:9, so the wider ones
   crop to fill. */
.media-1x1 {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
}

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

/* Teaser table: the same scene fitted from clean reference views and from
   perturbed ones. The reference views a row was fitted from run down the Ref.
   column, the novel views rendered out of that fit sit beside them. Mirrors
   Figure 1 of the paper. */
.teaser-grid {
  display: grid;
  grid-template-columns: 2.4rem 0.5fr repeat(3, 1fr);
  /* A wider gap between the rows than within them, so the clean row and the
     attacked row read as two groups rather than one four-row block. */
  column-gap: 10px;
  row-gap: 20px;
  align-items: center;
}

/* Headings over a Ref. column and over a group of novel views. */
.grid-head {
  text-align: center;
  font-weight: 700;
}

.teaser-grid .grid-head {
  font-size: 1.2rem;
}

.grid-head.is-views {
  grid-column: span 3;
}

/* The row name, set bottom-to-top beside its row. */
.row-label {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-label > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-weight: 700;
}

.teaser-grid .row-label > span {
  font-size: 1.2rem;
}

/* Two reference views stacked into the height of the single novel view beside
   them, which is why the column is half as wide.

   Both are taken out of flow, so the stack contributes no height of its own and
   the row is sized by the novel views alone; the stack then stretches to that
   row and pins one view to its top and the other to its bottom, which is what
   keeps the small images flush with the big ones top and bottom. Left in flow
   they would instead each take their square intrinsic height, making the stack
   exactly one gap taller than the novel views and hanging half a gap over each
   end. Half the gap comes off each view so the two still clear each other. */
.ref-stack {
  position: relative;
  align-self: stretch;
}

.ref-stack > img {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% - var(--stack-gap, 10px) / 2);
  object-fit: cover;
}

.ref-stack > img:first-child {
  top: 0;
}

.ref-stack > img:last-child {
  bottom: 0;
}

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

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

/* Inline colour chips in the pipeline caption. They stand in for the figure's
   \colorbox swatches, so a phrase like "blue blocks" carries the colour of the
   blocks it is naming. The colour itself is set per chip, next to the words. */
.cbox {
  padding: 0.05em 0.3em;
  border-radius: 3px;
  white-space: nowrap;
}

/* Qualitative results table: nine rows, one per method and attack variant, and
   two column groups, one per dataset. Each group repeats the teaser's shape, a
   half-width Ref. column of stacked reference views against the novel views
   rendered from them, so the same .ref-stack and .media-1x1 cells carry over.
   Mirrors Figure 5 of the paper. */
.res-grid {
  --stack-gap: 4px;
  display: grid;
  grid-template-columns: 2.2rem 0.5fr repeat(3, 1fr) 0.5fr repeat(3, 1fr);
  gap: 4px;
  align-items: center;
}

/* Nine rows of long names ("DP+Ours (GB)") in a 2.2rem gutter, so these are set
   a good deal smaller than the teaser's two. */
.res-grid .row-label > span {
  font-size: 0.72rem;
}

.res-grid .grid-head {
  font-size: 0.9rem;
}

/* Which dataset a column group belongs to, over the Ref. / Novel Views row. */
.res-dataset {
  grid-column: span 4;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Breathing room between the three method groups, as in the paper figure. */
.res-gap {
  grid-column: 1 / -1;
  height: 7px;
}

@media screen and (max-width: 1024px) {
  /* Nine columns will not fit on a narrow screen; scroll the table sideways
     rather than shrink every cell into nothing. */
  .res-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .res-grid {
    min-width: 900px;
  }
}

/* Attack-strength table: the same two scenes at three perturbation budgets,
   under each attack variant. Same column groups as the results table, with a
   second label gutter in front so the variant name can bracket the three
   budget rows it covers. Mirrors Figure 3 of the paper. */
.str-grid {
  --stack-gap: 4px;
  display: grid;
  grid-template-columns: 1.5rem 1.9rem 0.5fr repeat(3, 1fr) 0.5fr repeat(3, 1fr);
  gap: 4px;
  align-items: center;
}

.str-grid .grid-head {
  font-size: 0.9rem;
}

.str-grid .row-label > span {
  font-size: 0.78rem;
}

/* The variant name stands beside all three of its budget rows. */
.row-label.spans-group {
  grid-row: span 3;
}

.str-grid .row-label.spans-group > span {
  font-size: 0.92rem;
}

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

  .str-grid {
    min-width: 900px;
  }
}

/* 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;
}