:root {
  --cream: #f3ecd9;
  --paper: #f8f2e3;
  --forest: #244936;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--forest);
  background: radial-gradient(circle at 15% 20%, rgb(255 255 255 / 55%), transparent 35%), var(--cream);
}

.splash {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
}

.splash-card {
  width: min(1400px, 100%);
  overflow: hidden;
  border: 1px solid rgb(36 73 54 / 14%);
  border-radius: 2rem;
  background: var(--paper);
  box-shadow: 0 24px 70px rgb(58 72 55 / 16%);
}

.desktop-art {
  display: block;
  width: 100%;
  height: auto;
}

.mobile-art { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 760px) {
  body { background: #f7f0df; }

  .splash {
    display: block;
    padding: 0;
  }

  .splash-card {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .desktop-art { display: none; }

  .mobile-art {
    position: relative;
    display: flex;
    min-height: max(100svh, 820px);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    background:
      radial-gradient(circle at 12% 8%, rgb(255 255 255 / 72%), transparent 28%),
      linear-gradient(
        180deg,
        #f8f1e2 0%,
        #f8f1e2 38%,
        #eef0e8 51%,
        #dce8ea 63%,
        #c8dfe8 100%
      );
    isolation: isolate;
  }

  .mobile-title {
    position: relative;
    z-index: 4;
    width: min(92vw, 440px);
    height: auto;
    margin-top: clamp(2.5rem, 8svh, 4.25rem);
  }

  .mobile-location {
    position: relative;
    z-index: 4;
    width: min(82vw, 390px);
    height: auto;
    margin-top: 0.15rem;
  }

  .mobile-island {
    position: relative;
    z-index: 2;
    width: min(82vw, 380px);
    height: auto;
    margin-top: 1rem;
    transform: translateX(3vw);
    filter: drop-shadow(0 14px 18px rgb(67 91 56 / 15%));
  }

  .mobile-landscape {
    position: absolute;
    z-index: 3;
    bottom: -1px;
    left: -12%;
    width: 125%;
    max-width: none;
    height: auto;
    pointer-events: none;
  }
}

@media (max-width: 380px) {
  .mobile-title { margin-top: 2.25rem; }
  .mobile-island { width: 79vw; }
}

@media (max-width: 760px) and (max-height: 740px) {
  .mobile-art { min-height: 100svh; }
  .mobile-title { width: 85vw; margin-top: 1.5rem; }
  .mobile-location { width: 78vw; margin-top: 0; }
  .mobile-island { width: 69vw; margin-top: 0.4rem; }
  .mobile-landscape { width: 116%; }
}