/* The Content 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 two-column bands (.split with
   .keep2), the form card with the email box above its button (.formcard--stack), the bordered box (.pg__box), the head
   rows with a photo (.sec-head2), the four article cards (.offers--4, .offer--article), the books block (.books), the
   four pills (.pillrow), the wide photo strips (.strip with .p-only or .td-only), and the homepage's closer.
   The Books band has no rule here at all: it is the shared books block, as on the Programs page.
   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. */

/* a press on "Get the MC Letter" glides down to the signup band (not when he has asked for less motion) */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---------- 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}
}

/* ---------- 2. the MC Letter: the right column holds the form card and, under it, a framed photo ---------- */
.letter__side{min-width:0;display:flex;flex-direction:column}
.letter__side > .formcard{margin-top:0}
.letter__ph{width:72%;margin:36px 0 0;align-self:flex-end}

/* ---------- 4. articles: the four cards stay two by two on tablets ----------
   The shared product row lets a last card that is an odd-numbered child take the whole row (made for three cards).
   This row has a fifth child, a photo that is only drawn on phones, which made the fourth card the fifth child. */
.offers--4 > :last-child:nth-child(odd){grid-column:auto}

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

/* ===================== responsive ===================== */
@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}
}
@media (max-width:599px){
  /* phones, the MC Letter: the signup form is drawn straight under the headline, so a press on "Get the MC Letter"
     in the hero stops with the email box and its button on the screen. The band is drawn in this order: chip,
     headline, form, photo, the two paragraphs, the bordered box. Only the drawing order changes. In the page itself
     the words still come first and the form after them, which is the order a screen reader reads, and the Tab key
     still goes from the hero button to the email box, to its button, to "Watch on YouTube".
     The two columns stop being boxes of their own here (display:contents), so their children can be put in one
     order. From 600 wide up none of this applies. */
  .letter{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .letter > .flow,.letter > .letter__side{display:contents}
  .letter > .flow > *{order:5}
  .letter > .flow > .chip{order:1}
  .letter > .flow > h2{order:2}
  .letter__side > .formcard{order:3;margin-top:22px}
  .letter__ph{order:4;width:100%;margin:30px 0 12px;align-self:stretch}
  /* phones: the Warrior Stream photo opens its band, so no stretch of the page is longer than the screen without a
     photo of him */
  .ws .ws__ph{order:-1}
  .ws__ph .frame{aspect-ratio:4/3}
}
@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}
}