@layer responsive {
  @media (hover: hover) and (pointer: fine) {
    .button--primary:hover {
      background: var(--color-brand-deep);
    }

    .button--light:hover {
      background: var(--color-white);
    }

    .button--outline:hover {
      background: var(--color-brand);
      color: var(--color-ivory);
    }

    .section--dark .button--outline:hover,
    .section--brand .button--outline:hover {
      background: var(--color-ivory);
      color: var(--color-ink);
    }

    .button--text:hover::after {
      transform: scaleX(1);
    }

    .custom-cursor.is-enabled {
      display: grid;
      place-items: center;
    }
  }

  @media (max-width: 64rem) {
    .editorial-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .grid-span-12,
    .grid-span-8,
    .grid-span-7,
    .grid-span-6 {
      grid-column: span 6;
    }

    .grid-span-5,
    .grid-span-4 {
      grid-column: span 3;
    }

    .split {
      grid-template-columns: 1fr;
      gap: var(--space-7);
    }
  }

  @media (max-width: 48rem) {
    :root {
      --section-space: var(--space-10);
      --header-height: 4.5rem;
    }

    .editorial-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid-span-12,
    .grid-span-8,
    .grid-span-7,
    .grid-span-6,
    .grid-span-5,
    .grid-span-4 {
      grid-column: 1 / -1;
    }

    .form-grid {
      grid-template-columns: 1fr;
    }

    .field--full {
      grid-column: auto;
    }

    .cluster > .button {
      flex: 1 1 100%;
    }

    .dialog {
      width: calc(100% - 1rem);
      max-height: calc(100svh - 1rem);
    }

    .dialog__inner {
      padding: var(--space-8) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    [data-reveal],
    [data-reveal="clip"],
    [data-reveal="line"] {
      clip-path: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .image-zoom img,
    .architectural-rule {
      transform: none !important;
    }
  }

  @media (forced-colors: active) {
    .button,
    .dialog__close,
    .field__control {
      border: 1px solid ButtonText;
    }

    :focus-visible {
      outline: 3px solid Highlight;
    }
  }
}