/* Signup dialog — deliberately self-contained.
   It appears on every page, including the wine map, which loads style.css rather
   than site.css and uses different custom-property names. So the palette is
   written out literally here (it is fixed by the brand guidelines and never
   changes) and every rule is scoped to .modal. Loading this file is all a page
   needs for the dialog to look right. */

.modal {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #C9BFA8;
  border-radius: 12px;
  background: #FBF5EC;
  color: #2E2620;
  box-shadow: 0 12px 32px rgba(46, 38, 32, 0.12);
  font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
.modal::backdrop { background: rgba(46, 38, 32, 0.45); }

.modal__body { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.modal__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #B5652F;
  margin-bottom: -8px;
}
.modal__body h2 {
  font-family: "Vollkorn", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: #6B2737;
  margin: 0;
}
.modal .field { display: flex; flex-direction: column; gap: 7px; }
.modal .field label { font-size: 13px; font-weight: 700; color: #2E2620; }
.modal .field .hint { font-weight: 400; color: #5A5047; }
.modal .field input,
.modal .field select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  color: #2E2620;
  background: #F3E9DD;
  padding: 11px 14px;
  border: 1px solid #A99E82;
  border-radius: 5px;
}
.modal .form-error {
  font-size: 14px;
  color: #6B2737;
  background: rgba(107, 39, 55, 0.07);
  border: 1px solid rgba(107, 39, 55, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.modal__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #F3E9DD;
  background: #B5652F;
  border: 1px solid #B5652F;
  border-radius: 5px;
  cursor: pointer;
}
.modal__submit:hover { background: #9A5225; border-color: #9A5225; }
.modal .fineprint { font-size: 13px; line-height: 1.6; color: #2E2620; opacity: 0.78; margin: 0; }
.modal .fineprint a { color: #B5652F; }

.modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  color: #5A5047;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.modal__close:hover { color: #6B2737; background: #EFE2D2; }
.modal__close-form { margin: 0; }

.modal :focus-visible { outline: 2px solid #B5652F; outline-offset: 2px; }

@media (max-width: 560px) {
  .modal__body { padding: 26px 20px 24px; }
}