/* Controlled Manifesto copy and mobile viewport repair. */

@media (max-width: 600px) {
  .topbar,
  .gate2-hero {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .topbar .nav {
    inline-size: calc(100% - 28px);
    max-inline-size: calc(100% - 28px);
    min-inline-size: 0;
    margin-inline: auto;
    gap: 12px;
  }

  .topbar .brand {
    flex: 1 1 auto;
    min-inline-size: 0;
    max-inline-size: calc(100% - 84px);
  }

  .topbar .brand img {
    display: block;
    inline-size: min(165px, 100%);
    max-inline-size: 100%;
  }

  .topbar .menu-toggle {
    flex: 0 0 auto;
    min-inline-size: 0;
    max-inline-size: 76px;
  }

  .topbar .links {
    left: 14px;
    right: 14px;
    inline-size: auto;
    max-inline-size: calc(100% - 28px);
    min-inline-size: 0;
  }

  .topbar .links > *,
  .gate2-hero .hero-content,
  .gate2-hero .hero-content > *,
  .gate2-hero .hero-editorial,
  .gate2-hero .hero-editorial > *,
  .gate2-hero .actions,
  .gate2-hero .hero-meta {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .gate2-hero .hero-content {
    inline-size: calc(100% - 28px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  .gate2-hero h1,
  .gate2-hero h1 .hero-line,
  .gate2-hero .hero-slogan,
  .gate2-hero .hero-descriptor,
  .gate2-hero .hero-editorial p {
    inline-size: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .gate2-hero h1 {
    font-size: clamp(30px, 7.75vw, 33px) !important;
    line-height: .99 !important;
  }

  .gate2-hero .actions {
    inline-size: 100%;
    align-items: stretch;
  }

  .gate2-hero .actions a {
    inline-size: fit-content;
    max-inline-size: 100%;
    white-space: normal;
  }

  .gate2-hero .hero-meta {
    inline-size: calc(100% - 28px);
    margin-inline: auto;
  }

  .gate2-hero .hero-static,
  .gate2-hero .hero-infrastructure,
  .gate2-hero .hero-vignette,
  .gate2-hero .hero-webgl {
    max-inline-size: 100%;
  }
}