/* /contact (src/components/ContactPage.astro). Sizes come from system.css. The content is centered
   between the nav and the footer; both columns are kept narrow, at the page margins. */
main:has(> .cp) { display: flex; flex-direction: column; justify-content: center; }
.cp { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 33rem) minmax(0, 38rem); grid-template-rows: auto 1fr; grid-template-areas: "head form" "details form"; justify-content: space-between; gap: 0 7vw; }
.cp-head { grid-area: head; }
.cp-reply { margin-top: 1.2em !important; max-width: 32em; }
.cp-details { grid-area: details; align-self: start; margin-top: 2.4em !important; max-width: 26rem; }
.cp .cf { grid-area: form; margin-top: 0; max-width: none; }
.cp .cf .cf-f:first-of-type { margin-top: 0; }
/* the send button in the CTA style (sans capitals, underlined, an arrow after) */
.cp .cf .cf-b { margin-top: 40px; font: 500 var(--fs-label)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-underline-offset: .32em; }
.cp .cf .cf-b::after { content: "→"; display: inline-block; margin-left: .6em; text-decoration: none; }
/* phones: the details under the form, well apart from it */
@media (max-width: 899.98px) {
  .cp-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "form" "details"; gap: 48px; }
  .cp-details { margin-top: 40px !important; max-width: none; }
}