/* Contact and its confirmation: the form, and the caption of the signal figure. */

/* the first screen carries a form, so the headline is a little smaller and the column a little narrower */
.hero--form h1 { font-size: clamp(38px, 4.6vw, 78px); margin-bottom: clamp(16px, 2.4vh, 26px); }
.hero--form .lede { margin-bottom: clamp(22px, 3.2vh, 34px); }
.hero--form .hero__copy { padding-top: calc(var(--bar) + 36px); padding-bottom: 36px; }

.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 16px; width: min(100%, 560px); margin: 0; }
.field { min-width: 0; }
.field--wide, .form__foot, .form__error { grid-column: 1 / -1; }
.field__label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2); }
.field__label b { font-weight: 500; color: var(--fg-3); transition: color .2s; }
.field__label .opt { margin-left: auto; font-size: 10.5px; letter-spacing: .1em; color: var(--fg-3); }
.field:focus-within .field__label { color: var(--fg); }
.field:focus-within .field__label b { color: var(--signal); }             /* the station in focus, as on the line */

.field__input { display: block; width: 100%; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--ink-1); background: color-mix(in srgb, var(--ink-0) 78%, transparent); color: var(--fg); font: 400 16px/1.4 var(--sans); -webkit-appearance: none; appearance: none; transition: border-color .2s; }
.field__input:hover { border-color: var(--fg-3); }
.field__input:focus-visible { border-color: var(--fg); outline-offset: 2px; }
textarea.field__input { min-height: 120px; padding: 13px 14px; line-height: 1.5; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: var(--signal); }

.select { position: relative; }
.select::after { content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1px solid var(--fg-2); border-bottom: 1px solid var(--fg-2); transform: rotate(45deg); pointer-events: none; }
.select select { padding-right: 42px; cursor: pointer; text-overflow: ellipsis; }
.select select:has(option[value=""]:checked) { color: var(--fg-2); }
.select option { background: var(--ink-2); color: var(--fg); }

.field__error, .form__error { margin: 8px 0 0; font: 500 11.5px/1.5 var(--mono); letter-spacing: .04em; color: var(--signal); }
.form__error { margin: 0; padding: 12px 14px; border: 1px solid var(--signal); border-radius: 2px; }
.field__error:empty, .form__error:empty { display: none; }

/* the trap field: off the page, out of the tab order, never announced */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.form__foot .btn { min-width: 132px; justify-content: space-between; }
.form__hint { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--fg-3); }

/* caption of the figure: a narrow block at the lower right, clear of the line */
.legend--signal { width: min(300px, 24vw); }
.legend--signal .mono { color: var(--fg-2); }
.legend--signal p.note { min-height: 0; }

.sec--after .sec__head { margin-bottom: 0; }

@media (max-width: 1180px) {
  .form { grid-template-columns: minmax(0, 1fr); width: min(100%, 42vw); }
}
@media (max-width: 860px) {
  .hero--form .fig, .page-sent .fig { height: 40svh; min-height: 280px; }
  .hero--form .hero__copy .lede { margin-top: 22px; }
  .hero__copy .form { order: 6; width: auto; margin: 0 var(--gutter) 48px; }
  .legend--signal { width: auto; }
}