/* Ornate frame stays decorative; the native button retains its accessible label. */
#join.circle-button {
  position: relative;
  isolation: isolate;
  flex: 0 0 215px;
  min-height: 55px;
  padding: 0 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff0d8;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .025em;
  text-shadow: 0 2px 2px #180000;
  white-space: nowrap;
  cursor: pointer;
}
#join.circle-button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -17px -7px;
  background: url('./circle-button.svg') center / 100% 100% no-repeat;
  pointer-events: none;
  transition: filter .15s ease;
}
#join.circle-button:hover:not(:disabled)::before {filter: brightness(1.25)}
#join.circle-button:active:not(:disabled)::before {filter: brightness(.9)}
#join.circle-button:focus-visible {outline: 2px solid #ffd7a4; outline-offset: 5px}
#join.circle-button:disabled {opacity: .6; cursor: wait}
@media (max-width: 540px) {
  #join.circle-button {flex: auto; width: min(100%, 290px); align-self: center; margin: 10px 0 6px}
}
@media (prefers-reduced-motion: reduce) {
  #join.circle-button::before {transition: none}
}