/* VISOLVE mobile stability layer */

/* The SiteHeader import wraps <header> in a .sc-host div that is only as tall
   as the header itself. A sticky element can never travel outside its
   containing block, so that wrapper collapsed the header's position:sticky and
   it scrolled away on every page. Dropping the wrapper's box promotes the
   header's containing block to #top, which spans the whole page. */
#top > .sc-host:first-child {
  display: contents;
}

/* Height of the sticky header, so bars that park underneath it stay in sync. */
:root {
  --site-header-h: 75px;
}

@media (max-width: 780px) {
  html,
  body,
  #dc-root,
  #dc-root > .sc-host,
  #top {
    max-width: 100%;
  }

  html,
  body {
    overflow-x: clip;
  }

  :where(main, section, article, figure, nav, header, footer, div) {
    min-width: 0;
  }

  :where(h1, h2, h3, p, strong) {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  :where(
    .project-rail,
    .case-rail,
    .case-index__inner,
    .category-index__inner
  ) {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .case-index__inner,
  .category-index__inner {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 20px;
  }

  .case-index__inner > a,
  .category-index__inner > a {
    scroll-snap-align: start;
  }

  :where(
    [data-work-rail-step],
    [data-case-rail-step],
    [data-m-burger],
    [data-pulse-mode]
  ) {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  input[type="range"] {
    min-height: 44px;
    touch-action: pan-x;
  }
}

@media (max-width: 480px) {
  .case-hero__copy {
    inset: 22px !important;
  }

  .case-hero__top span:last-child,
  .case-hero__foot span:last-child {
    display: none;
  }

  .case-hero__title {
    font-size: clamp(42px, 16vw, 66px) !important;
    line-height: .82 !important;
  }

  /* FORGE and REFORM hide the overlay title and lead with the subtitle
     instead; see the hero block in archive-case.css. */
  .case-page--forge .case-hero__subtitle,
  .case-page--reform .case-hero__subtitle {
    font-size: clamp(26px, 8vw, 38px) !important;
  }

  .case-page--melody-maker .case-hero__title {
    max-width: 100% !important;
    font-size: clamp(33px, 10.4vw, 46px) !important;
    line-height: .88 !important;
    text-wrap: balance;
  }

  .case-page--satranc .case-hero__title,
  .case-page--tokyo-1964 .case-hero__title {
    max-width: 100% !important;
    font-size: clamp(40px, 14vw, 60px) !important;
  }

  .case-statement strong {
    font-size: clamp(40px, 14vw, 60px) !important;
  }

  .arc-hero-copy h1 {
    font-size: clamp(50px, 17vw, 78px) !important;
  }

  .cover h1 {
    font-size: clamp(40px, 13vw, 58px) !important;
  }

  .night-poster strong {
    font-size: clamp(40px, 13vw, 58px) !important;
  }

  .player-title {
    font-size: clamp(50px, 17vw, 62px) !important;
  }

  .pulse-hero h1 {
    font-size: 21vw !important;
  }

  [data-screen-label*="Sindragosa"] h1,
  [data-screen-label*="SINDRAGOSA"] h1 {
    font-size: clamp(37px, 12.5vw, 54px) !important;
  }
}