/* Keep the existing site navigation usable on narrow screens. */
@media (max-width: 900px) {
  /* Reserve room for the existing film when its text fills a short phone screen. */
  .film-copy {
    padding-block-start: clamp(220px, 40vw, 360px);
  }
}

@media (max-width: 760px) {
  main[id],
  section[id] {
    scroll-margin-block-start: 118px;
  }

  header.site .nav {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 64px 44px;
    gap: 0;
    block-size: auto;
  }

  header.site .nav > .logo {
    grid-column: 1;
    grid-row: 1;
  }

  header.site .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    min-inline-size: 0;
    block-size: 44px;
    margin-inline-start: 0;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  header.site .nav-links::-webkit-scrollbar {
    display: none;
  }

  header.site .nav-links a {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-block-size: 44px;
  }

  header.site .nav-links a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  header.site .nav-end {
    grid-column: 2;
    grid-row: 1;
    gap: 4px;
  }

  header.site .nav .tgl {
    min-inline-size: 44px;
    block-size: 44px;
  }

  header.site .signin-link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    white-space: nowrap;
  }

  header.site .nav-mob,
  header.site .nav .btn-cta {
    display: none;
  }

  .cmp-wrap {
    overflow-x: scroll;
    scrollbar-width: auto;
    scrollbar-color: var(--dim) var(--bg2);
  }

  .cmp-wrap::-webkit-scrollbar {
    height: 12px;
  }

  .cmp-wrap::-webkit-scrollbar-track {
    background: var(--bg2);
  }

  .cmp-wrap::-webkit-scrollbar-thumb {
    background: var(--dim);
    border: 2px solid var(--bg2);
    border-radius: 999px;
  }
}