.town-viewer {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--paper);
}
.town-viewer[hidden] {
  display: none;
}
.town-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}
.town-return-bar {
  min-height: 102px;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid rgba(71, 111, 150, 0.24);
  background: #edf4f7;
  box-shadow: 0 -10px 28px rgba(20, 36, 59, 0.1);
  color: #6f7780;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.return-postcard {
  position: relative;
  width: min(520px, 72vw);
  min-height: 74px;
  padding: 12px 110px 12px 20px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(71, 111, 150, 0.46);
  border-radius: 5px;
  background-color: #fffdf7;
  background-image: repeating-linear-gradient(
      0deg,
      transparent 0 20px,
      rgba(103, 151, 190, 0.13) 20px 21px
    ),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(103, 151, 190, 0.11) 20px 21px);
  box-shadow: 0 7px 15px rgba(20, 36, 59, 0.13);
  transform: rotate(-0.35deg);
}
.return-postcard button {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font:
    600 14px/1.25 system-ui,
    sans-serif;
  letter-spacing: 0.03em;
  text-align: left;
}
.return-postmark {
  position: absolute;
  right: 15px;
  top: 12px;
  width: 72px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 92, 76, 0.55);
  border-radius: 50%;
  color: #aa675a;
  font-size: 9px;
  letter-spacing: 0.12em;
  transform: rotate(5deg);
}
.return-route {
  color: #667a8d;
  font-size: 9px;
  letter-spacing: 0.14em;
}
.town-direct {
  color: #667a8d;
  text-decoration: none;
  font-size: 9px;
  letter-spacing: 0.08em;
}
@media (max-width: 700px) {
  .town-return-bar {
    min-height: 104px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 7px;
    justify-content: center;
  }
  .return-postcard {
    width: min(76vw, 420px);
    min-height: 72px;
    padding: 10px 82px 10px 13px;
  }
  .return-postcard button {
    font-size: 12px;
  }
  .return-postmark {
    right: 9px;
    top: 11px;
    width: 62px;
    height: 43px;
    font-size: 8px;
  }
  .return-route {
    font-size: 7px;
  }
  .town-direct {
    max-width: 72px;
    text-align: right;
    font-size: 8px;
  }
}