html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
      }

      .preview {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        overflow: hidden;
        background: #6e0800;
        transition: background-color 180ms ease-in-out;
      }

      .preview > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .preview:hover,
      .preview:focus-visible {
        background: #f7f7f7
        ;
      }

      .site-nav {
        position: absolute;
        z-index: 2;
        inset: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
        color: #fff;
        transition: color 180ms ease-in-out;
      }

      .site-nav a {
        color: inherit;
        font: 600 0.95rem/1.2 Arial, sans-serif;
        text-decoration: none;
      }

      .site-nav .brand {
        display: flex;
        align-items: center;
        font-size: 1.2rem;
        letter-spacing: 0.08em;
      }

      .site-nav .brand img {
        display: block;
        width: auto;
        height: 40px;
        object-fit: contain;
      }

      .site-nav-links {
        display: flex;
        align-items: center;
        gap: clamp(1rem, 3vw, 2rem);
      }

      .preview:hover .site-nav,
      .preview:focus-visible .site-nav {
        color: #6e0800;
      }

      .preview .hover-image {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 180ms ease-in-out;
      }

      .preview:hover .hover-image,
      .preview:focus-visible .hover-image {
        opacity: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .preview,
        .preview .hover-image {
          transition: none;
        }
      }