/* Doppel · /join pre-registration form. Uses site.css tokens. */
.join{flex:1;padding:clamp(28px,5vh,64px) 0 96px}
.join .wrap{max-width:560px}
.join-copy{text-align:center;margin-bottom:38px}
.join h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6vw,4rem);line-height:1.02;letter-spacing:-.015em;margin:14px 0 16px}
.join h1 em{font-style:normal;color:var(--lavender-dark)}
.join .intro{font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:44ch;margin:0 auto}
/* the overprint mark, centred under the heading (overrides site.css absolute placement) */
.join-copy .overprint{--w:250px;--r:75px;position:relative;right:auto;top:auto;transform:none;margin:30px auto 0;pointer-events:none}
@media (max-width:560px){.join-copy .overprint{--w:196px;--r:60px;margin-top:26px}}

.wl{max-width:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.row{margin-bottom:16px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.row.two{grid-template-columns:1fr}}

.field{display:block;margin-bottom:16px}
.field > span{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.field > span em{font-style:normal;color:var(--sage);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.82rem;margin-left:6px}
.row.two .field{margin-bottom:0}

input[type=text],input[type=email],select{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--bone-2);border:1px solid var(--bone-3);border-radius:10px;
  padding:14px 16px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
input::placeholder{color:var(--smoke)}
input:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(54,101,99,.16)}
select{cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23272445' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

/* MBTI collapsible */
.mbti{border:1px solid var(--bone-3);border-radius:12px;background:var(--bone-2);overflow:hidden;margin-bottom:20px}
.mbti > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.mbti > summary::-webkit-details-marker{display:none}
.mbti > summary > span{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--smoke)}
.mbti > summary > span em{font-style:normal;color:var(--sage);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.82rem;margin-left:6px}
.mbti > summary .chev{color:var(--smoke);transition:transform .2s;flex-shrink:0}
.mbti[open] > summary{border-bottom:1px solid var(--bone-3)}
.mbti[open] > summary .chev{transform:rotate(180deg)}
.mbti-body{padding:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{
  display:flex;flex-direction:column;gap:1px;cursor:pointer;text-align:left;font-family:var(--sans);
  background:var(--bone);border:1px solid var(--bone-3);border-top:2px solid var(--fam,var(--bone-3));border-radius:9px;padding:9px 11px 10px;
  transition:border-color .14s,background .14s,transform .14s;
}
.card b{font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;color:var(--fam,var(--ink));line-height:1.1}
.card span{font-size:.72rem;color:var(--smoke)}
.card:hover{border-color:var(--fam,var(--ink-2));transform:translateY(-1px)}
.card[aria-pressed=true]{background:var(--fam,var(--thread));border-color:var(--fam,var(--thread))}
.card[aria-pressed=true] b,.card[aria-pressed=true] span{color:var(--bone)}
.fam-a{--fam:#6E3AB0}
.fam-d{--fam:#366563}
.fam-s{--fam:#272445}
.fam-e{--fam:#24504E}
.hint{min-height:1.3em;margin-top:14px;font-size:.95rem;color:var(--ink-2);text-align:center}
.hint b{font-family:var(--serif);font-weight:500;font-style:normal;color:var(--lavender-dark)}
.hint.fam-a b{color:#6E3AB0}
.hint.fam-d b{color:#366563}
.hint.fam-s b{color:#272445}
.hint.fam-e b{color:#24504E}

/* submit + messaging */
.submit{
  width:100%;font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer;
  background:var(--ink);color:var(--bone);border:0;border-radius:999px;padding:16px 20px;
  transition:background .15s;margin-top:4px;
}
.submit:hover{background:var(--teal-dark)}
.submit:disabled{opacity:.6;cursor:default}
.msg{min-height:1.3em;margin:16px 0 0;font-size:.95rem;font-weight:500;text-align:center;color:var(--ink-2)}
.msg.ok{color:var(--thread-deep)}
.msg.err{color:var(--thread-deep)}
.consent{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2);text-align:center;line-height:1.6}
.consent a{text-decoration-color:var(--teal)}

@media (prefers-reduced-motion:reduce){.card,.submit,.chev{transition:none}}