/* ============================================================================
   The front page. Only the masthead lives here; the cards, the stepped
   specimens and the closing list are shared components in site.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------------- */

.hero {
  padding: var(--section-y) 0 var(--section-y-tight);
}

/* Only what the masthead does differently: the title is set solid here, because it is the
   specimen rather than a heading over prose. Everything else comes from the h1 rule in site.css. */
.hero h1 {
  line-height: 1;
}

/* The opening sentence of the site is a lead paragraph, and a lead paragraph is one thing
   everywhere: the size and the leading both come from the scale, so this one and the one under
   every h2 are set alike. The 1.5 that used to be typed here was neither. */
.hero .sub {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
}

/* The alphabet runs edge to edge on a wide screen. Twenty-six cells across a
   phone would be a few pixels each, so a narrow screen gets one word instead,
   and the alphabet has a section of its own further down. */
.hero .strip {
  display: none;
  width: 100%;
  margin: 0 0 var(--space-8);
}

.hero .strip--narrow {
  display: block;
}

.hero .strip .mn {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: baseline;
}

@media (min-width: 48rem) {
  .hero .strip--narrow { display: none; }
  .hero .strip--wide   { display: block; }
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.hero .actions p {
  margin: 0;
  max-width: var(--measure-narrow);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.hero .facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-8);
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--rule);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}