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

body {
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  touch-action: none;
}

.page {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100vw;
  height: 100vh;
}

.copy {
  display: block;
  background: #fff;
  position: relative;
  z-index: 0;
}

.copy__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
}

.visual {
  --image-bleed: clamp(23px, 2.25vw, 45px);
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  width: calc(100% + var(--image-bleed));
  margin-left: calc(var(--image-bleed) * -1);
  background: #000;
  clip-path: polygon(
    6% 0,
    100% 0,
    100% 100%,
    3% 100%,
    3% 98.5%,
    8% 98.5%,
    8% 97.8%,
    1% 97.8%,
    1% 96.1%,
    5% 96.1%,
    5% 94.9%,
    11% 94.9%,
    11% 94.2%,
    2% 94.2%,
    2% 91.6%,
    7% 91.6%,
    7% 90.8%,
    4% 90.8%,
    4% 88.7%,
    12% 88.7%,
    12% 87.1%,
    0% 87.1%,
    0% 84.9%,
    6% 84.9%,
    6% 84.3%,
    2% 84.3%,
    2% 81.5%,
    9% 81.5%,
    9% 80.6%,
    5% 80.6%,
    5% 78.2%,
    13% 78.2%,
    13% 77.6%,
    3% 77.6%,
    3% 74.8%,
    10% 74.8%,
    10% 73.9%,
    1% 73.9%,
    1% 72.7%,
    6% 72.7%,
    6% 70.1%,
    14% 70.1%,
    14% 69.4%,
    4% 69.4%,
    4% 66.3%,
    8% 66.3%,
    8% 65.8%,
    2% 65.8%,
    2% 62.6%,
    12% 62.6%,
    12% 61.9%,
    5% 61.9%,
    5% 60.4%,
    0% 60.4%,
    0% 57.8%,
    7% 57.8%,
    7% 57.2%,
    3% 57.2%,
    3% 54.1%,
    11% 54.1%,
    11% 53.4%,
    6% 53.4%,
    6% 51.7%,
    15% 51.7%,
    15% 50.9%,
    1% 50.9%,
    1% 48.1%,
    5% 48.1%,
    5% 47.3%,
    9% 47.3%,
    9% 44.8%,
    2% 44.8%,
    2% 43.9%,
    13% 43.9%,
    13% 42.1%,
    4% 42.1%,
    4% 39.2%,
    8% 39.2%,
    8% 38.5%,
    0% 38.5%,
    0% 35.6%,
    6% 35.6%,
    6% 35.1%,
    3% 35.1%,
    3% 32.4%,
    12% 32.4%,
    12% 31.7%,
    5% 31.7%,
    5% 29.9%,
    10% 29.9%,
    10% 27.1%,
    1% 27.1%,
    1% 26.5%,
    7% 26.5%,
    7% 23.6%,
    14% 23.6%,
    14% 22.8%,
    2% 22.8%,
    2% 20.7%,
    6% 20.7%,
    6% 19.4%,
    11% 19.4%,
    11% 16.9%,
    3% 16.9%,
    3% 16.1%,
    9% 16.1%,
    9% 13.7%,
    0% 13.7%,
    0% 12.9%,
    5% 12.9%,
    5% 10.2%,
    13% 10.2%,
    13% 9.4%,
    2% 9.4%,
    2% 7.5%,
    8% 7.5%,
    8% 5.1%,
    4% 5.1%,
    4% 4.3%,
    12% 4.3%,
    12% 2.1%,
    6% 2.1%
  );
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
}

#text-stage {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  body {
    overflow: auto;
    touch-action: auto;
  }

  .page {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 50vh;
    min-height: 100vh;
  }

  .copy {
    order: 1;
  }

  .visual {
    order: 2;
    width: 100%;
    margin-left: 0;
    clip-path: none;
  }

  .copy__inner {
    width: 100%;
  }
}