/* join/css/join.css - REQUEST ACCESS (/join/), over the World's stylesheet (world/css/world.css), 2026-10-20.
 *
 * A letter on parchment before the gate at night, the same card as Contact Us (contactus/css/contact.css) so the two
 * open doors look like one house. Phones first (16px gutters, no sideways scroll); every control at least 44px tall
 * and its words 16px or more, so an iPhone does not zoom the page when a field is tapped.
 */

body.join { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }

/* THE BAR'S WAY BACK: the same pill as Contact Us's */
.bar__back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); color: #fff; text-decoration: none; font-size: 16px; font-weight: bold; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.bar__back:hover { border-color: var(--gold); background: rgba(30, 36, 80, .7); }
.bar__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The brand words give way to the pill on phones (world.css hides them only under 380px; the pill is wider here) */
@media (max-width: 480px) { body.join .bar__brand span { display: none; } }

.join__main {
  position: relative; flex: 1 0 auto; isolation: isolate; overflow: hidden; overflow: clip; /* clip: nothing can scroll it */
  display: flex; justify-content: center; align-items: flex-start;
  padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) 48px;
}
.join__art {
  position: absolute; inset: 0; z-index: -2;
  background: url("../../assets/backgrounds/painted/web/room-gate.jpg") 50% 30% / cover no-repeat;
}
.join__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(11, 18, 51, .35) 0%, rgba(7, 11, 30, .78) 60%),
    linear-gradient(180deg, rgba(7, 11, 30, .55) 0%, rgba(7, 11, 30, .82) 70%, var(--ink) 100%);
}

