/* Hero: the claim, the command that installs it, and the real window.
   This is the one centred block at the top of the page — a poster. Everything
   below it is reading matter and stays on the left axis, because a paragraph
   whose every line starts at a different x is slower to read. Centring the
   call to action while the claim above it hung left was the half-measure. */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--page);
  margin: 0 auto;
  padding: calc(58px + clamp(3.5rem, 9vw, 6.5rem)) var(--gutter-x) var(--band-y);
  text-align: center;
}

/* The claim's other paragraph, and set exactly like it: the reading face at
   reading size, in the reading colour. It stands above the claim, so the pull
   is to dress it up — small caps, mono, a chip — and every one of those read as
   decoration on a page that has none. Plain type at full size is what makes it
   look deliberate. */
.hero__kicker {
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--muted);
  font-size: var(--lead);
  line-height: 1.55;
  /* On a phone it folds, and unbalanced the fold left "macOS" alone on the
     second line, which reads as a mistake rather than a line break. */
  text-wrap: balance;
}

.hero__claim {
  max-width: 26ch;
}

.hero__sub {
  margin-top: clamp(1.3rem, 2.4vw, 1.9rem);
  /* No cap: the column is the measure. At this size it comes to about 66
     characters, which still reads comfortably, and a `ch` cap only put the
     line back at 760px while there was room to the right. */
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--lead);
  line-height: 1.55;
}

/* The two accounts, high enough that they are among the first things read: at
   their own size, centred across the full column the command uses — stretched
   to fill it they read as two more form controls rather than two links. */
.hero__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: clamp(1.7rem, 3.2vw, 2.4rem);
}

.hero .command {
  align-self: center;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
}

.hero__aside {
  width: 100%;
  margin-top: 0.9rem;
  color: var(--dim);
  font-size: 0.88rem;
  text-align: center;
}

.hero .shot--hero {
  margin-top: clamp(2.4rem, 5vw, 3.8rem);
}

/* Wrapped one under the other, two links of different lengths read as two
   different kinds of control. Stacked deliberately, they share one width — and
   it is the column's full width, because the command box below them has no
   choice but to take that, and three stacked blocks on two widths is the same
   raggedness one step further down. */
@media (max-width: 560px) {
  .hero__social {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__social .btn {
    justify-content: center;
  }
}