/* The homepage is one screen with zero scroll. Everything below is sized off
   viewport units and clamps so it holds that on a laptop and on a phone,
   rather than holding it on the machine it was built on. */

.home {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 3vh, 30px) clamp(18px, 5vw, 54px);
  gap: clamp(10px, 2vh, 22px);
}

.home nav { display: flex; align-items: center; gap: 12px; }
.home nav .brand { font: 700 15px/1 var(--sans); letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.home nav .spacer { flex: 1; }

.hero { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.hero h1 {
  font: 700 clamp(30px, 7.2vh, 62px)/1.05 var(--sans);
  letter-spacing: -.035em;
  margin-bottom: clamp(10px, 2vh, 20px);
  /* The headline wants to break at three short lines; the paragraph under it
     wants a comfortable measure. One max-width on the parent cannot do both,
     which is what a shared clamp was doing to the paragraph. */
  max-width: 13ch;
}
.hero h1 em { font-style: normal; color: var(--live); }
.hero p {
  font: 400 clamp(14px, 2.1vh, 18px)/1.5 var(--sans);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: clamp(14px, 2.6vh, 26px);
}
.hero .row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .row a { text-decoration: none; }

.how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 26px);
  border-top: 1px solid var(--line);
  padding-top: clamp(12px, 2.2vh, 20px);
}
.how div h3 {
  font: 700 10px/1 var(--mono); letter-spacing: .14em; color: var(--live);
  margin-bottom: 7px;
}
.how div p { font: 400 clamp(12px, 1.7vh, 14px)/1.45 var(--sans); color: var(--ink-soft); }

.home footer { font: 400 11px/1.5 var(--mono); color: var(--ink-faint); }

@media (max-width: 720px) {
  .how { grid-template-columns: 1fr; gap: 8px; }
  .how div:nth-child(n+3) { display: none; }
  .hero h1 { max-width: none; }
}