/* ---------------------------------------------------------------------------------------------- the letter */
.letter {
  width: 100%; max-width: 680px; padding: 28px 18px 26px; border-radius: 18px; outline: none;
  background: linear-gradient(180deg, rgba(251, 243, 231, .97), rgba(240, 226, 200, .97));
  color: #2A1D3D; border: 1px solid rgba(255, 231, 160, .8);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 0 6px rgba(183, 121, 31, .12), inset 0 0 60px rgba(183, 121, 31, .12);
}
@media (min-width: 700px) { .letter { padding: 38px 44px 34px; } }
.letter__kicker {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 6px;
  font-size: 16px; font-weight: bold; letter-spacing: .22em; text-transform: uppercase; color: #8A5A12; text-align: center; white-space: nowrap;
}
.letter__kicker .rule { flex: 0 0 auto; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #B7791F, transparent); }
@media (max-width: 480px) { .letter__kicker { gap: 8px; letter-spacing: .1em; } .letter__kicker .rule { width: 16px; } }
@media (max-width: 340px) { .letter__kicker .rule { display: none; } }
.letter__title {
  margin: 0; text-align: center; font-family: var(--title-font); font-size: clamp(36px, 8vw, 56px); line-height: 1.05;
  letter-spacing: .02em; color: #241A3D;
}
.letter__lead { margin: 12px auto 18px; max-width: 34em; text-align: center; font-size: 17px; color: #45385C; }
.letter__aside, .letter__friend {
  margin: 0 auto 20px; max-width: 34em; padding: 10px 14px; border-radius: 12px; text-align: center; font-size: 16px;
  color: #45385C; background: rgba(183, 121, 31, .1); border: 1px solid rgba(183, 121, 31, .25);
}
.letter__friend { background: rgba(46, 125, 80, .12); border-color: rgba(46, 125, 80, .35); color: #1E4D33; font-weight: bold; }
.letter__aside a, .form__note a { color: #7A4A0A; text-decoration: underline; text-underline-offset: 2px; }
.letter__warn { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #FFE4E8; color: #7A1426; font-weight: bold; }

/* ---------------------------------------------------------------------------------------------- the form */
.form { display: flex; flex-direction: column; gap: 16px; }
.form__pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .form__pair { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .socials legend { font-size: 16px; font-weight: bold; color: #241A3D; }
.field__why { font-weight: normal; font-size: 16px; color: #6B5E80; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1px solid #C9B48A;
  background: #FFFCF6; color: #1B1430; font-family: var(--font); font-size: 17px; line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(60, 40, 10, .12); transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #8C7FA0; }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #6B5E80 50%), linear-gradient(135deg, #6B5E80 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #B7791F; box-shadow: 0 0 0 3px rgba(245, 194, 66, .45); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #C2334B; box-shadow: 0 0 0 3px rgba(194, 51, 75, .2); }
.field__err { margin: 0; font-size: 16px; font-weight: bold; color: #A8203A; }
.field__err:empty { display: none; }
.field__count { margin: 0; align-self: flex-end; font-size: 16px; color: #6B5E80; font-variant-numeric: tabular-nums; }
.field__count.is-near { color: #A8203A; font-weight: bold; }

.socials { margin: 0; padding: 14px 14px 16px; border-radius: 14px; border: 1px solid rgba(183, 121, 31, .35); background: rgba(255, 252, 246, .45); min-width: 0; }
.socials legend { padding: 0 6px; }
.socials__why { margin: 2px 0 0; padding: 0 6px; line-height: 1.4; }
.socials .form__pair { margin-top: 6px; }

/* THE TICKS: the whole row is the tap target, at least 48px tall */
.tick {
  display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #C9B48A; background: #FFFCF6; cursor: pointer;
}
.tick input { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: #8A5A12; cursor: pointer; }
.tick label { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: bold; color: #241A3D; cursor: pointer; line-height: 1.4; }
.tick__why { display: block; margin-top: 4px; font-size: 16px; font-weight: normal; color: #5A4D70; }
.tick.is-bad { border-color: #C2334B; box-shadow: 0 0 0 3px rgba(194, 51, 75, .2); }
.tick__err { margin-top: -8px; }

/* THE ROBOT CHECK: Cloudflare's widget, centred, with room for its own height (65px, or 140 in its compact size) */
.robot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.robot__box { min-height: 65px; max-width: 100%; display: flex; justify-content: center; }

/* THE TRAP: off the page for people, still in the form for a robot */
.form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__note { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(183, 121, 31, .12); font-size: 16px; color: #45385C; }
.form__problem { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FFE4E8; color: #7A1426; font-size: 16px; font-weight: bold; }
.form__send { align-self: center; min-width: 240px; min-height: 52px; font-size: 17px; }
@media (max-width: 360px) { .form__send { min-width: 0; width: 100%; } }
.form__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.form__send:disabled { opacity: .65; cursor: progress; transform: none; }

/* ---------------------------------------------------------------------------------------------- every other state */
.sent { text-align: center; padding: 6px 0 2px; outline: none; }
.sent__seal {
  width: 76px; height: 76px; margin: 14px auto 10px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #E05A6E, #8E1830 70%); box-shadow: 0 8px 22px rgba(142, 24, 48, .45), inset 0 -4px 10px rgba(0, 0, 0, .25);
}
.sent__seal svg { width: 38px; height: 38px; fill: none; stroke: #FFE7A0; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.sent__seal.is-wait { background: radial-gradient(circle at 35% 30%, #8B7BD8, #3B2A78 70%); box-shadow: 0 8px 22px rgba(59, 42, 120, .45), inset 0 -4px 10px rgba(0, 0, 0, .25); }
.sent__title { font-family: var(--title-font); font-size: clamp(28px, 6vw, 38px); color: #241A3D; margin: 0 0 8px; }
.sent__line { margin: 6px auto; max-width: 30em; font-size: 17px; color: #45385C; }
.sent .form__problem { margin: 12px auto 0; max-width: 30em; }
.sent__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }
.sent__actions .btn--sm { font-size: 16px; }
.sent .btn--glass { color: #241A3D; background: rgba(255, 255, 255, .55); border-color: #C9B48A; }
.sent .btn--glass:hover { border-color: #B7791F; background: #fff; }
.sent .sent__danger { color: #7A1426; border-color: #D9A0AA; }
.sent .sent__danger:hover { border-color: #A8203A; }
.sent button:disabled { opacity: .65; cursor: progress; transform: none; }

/* ---------------------------------------------------------------------------------------------- the foot */
.join__foot { padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--muted); font-size: 16px; }
.join__foot a { color: var(--gold-hi); display: inline-block; padding: 10px 2px; }
.join__nw { white-space: nowrap; } /* a link keeps the dot after it, so no line starts with a dot */