/* ════════════════════════════════════════════════════════════════════
   Contact page — form, submitted state, info sidebar
   Shares tokens/layout with site.css; loaded after it.
   ════════════════════════════════════════════════════════════════════ */

/* #region page shell / header */
/* ─── page shell / header ────────────────────────────────────────── */
/* main wrapper + faint background mark */
.contact-main{position:relative;overflow:hidden;padding-top:150px}
.contact-main+.foot{margin-top:clamp(48px,8vw,96px)}
.ghost{position:absolute;left:-6%;bottom:-4%;width:min(520px,52vw);opacity:.045;pointer-events:none;z-index:0}
/* heading */
.contact-head{position:relative;z-index:1;margin-bottom:clamp(40px,6vw,72px)}
.contact-head h1 .ac{color:var(--acc)}
/* two-column layout — form beside info sidebar */
.contact-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:clamp(36px,5vw,72px);position:relative;z-index:1;align-items:start}
/* #endregion */

/* #region form */
/* ─── form ────────────────────────────────────────────────────────── */
/* field layout */
.cform{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
/* inputs — shared style + focus ring */
.field input,.field textarea,.field select{background:var(--ink-850);border:1.5px solid var(--border);
  border-radius:10px;padding:13px 15px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--acc);outline-offset:1px;
  border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,168,217,.25)}
.field textarea{resize:vertical;min-height:130px}
/* submit button placement */
.csub{margin-top:6px;align-self:flex-start}
/* submit error message (network / Formspree failure) */
.cerr{font-family:var(--mono);font-size:12px;line-height:1.5;color:#ff6b6b}
.cerr[hidden]{display:none}
/* #endregion */

/* #region submitted (success) state */
/* ─── submitted (success) state ──────────────────────────────────── */
/* hidden by default; JS reveals in place of the form on submit */
.cok{display:none}
.cok h2{font-family:var(--stamp);text-transform:uppercase;font-size:clamp(30px,4vw,52px);line-height:.95}
.cok p{opacity:.78;margin-top:14px;font-size:16px}
/* "send another" reset button */
.cok button{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);border:1.5px solid var(--border-strong);border-radius:999px;padding:11px 20px;transition:border-color .2s}
.cok button:hover{border-color:var(--acc)}
/* #endregion */

/* #region info sidebar */
/* ─── info sidebar ───────────────────────────────────────────────── */
/* stacked info blocks (address/email/etc.) */
.info{display:flex;flex-direction:column;gap:30px}
.info-block .h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.info-block a,.info-block p{font-size:16px;opacity:.88}
.info-block a:hover{color:var(--acc)}
/* social icon row */
.info-socials{display:flex;gap:12px;align-items:center;opacity:.88}
.info-socials a{display:inline-flex;align-items:center;min-height:24px}
/* bulleted list (e.g. office hours) */
.info-list li{padding:8px 0;border-bottom:1px solid var(--border);font-size:14.5px;opacity:.78}
/* #endregion */

/* #region responsive */
/* ─── responsive ─────────────────────────────────────────────────── */
@media(max-width:780px){.contact-grid{grid-template-columns:1fr}}
/* #endregion */