/* The Contact page (Wave 5). The page loads /assets/site.css first and this file second, so a rule here wins a tie
   with a shared rule at every width, phones included.

   Almost everything on the page comes from the shared file: the hero (.ihero), the four numbered cards two by two
   (.ncards with --cols:2, and the small form inside card 04), the email band (.split with .keep2, .biglink, the
   signpost doodle in .doodle-host--sign), the questions (.faq with .keep2 and .photo-last, .qa), the wide photo
   strips (.strip, with .p-only where one is for phones only), and the homepage's closer.
   This file only holds what the shared file doesn't cover.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them. */

/* ---------- 1. hero: there is no proof card under the words on this page, so the words stand level with the
   middle of the photo in place of hanging from the top of a tall empty column ---------- */
@media (min-width:900px){
  .ihero__copy{grid-row:1 / span 2;align-self:center}
}
/* the line under the headline breaks into two even lines, so it never ends with "to do." alone on a line */
.ihero__lede{text-wrap:balance}

/* ---------- 2. four ways in ----------
   The wide photo between the two rows of cards gets a little more room above and below than the cards' own gap.
   A long button label ("Apply for the Pressure Process") breaks into two even lines where the card is narrow. */
.ways .ways__ph{margin-block:26px}
.ways .ncard .btn{text-wrap:balance}

/* ---------- 4. questions: an answer never ends with one short word alone on its last line ---------- */
.qa__a{text-wrap:pretty}
.ways .ncard__p{text-wrap:balance}
.qa summary{text-wrap:balance}
.qa summary .nb{white-space:nowrap}

/* The closer has no rule here: it is the homepage's closer, drawn by the shared file alone. */

/* ===================== responsive ===================== */
@media (max-width:899px){
  .ways .ways__ph{margin-block:14px}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets (and a folding phone held open): the hero photo is a lower, wider picture, so more of his face is on the
     first screen under the button */
  .ihero__photo .frame{aspect-ratio:2/1}
  /* The same screens: this hero has a line under its button, which pushes the photo down. So from 600 to 899 wide the
     hero takes the spacing the shared file gives it on phones (above the chip, around the headline, above and under
     the button, above the photo). That lifts the photo 34px, and his eyes, nose and mouth are on the first screen of
     a folding phone held open (829 by 690). The cloud doodle moves with the photo's space, so it stays where it was
     against the words. The photo's crop is not moved: only about 11px of black is above his head in this frame, and
     moving the crop would shave his head. */
  .ihero{padding-top:18px}
  .ihero__h1{margin:14px 0 12px}
  .ihero__cta{margin-top:18px;gap:12px}
  .ihero__photo{margin-top:28px}
  .ihero__cloud{top:-28px}
}
@media (max-width:599px){
  /* phones: the photo opens the email band, so no stretch of the page is longer than the screen without a photo of him */
  .mail .mail__ph{order:-1}
  /* phones: the wide photo comes after card 01, not after card 02, so the first two cards are never a full screen
     of words with no photo of him. (The second photo, after card 03, is in the markup for phones only.) */
  .ways .ncards > .ncard:first-child{order:-2}
  .ways .ncards > .ways__ph{order:-1;margin-block:0}
}
@media (max-width:374px){
  /* the smallest phones: the shared file makes a form button 43.8px tall there. The signup button stays 44. */
  .formcard--stack .form-row .btn{min-height:44px}
}