html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}

.container {
  max-width: 100%;
}

.results-carousel {
  position: relative;
  padding: 0 2.75rem;
}

.slider,
.slider-container {
  overflow: hidden;
}

.slider-navigation-previous,
.slider-navigation-next {
  background: #fff !important;
  border: 1px solid var(--border-color);
  z-index: 20;
}

.publication-title {
  font-size: 2.15rem !important;
  letter-spacing: -0.02em;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.venue-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin: 0.4rem 0 1.1rem;
}

.tldr {
  max-width: 46rem;
  margin: 1.1rem auto 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.55;
}

.metric-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0.25rem;
}

.metric-chip {
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0.85rem 1.15rem;
  min-width: 10.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.metric-chip .num {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.metric-chip .lbl {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.button.coming-soon {
  opacity: 0.62;
  cursor: not-allowed !important;
  pointer-events: none;
  box-shadow: none !important;
}

.button.coming-soon:hover {
  transform: none !important;
  background: var(--text-primary) !important;
}

.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.teaser-card {
  margin: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.teaser-card img {
  width: 100%;
  height: auto;
  display: block;
}

.teaser-card figcaption {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.45rem 0.65rem 0.6rem;
  line-height: 1.35;
}

.paper-figure {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  background: #fff;
}

.caption {
  margin-top: 0.7rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.video-grid-3,
.video-grid-2 {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
}

.video-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.video-card {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.video-card video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #000;
}

.results-carousel video {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.video-card figcaption {
  background: #fff;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.6rem 0.55rem;
  text-align: center;
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.app-grid .wide {
  grid-column: 1 / -1;
}

.interp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.interp-row img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.section-lead {
  max-width: 48rem;
  margin: 0 auto 1.25rem;
  color: var(--text-secondary);
}

.results-carousel .item p {
  font-size: 0.9rem !important;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .publication-title { font-size: 1.55rem !important; }
  .teaser-grid,
  .video-grid-3,
  .video-grid-2,
  .app-grid,
  .interp-row {
    grid-template-columns: 1fr;
  }
  .metric-chip { min-width: 45%; flex: 1; }
}

/* ==========================================================================
   Page rhythm: give the body room to breathe, size the media consistently,
   and make captions legible on white.
   ========================================================================== */

/* 1. Keep the main column off the edges of the screen. */
.container.is-max-desktop {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* Bulma makes .hero a flex column and .container width:auto with auto side
   margins, so a container that is a direct hero child is sized shrink-to-fit.
   Its min-content width comes from the 1400px figures inside, and the cap
   above then pins the column at 1120px at every viewport while .hero's
   overflow:hidden clips the excess. A definite width stops that. */
.hero > .container {
  width: 100%;
}

/* 2. Captions were slate-500 on white, which is hard to read.
      Darken them and give them a little more size. */
:root {
  --text-caption: #334155;
}

.caption,
.teaser-card figcaption,
.video-card figcaption,
figure figcaption {
  color: var(--text-caption);
}

.caption {
  font-size: 0.97rem;
  line-height: 1.6;
}

.teaser-card figcaption {
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.6rem 0.8rem 0.75rem;
}

.video-card figcaption {
  font-size: 0.88rem;
}

/* 3. Figures, teaser panels, video grids and carousels fill the column.
      The breathing room comes from the page margin above, not from
      shrinking the media. Only the spacing between panels is widened. */
@media screen and (min-width: 769px) {
  img.paper-figure {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .teaser-grid { gap: 1.75rem; }
  .video-grid-2 { gap: 1.5rem; }
  .video-grid-3 { gap: 1.25rem; }
  .app-grid { gap: 1.75rem; }
}

/* --------------------------------------------------------------------------
   Phones. The transfer section stacks a wide comparison figure, a two-up
   video grid and two carousels, which is where the layout ran off the
   screen. Tighten the padding, let every media element fill the column, and
   stop anything from pushing the page wider than the viewport.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .container.is-max-desktop {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .results-carousel {
    padding: 0 1.5rem;
  }

  /* Only the outer .slider may be clamped. .slider-container carries the
     inline track width bulma-carousel computes, and clamping it pins the
     scroll offset at 0 so the arrows and swipe stop working. */
  .slider {
    max-width: 100%;
    overflow: hidden;
  }

  img.paper-figure,
  .video-card video,
  .results-carousel video,
  .results-carousel img,
  .teaser-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Nothing may exceed the viewport width. */
  section,
  .section,
  .container,
  .teaser-grid,
  .video-grid-2,
  .video-grid-3,
  .app-grid {
    max-width: 100%;
    min-width: 0;
  }

  .teaser-grid,
  .video-grid-2,
  .video-grid-3,
  .app-grid {
    gap: 1rem;
  }
}


/* Small phones: give the clips the width back that the carousel chrome takes. */
@media screen and (max-width: 600px) {
  .results-carousel {
    padding: 0;
  }

  .results-carousel .item {
    margin: 0;
    padding: 0.4rem;
  }

  .slider-navigation-previous,
  .slider-navigation-next {
    width: 2rem;
    height: 2rem;
  }
}

/* Responsive 16:9 video embed. */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}