/* contactus/css/contact.css - CONTACT US (/contactus/), over the World's stylesheet (world/css/world.css).
 *
 * A letter on parchment over the village at night: the Herd's painting behind a veil, the World's bar on top, the
 * form in one card. 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.contact { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }

/* THE BAR'S WAY BACK: the same pill as the guide's and the Hub's (world/css/guide.css, hub/css/hub.css) */
.bar__back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 231, 160, .35); background: rgba(10, 14, 40, .55); color: #fff; text-decoration: none; font-size: 14px; 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; }

.contact__main {
  position: relative; flex: 1 0 auto; isolation: isolate; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
  padding: calc(84px + env(safe-area-inset-top, 0px)) var(--gutter) 48px;
}
.contact__art {
  position: absolute; inset: 0; z-index: -2;
  background: url("../../assets/backgrounds/painted/web/room-village.jpg") 50% 30% / cover no-repeat;
}
.contact__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 22px 26px; border-radius: 18px;
  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: 13px; font-weight: bold; letter-spacing: .3em; text-transform: uppercase; color: #8A5A12; text-align: center;
}
.letter__kicker .rule { flex: 0 0 auto; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #B7791F, transparent); }
.letter__title {
  margin: 0; text-align: center; font-family: var(--title-font); font-size: clamp(38px, 8vw, 56px); line-height: 1.05;
  letter-spacing: .02em; color: #241A3D;
}
.letter__lead { margin: 12px auto 22px; max-width: 34em; text-align: center; font-size: 17px; color: #45385C; }
.letter__aside {
  margin: -8px auto 22px; max-width: 34em; padding: 10px 14px; border-radius: 12px; text-align: center; font-size: 15px;
  color: #45385C; background: rgba(183, 121, 31, .1); border: 1px solid rgba(183, 121, 31, .25);
}
.letter__aside 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: 16px; }
@media (min-width: 620px) { .form__pair { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 16px; font-weight: bold; color: #241A3D; }
.field__why { font-weight: normal; font-size: 14px; 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 textarea { min-height: 170px; 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; min-height: 0; font-size: 15px; font-weight: bold; color: #A8203A; }
.field__err:empty { display: none; }
.field__count { margin: 0; align-self: flex-end; font-size: 14px; color: #6B5E80; font-variant-numeric: tabular-nums; }
.field__count.is-near { color: #A8203A; font-weight: bold; }

/* 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: 15px; 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; }
.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; }

/* ---------------------------------------------------------------------------------------------- sent */
.sent { text-align: center; padding: 6px 0 2px; outline: none; }
.sent__seal {
  width: 76px; height: 76px; margin: 4px 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__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__ref {
  display: inline-block; margin: 6px 0 10px; padding: 10px 18px; border-radius: 12px; border: 2px dashed #B7791F;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 24px; font-weight: bold; letter-spacing: .12em; color: #241A3D; background: #FFF6DE;
  user-select: all;
}
.sent__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; }
.sent .btn--glass { color: #241A3D; background: rgba(255, 255, 255, .55); border-color: #C9B48A; }
.sent .btn--glass:hover { border-color: #B7791F; background: #fff; }

/* ---------------------------------------------------------------------------------------------- the foot */
.contact__foot { padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--muted); font-size: 14px; }
.contact__foot a { color: var(--gold-hi); }