:root {
  --text: #222;
  --muted: #555;
  --link: #1772d0;
  --line: #ddd;
  --soft: #f7f7f7;
  --max-width: 980px;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-size: 16px;
  line-height: 1.55;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.content {
  width: min(var(--max-width), calc(100% - 32px));
  margin: 0 auto;
}

.content.narrow {
  width: min(860px, calc(100% - 32px));
}

.hero {
  padding: 44px 0 28px;
  text-align: center;
}

.venue {
  margin: 0 0 10px;
  color: var(--muted);
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 15px;
}

h1 {
  margin: 0;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600;
  line-height: 1.1;
  max-width: 900px;
  margin: 0 auto;
  white-space: normal;
}

.subtitle {
  max-width: 780px;
  margin: 14px auto 22px;
  color: #333;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.35;
}

.authors,
.affiliations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 13px;
  margin: 0 auto;
}

.authors {
  max-width: 900px;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  color: #222;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
}

.affiliations {
  max-width: 820px;
  margin-top: 10px;
  color: var(--muted);
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

.authors a,
.author-link {
  color: hsl(204, 86%, 53%);
}

.note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 999px;
  background: #363636;
  color: #fff;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.button .icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1;
}

.button .hf-icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.button:hover {
  text-decoration: none;
  background: #111;
}

.button.disabled {
  cursor: default;
  opacity: 1;
}

.button.disabled:hover {
  background: #363636;
}

.teaser-section {
  padding: 10px 0 28px;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
}

.project-figure {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--soft);
}

.teaser-video {
  margin-bottom: 14px;
}

