/* Small-viewport gate — Figma node 74:95 "small-viewport-error".
 *
 * The frame is a flat --surface field, the top nav, and one centred bracketed
 * mono line. Below the laptop breakpoint the homepage is replaced by exactly
 * that.
 *
 * Built in-page rather than as a separate document on purpose: a redirect would
 * cost a round trip, flash the homepage first, and break the back button, and
 * the gate would have to duplicate the nav. A media query reaches the same
 * design with none of that, and keeps working with JavaScript unavailable.
 */

.viewport-gate { display: none; }

/* The single source of truth for "smaller than laptop". film-scrub.js does not
   repeat this number — it reads whether the gate is displayed. */
@media (max-width: 1023.98px) {

  /* The frame's whole field. z-index sits under the nav (10) and over the flow
     (1), because node 74:95 keeps the nav and drops everything else. */
  .viewport-gate {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding-inline: var(--inset);
    background: var(--surface);
  }

  /* Centred on the band in the frame; centred in the viewport here, which is
     the same thing once the frame IS the viewport. No max-width: the frame sets
     the line as one run of 576px, so letting the gutters be the only limit keeps
     it unbroken wherever there is room and wraps it only on a phone.

     The 14px floor is ours, not the frame's: --u is pinned to --u-min (0.8)
     at every width this gate covers, so the frame's 16px would render at
     12.8px — too small for the only sentence a phone visitor ever sees. */
  .viewport-gate__note {
    margin: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: max(calc(16 * var(--u)), 14px);
    line-height: var(--leading-mono);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-wrap: balance;
  }

  /* Everything the frame drops. The nav survives because it is no longer nested
     inside the flow — it is a sibling of it, which a fixed bar should be.
     Hiding the flow also collapses the scroll, so nothing scrubs behind a page
     that is not being shown. */
  .film-flow,
  .site-footer,
  .film-stage,
  .grid-overlay { display: none; }

  body { overflow: hidden; }

  /* The frame is 1512 wide, so it does not say what the nav does at 393. Two
     things follow from the gate itself:
     - the links point at sections the gate hides, so they would read as
       tappable and do nothing. They go.
     - with them gone the brand fits one line again; at full width it wrapped
       and pushed "contact" off screen entirely.
     The brand stays because it is identity, not navigation. */
  .nav { align-items: center; }
  .nav__links { display: none; }
}