/*
 * Wide-screen canvas
 *
 * The layouts are authored against a 1920 x 1080 desktop canvas. Above that
 * size, scale the complete canvas so capped pixel values, fixed navigation and
 * page-specific absolute positioning all grow at the same rate.
 */
@media (min-width: 1921px) {
  html {
    --wide-scale: calc(100vw / 1920px);
    --wide-y-unit: calc(100svh / 1080 / var(--wide-scale));
    --wide-canvas-height: calc(1080 * var(--wide-y-unit));

    width: 1920px;
    min-width: 1920px;
    max-width: 1920px;
    overflow-x: hidden;
    zoom: calc(100vw / 1920px);
  }

  body {
    width: 1920px;
    min-width: 1920px;
    max-width: 1920px;
    overflow-x: hidden;
  }

  body.projects-page-body {
    height: var(--wide-canvas-height);
    overflow: hidden;
  }

  .hero,
  .projects-page {
    height: var(--wide-canvas-height);
    min-height: var(--wide-canvas-height);
  }

  .home-preview {
    min-height: var(--wide-canvas-height);
  }

  .menu-panel {
    width: 1920px;
    min-height: var(--wide-canvas-height);
    height: var(--wide-canvas-height);
  }

  .menu-panel__links {
    top: calc(212 * var(--wide-y-unit));
  }

  .menu-panel__links a {
    font-size: calc(96 * var(--wide-y-unit));
  }

  .menu-panel__stripe {
    top: calc(865 * var(--wide-y-unit));
  }

  .hero {
    --hero-title-top: calc(296 * var(--wide-y-unit));
    --hero-art-top: calc(623 * var(--wide-y-unit));
  }

  .hero-mark,
  .hover-mask__image {
    width: calc(1017 * var(--wide-y-unit));
  }

  .projects-page {
    --project-frame-offset: 96px;
  }

  .about-page {
    --about-frame-offset: 96px;
    min-height: calc(7193px + var(--wide-canvas-height));
  }

  .about-closing {
    height: var(--wide-canvas-height);
    padding-top: calc(322 * var(--wide-y-unit));
  }

  .about-closing p + p {
    margin-top: calc(134 * var(--wide-y-unit));
  }

  .about-closing a {
    margin-top: calc(108 * var(--wide-y-unit));
  }

  .contact-page {
    --contact-frame-offset: 96px;
    min-height: calc(2523 * var(--wide-y-unit));
  }

  .contact-kicker,
  .project-kicker,
  .about-kicker,
  .process-kicker {
    top: calc(227 * var(--wide-y-unit));
  }

  .contact-intro h1,
  .project-title {
    top: calc(360 * var(--wide-y-unit));
  }

  .contact-intro__copy,
  .project-copy {
    top: calc(519 * var(--wide-y-unit));
  }

  .project-animation {
    top: calc(612 * var(--wide-y-unit));
  }

  .contact-direct-label {
    top: calc(898 * var(--wide-y-unit));
  }

  .contact-email {
    top: calc(938 * var(--wide-y-unit));
  }

  .contact-form-label {
    top: calc(980 * var(--wide-y-unit));
  }

  .contact-form h2 {
    top: calc(1349 * var(--wide-y-unit));
  }

  .contact-field--name {
    top: calc(1435 * var(--wide-y-unit));
  }

  .contact-field--company {
    top: calc(1551 * var(--wide-y-unit));
  }

  .contact-field--email {
    top: calc(1675 * var(--wide-y-unit));
  }

  .contact-field--phone {
    top: calc(1799 * var(--wide-y-unit));
  }

  .contact-message {
    top: calc(1480 * var(--wide-y-unit));
  }

  .contact-submit {
    top: calc(1902 * var(--wide-y-unit));
  }

  .contact-closing {
    top: calc(1917 * var(--wide-y-unit));
  }

  .process-page {
    --process-frame-offset: 96px;
    --process-flow-shift: 184px;
    min-height: 5504px;
  }
}