/* ==========================================================================
   Stokvo :: home page only

   A page with one job before launch: say what this is, say it is not open,
   and get out of the way. No hero image, no search box over an empty
   catalogue, nothing that looks like a product that can be bought today.
   ========================================================================== */

/* Its own header and footer, because the shared ones carry a nav, a search
   box and an account button, none of which lead anywhere yet. */
.landing__top {
  padding-block: var(--s-8);
}

.landing__foot {
  padding-block: var(--s-8) var(--s-12);
  margin-top: var(--s-12);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-400);
}

.lead-in {
  padding-block: var(--s-8) var(--s-12);
  border-bottom: 1px solid var(--line);
}

.lead-in__title {
  max-width: 20ch;
  text-wrap: balance;
}

.lead-in__body {
  max-width: 62ch;
  margin-top: var(--s-5);
  color: var(--text-200);
}

.lead-in__heading {
  margin-bottom: var(--s-6);
}

/* ----------------------------------------------------------- Categories */

/* Name and blurb together, because a bare list of eight words says less than
   the eight sentences underneath them. Two columns rather than a grid of
   cards: these are not things to click yet. */
.lead-in__cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-1) var(--s-10);
}

.cat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
}

/* Only the link version reacts, so the text version does not look broken for
   not doing anything. */
a.cat {
  transition: border-color var(--fast);
}

a.cat:hover {
  border-top-color: var(--line-orchid);
}

a.cat:hover .cat__name {
  color: var(--orchid);
}

.cat__name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-100);
  transition: color var(--fast);
}

.cat__blurb {
  font-size: 13px;
  color: var(--text-400);
}

/* ---------------------------------------------------------------- Steps */

.how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
  counter-reset: step;
}

.how li {
  counter-increment: step;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.how li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--orchid);
}

.how h3 {
  margin-bottom: var(--s-2);
}

.how p {
  font-size: 13.5px;
  color: var(--text-300);
}

/* ------------------------------------------------------------- Narrow */

@media (max-width: 760px) {
  .lead-in {
    padding-block: var(--s-4) var(--s-8);
  }

  .landing__top {
    padding-block: var(--s-6);
  }

  .lead-in__cats,
  .how {
    grid-template-columns: minmax(0, 1fr);
  }

  .how {
    gap: var(--s-5);
  }
}