/* thousandHellos brand layer
   The hello line: a short terracotta stroke that opens every section.
   Terracotta is accent only — roughly 10% of the surface. */

:root {
  --th-terracotta: #C4573B;
  --th-green: #1F3D33;
  --th-cream: #F6F1E7;
  --th-stone: #E3DDD1;
}

/* --- Hello line above section headings --------------------------------- */

.rte h2::before,
.rich-text__heading::before,
.multicolumn-card__info > h3::before,
.title-wrapper-with-link > .title::before,
.collapsible-content__heading::before,
.article-template__title::before,
.blog__title::before,
.newsletter__wrapper > h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--th-terracotta);
  margin-bottom: 1.4rem;
}

/* Centred sections need the stroke centred too */
.center .rich-text__heading::before,
.rich-text--center .rich-text__heading::before,
.newsletter__wrapper > h2::before,
.title-wrapper--self-padded-tablet-down .title::before,
.multicolumn .center .multicolumn-card__info > h3::before {
  margin-left: auto;
  margin-right: auto;
}

/* Page and listing titles get a slightly longer stroke.
   .title--primary covers the blog listing (Notes), search and 404. */
.main-page-title::before,
.collection-hero__title::before,
.main-blog .title--primary::before,
.title--primary::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background-color: var(--th-terracotta);
  margin-bottom: 2rem;
}

/* --- Pull quotes -------------------------------------------------------- */

.rte blockquote {
  border-left: 3px solid var(--th-terracotta);
  padding-left: 1.5rem;
  font-style: italic;
}

/* --- Rhythm ------------------------------------------------------------- */

.rte h2 {
  margin-top: 4.8rem;
}

.rte h2:first-child {
  margin-top: 0;
}

/* Comfortable measure for long-form reading */
.rte > p,
.rte > ul,
.rte > ol,
.rte > blockquote {
  max-width: 68ch;
}