#logo-fold {
  visibility: hidden;
}
#masthead-inline {
  display: none;
}

body.logo-inline {
  #masthead-inline {
    --inline-logo-scale-factor: 0.2;
    --inline-font-size-company-name: calc(5.333rem * var(--inline-logo-scale-factor)); /* 96px; */
    --inline-kerning-fix-logo-r: calc(-0.111rem * var(--inline-logo-scale-factor)); /* -2px; */
    --inline-kerning-fix-logo-b: calc(-0.056rem * var(--inline-logo-scale-factor)); /* -1px; */
    --inline-kerning-fix-logo-o: calc(-0.167rem * var(--inline-logo-scale-factor)); /* -3px; */
    --inline-width-logo: calc(11.111rem * var(--inline-logo-scale-factor)); /* 200px; */
    --inline-width-logo-noise: calc(4.444rem * var(--inline-logo-scale-factor)); /* 80px; */
    --inline-padding-company-name-leading: calc(1.333rem * var(--inline-logo-scale-factor)); /* 24px; */

    --inline-position-logo-leading: 0;
    --inline-position-logo-noise-top: calc(
      calc(
        calc(var(--inline-width-logo) / 2) -
        calc(var(--inline-width-logo-noise) / 2)
      )
    );
    --inline-position-logo-noise-leading: calc(
      calc(
        var(--inline-position-logo-leading) +
        calc(var(--inline-width-logo) / 2) -
        calc(var(--inline-width-logo-noise) / 2)
      )
    );
    --inline-position-company-name-leading: calc(
      calc(
        var(--inline-position-logo-leading) +
        var(--inline-width-logo) +
        var(--inline-padding-company-name-leading)
      )
    );
    display: block;
    float: none;
    clear: none;
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--z-index-inline-logo) !important;
    height: auto;
    width: 100vw;
    margin: 0;
    padding: 10px 0;
  }
  #masthead-inline h1.company-name {
    line-height: var(--inline-width-logo);
    font-size: var(--inline-font-size-company-name);
    margin-left: var(--inline-padding-company-name-leading);
    vertical-align: middle;
  }
  /* Kerning fixes. */
  #masthead-inline h1.company-name .r { letter-spacing: var(--inline-kerning-fix-logo-r); }
  #masthead-inline h1.company-name .b { letter-spacing: var(--inline-kerning-fix-logo-b); }
  #masthead-inline h1.company-name .o { letter-spacing: var(--inline-kerning-fix-logo-o); }

  #masthead-inline .logo {
    left: 0;
    height: var(--inline-width-logo);
    position: relative;
    display: block;
    float: left;
    width: var(--inline-width-logo);
  }
  #masthead-inline .logo-noise {
    width: var(--inline-width-logo-noise);
    height: var(--inline-width-logo-noise);
    position: absolute;
    top: var(--inline-position-logo-noise-top);
    left: var(--inline-position-logo-noise-leading);
    margin-left: calc(
      calc(var(--inline-width-logo) / 2) -
      calc(var(--inline-width-logo-noise) / 2)
    );
    left: 0;
  }
  #masthead-inline h1.company-name {
    display: inline-block;
    margin-left: var(--inline-padding-company-name-leading);
  }
  #masthead-inline .masthead-wrapper {
    height: var(--inline-width-logo);
    width: fit-content;
    float: right;
    position: relative;
    margin-right: 20px;
  }
  #masthead-inline .gasket {
    max-width: 800px;
    margin: 0 auto;
  }
}
@media (width > 1119px) {
  #masthead-inline .masthead-wrapper {
    text-shadow: 0 4px 6px rgba(
      var(--color-page-background-components-r),
      var(--color-page-background-components-g),
      var(--color-page-background-components-b),
      1
    );
  }
  #masthead-inline .masthead-wrapper img.logo {
    filter: drop-shadow(0 4px 6px rgba(
      var(--color-page-background-components-r),
      var(--color-page-background-components-g),
      var(--color-page-background-components-b),
      1
    ));
  }
  #masthead-inline .gasket {
    max-width: calc(var(--timeline-total-width) + 300px) !important;
  }
}