@media (min-width: 1800px) {
  :root {
    --nav-width: min(58vw, 1100px);
  }

  .section-inner {
    width: min(1540px, 100%);
  }
}

@media (max-width: 1180px) {
  :root {
    --nav-width: min(86vw, 940px);
  }

  .brand-text {
    display: none;
  }

  .split-layout,
  .split-layout.reverse,
  .vfx-layout,
  .lab-layout,
  .maker-layout {
    grid-template-columns: 1fr;
  }

  .split-layout.reverse .copy-block {
    order: -1;
  }

  .project-card.large {
    min-height: 360px;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-width: calc(100vw - 22px);
    --nav-base-h: 58px;
    --lid-h: 46px;
    --page-pad: 22px;
  }

  .mirror-nav {
    top: calc(10px + var(--mobile-browser-top, 0px) + env(safe-area-inset-top, 0px));
  }

  .nav-links {
    display: none;
  }

  .unlock-button {
    font-size: 9px;
    padding: 9px 11px;
  }

  .section {
    padding-top: 112px;
  }

  .project-grid,
  .lab-grid {
    grid-template-columns: 1fr;
  }

  .project-card,
  .project-card.large {
    min-height: 280px;
    grid-row: auto;
    grid-column: auto;
  }

  .hero-figure {
    min-height: 280px;
  }
}

@media (max-width: 599px) {
  .section-lines {
    display: none;
  }

  .section::before {
    opacity: .24;
  }

  .brand-mark {
    width: 34px;
  }

  .base-reflection nav span:nth-child(n+4) {
    display: none;
  }

  h1 {
    font-size: clamp(42px, 15vw, 72px);
  }

  h2 {
    font-size: clamp(34px, 12vw, 58px);
  }

  p,
  .lead {
    font-size: 17px;
  }
}

@media (hover: none), (pointer: coarse) {
  body,
  body a,
  body button {
    cursor: auto;
  }

  .fake-cursor,
  .mirror-cursor {
    display: none !important;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --nav-base-h: 52px;
    --lid-h: 38px;
  }

  .mirror-nav {
    top: 8px;
  }

  .section {
    padding-top: 96px;
  }
}