/* ==================================================================
   The homepage: the intro and the plate index
   ==================================================================
   Above 1140px the intro and the plates sit on a twelve-column grid:
   the social icons stand in the first three columns, stretched to the
   height of the intro beside them. Below, everything stacks at the
   intro's measure.

   Tokens, shell, social icons, and .sr-only come from css/site.css.
   ================================================================== */

/* --- the intro ------------------------------------------------------
   The wordmark is the h1, so the heading drops its own margins. The
   shared rule caps the mark at 900px; here it takes the full shell. */

.hero {
  padding-bottom: var(--space-12);
}

.hero .wordmark {
  text-align: left;
  padding: var(--space-8) 0 var(--space-12);
}

.hero .wordmark__mark {
  max-width: none;
  margin: 0;
}

.wordmark__heading { margin: 0; }

.intro {
  max-width: var(--measure);
}

.intro__text {
  margin: 0 0 var(--space-4);
  font-size: 1.32rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* Each 44px link pads a 24px mark by 10px; pull the row back so the
   marks, not the hit areas, meet the shell edge. */

.intro__social .social {
  justify-content: flex-start;
  margin-inline-start: -10px;
}

/* --- the plates ---------------------------------------------------- */

.plates {
  max-width: var(--measure);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}

.plate__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.5;
  text-wrap: balance;
}

.plate__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* --- the grid ------------------------------------------------------ */

@media (min-width: 1140px) {
  .intro,
  .plates {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .intro__text {
    grid-column: 5 / -1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: 1.3;
    letter-spacing: -.01em;
  }

  .intro__social {
    grid-column: 1 / span 3;
    grid-row: 1;
    display: flex;
  }

  .intro__social .social {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    margin-block: -10px;
  }

  .plate { grid-column: span 3; }
}

/* --- print -------------------------------------------------------- */

@media print {
  .plate { break-inside: avoid; }
}