/* The map is the postcard now, not a small graphic beside one. */
.map-surface {
  background: #0b4948;
}
.map-layout {
  grid-template-columns: minmax(230px, .48fr) minmax(440px, 1.42fr);
  gap: clamp(28px, 5vw, 80px);
  width: min(1280px, calc(100% - 54px));
}
.map-copy { align-self: center; }
.map-copy h2 {
  max-width: 7ch;
  margin-bottom: 1rem;
  font-size: clamp(2.45rem, 4.2vw, 4.5rem);
  line-height: .9;
}
.map-copy > p:not(.tiny) { max-width: 19rem; font-size: 1.03rem; }
.map-plot {
  width: min(100%, 68dvh, 645px);
  aspect-ratio: 100 / 122;
  filter: none;
  border: 9px solid #f4dfa7;
  border-radius: 3px 8px 4px 6px;
  box-shadow: 11px 13px 0 rgba(2, 35, 35, .32), 0 0 0 1px rgba(83, 55, 30, .45);
  background: #168aa0 url("kona-painted-coast.png") center / cover;
}
.chart-paper { fill: transparent; }
.chart-fiber { fill: url(#paper-fiber); opacity: .22; }
.chart-land,
.chart-coast,
.chart-lava,
.chart-reef { opacity: 0; }
.map-plot .ocean-word,
.map-plot .north { fill: rgba(245, 231, 187, .84); font: 3px Inika, serif; letter-spacing: .16em; }
.map-plot .north { font-size: 3.2px; }
.route-leg { stroke: #dc614c; stroke-width: 1.25; stroke-dasharray: 1.5 2.1; }
.map-anchor line { stroke: #69472c; stroke-width: .45; stroke-dasharray: .9 .8; }
.map-anchor circle { fill: #f9dc86; stroke: #60432e; stroke-width: .45; }
.map-pin b {
  width: 44px;
  height: 44px;
  border: 2px solid #284944;
  background: #f9dd87;
  box-shadow: 2px 3px 0 rgba(52, 49, 33, .22);
}
.map-pin.is-mystery b { color: #214a48; background: #f5d879; border-style: solid; box-shadow: 2px 3px 0 rgba(52, 49, 33, .22); }
.map-pin.is-mystery:nth-child(even) b { transform: rotate(0); }
.map-pin:nth-child(1) b { border-radius: 50% 46% 52% 40%; background: #efb965; }
.map-pin:nth-child(2) b { border-radius: 42% 55% 42% 57%; background: #d9e4a4; }
.map-pin:nth-child(3) b { border-radius: 56% 43% 54% 40%; background: #9fd9d1; }
.map-pin:nth-child(4) b { border-radius: 45% 55% 46% 54%; background: #f0d0aa; }
.map-pin:nth-child(5) b { border-radius: 54% 45% 54% 43%; background: #f5c78a; }
.map-pin b strong { right: -6px; bottom: -5px; border-color: #284944; background: #fff2c8; color: #264440; }
.map-pin.is-visited b { background: #ffefba; color: #244846; }
.map-pin.is-visited span {
  padding: 4px 6px;
  border: 1px solid rgba(248, 229, 175, .75);
  border-radius: 0;
  background: #264b48;
  box-shadow: 2px 2px 0 rgba(35, 52, 41, .22);
}
.map-car {
  width: 19px;
  height: 10px;
  border: 1px solid #4a3324;
  border-radius: 3px 4px 2px 2px;
  background: #dc614c;
  font-size: 0;
  filter: drop-shadow(1px 2px 0 rgba(42, 43, 29, .25));
}
.map-car::before,
.map-car::after { content: ""; position: absolute; }
.map-car::before { top: -5px; left: 4px; width: 10px; height: 6px; border: 1px solid #4a3324; border-bottom: 0; border-radius: 3px 4px 0 0; background: #f9dd87; }
.map-car::after { left: 2px; bottom: -3px; width: 4px; height: 4px; border-radius: 50%; background: #2b3935; box-shadow: 11px 0 #2b3935; }

@media (max-width: 760px) {
  .map-layout { gap: 1rem; width: min(100% - 26px, 560px); }
  .map-plot { width: min(100%, 470px); border-width: 7px; box-shadow: 7px 9px 0 rgba(2, 35, 35, .3); }
  .map-copy h2 { max-width: none; margin-top: .25rem; font-size: clamp(2.35rem, 13vw, 3.8rem); }
  .map-copy > p:not(.tiny) { max-width: 29rem; }
}

.map-detour {
  position: absolute;
  z-index: 5;
  left: 4%;
  bottom: 4%;
  min-height: 44px;
  padding: 9px 13px;
  border: 2px dashed #62392d;
  background: #f2a77a;
  color: #263d3b;
  box-shadow: 3px 4px 0 rgba(24, 45, 38, .35);
  transform: rotate(-5deg);
  cursor: pointer;
  font: 700 .88rem Inika, serif;
}
.map-detour:hover { transform: rotate(-2deg); }
.map-detour:focus-visible,
.map-replay:focus-visible { outline: 3px solid #ff755f; outline-offset: 4px; }
.map-replay {
  display: block;
  min-height: 44px;
  margin-top: .4rem;
  padding: 5px 2px;
  border: 0;
  background: none;
  color: #ffe2a8;
  cursor: pointer;
  font: 700 .88rem Inika, serif;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.map-detour[hidden],
.map-replay[hidden] { display: none; }
@media (max-width: 760px) {
  .map-detour { left: 5%; bottom: 5%; font-size: .8rem; }
  .map-copy { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
  .map-replay { order: -1; align-self: flex-end; min-height: 44px; margin: 0 0 .2rem; padding: 0 2px; font-size: .88rem; }
}

/* Bigger emoji on the map pins so they read at a glance. */
.map-pin b em { font-size: 1.45rem; font-style: normal; line-height: 1; }