/* Join Our Circle — email signup, quiet editorial statement matching the
   rest of the page. Ivory background, continuing the alternating rhythm.
   No cards, no decorative pattern, no imagery — kept isolated from
   hero.css / decks.css / abusua-pa.css / reviews-press.css / footer.css.
   Real <form> with native HTML validation; not wired to a mailing
   service endpoint yet (see index.html comment for what's left to do). */

.circle {
  background: #F6F2EA;
  padding: clamp(96px, 11vw, 160px) 24px;
  text-align: center;
}

.circle-inner {
  max-width: 560px;
  margin: 0 auto;
}

.circle-heading {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  color: #15130D;
}

/* Slightly more presence than .circle-copy (italic, full opacity, a touch
   larger) so it reads as a lead-in line, but it stays the same serif
   family and well under heading size/weight so it never competes with
   .circle-heading. */
.circle-lead {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  color: #15130D;
  opacity: 1;
}

.circle-copy {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: #15130D;
  opacity: 0.82;
}

.circle-copy:last-of-type {
  margin-bottom: clamp(36px, 4.2vw, 52px);
}

.circle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.circle-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 18px);
  max-width: 480px;
  margin: 0 auto;
}

.circle-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.circle-field {
  position: relative;
  min-width: 0;
}

.circle-input {
  width: 100%;
  min-width: 0;
  padding: clamp(13px, 1.2vw, 16px) clamp(16px, 1.8vw, 20px);
  border: 1px solid rgba(21, 19, 13, 0.22);
  border-radius: 8px;
  background: #FFFFFF;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  color: #15130D;
}

.circle-input::placeholder {
  color: #15130D;
  opacity: 0.5;
}

.circle-input:focus-visible {
  outline: 2px solid #15130D;
  outline-offset: 2px;
}

/* Neutralize browser default "invalid" chrome (a red glow/border some
   browsers apply to an empty required field or an in-progress email
   address) so the approved appearance holds until an actual submit
   attempt triggers the browser's own native validation bubble. */
.circle-input:invalid {
  box-shadow: none;
}

.circle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #B88B40;
  color: #15130D;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 14px);
  padding: clamp(13px, 1.2vw, 16px) clamp(22px, 2.4vw, 30px);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.circle-button:focus-visible {
  outline: 2px solid #15130D;
  outline-offset: 3px;
}

/* Understated line under the form — quieter than .circle-copy, same
   restraint as the footer copyright and the Reviews & Press group labels. */
.circle-disclaimer {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #15130D;
  opacity: 0.55;
}

@media (max-width: 560px) {
  .circle-fields {
    grid-template-columns: 1fr;
  }
  .circle-button { width: 100%; }
}

@media (max-width: 480px) {
  .circle { padding: clamp(72px, 16vw, 110px) 22px; }
}