@media (min-width: 761px) {
  .town-spot {
    gap: 11px;
    padding: 11px 14px 11px 16px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .town-spot::before {
    width: 11px;
    height: 11px;
  }

  .town-spot b {
    font-size: 13px;
  }

  .town-spot span {
    font-size: 11px;
  }

  .town-region {
    position: absolute;
    z-index: 1;
    color: #fff;
    font-family: 'Bungee', 'DM Mono', sans-serif;
    font-size: clamp(42px, 5.8vw, 96px);
    line-height: .9;
    letter-spacing: .04em;
    opacity: .92;
    -webkit-text-stroke: 1px rgba(17, 24, 39, .2);
    pointer-events: none;
    text-shadow: 1px 2px 0 rgba(255,255,255,.75);
  }

  .region-gifu {
    left: 14%;
    top: 10%;
    transform: rotate(-5deg);
    text-shadow: 1px 2px 0 #b9e06c, 2px 4px 0 #83bb58, 3px 6px 0 #5b9449, 4px 8px 0 #3f713d, 5px 10px 0 #2c5c34;
  }

  .region-nagoya {
    right: 7%;
    top: 28%;
    transform: rotate(-6deg);
    text-shadow: 1px 2px 0 #a3d6f3, 2px 4px 0 #61addb, 3px 6px 0 #3787bf, 4px 8px 0 #1d639b, 5px 10px 0 #124b7c;
  }
}

@media (max-width: 760px) {
  .town-region { display: none; }
}

/* Keep the town still and make the region names read as landmarks. */
.town-map > img { animation: none; }
.town-spark { animation: none; }

@media (min-width: 761px) {
  .town-region {
    opacity: .88;
    transform-origin: 50% 100%;
    letter-spacing: .015em;
    -webkit-text-stroke: 1px rgba(17, 24, 39, .24);
  }

  .region-gifu {
    left: 15%;
    top: 13%;
    transform: perspective(260px) rotateX(18deg) rotateZ(-7deg) scaleY(.88);
    text-shadow: 1px 2px 0 #c7e985, 2px 4px 0 #92c465, 3px 6px 0 #679e52, 4px 8px 0 #477d43, 5px 10px 0 #315f36, 6px 12px 0 #264c2f;
  }

  .region-nagoya {
    right: 9%;
    top: 34%;
    transform: perspective(260px) rotateX(18deg) rotateZ(-7deg) scaleY(.88);
    text-shadow: 1px 2px 0 #b4e0f5, 2px 4px 0 #70b8e0, 3px 6px 0 #4b96ca, 4px 8px 0 #2877ad, 5px 10px 0 #1a5f94, 6px 12px 0 #114b7c;
  }
}