/* ==========================================================================
   The contact page.

   This was a <style> block inside contact.html — 1 KB of page-local rules, and
   of commentary about them, in the markup of every response. It is the same CSS
   in the same order; what changed is that a reader who opens the page source
   sees the page rather than a stylesheet, and a browser that has been here
   before does not fetch these rules again.
   ========================================================================== */

@media (max-width: 620px) {
    #whoBtns, #whatBtns { display: grid; grid-template-columns: minmax(0, 1fr); }
    /* Left-aligned, because a column of full-width options is a list and a list
       is read down its left edge. min-height rather than height holds the row on
       core's own 40px step for the one-line labels it now always has, while
       still letting a label that somehow wraps push the row down instead of
       out — which is the overflow this block exists to prevent. */
    #whoBtns .btn, #whatBtns .btn {
      white-space: normal; text-align: left; justify-content: flex-start;
      height: auto; min-height: 40px; padding-block: 8px;
    }
    /* On a desk the second question is a denser row than the first, because it
       sits underneath it as a follow-up. In one column they are one list of
       choices asked twice, so the second half takes the first half's step and
       label size rather than reading as a different kind of control. */
    #whatBtns .btn-sm { font-size: 13.5px; padding-inline: 14px; }
  }