/* V138 urgent mobile portfolio hotfix */

@media (max-width: 980px) {
  /* Do not let will-change/transform turn the full-screen nav into a 70px child. */
  .site-header {
    z-index: 1230 !important;
    transform: none !important;
    will-change: opacity !important;
  }

  .menu-toggle {
    z-index: 1220 !important;
  }

  /* The hotfix script moves this element to body on mobile. */
  body > .site-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1210 !important;
    box-sizing: border-box !important;
    display: flex !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding:
      calc(max(var(--header), env(safe-area-inset-top)) + 22px)
      max(var(--pad), env(safe-area-inset-right))
      max(30px, env(safe-area-inset-bottom))
      max(var(--pad), env(safe-area-inset-left)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #080808 !important;
    color: #f4f4f0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity .22s ease, visibility 0s linear .22s !important;
  }

  body > .site-nav.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .22s ease !important;
  }

  body > .site-nav > a {
    display: flex !important;
    width: 100% !important;
    min-height: 58px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: clamp(17px, 5vw, 22px) !important;
    letter-spacing: .08em !important;
    white-space: normal !important;
  }

  body > .site-nav > a:first-child {
    border-top: 1px solid rgba(255,255,255,.14) !important;
  }

  body > .site-nav > a[aria-current="page"] {
    color: #fff !important;
  }

  body > .site-nav .nav-cta {
    min-height: 56px !important;
    margin-top: 24px !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    color: #fff !important;
  }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  body.menu-open .site-header,
  body.menu-open .menu-toggle {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.menu-open .site-header {
    background: #080808 !important;
    border-bottom-color: transparent !important;
  }

  body.menu-open .digital-wordmark img {
    filter: none !important;
  }

  body.menu-open .menu-toggle span {
    background: #fff !important;
  }

  /* A touchable 6×6 matrix: about 44px per cell on normal mobile widths. */
  .home-v117 .matrix-hero__mark,
  .home-v118 .matrix-hero__mark {
    width: min(88vw, 350px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .matrix-mobile-instruction {
    position: absolute;
    left: 50%;
    bottom: -25px;
    display: block;
    width: max-content;
    max-width: 92vw;
    margin: 0;
    color: rgba(17,17,15,.58);
    font-size: 8px;
    letter-spacing: .12em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .project-matrix__cell.is-touch-armed::before {
    border-color: rgba(17,17,15,.68) !important;
    background: rgba(17,17,15,.08) !important;
  }

  .project-matrix__cell.is-touch-armed > span {
    color: rgba(17,17,15,.72) !important;
  }
}

@media (min-width: 981px) {
  .matrix-mobile-instruction { display: none; }
}