.hero-stone {
  -webkit-mask: url('assets/home/stone-mask.svg') center / contain no-repeat;
  mask: url('assets/home/stone-mask.svg') center / contain no-repeat;
  left: 50%;
  z-index: 3;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (min-width: 701px) {
  .hero-title {
    justify-content: center;
    padding: 0 10vw;
    line-height: .67;
    flex-wrap: wrap;
    max-width: 100vw;
    align-content: center;
    transform: translate3d(calc(var(--mouse-x, 0) * -9px), calc(var(--hero-p, 0) * -42px + var(--mouse-y, 0) * -8px), 0);
  }

  .hero-card {
    top: auto;
    width: clamp(260px, 20vw, 410px);
    max-width: none;
    bottom: -24vh;
    opacity: 0;
    transition: opacity 1.1s ease .55s, filter .45s ease;
    filter: saturate(.72) sepia(.12);
  }

  .loaded .hero-card {
    opacity: 1;
  }

  .hero-card img {
    height: clamp(520px, 47vw, 820px);
    max-height: none;
    object-fit: cover;
  }

  .hero-card-left {
    left: -3.5vw;
    transform: translate3d(calc(var(--hero-p, 0) * -19vw + var(--mouse-x, 0) * -14px), calc(var(--hero-p, 0) * 20vh + var(--mouse-y, 0) * 9px), 0) rotate(-8deg);
  }

  .hero-card-right {
    right: -3.5vw;
    transform: translate3d(calc(var(--hero-p, 0) * 19vw + var(--mouse-x, 0) * -14px), calc(var(--hero-p, 0) * 20vh + var(--mouse-y, 0) * 9px), 0) rotate(8deg);
  }

  .hero-card:hover {
    filter: saturate(1) sepia(0);
  }

  .hero-card figcaption {
    font: 28px/1 var(--serif);
    margin: -42px 28px 0;
    position: relative;
    color: var(--ink);
  }

  .hero-stone {
    transform: translate3d(calc(-50% + var(--mouse-x, 0) * 12px), calc(var(--hero-p, 0) * -16vh + var(--mouse-y, 0) * 8px), 0) rotate(calc(var(--hero-p, 0) * 5deg));
  }

  .hero-orbit {
    position: absolute;
    z-index: 4;
    width: 88vw;
    height: 88vw;
    left: 27vw;
    top: -52vw;
    border: 1px solid rgba(232, 228, 220, .2);
    border-radius: 50%;
    pointer-events: none;
    transform: translate3d(calc(var(--mouse-x, 0) * 9px), calc(var(--hero-p, 0) * 11vh), 0) rotate(calc(var(--hero-p, 0) * 18deg));
  }

  .desktop-nav {
    gap: 12px;
  }

  .desktop-nav a {
    min-width: 150px;
    padding: 12px 28px;
    border-radius: 9px;
    text-align: center;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
  }

  .menu-button {
    min-width: 150px;
    padding: 12px 24px;
    border-radius: 9px;
    text-align: right;
    background: rgba(255,255,255,.88);
    color: #111;
  }
}

@media (max-width: 700px) {
  .hero-card {
    top: auto;
    bottom: -5vh;
    width: 37vw;
    max-width: none;
    opacity: 0;
    transition: opacity .9s ease .45s;
  }

  .loaded .hero-card { opacity: 1; }
  .hero-card img { height: 56vw; object-fit: cover; }
  .hero-card-left { left: -8vw; transform: translateY(calc(var(--hero-p, 0) * 14vh)) rotate(-8deg); }
  .hero-card-right { right: -8vw; transform: translateY(calc(var(--hero-p, 0) * 14vh)) rotate(8deg); }
  .hero-orbit { position:absolute; width:150vw; height:150vw; left:10vw; top:-75vw; border:1px solid rgba(232,228,220,.18); border-radius:50%; }
}