/* Contact (/contact), redone 2026-10-06: no card, no boxes. The two-tone
   "Let's talk." heading Faris liked, then a form set in the same large Inter:
   "reaching out as" is a row of plain words you tap, and every field is a
   single underline with its label floating above once you type. */

.page main.ct {
  display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav) + clamp(24px, 6vh, 64px)) var(--gutter) clamp(32px, 6vh, 64px);
}
.ct-in {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px);
  align-items: start; width: 100%; max-width: 1180px; margin: 0 auto;
}
.ct .two { font-size: clamp(32px, 3.6vw, 52px); letter-spacing: -0.04em; line-height: 1.06; }
.ct-title { position: sticky; top: calc(var(--nav) + 32px); }

/* The type every answer is set in */
.ct-form { --type: clamp(19px, 1.7vw, 23px); display: grid; gap: clamp(28px, 4.4vh, 44px); }

/* I'm reaching out as: words, not chips */
.as { border: 0; }
.as legend { margin-bottom: 10px; font-size: 13px; color: var(--ink-3); }
.as-opts { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.as-opts label { position: relative; cursor: pointer; }
.as-opts input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.as-opts span {
  font-size: var(--type); letter-spacing: -0.025em; color: #a3a49d;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: transparent;
  transition: color .2s, text-decoration-color .2s;
}
.as-opts label:hover span { color: var(--ink-2); }
.as-opts input:checked + span { color: var(--ink); text-decoration-color: var(--green); }
.as-opts input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
.as.invalid legend { color: #c2452e; }

/* Underlined fields with floating labels */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3.6vh, 34px) clamp(24px, 3vw, 44px); }
.f { position: relative; padding-top: 18px; }
.f.wide { grid-column: 1 / -1; }
.f input, .f textarea {
  display: block; width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1px solid #c9cac3; border-radius: 0;
  background: transparent; outline: none; resize: none;
  font: 400 var(--type) / 1.35 "Inter", sans-serif; letter-spacing: -0.02em; color: var(--ink);
}
.f textarea { min-height: 46px; max-height: 240px; overflow-y: auto; }
.f label {
  position: absolute; left: 0; top: 24px; pointer-events: none; transform-origin: left top;
  font-size: var(--type); letter-spacing: -0.02em; color: #a3a49d;
  transition: top .25s cubic-bezier(.2, .7, .2, 1), font-size .25s cubic-bezier(.2, .7, .2, 1), color .2s;
}
.f label em { font-style: normal; font-size: .62em; color: #b9bab3; margin-left: 6px; letter-spacing: 0; }
.f input:focus + label, .f input:not(:placeholder-shown) + label,
.f textarea:focus + label, .f textarea:not(:placeholder-shown) + label { top: 0; font-size: 13px; color: var(--ink-3); }
.f input:focus + label em, .f input:not(:placeholder-shown) + label em { font-size: 13px; }
/* a green line draws across the underline while you type */
.f::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--green);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.f:focus-within::after { transform: scaleX(1); }
.f.invalid input, .f.invalid textarea { border-bottom-color: #c2452e; }
.f.invalid label { color: #c2452e; }

/* Attachments: a text link and a plain list */
.attach { display: grid; gap: 10px; }
.attach-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; justify-self: start; cursor: pointer;
  font-size: 15px; color: var(--ink-2); transition: color .2s;
}
.attach-btn:hover, .attach-btn.over { color: var(--ink); }
.attach-btn input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.attach-btn:focus-within { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 4px; }
.attach-btn svg { width: 16px; height: 16px; flex: none; }
.attach-btn span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c9cac3; }
.attach-btn em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.file-list { list-style: none; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3e4de; font-size: 15px; }
.file-list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-size { margin-left: auto; color: var(--ink-3); font-size: 13px; flex: none; }
.file-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink-2); }
.file-x:hover { background: #e8e9e3; color: var(--ink); }

.send { display: flex; align-items: center; gap: 20px; }
.form-note { font-size: 14px; color: #c2452e; }

.ct-done { align-self: center; }
.ct-done .two span + span { margin-top: 4px; }

@media (max-width: 860px) {
  .ct-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ct-title { position: static; }
  .page main.ct { align-items: flex-start; }
}
@media (max-width: 560px) {
  .fields { grid-template-columns: 1fr; }
  .as-opts { gap: 6px 20px; }
  .send { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .f label, .f::after { transition: none; }
}