/* Join the Collective: the native dialog and the raw Flodesk form inside it.
   Same system as the Impact Fund dialog, with the photograph card the Flodesk
   pop-up used: the image runs edge to edge above the form. */

dialog.collective-signup-dialog {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: min(100% - 32px, 580px);
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  /* Explicit positioning avoids Safari pinning both block edges and stretching
     the grid to max-height. `translate` remains separate from the entrance
     transform, so the motion can still be interrupted cleanly. */
  height: auto;
  margin: 0;
  padding: 0;
  translate: -50% -50%;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--espresso, #231a10);
  background: var(--limestone, #e9e2d6);
  border: 0;
  text-align: center;
}

/* Entrance only: a short fade and settle, as the Flodesk pop-up faded in.
   Closing is immediate, so dismissing never waits on an animation. */
dialog.collective-signup-dialog[open] {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
@starting-style {
  dialog.collective-signup-dialog[open] { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* The page behind is dimmed and softened, so the card reads as the one
   thing to attend to; the blur is dropped where the visitor prefers less
   transparency. */
dialog.collective-signup-dialog::backdrop {
  background: rgba(35, 26, 16, 0.44);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 240ms var(--ease-out);
}
@media (prefers-reduced-transparency: reduce) {
  dialog.collective-signup-dialog::backdrop {
    background: rgba(35, 26, 16, 0.6);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@starting-style {
  dialog.collective-signup-dialog[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.collective-signup-dialog[open] { transition-property: opacity; transition-duration: 160ms; }
  @starting-style {
    dialog.collective-signup-dialog[open] { transform: none; }
  }
}

html.collective-signup-open,
html.collective-signup-open body { overflow: hidden; }

/* No JavaScript (or no native dialog): the dialog is shown as a plain block
   at the end of the page, so the form is still reachable and still posts. */
html:not(.zuvani-js) dialog.collective-signup-dialog,
dialog.collective-signup-dialog.is-inline {
  position: static;
  inset: auto;
  display: block;
  width: min(100% - 32px, 580px);
  max-height: none;
  margin: 0 auto clamp(64px, 8vw, 112px);
  overflow: visible;
  translate: none;
}
html:not(.zuvani-js) .collective-signup-dialog__close,
.collective-signup-dialog.is-inline .collective-signup-dialog__close { display: none; }

.collective-signup-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--espresso, #231a10);
  /* Sits on the photograph, so it carries its own ground. */
  background: rgba(243, 237, 224, 0.92);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.collective-signup-dialog__close:active { transform: scale(0.95); }
.collective-signup-dialog__close:focus-visible {
  outline: 2px solid var(--warm-ivory, #f3ede0);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--espresso, #231a10);
}

.collective-signup-dialog__image {
  aspect-ratio: 400 / 226;
  overflow: hidden;
  background: var(--taupe, #b8aa97);
}
.collective-signup-dialog__image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  /* The crop Flodesk used: centred slightly right of and below the middle. */
  object-position: 55% 56%;
}

.collective-signup-dialog__body {
  padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 44px) clamp(28px, 5vw, 40px);
}

.collective-signup-dialog__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: var(--text-heading-3);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  text-wrap: balance;
}
.collective-signup-dialog__intro {
  max-width: 40ch;
  margin: 0 auto 24px;
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  text-wrap: pretty;
}

.collective-signup-raw__form {
  display: grid;
  gap: 20px;
  width: 100%;
  color: var(--espresso);
  text-align: left;
}
.collective-signup-raw__fields { display: grid; gap: 14px; min-width: 0; }
.collective-signup-raw .fd-form-group { min-width: 0; }
.collective-signup-raw .fd-form-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: 400;
}
.collective-signup-raw .fd-form-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 14px 18px;
  color: var(--espresso);
  border: 1px solid var(--espresso);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.collective-signup-raw input[aria-invalid="true"] { border-color: #963c32; }

.collective-signup-raw__interests {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.collective-signup-raw__interests legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--bronze, #8c6240);
  font-size: var(--text-label);
  font-weight: var(--weight-label, 600);
  letter-spacing: var(--tracking-label);
  line-height: 1.5;
  text-transform: uppercase;
}
.collective-signup-raw__interests label,
.collective-signup-raw__consent label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.collective-signup-raw__interests label {
  font-size: var(--text-body-sm);
  line-height: 1.35;
  text-wrap: pretty;
}

/* The shared validation message (public-refinements.js) sits under the
   button. It stays available to screen readers but takes no room until it
   has something to say. */
.collective-signup-raw .public-form-status {
  min-height: 0;
  margin: 0;
  text-align: center;
}
.collective-signup-raw .public-form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.collective-signup-raw__interests input,
.collective-signup-raw__consent input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--espresso);
  cursor: pointer;
}

.collective-signup-raw__consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  color: #3b2d26;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  overflow-wrap: anywhere;
}
.collective-signup-raw__consent label { gap: 8px; }
.collective-signup-raw__consent a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.collective-signup-raw__action { display: grid; }
.collective-signup-raw .fd-btn {
  min-height: 52px;
  padding: 14px 28px;
  color: var(--warm-ivory, #f3ede0);
  background: #3b2d26;
  border: 1px solid var(--bronze, #8c6240);
  border-radius: 0;
  font: inherit;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.collective-signup-raw .fd-btn:active { transform: scale(.97); }
.collective-signup-raw :is(.fd-form-control, input[type="checkbox"], a, .fd-btn):focus-visible {
  outline: 2px solid var(--bronze, #8c6240);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .collective-signup-raw .fd-btn:active,
  .collective-signup-dialog__close:active { transform: none; }
}

/* Wider screens: name and email share a row and the photograph is a little
   shallower, so the whole card, button included, fits a laptop screen. */
@media (min-width: 600px) {
  .collective-signup-raw__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collective-signup-dialog__image { aspect-ratio: 16 / 7; }
}

/* A mouse does not need 44px rows; touch keeps them. */
@media (hover: hover) and (pointer: fine) {
  .collective-signup-raw__interests label,
  .collective-signup-raw__consent label,
  .collective-signup-raw__consent a { min-height: 32px; }
}

/* Compact tablets only: phones keep the full photograph below. */
@media (min-width: 600px) and (max-width: 899px) and (max-height: 760px) {
  .collective-signup-dialog__image { aspect-ratio: 16 / 6; }
}

/* Keep dismissal within reach as the stacked popup scrolls. The negative
   bottom margin cancels the 44px button plus its 12px top gap, preserving the
   existing edge-to-edge photograph and form spacing without a new toolbar.
   Inline/no-JS fallbacks stay hidden; the desktop grid is unchanged. */
@media (max-width: 899px) {
  html.zuvani-js dialog.collective-signup-dialog[open]:not(.is-inline) > .collective-signup-dialog__close {
    position: sticky;
    top: 12px;
    right: auto;
    display: flex;
    margin: 12px 12px -56px auto;
  }
}

/* On phones, let the dialog scroll rather than squeezing its photograph or
   controls to fit. The image's intrinsic ratio preserves the whole group. */
@media (max-width: 599px) {
  dialog.collective-signup-dialog {
    max-width: none;
    border-radius: 12px;
    box-shadow: 0 16px 56px rgb(35 26 16 / 20%);
  }
  .collective-signup-dialog__image { aspect-ratio: auto; }
  .collective-signup-dialog__image img {
    position: static;
    height: auto;
    object-fit: contain;
  }
  .collective-signup-dialog__body { padding: 28px 24px 32px; }
  .collective-signup-dialog__intro { margin-bottom: 28px; }
  .collective-signup-raw__form { gap: 24px; }
  .collective-signup-raw__fields { gap: 18px; }
  .collective-signup-raw .fd-form-control {
    min-height: 52px;
    padding: 12px 14px;
    border-color: var(--warm-stone, #a7947e);
    border-radius: 4px;
    background: rgb(255 255 255 / 22%);
    font-size: max(16px, var(--text-body-sm));
  }
  .collective-signup-raw input[aria-invalid="true"] { border-color: #963c32; }
  .collective-signup-raw__interests legend { margin-bottom: 8px; }
  .collective-signup-raw__interests label {
    align-items: flex-start;
    padding-block: 10px;
    gap: 12px;
    line-height: 1.5;
  }
  .collective-signup-raw__interests label + label {
    border-top: 1px solid rgb(35 26 16 / 10%);
  }
  .collective-signup-raw__interests input { margin-top: 4px; }
  .collective-signup-raw__consent { justify-content: flex-start; }
  .collective-signup-raw__consent label {
    align-items: flex-start;
    padding-block: 8px;
  }
  .collective-signup-raw__consent input { margin-top: 2px; }
  .collective-signup-raw__consent a { margin-left: 26px; }
}

/* Laptop and desktop: the photograph sits beside the form rather than above
   it, so the whole card, button included, fits even a short laptop screen.
   Only the opened modal changes; the inline fallbacks keep the stacked card. */
@media (min-width: 900px) {
  html.zuvani-js dialog.collective-signup-dialog[open]:not(.is-inline) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    width: min(100% - 32px, 880px);
  }
  html.zuvani-js dialog.collective-signup-dialog[open]:not(.is-inline) .collective-signup-dialog__image {
    position: relative;
    aspect-ratio: auto;
  }
  html.zuvani-js dialog.collective-signup-dialog[open]:not(.is-inline) .collective-signup-dialog__image img {
    position: absolute;
    inset: 0;
    /* Preserve the Collective page's right-hand group while compensating for
       the form's much narrower portrait frame, so all three faces remain in view. */
    object-position: 88% center;
  }
  html.zuvani-js dialog.collective-signup-dialog[open]:not(.is-inline) .collective-signup-dialog__body { align-self: center; }
}


/* ---- Post-signup confirmation, mirroring the Blog and Impact Fund treatment ---- */
.collective-signup-return-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  background: var(--warm-ivory, #f3ede0);
}

.collective-signup-confirmation {
  box-sizing: border-box;
  padding: clamp(28px, 5vw, 52px);
  color: var(--espresso, #231a10);
  background: var(--warm-ivory, #f3ede0);
  font-family: var(--font-body, "Cormorant Garamond", Georgia, serif);
  text-align: center;
}

.collective-signup-confirmation--page {
  width: min(100%, 560px);
}

dialog.collective-signup-confirmation {
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  height: fit-content; /* Safari: size to content, never to the viewport */
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--limestone, #e9e2d6);
  border-radius: 4px;
  box-shadow: 0 20px 70px rgb(35 26 16 / 18%);
}

dialog.collective-signup-confirmation:not([open]) {
  display: none;
}

dialog.collective-signup-confirmation::backdrop {
  background: rgb(35 26 16 / 44%);
}

.collective-signup-confirmation .collective-signup-confirmation__mark {
  display: block;
  position: relative;
  width: 80px;
  height: 44px;
  overflow: hidden;
  margin: 0 auto 24px;
}

/* The shared PNG has a transparent canvas around the artwork, whose
   vertical centre is at 44%. Frame the existing asset, without editing it. */
.collective-signup-confirmation__mark img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 224px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -44%);
}

.collective-signup-confirmation .collective-signup-confirmation__eyebrow {
  margin: 0 0 16px;
  color: var(--bronze, #8c6240);
  font-size: var(--text-label, .9rem);
  font-weight: var(--weight-label, 600);
  line-height: 1.5;
  letter-spacing: var(--tracking-label, .18em);
  text-transform: uppercase;
}

.collective-signup-confirmation .collective-signup-confirmation__title {
  max-width: 15ch;
  margin: 0 auto 20px;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: var(--text-heading-3, 2.6rem);
  font-weight: var(--weight-heading, 400);
  line-height: 1.1;
  letter-spacing: var(--tracking-heading, -.015em);
  text-wrap: balance;
}

.collective-signup-confirmation .collective-signup-confirmation__message {
  max-width: 36ch;
  margin: 0 auto 28px;
  color: var(--text-secondary, rgb(35 26 16 / 74%));
  font-size: var(--text-body, 1.2rem);
  line-height: var(--leading-body, 1.5);
  text-wrap: pretty;
}

.collective-signup-confirmation .collective-signup-confirmation__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--content-button-width, 276px);
  max-width: 100%;
  min-height: var(--content-button-height, 46px);
  padding: 8px 16px;
  border: 0;
  border-radius: var(--btn-radius, 999px);
  background: var(--espresso, #231a10);
  color: var(--warm-ivory, #f3ede0);
  font: var(--weight-label, 600) var(--content-button-font, .75rem) / 1.5 var(--font-body, "Cormorant Garamond", Georgia, serif);
  letter-spacing: var(--content-button-tracking, .16em);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.collective-signup-confirmation .collective-signup-confirmation__button:focus-visible {
  outline: 2px solid var(--espresso, #231a10);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .collective-signup-confirmation .collective-signup-confirmation__button:hover {
    background: var(--bronze, #8c6240);
  }
}