/*!
 * Head and running text of a website page, design language 2.1, rules 5 and 6:
 * the label in capitals with its leading line (partial _WebsiteLabel.cshtml),
 * the page title, the lead under it, running text and the one link that leads
 * on after a text. Used by contact, 404 and the text pages.
 */

/* Label: bold capitals in ink 2 with a line of 32px in front, like the label
   above a sentence of the start page. */
.website-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--website-color-ink-2);
  font-size: var(--website-font-size-label);
  font-weight: var(--website-font-weight-bold);
  line-height: 1;
  letter-spacing: var(--website-letter-spacing-label);
  text-transform: uppercase;
}

.website-label::before {
  content: "";
  width: 32px;
  border-top: 1.5px solid currentColor;
}

.website-title {
  margin: 0;
  font-size: var(--website-font-size-title);
  font-weight: var(--website-font-weight-bold);
  line-height: var(--website-line-height-title);
  letter-spacing: var(--website-letter-spacing-title);
  text-wrap: balance;
}

.website-lead {
  max-width: 40ch;
  margin: 24px 0 0;
  font-size: var(--website-font-size-lead);
}

/* Running text: at most 62 characters a line, paragraphs apart by one small
   step, links in the text colour with an underline. */
.website-prose {
  max-width: 62ch;
}

.website-prose > * {
  margin: 0;

  /* No single word alone on the last line of a paragraph, as in "online." of
     the page 404 at 1440 pixels. */
  text-wrap: pretty;
}

.website-prose > * + * {
  margin-top: 14px;
}

.website-title + .website-prose {
  margin-top: 24px;
}

.website-follow-up {
  margin: 28px 0 0;
}

@media (max-width: 759px) {
  .website-label {
    margin-bottom: 14px;
  }

  .website-lead {
    margin-top: 16px;
  }
}