.contact-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--rule);
  border-top: 0.3rem solid var(--accent);
  color: var(--ink);
  background: var(--paper);
}

.contact-dialog::backdrop {
  background: rgb(37 31 27 / 55%);
}

.contact-dialog h2 {
  margin: 0 2rem 0 0;
  line-height: 1.15;
}

.contact-dialog label {
  display: block;
  font-weight: 700;
}

.contact-dialog input,
.contact-dialog textarea {
  display: block;
  width: 100%;
  margin-bottom: 0.85rem;
  padding: 0.5rem;
  border: 1px solid var(--field-rule);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.contact-dialog textarea {
  resize: vertical;
}

.contact-dialog button {
  cursor: pointer;
  font: inherit;
}

.contact-dialog button[type="submit"] {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
}

.contact-dialog button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.contact-dialog .contact-close {
  position: absolute;
  inset: 0.5rem 0.5rem auto auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
}

.contact-error {
  color: var(--accent);
}