:root {
  color: #1f1a17;
  background: #fff;
  font-family: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; background: #fff; }

.join-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 1fr);
  min-height: 100svh;
  max-width: 1540px;
  margin: 0 auto;
  padding: 32px;
  gap: 56px;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 44px 26px 44px 42px;
}

h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
}

.brand-mark {
  display: block;
  width: min(250px, 48vw);
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.intro-copy { margin-top: clamp(4rem, 9vw, 8.5rem); }

h1 {
  font-size: clamp(3.9rem, 6.2vw, 6.8rem);
  line-height: .93;
  letter-spacing: -0.065em;
}

.intro-copy > p {
  max-width: 33rem;
  margin: 2.1rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 1.35;
}

.form-frame {
  min-height: 260px;
  margin-top: 2.7rem;
  border: 1px solid #b4a99d;
  border-top: 4px solid #b44922;
  padding: 26px;
}

/* MailerLite inserts the consent field after the page has loaded. */
.form-frame .ml-form-checkboxRow label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.form-frame .ml-form-checkboxRow input[type="checkbox"] {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
}

.form-frame .ml-form-checkboxRow .ml-form-checkboxRow--label {
  margin: 0 !important;
}

.archive-image {
  min-height: calc(100svh - 64px);
  overflow: hidden;
  background: #e0d6c7;
}

.archive-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 860px) {
  .join-page { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .intro { max-width: none; padding: 36px 24px 48px; }
  .intro-copy { margin-top: 4.5rem; }
  .form-frame { padding: 19px; }
  .archive-image { min-height: 56svh; }
}