.section {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.section-alt {
  background: #fff;
}

h2 {
  margin: 0 0 18px;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

p {
  overflow-wrap: anywhere;
}

.section p {
  margin: 0 0 14px;
}

figure {
  margin: 0;
}

figcaption {
  max-width: 820px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.asset-placeholder {
  display: grid;
  min-height: 330px;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  text-align: center;
}

.asset-placeholder span,
.asset-placeholder small {
  display: block;
  width: 100%;
}

.asset-placeholder span {
  color: #333;
  font-size: 19px;
  font-weight: 700;
}

.asset-placeholder small {
  margin-top: 3px;
  font-size: 13px;
}

.asset-placeholder.compact {
  min-height: 190px;
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.domain-grid article {
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 13px;
}

.domain-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.result-card {
  border: 1px solid var(--line);
  padding: 14px;
}

.table-note {
  max-width: 880px;
  margin: 0 auto 14px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
}

.results-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.35;
}

.results-table th,
.results-table td {
  border-bottom: 1px solid #e7e7e7;
  padding: 7px 8px;
  text-align: center;
  white-space: nowrap;
}

.results-table th:first-child,
.results-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
  font-weight: 700;
}

.results-table thead th {
  border-bottom: 2px solid #222;
  background: #e8ecf3;
  font-weight: 700;
}

.results-table .group th {
  position: static;
  border-top: 1.5px solid #222;
  border-bottom: 1.5px solid #222;
  background: #f6f6f6;
  color: #333;
  font-style: italic;
  text-align: center;
}

.results-table .icl th,
.results-table .icl td {
  background: #ebebeb;
}

.results-table .icl th:first-child {
  background: #ebebeb;
}

.results-table tr.ours th,
.results-table tr.ours td {
  background: #eef3fb;
}

.results-table tr.ours th:first-child {
  background: #eef3fb;
  font-weight: 700;
}

.results-table .u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.results-table strong {
  font-weight: 700;
}

.table-foot {
  max-width: 980px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.table-foot p {
  margin: 2px 0;
}

.fig-block {
  margin: 0 0 28px;
}

.fig-block:last-child {
  margin-bottom: 0;
}

.results-table .pos {
  color: #8991b7;
  font-weight: 700;
}

.results-table .neg {
  color: #d98b8e;
  font-weight: 700;
}

.results-table .animal {
  color: #017b9b;
}

.results-table .industry {
  color: #00a9a5;
}

.results-table .sports {
  color: #d96788;
}

.results-table .surgery {
  color: #c77a22;
}

.results-table .security {
  color: #8f6f55;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.example-grid figure {
  border: 1px solid var(--line);
  padding: 12px;
}

pre {
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 16px;
  color: #222;
  font-size: 13px;
  line-height: 1.45;
}

.footer {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.footer p {
  margin: 0;
}

@media (max-width: 800px) {
  .domain-grid,
  .example-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 32px;
  }

  .domain-grid,
  .example-grid {
    grid-template-columns: 1fr;
  }

  .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .asset-placeholder {
    min-height: 230px;
  }
}

/* ---- additions for the reconstruction-aware picking page ---- */

.venue {
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Most tables on this page are 5 columns wide, so they fit without the
   980px min-width the wide CryoAnomaly table needed. */
.results-table.compact {
  min-width: 0;
  font-size: 13px;
}

.results-table.compact th,
.results-table.compact td {
  padding: 7px 10px;
}

.results-table td.num,
.results-table th.num {
  font-variant-numeric: tabular-nums;
}

.results-table .flag {
  color: #999;
  font-weight: 400;
}

.results-table tr.sep th,
.results-table tr.sep td {
  border-top: 1.5px solid #222;
}

.results-table .sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.results-table .check {
  color: #1a7f37;
  font-weight: 700;
}

.results-table .dash {
  color: #bbb;
}

.results-table caption {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: #fafafa;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.results-table .rowgroup th {
  position: static;
  background: #f6f6f6;
  color: #333;
  font-style: italic;
  font-weight: 600;
  text-align: left;
}

/* Two tables side by side on wide screens. */
.table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.table-grid .table-wrap {
  overflow-x: auto;
}

.fig-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.fig-grid figure {
  margin: 0;
}

.fig-grid figcaption {
  max-width: none;
  text-align: left;
}

.contrib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.contrib-grid article {
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 16px 16px 18px;
}

.contrib-grid h3 {
  margin: 0 0 6px;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.contrib-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px;
}

.headline div {
  flex: 1 1 190px;
  border: 1px solid var(--line);
  padding: 14px 12px;
  text-align: center;
}

.headline b {
  display: block;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
}

.headline span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.lead {
  max-width: 820px;
  margin: 0 auto 20px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.video-placeholder {
  display: grid;
  width: 100%;
  height: 300px;
  place-items: center;
  border: 1px dashed #c4c4c4;
  background: var(--soft);
  color: var(--muted);
  text-align: center;
}

.video-placeholder strong {
  display: block;
  color: #333;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.video-placeholder small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.subsec {
  margin: 0 0 10px;
  font-family: "Google Sans", "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-align: center;
}

.section .subsec + .table-note {
  margin-top: -2px;
}

.block {
  margin-bottom: 34px;
}

.block:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .contrib-grid,
  .table-grid,
  .fig-grid {
    grid-template-columns: 1fr;
  }
}

/* The compact tables are narrow enough to fit, so the sticky first column of the
   wide table is dropped here. Without this the header's first cell keeps the white
   background of the sticky rule while the rest of the header row is shaded. */
.results-table.compact th:first-child,
.results-table.compact td:first-child {
  position: static;
  background: transparent;
}

.results-table.compact thead th:first-child {
  background: #e8ecf3;
}

.results-table.compact tr.ours {
  background: #eef3fb;
}

.results-table.compact .rowgroup {
  background: #f6f6f6;
}

.results-table.compact tr.ours th:first-child {
  background: transparent;
}

.table-grid .subsec,
.fig-grid .subsec {
  text-align: left;
}

/* A table or figure that would look stranded at the full 980px content width. */
.narrow-table,
.narrow-figure {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.narrow-figure .project-figure {
  max-width: 620px;
  margin: 0 auto;
}

.results-table.compact .sub {
  white-space: nowrap;
}

/* One treatment for every run of body text, the same one the figure captions use:
   a 820px measure, centred in the column, centred text. */
.lead,
.table-note,
figcaption,
.abstract-body p {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

figcaption {
  margin-top: 10px;
}

.table-note + .table-note {
  margin-top: -4px;
}

.fig-grid figcaption {
  max-width: none;
}

.narrow-figure {
  max-width: 620px;
}

.narrow-figure .project-figure {
  max-width: 100%;
}

/* Failure cases: one figure above the other. The two have very different aspect
   ratios, so each is capped rather than stretched to the column. */
.fig-stack figure {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.fig-stack figure:first-child {
  max-width: 520px;
}

.fig-stack figure + figure {
  margin-top: 30px;
}