/**
 * MCB Productions — Contact page
 *
 * Page-scoped layout for views/contact.html. Prefixed contact-* and named
 * for the page. Reuses base.css components wholesale — the form controls,
 * the choice set, the form alert, the spec panel, the buttons — and adds
 * only the head band, the two-column bench, and the reach plate's few
 * paper-on-graphite overrides.
 *
 * The bench echoes the request path (public/css/request.css) deliberately:
 * a message is a request of a different kind. The rail is NOT forked from
 * rq-* here; it is the base spec panel, which already carries this shape.
 *
 * Requires tokens.css and base.css to be loaded first.
 */

/* =====================================================================
   HEAD
   ===================================================================== */

.contact-head {
  padding-block: var(--space-4xl) var(--space-2xl);
}

.contact-eyebrow {
  margin: 0 0 var(--space-md);
  color: var(--ink-muted);
}

.contact-display {
  margin-bottom: var(--space-lg);
}

/* =====================================================================
   BENCH
   Form leads; the reach plate sits beside it above 1024px and drops
   below it on narrower screens. align-items:start so the plate keeps its
   own height rather than stretching to the form's.
   ===================================================================== */

.contact-body {
  padding-bottom: var(--space-6xl);
}

.contact-grid {
  display: grid;
  gap: var(--space-3xl);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: var(--space-4xl);
    align-items: start;
  }
}

/* =====================================================================
   FORM
   Field groups are spaced by the grid gap so no field carries its own
   trailing margin. The alert, when shown, takes the first row.
   ===================================================================== */

.contact-form {
  display: grid;
  gap: var(--space-xl);
  /* min-width:0 keeps a long value or a wide field from forcing the grid
     column past its track and pushing the rail off-screen. */
  min-width: 0;
}

.contact-field-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 560px) {
  .contact-field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-submit {
  justify-self: start;
}

@media (max-width: 479px) {
  .contact-submit {
    width: 100%;
  }
}

/* Off-screen but still submitted, focusable only to a bot walking the
   DOM. Not display:none — some bots skip anything with it. */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =====================================================================
   REACH PLATE
   The base spec panel, with the three paper-on-graphite touches it does
   not carry on its own: a heading above the list, a signalled email
   link, and a closing note seated in the same ruled rhythm as the rows.
   ===================================================================== */

.contact-reach-head {
  margin: 0 0 var(--space-md);
  color: var(--graphite-300);
}

/* Links inside the plate take the lifted blue; signal-ink would die
   against the graphite ground. */
.contact-reach-link {
  color: var(--signal-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-hover) var(--ease-out-quart);
}

.contact-reach-link:hover {
  color: var(--paper-000);
}

/* <address> is the right element for the business address and italicizes by
   default, which the panel's sans readout does not want. Reset the style,
   keep the semantics, inherit everything else from the .data value. */
.contact-reach-address {
  font-style: normal;
}

/* The note continues the panel's ruled rhythm rather than floating under
   it, so it reads as the last line of the plate, not a caption below. */
.contact-reach-note {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--graphite-700);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--graphite-300);
}

.contact-reach-note a {
  color: var(--signal-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-hover) var(--ease-out-quart);
}

.contact-reach-note a:hover {
  color: var(--paper-000);
}