:root {
  --ink: #1f2230;
  --muted: #5f6270;
  --bubble: #fffaf0;
  --bubble-blue: #e4f6ff;
  --sea: #2296b8;
  --deep-sea: #076381;
  --sun: #ffd276;
  --sunset: #f6a76f;
  --rock: #746b62;
  --sand: #f4d89a;
  --merci-purple: #5d3678;
  --comic-font: 20px;
  --comic-font-small: 17px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f0efe9;
  color: var(--ink);
  font-family: Avenir Next, Avenir, Helvetica, Arial, sans-serif;
}

main {
  display: grid;
  gap: 20px;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 20px;
}

.slide {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(0 0 0 / 14%);
}

.panel-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0%) 0 55%, rgb(255 248 232 / 38%) 100%),
    radial-gradient(circle at 50% 8%, rgb(255 248 232 / 18%), transparent 44%);
}

.ocean {
  background:
    linear-gradient(180deg, rgb(255 219 151 / 88%) 0 28%, transparent 29%),
    radial-gradient(circle at 50% 20%, rgb(255 231 171 / 94%) 0 8%, transparent 9%),
    linear-gradient(180deg, #64bfd0 0 36%, var(--sea) 37% 72%, var(--deep-sea) 100%);
}

.shore {
  background:
    linear-gradient(180deg, #ffcf89 0 30%, #61bfd2 31% 60%, #1d87a8 61% 100%);
}

.message-card {
  background:
    linear-gradient(180deg, #ffd28a 0 24%, #8ed3df 25% 58%, #f6d69d 59% 100%);
}

.message-sun {
  position: absolute;
  left: 9%;
  top: 9%;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe18a;
  box-shadow: 0 0 48px rgb(255 219 134 / 86%);
}

.message-water {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  height: 30%;
  background:
    repeating-linear-gradient(
      172deg,
      rgb(255 255 255 / 22%) 0 10px,
      rgb(255 255 255 / 0%) 10px 34px
    ),
    linear-gradient(180deg, #5ebed1, #167d9d);
}

.message-rocks {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6%;
  height: 34%;
  border-radius: 52% 48% 0 0;
  background:
    radial-gradient(circle at 20% 12%, #9f8568 0 9%, transparent 10%),
    radial-gradient(circle at 42% 18%, #806855 0 8%, transparent 9%),
    radial-gradient(circle at 70% 12%, #9a7b5f 0 10%, transparent 11%),
    linear-gradient(180deg, #8d735b, #5f4c3f);
}

.tortoise-presenter {
  position: absolute;
  z-index: 5;
  left: -4%;
  top: 0;
  width: 41%;
  height: auto;
  clip-path: inset(0 0 30% 0);
  filter: drop-shadow(0 12px 16px rgb(0 0 0 / 18%));
  pointer-events: none;
}

.pier-tag {
  background:
    linear-gradient(180deg, #ffe1a5 0 30%, #62bfd2 31% 62%, #f6d69d 63% 100%);
}

.sun {
  position: absolute;
  left: 42%;
  top: 8%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 42px rgb(255 226 149 / 90%);
}

.sun.small {
  left: 72%;
  top: 10%;
  width: 11%;
}

.dolphin {
  position: absolute;
  width: 18%;
  height: 8%;
  border-radius: 60% 45% 50% 48%;
  background: linear-gradient(180deg, #8fd2e2, #2f7791);
  transform: rotate(-8deg);
}

.dolphin::before {
  content: "";
  position: absolute;
  right: -12%;
  top: 18%;
  width: 26%;
  height: 62%;
  clip-path: polygon(0 50%, 100% 0, 76% 50%, 100% 100%);
  background: #2f7791;
}

.dolphin::after {
  content: "";
  position: absolute;
  left: 40%;
  top: -38%;
  width: 18%;
  height: 50%;
  clip-path: polygon(0 100%, 48% 0, 100% 100%);
  background: #2f7791;
}

.dolphin-1 {
  left: 12%;
  top: 50%;
}

.dolphin-2 {
  left: 42%;
  top: 44%;
  transform: rotate(7deg);
}

.dolphin-3 {
  left: 68%;
  top: 54%;
  transform: rotate(-12deg);
}

.dolphin.large {
  width: 30%;
  height: 12%;
}

.dolphin-left {
  left: 12%;
  top: 48%;
}

.dolphin-right {
  left: 58%;
  top: 55%;
}

.dolphin-center {
  left: 34%;
  top: 54%;
}

.rock {
  position: absolute;
  background: linear-gradient(180deg, #8c8176, var(--rock));
  border-radius: 55% 48% 28% 30%;
}

.distant-rock {
  right: 6%;
  top: 65%;
  width: 24%;
  height: 10%;
}

.listening-rock {
  right: 8%;
  top: 68%;
  width: 22%;
  height: 11%;
}

.memory-rock {
  left: 58%;
  top: 48%;
  width: 23%;
  height: 16%;
}

.sea-lion-rock {
  left: 16%;
  top: 54%;
  width: 68%;
  height: 19%;
}

.rock span,
.sea-lion {
  position: absolute;
  display: block;
  width: 16%;
  height: 65%;
  bottom: 45%;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #9d7b54, #6d4e37);
}

.rock span:nth-child(1),
.sea-lion.one {
  left: 18%;
}

.rock span:nth-child(2),
.sea-lion.two {
  left: 43%;
}

.rock span:nth-child(3),
.sea-lion.three {
  left: 67%;
}

.sea-lion.alert {
  transform: translateY(-10%) rotate(-6deg);
}

.ripple {
  position: absolute;
  left: 24%;
  top: 70%;
  width: 52%;
  height: 8%;
  border: 5px solid rgb(255 255 255 / 55%);
  border-left: 0;
  border-right: 0;
  border-radius: 50%;
}

.bubble {
  position: absolute;
  z-index: 2;
  --tail-x: 24px;
  --tail-rotate: 45deg;
  max-width: 42%;
  padding: 13px 15px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: var(--bubble);
  font-size: var(--comic-font);
  line-height: 1.1;
  font-weight: 800;
}

.bubble::after {
  content: "";
  position: absolute;
  left: var(--tail-x);
  bottom: -14px;
  width: 22px;
  height: 22px;
  border-right: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  background: inherit;
  transform: rotate(var(--tail-rotate));
}

.tail-left {
  --tail-x: 24px;
  --tail-rotate: 45deg;
}

.tail-right {
  --tail-x: calc(100% - 50px);
  --tail-rotate: 45deg;
}

.bubble::before {
  content: attr(data-speaker);
  display: block;
  margin-bottom: 5px;
  color: var(--merci-purple);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dolphin-bubble {
  background: var(--bubble-blue);
}

.sea-lion-bubble {
  background: #fff3d5;
}

.sunshine-bubble {
  background: #fff1bd;
}

.meeko-bubble {
  background: #e9e9ef;
}

.caption {
  position: absolute;
  z-index: 2;
  left: 6%;
  right: 6%;
  bottom: 4%;
  padding: 10px 14px;
  border: 3px dashed rgb(31 34 48 / 48%);
  border-radius: 14px;
  background: rgb(255 255 255 / 78%);
  color: var(--muted);
  font-weight: 800;
}

.s1-a { left: 5%; top: 6%; max-width: 30%; font-size: var(--comic-font-small); }
.s1-b { left: 36%; top: 6%; max-width: 30%; font-size: var(--comic-font-small); }
.s1-c { right: 5%; top: 26%; max-width: 29%; font-size: var(--comic-font-small); }
.s2-a { right: 0.75%; top: 6%; max-width: 47.5%; font-size: var(--comic-font-small); }
.s2-a::after {
  left: 24px;
  bottom: -14px;
}
.s2-b { display: none; }
.s3-a { left: 5%; top: 8%; max-width: 30%; }
.s3-b { right: 5%; top: 8%; max-width: 45%; font-size: var(--comic-font-small); }
.s3-c { display: none; }
.s4-a { left: 4%; top: 7%; max-width: 45%; font-size: var(--comic-font-small); }
.s4-b { right: 4%; top: 7%; max-width: 43%; font-size: var(--comic-font-small); }
.s4-c { display: none; }
.s5-a { left: 4%; top: 5%; max-width: 30%; font-size: var(--comic-font-small); }
.s5-b { left: 35%; top: 7%; max-width: 30%; font-size: var(--comic-font-small); }
.s5-c { right: 4%; top: 12%; max-width: 29%; font-size: var(--comic-font-small); }
.s6-a { left: 7%; top: 9%; max-width: 33%; }
.s6-b { right: 1.5%; top: 6%; max-width: 34%; font-size: var(--comic-font-small); }
.s6-b::after {
  left: 24px;
  bottom: -14px;
}
.s8-a { left: 5%; top: 7%; max-width: 42%; font-size: var(--comic-font-small); }
.s8-b { right: 5%; top: 19%; max-width: 29%; font-size: var(--comic-font-small); }
.s8-b::after {
  left: 28px;
  bottom: -14px;
}

.card {
  position: absolute;
  z-index: 4;
  left: 8%;
  right: 8%;
  bottom: 4%;
  padding: 4.5% 6% 4%;
  border: 5px solid var(--ink);
  border-radius: 18px;
  background: #fffaf0;
  text-align: center;
}

.card .eyebrow {
  margin: 0 0 8px;
  color: var(--merci-purple);
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.card h1 {
  margin: 0 0 12px;
  color: var(--merci-purple);
  font-size: 39px;
  line-height: 1;
}

.card p {
  margin: 0 auto 14px;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 850;
}

.card .address-line {
  margin-bottom: 0;
  font-size: 18px;
}

.pier {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 14%;
  background:
    repeating-linear-gradient(90deg, #79563d 0 9%, #8e684c 9% 18%),
    #79563d;
  border-top: 5px solid #5a3f2e;
}

.cat {
  position: absolute;
  bottom: 28%;
  width: 12%;
  height: 16%;
  border-radius: 48% 48% 38% 38%;
}

.cat::before,
.cat::after {
  content: "";
  position: absolute;
  top: -16%;
  width: 32%;
  height: 30%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: inherit;
}

.cat::before {
  left: 14%;
}

.cat::after {
  right: 14%;
}

.meeko {
  right: 34%;
  background: #2d3039;
}

.sunshine {
  right: 18%;
  background: #f0b948;
}

.tiny-ocean {
  position: absolute;
  left: 0;
  right: 0;
  top: 36%;
  height: 18%;
  background: rgb(21 131 165 / 42%);
}

.tiny-dolphin,
.tiny-sea-lion {
  position: absolute;
  display: block;
}

.tiny-dolphin {
  left: 18%;
  top: 32%;
  width: 9%;
  height: 28%;
  border-radius: 60%;
  background: #2f7791;
}

.tiny-sea-lion {
  right: 18%;
  top: 18%;
  width: 16%;
  height: 42%;
  border-radius: 50% 50% 35% 35%;
  background: #8b6748;
}

@media (min-width: 900px) {
  main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  :root {
    --comic-font: 15px;
    --comic-font-small: 14px;
  }

  main {
    padding: 10px;
  }

  .slide {
    border-width: 4px;
    border-radius: 14px;
  }

  .bubble {
    padding: 9px 10px;
    border-width: 3px;
    border-radius: 14px;
  }

  .bubble::after {
    width: 16px;
    height: 16px;
    border-right-width: 3px;
    border-bottom-width: 3px;
  }

  .bubble::before {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .card h1 {
    font-size: 25px;
  }

  .card p {
    font-size: 12px;
  }

  .card .eyebrow,
  .card .address-line {
    font-size: 12px;
  }

  .message-card .card {
    bottom: 4%;
    padding: 4%;
  }

  .message-card .card .eyebrow {
    margin-bottom: 5px;
  }

  .message-card .card h1 {
    margin-bottom: 8px;
  }

  .message-card .card p {
    margin-bottom: 8px;
  }

  .s3-b {
    top: 8%;
    max-width: 43%;
    font-size: 12px;
  }
}