@media (max-width: 750px) {
  body:not(#collection-56f010cfab48de831c92f42b) #canvas {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 72px 18px 28px !important;
    overflow-x: hidden !important;
  }

  body:not(#collection-56f010cfab48de831c92f42b) img,
  body:not(#collection-56f010cfab48de831c92f42b) iframe {
    max-width: 100%;
  }

  #mobileMenuLink {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10002 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
  }

  body:not(#collection-56f010cfab48de831c92f42b) #header #logo {
    position: fixed !important;
    top: 16px !important;
    left: 18px !important;
    z-index: 10001 !important;
    display: flex !important;
    height: 42px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    opacity: 1;
    transition: opacity .2s ease;
  }

  body:not(#collection-56f010cfab48de831c92f42b) #header #logo .logo {
    display: flex !important;
    height: 42px !important;
    margin: 0 !important;
    align-items: center !important;
    text-align: left !important;
  }

  body:not(#collection-56f010cfab48de831c92f42b) #header #logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 190px !important;
    max-height: 34px !important;
    margin: 0 !important;
  }

  body.archive-mobile-menu-open #header #logo {
    opacity: 0;
    pointer-events: none;
  }

  #mobileMenuLink a {
    display: inline-flex !important;
    min-width: 76px;
    min-height: 42px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important;
    border: 1px solid rgba(201, 62, 39, .55);
    background: rgba(255, 255, 255, .96);
    color: #c93e27 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
  }

  #mobileNav {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 10000 !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 76px 24px 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, visibility 0s linear .36s;
    background: #fff !important;
    box-shadow: -18px 0 48px rgba(0, 0, 0, .2);
  }

  body.archive-mobile-menu-open {
    overflow: hidden !important;
  }

  body.archive-mobile-menu-open #mobileNav {
    visibility: visible !important;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .38);
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  body.archive-mobile-menu-open::after {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  #mobileNav .folder-toggle-label {
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
  }

  #mobileNav .subnav {
    padding-left: 14px;
  }
}

@media (max-width: 750px) and (prefers-reduced-motion: reduce) {
  #mobileNav,
  body::after {
    transition: none !important;
  }
}