/* ==============================================================================
   TEXT BLOCK
   ============================================================================== */

/* No card: body copy sits straight on the page, the way a sheet of
   drawings carries its notes, and a thin rule above each block marks
   where one subject ends and the next begins (doc/07). The rule is the
   decorative --border-light, so it never competes with a control. */
.block-text {
  padding-block-start: var(--spacing-lg);
  border-block-start: 1px solid var(--border-light);
}

.block-text h2 {
  margin-block-end: var(--spacing-md);
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

/* 65 characters at most (--measure): a full-width paragraph at 1440 px
   runs past 140, which no eye follows back to the next line. */
.block-text p {
  max-width: var(--measure);
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.block-text p + p {
  margin-block-start: var(--spacing-md);
}

/* A paragraph can carry inline links (internal/markdown.RenderInline):
   the telephones and the e-mail on the contact page, a reference in a
   project's text. The underline is what tells them from the text around
   them; colour alone would not (WCAG 1.4.1). */
.block-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.block-text a:hover {
  text-decoration-thickness: 2px;
}

/* A telephone number read across two lines is a number misdialled: it
   moves to the next line whole instead. */
.block-text a[href^="tel:"] {
  white-space: nowrap;
}

/* From a tablet up, the title moves into a margin column on the left
   and the paragraphs keep the right two thirds, the way an architect's
   sheet keeps its notes beside the drawing. The body column is still
   wider than --measure at 1440 px, so the paragraphs keep their own
   cap and the right edge stays ragged on purpose. */
@media (min-width: 48em) {
  .block-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--spacing-xl);
    align-items: baseline;
  }

  .block-text h2 {
    margin-block-end: 0;
  }
}

/* ==============================================================================
   TEXT BLOCK THAT OPENS A PAGE
   ============================================================================== */

/* A page without a hero (CV, contact) opens with a text block, and
   page.html renders its h1 visually hidden right before it. That block's
   title is what a visitor reads as the page's name, so it takes the
   page-title size and its first paragraph reads as the lead. It keeps
   one column at every width, since a margin column beside a one-line
   title would only push the lead away from it, and it has no rule above
   it: there is nothing before it to separate it from. */
.page > .visually-hidden:first-child + .block-text {
  display: block;
  padding-block-start: 0;
  border-block-start: 0;
}

.page > .visually-hidden:first-child + .block-text h2 {
  margin-block-end: var(--spacing-md);
  font-size: var(--font-size-hero);
  line-height: 1.05;
}

.page > .visually-hidden:first-child + .block-text p:first-child {
  color: var(--text-primary);
  font-size: var(--font-size-lg);
}