/* pages/contact — the letter form (docs/DESIGN.md §6, field spec §9).
   Left: the headline, the promise about replies, the desk. Right: the form, or the received state.
   One still under the aside. White ground, hairlines, one accent — the same page furniture as the
   home page, with the fields carrying all the weight. Scoped under .contact-page. Guest vocabulary only. */

.contact-page { background: var(--bg); --page-top: clamp(2.75rem, 5vw, 5.5rem); }
.contact { padding-block: var(--page-top) var(--section-gap); }
.contact__grid { row-gap: clamp(2.5rem, 5vw, 3.5rem); }

/* ---- Aside: who reads this, and how long it takes ---------------------------------------------- */
.contact__sticky { display: flex; flex-direction: column; align-items: flex-start; }
.contact__title { margin: clamp(.75rem, 2vw, 1.5rem) 0 0; max-width: 9ch; font-size: var(--t-display-l); line-height: .98; letter-spacing: -.025em; }
.contact__promise { margin-block-start: var(--gap); color: var(--fg); max-width: 26ch; }
.contact__desk { margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem); display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); width: 100%; }
.contact__desk-note { color: var(--fg-2); max-width: 38ch; }
.contact__ledger { width: 100%; }
.contact__ledger .ledger__val { font-size: var(--t-body); text-align: right; }
.contact__ledger .ledger__val a { overflow-wrap: anywhere; }
.contact__plate { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* Desktop ledger: the aside in columns 1–6 row 1, the form in 7–13 across both rows, the still
   under the aside. One asymmetry: the form is taller than the column beside it. */
@media (min-width: 64em) {
  .contact__aside { grid-row: 1; }
  .contact__main { grid-row: 1 / span 2; padding-block-start: .35rem; padding-inline-start: calc(var(--gap) * 1.5); }
  .contact__plate { grid-column: 1 / 6; grid-row: 2; margin-block-start: 0; align-self: start; }
}
@media (max-width: 63.98em) {
  .contact__plate { max-width: 32rem; }
}

/* ---- The form ---------------------------------------------------------------------------------- */
.contact__form { gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.contact__form .field__input { color: var(--fg); }
/* the letter: grows with what is written, no native resize grip */
.contact__form textarea.contact__body { resize: none; min-height: 9lh; }
@supports (field-sizing: content) { .contact__form textarea.contact__body { field-sizing: content; } }
/* "optional" beside a label: the same size and tracking as the label, lighter, after a dot, so it
   reads as part of the label rather than as a typo */
.contact__form .field__label .req {
  display: inline; vertical-align: baseline; margin-inline-start: .5em;
  font-size: inherit; font-weight: 400; letter-spacing: inherit; text-transform: inherit; color: var(--fg-3);
}
.contact__form .field__label .req::before { content: "·"; margin-inline-end: .5em; }

/* fieldset reset: hairline rows carry the structure, not a box */
.contact__kinds { border: 0; padding: 0; margin: 0; min-width: 0; display: block; }
.contact__legend { display: block; padding: 0; margin-block-end: .75rem; }
.contact__choices .check { grid-template-columns: auto 1fr; gap: 1.1rem; padding-block: 1.1rem; }
.contact__choices .check input { margin-block-start: .4em; }
.contact__choices .check input:checked { border-color: var(--mark); }
.contact__choices .check input:checked::before { background: var(--mark); }
.contact__kind-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contact__kind-hint { font-size: var(--t-small); color: var(--fg-3); line-height: 1.45; }
.contact__choices .check:has(input:checked) .contact__kind-hint { color: var(--fg-2); }
.contact__kinds.is-invalid .contact__choices .check:first-child { border-block-start-color: var(--fg); }
.contact__kinds .field__error { margin-block-start: .6rem; }

/* send row: a hairline carrying the accent dot, the text button, the disclosure */
.contact__send { display: flex; flex-direction: column; gap: var(--gap); }
.contact__send-rule { position: relative; height: 1px; background: var(--line); container-type: inline-size; }
.contact__send-dot {
  position: absolute; left: 0; top: 50%; width: 6px; height: 6px; background: var(--accent-bright);
  transform: translate(0, -50%); opacity: 0; transition: opacity 300ms var(--ease-out);
}
.contact__send-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap) clamp(1.5rem, 3vw, 2.5rem); }
.contact__send-note { max-width: 34ch; }
.contact__form.is-sending .contact__send-dot { opacity: 1; animation: dot-travel 1400ms var(--ease-slow) forwards; }
.contact__form.is-sending .contact__submit { color: var(--fg-3); pointer-events: none; animation: none; }
.contact__form.is-sending .contact__send-note { color: var(--fg-4); }
@keyframes dot-travel { to { transform: translate(calc(100cqw - 6px), -50%); } }

/* ---- Received ---------------------------------------------------------------------------------- */
.contact__received { display: flex; flex-direction: column; gap: var(--gap); max-width: var(--measure); }
.contact__received-mark { color: var(--mark); margin-block-end: .5rem; }
.contact__check { width: 48px; height: 48px; }
/* upright, in the accent: colour carries it, and there is no second family on the site */
.contact-page .form-ok, .contact__received-line {
  font-family: var(--font-sans); font-style: normal; font-weight: 600;
  font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.01em; color: var(--mark);
  max-width: 16ch; text-wrap: balance;
}
.contact__received-note { color: var(--fg-2); max-width: var(--measure-lead); }
.contact__received-rule { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); }
.contact__received-row { padding-block-start: .25rem; }

/* ---- Reduced motion / Still: the dot arrives, it just does not travel --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact__form.is-sending .contact__send-dot { animation: none; transform: translate(calc(100cqw - 6px), -50%); }
}
html[data-still] .contact__form.is-sending .contact__send-dot { animation: none; transform: translate(calc(100cqw - 6px), -50%); }