/* contact page only.  Loaded after theme.css and scene.css.
   Left: the info plate and a mailbox with the pigeon on it. Right: the mailto form on a cream card.
   The form's ids and field names belong to js/contact.js and stay as they are. */

main.contact-page .container { max-width: 70rem; }
.contact-page { --pad-b: clamp(60px, 8vw, 110px); padding: clamp(28px, 4vw, 56px) 0 var(--pad-b); }

/* info.css makes .contact-grid a wrapping flex row; this is a two-column grid with the art under the plate */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr;
  gap: clamp(24px, 3.4vw, 44px) clamp(24px, 4vw, 56px); align-items: start;
}
.contact-grid .contact-info { grid-column: 1; grid-row: 1; min-width: 0; flex: none; }
.contact-grid .contact-form { grid-column: 2; grid-row: 1 / span 2; min-width: 0; flex: none; }
/* the post stands on the footer: the negative margin cancels the page's bottom padding */
.contact-art { grid-column: 1; grid-row: 2; align-self: end; justify-self: start; width: clamp(150px, 17vw, 230px); margin: 0 0 calc(-1 * var(--pad-b)) clamp(8px, 4vw, 56px); }

/* ---------- the info plate ---------- */
.contact-info { padding: clamp(22px, 2.8vw, 36px) clamp(22px, 3vw, 38px); }
.contact-info h1 { max-width: none; margin: .75rem 0 .1rem; }
.contact-info > p.contact-line { margin: 0 0 1.4rem; max-width: none; font: 400 clamp(2rem, 3.2vw, 2.6rem)/1 var(--font-hand); color: var(--ink); }
.contact-points { gap: 1.1rem; }
.contact-point { align-items: center; gap: 1rem; }
.contact-point svg { flex: none; box-sizing: border-box; width: 44px; height: 44px; padding: 11px; margin: 0; border-radius: 50%; background: var(--terra); color: var(--btn-on); box-shadow: 2px 2px 0 var(--edge); }
.contact-point .contact-point-label { font: 700 .75rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: .3rem; }
.contact-point a, .contact-point span.contact-value { font: 700 1.125rem/1.25 var(--font-ui); overflow-wrap: anywhere; }
.contact-point span.contact-value { color: var(--ink); }
.contact-point a { color: var(--pen); }
.contact-point a:hover { color: var(--pen-deep); }

/* ---------- the form card ---------- */
.contact-form.card { gap: 1.1rem; padding: clamp(24px, 3vw, 38px); }
.contact-form h2 { margin: 0; }
.contact-form .field { margin: 0; gap: .4rem; }
.contact-form .field label { font: 700 .875rem/1.3 var(--font-ui); color: var(--ink); }
.contact-form .field textarea { min-height: 9.5rem; }
.contact-form .btn-block { margin-top: .4rem; }
.contact-form .form-note { font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); margin: 0; }

/* ---------- the mailbox ---------- */
.contact-art { --mb-post: #8a6a4a; --mb-body: #2f4d7c; --mb-shade: #243d65; --mb-door: #3b5d92; --mb-slot: #f4d9a6; --mb-flag: #c2563a; }
.contact-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-post { fill: var(--mb-post); }
.cm-body { fill: var(--mb-body); }
.cm-shade { fill: var(--mb-shade); }
.cm-door { fill: var(--mb-door); }
.cm-slot { fill: var(--mb-slot); }
.cm-flagpole { fill: var(--ink); }
.cm-flag { fill: var(--mb-flag); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .contact-grid .contact-info, .contact-grid .contact-form, .contact-art { grid-column: 1; grid-row: auto; }
  .contact-art { justify-self: end; margin: 14px 8vw calc(-1 * var(--pad-b)) 0; width: clamp(130px, 38vw, 190px); }
}