/* The existing foreground wave (z-index 9) overlaps the boat (z-index 8). */
body[data-homepage] .sea-boat {
  --boat-waterline-depth: clamp(14px, 2vh, 22px);
  bottom: calc(clamp(42px, 7vh, 76px) - var(--boat-waterline-depth));
  filter: drop-shadow(0 7px 6px rgba(3, 42, 49, .2));
}

@media (max-width: 680px) {
  body[data-homepage] .sea-boat {
    --boat-waterline-depth: clamp(14px, 2vh, 18px);
    bottom: calc(5vh - var(--boat-waterline-depth));
  }
}

@media (max-width: 680px) and (max-height: 760px) {
  body[data-homepage] .sea-boat {
    --boat-waterline-depth: 12px;
    bottom: calc(3.5vh - var(--boat-waterline-depth));
  }
}