/* Contact page (/contact). Uses brand.css tokens; nothing here is shared. */

.contact { padding: clamp(48px, 8vw, 104px) 0 clamp(64px, 9vw, 120px); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas: "intro card" "after card";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 7vw, 112px);
  row-gap: 32px;
}
.contact-intro { grid-area: intro; }
.contact-card { grid-area: card; align-self: start; }
.contact-after { grid-area: after; align-self: start; padding-top: 8px; }

.contact h1.display { font-size: clamp(2.5rem, 5.2vw, 4.1rem); margin: 0 0 20px; max-width: 12ch; }
.contact .lede { max-width: 44ch; margin-bottom: 36px; }

.contact-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 440px; }
.contact-facts div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.contact-facts dt { font: 500 0.78rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.contact-facts dd { margin: 0; font: italic 400 1rem/1.5 var(--serif); color: var(--ink-2); }

.contact-alt { font: 400 1.05rem/1.5 var(--serif); margin-bottom: 10px; }
.contact-alt a { color: var(--ink); }
.contact-op { font-size: 0.84rem; line-height: 1.6; color: var(--ink-3); max-width: 46ch; margin: 0; }

/* ---------- the card ---------- */
.contact-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(24px, 3.4vw, 44px);
  box-shadow: 0 1px 0 rgba(20, 32, 27, 0.04), 0 40px 80px -56px rgba(20, 32, 27, 0.45);
}
/* A length of pink tape across the top-left corner, as on a brief. */
.contact-card::before {
  content: ""; position: absolute; left: 28px; top: -1px; width: 64px; height: 4px;
  background: var(--tape); border-radius: 0 0 1px 1px;
}

.field { margin-bottom: 22px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field label { display: block; font: 500 0.92rem/1.3 var(--sans); margin-bottom: 8px; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); font-size: 0.84rem; margin-left: 4px; }
.field input, .field textarea, .field select {
  width: 100%;
  font: 400 1rem/1.45 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--stone-2);
  border-radius: 2px;
  padding: 12px 14px;
  min-height: 50px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field textarea { resize: vertical; min-height: 168px; display: block; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: #fff; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(168, 52, 76, 0.18);
}
.field [aria-invalid="true"] { border-color: var(--tape-ink); background: #fffafa; }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
}

/* Topic hint: reserved height so changing topic never shifts the form. */
.hint { margin: 8px 0 0; min-height: 3em; font: italic 400 0.92rem/1.5 var(--serif); color: var(--ink-3); }
.field-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 6px; min-height: 1.5em; }
.count { margin-left: auto; font: 400 0.8rem/1 var(--mono); font-feature-settings: "tnum"; color: var(--ink-3); white-space: nowrap; }
.count.near { color: var(--tape-ink); }
.err { margin: 6px 0 0; font-size: 0.88rem; line-height: 1.4; color: var(--tape-ink); }
.field-foot .err { margin: 0; }
.form-err {
  margin: 0 0 20px; padding: 12px 16px; font-size: 0.94rem;
  background: #fdf0f2; border-left: 3px solid var(--tape-ink); color: var(--ink);
}
.form-err a { color: inherit; }

/* Honeypot: off-screen for people, still in the form for bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.actions .btn { min-width: 196px; justify-content: center; }
.actions .btn[aria-busy="true"] { cursor: progress; }
.actions .btn[aria-busy="true"] .arr { animation: c-nudge 0.9s var(--ease) infinite; }
@keyframes c-nudge { 50% { transform: translateX(4px); } }
.small { margin: 0; font-size: 0.86rem; color: var(--ink-3); }
.small a { color: var(--ink-2); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; cursor: pointer; }

/* ---------- sent ---------- */
.contact-done { text-align: left; padding: 8px 0 4px; outline: none; }
.contact-done h2 { font: 400 clamp(1.8rem, 3vw, 2.3rem)/1.1 var(--display); margin: 20px 0 10px; }
.contact-done p { color: var(--ink-2); }
.contact-done #contact-done-text { font: 400 1.12rem/1.5 var(--serif); color: var(--ink); max-width: 46ch; overflow-wrap: anywhere; }
.tick circle { fill: none; stroke: var(--green); stroke-width: 2; }
.tick path { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .contact-form, .contact-done { transition: opacity 240ms var(--ease); }
  .contact-card.is-leaving .contact-form { opacity: 0; }
  .contact-done.is-in { animation: c-in 320ms var(--ease-out) both; }
  .contact-done.is-in .tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: c-draw 400ms var(--ease-out) 80ms forwards; }
  .contact-done.is-in .tick path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: c-draw 200ms var(--ease-out) 480ms forwards; }
  @keyframes c-in { from { opacity: 0; transform: translateY(6px); } }
  @keyframes c-draw { to { stroke-dashoffset: 0; } }
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "card" "after"; grid-template-rows: auto; }
  .contact .lede { margin-bottom: 28px; }
  .contact-facts { display: none; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
  .contact-card { padding: 22px 18px 24px; margin: 0 calc(var(--gut) * -0.25); }
}