/* Contact (card 1g). Tokens only: sizes are var(--fs-N), yellow lives on .btn-primary alone.
   The kit has no input yet, so the field styles live here (a request for the shell is in the build report). */
.contact {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "intro form" "email form" "next form";
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-8); row-gap: var(--space-6);
  align-items: start;
}
.contact-intro { grid-area: intro; display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); }
.contact-intro .lead { max-width: 34ch; }

.contact-email { grid-area: email; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.contact-label { font-size: var(--fs-8); font-weight: 600; color: var(--muted-dark); }
.contact-email-link {
  display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere;
  font-family: var(--font-display); font-size: var(--fs-4); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--paper); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) { .contact-email-link:hover { color: var(--white); text-decoration-thickness: 3px; } }
.contact-email-link:active { color: var(--white); }

.contact-next { grid-area: next; display: flex; flex-direction: column; gap: var(--space-3); }
.contact-next ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-2); max-width: 40ch; color: var(--text-soft); }
.contact-next li::marker { color: var(--muted-dark); font-weight: 600; }

/* the form: a graphite block one tone step from the ground, paper-coloured fields so every box reads at once */
.contact-form {
  grid-area: form; container-type: inline-size; color-scheme: light;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6); border-radius: var(--r-panel); background: var(--graphite); color: var(--paper);
  --field-error: #FF9C92;   /* the shell has no error colour; this one clears 6:1 on graphite (UNCONFIRMED; 1i may take it into site.css) */
}
.form-intro { font-size: var(--fs-8); color: var(--text-soft); max-width: 62ch; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@container (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label { margin-bottom: var(--space-2); font-size: var(--fs-7); font-weight: 600; line-height: 1.3; color: var(--paper); }
.opt { font-weight: 400; color: var(--muted-dark); }

.input {
  display: block; width: 100%; min-height: 48px; padding: 11px 16px;
  border: 2px solid transparent; border-radius: var(--r-inner);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-6); line-height: 1.35;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
textarea.input { min-height: 144px; resize: vertical; }
.input::placeholder { color: var(--rule-strong); opacity: 1; }   /* a mid tone (5.99:1 on paper): readable, but not the weight of typed text (15.31:1), so an empty box looks empty */
@media (hover: hover) and (pointer: fine) { .input:hover { border-color: var(--muted-dark); } }
.input:focus { border-color: var(--ink); }
.input:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.field.has-error .input { border-color: var(--field-error); box-shadow: 0 0 0 2px var(--field-error); }
.field.has-error .input:focus { border-color: var(--ink); }

.select { position: relative; }
.select .input { padding-right: 48px; cursor: pointer; text-overflow: ellipsis; }
.select::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg);
}

.field-hint { margin-top: var(--space-2); font-size: var(--fs-8); line-height: 1.4; color: var(--muted-dark); }
.field-error { margin: 0; font-size: var(--fs-8); font-weight: 600; line-height: 1.4; color: var(--field-error); }
.field-error:not(:empty) { margin-top: var(--space-2); }

.form-send { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--space-2); }
.form-note { margin-bottom: var(--space-4); font-size: var(--fs-8); line-height: 1.45; color: var(--text-soft); max-width: 52ch; }
.form-status { margin: 0; font-size: var(--fs-8); font-weight: 600; line-height: 1.45; color: var(--paper); max-width: 52ch; }
.form-status:not(:empty) { margin-top: var(--space-4); }
.form-status a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.form-privacy { margin-top: var(--space-4); font-size: var(--fs-8); line-height: 1.45; color: var(--muted-dark); max-width: 52ch; }
.form-privacy a { color: var(--text-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .form-privacy a:hover { color: var(--white); } }

@media (max-width: 899.98px) {
  .contact { column-gap: var(--space-6); }
}
@media (max-width: 759.98px) {
  .contact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "email" "form" "next"; grid-template-rows: auto; row-gap: var(--space-5); }
  .contact-intro { padding-top: var(--space-3); }
  .contact-form { padding: var(--space-5) 20px; border-radius: var(--r-card); }
  .form-send .btn-primary { width: 100%; justify-content: space-between; }
  .contact-next { margin-top: var(--space-3); }
}