/* Contact page: the homepage theme (site.css) plus the form. */
.contact-page .bar {
  background: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
}
.contact-page .bar .btn { display: inline-flex; }

.contact {
  min-height: 100svh;
  max-width: 76rem; margin-inline: auto;
  padding: calc(var(--bar-h) + var(--sc-8)) var(--sc-gutter) var(--sc-8);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sc-8); align-items: start;
}
.contact__intro { display: grid; gap: var(--sc-5); position: sticky; top: calc(var(--bar-h) + var(--sc-8)); }
.contact__kicker { margin: 0; color: var(--coral); }
.contact__title { margin: 0; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.6rem); max-width: 12ch; text-wrap: balance; }
.contact__sub { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); max-width: 34ch; line-height: 1.45; }
.contact__sub strong { color: var(--sc-ink); font-weight: 500; }
.contact__alt { display: grid; gap: var(--sc-2); margin-top: var(--sc-4); color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- form -- */
.form, .sent {
  display: grid; gap: var(--sc-5);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-surface) 78%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px -40px color-mix(in oklab, var(--sc-accent) 40%, transparent);
}
.field { display: grid; gap: var(--sc-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend {
  padding: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.field legend { margin-bottom: var(--sc-2); }
.field legend span { margin-left: 0.6em; letter-spacing: 0.06em; text-transform: none; font-family: var(--sc-font-text); font-weight: 400; opacity: 0.7; }
.field input, .field textarea {
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 28%, transparent);
}
.field [aria-invalid="true"], .field [aria-invalid="true"]:focus { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 24%, transparent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  transition: color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.chip:hover span { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); }
.chip input:checked + span { color: #fff; background: var(--sc-accent); border-color: var(--sc-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin-top: var(--sc-2); }
.form__status { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.form__status.is-error { color: var(--coral); }
.form.is-busy button[type="submit"] { opacity: 0.6; pointer-events: none; }

.form[hidden], .sent[hidden] { display: none; }
.sent { justify-items: start; }
.sent__title { margin: 0; font-size: var(--sc-t-2xl); }
.sent:focus { outline: none; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; gap: var(--sc-6); padding-top: calc(var(--bar-h) + var(--sc-6)); }
  .contact__intro { position: static; }
  .form__end .btn { width: 100%; }
}