/* Article page (layouts/news/single.html) — values lifted from the prototype's Article screen
   (design_reference/extract/article.html). The pull-quote boxes themselves are styled by the
   shared render hook layouts/_default/_markup/render-blockquote.html; only the attribution
   line-height is corrected below. */

.article-body p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.65;
  color: #3A465C;
  text-wrap: pretty;
}

.article-body strong {
  color: #0F1A2E;
}

/* Attribution line of a pull-quote: the prototype gives the 12px line `font:600 12px 'Figtree'`,
   i.e. line-height normal. The shared render hook only sets leading-1.5 on the blockquote, which
   inherits to the 12px span as 18px and pushes every later pull-quote 4px down. */
.article-body blockquote span {
  line-height: normal;
}

/* The prototype sets `text-wrap: pretty` on the article body paragraphs but not on the About
   box copy, and `pretty` rebalances this three-line paragraph (line 1 keeps "Lille and" only
   with normal wrapping). main.css puts `pretty` on every p, so opt this one back out. */
.article-about {
  /* `text-wrap: normal` is not a valid value in Chrome (kept as `pretty`); `wrap` is. */
  text-wrap: wrap;
}

/* Sora headings, same treatment the prototype gives body headings (job screen: 20px/1.1,
   letter-spacing -.02em, 32px above / 12px below). */
.article-body h2 {
  margin: 32px 0 12px;
  font-family: Sora, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.article-body h3 {
  margin: 32px 0 12px;
  font-family: Sora, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.article-body ul,
.article-body ol {
  margin: 0 0 20px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #3A465C;
  display: grid;
  gap: 8px;
}

/* The prototype keeps "Latest news" highlighted in the header on the article screen too
   (newsColor is BLUE for both the news and the article screen); header.html only matches the
   section page by RelPermalink, so the article re-declares it. Hover stays red (base layer). */