/* Rootist pages: Our Story (sections/rootist_our_story) and the FAQ page (sections/rootist_faq_page), both rendered by
   page/default. Type on the site's scale: titles 64/68 (48/52 below 1280px), section headings 48/52, 40/44, 32/36,
   intros 21/29, 19/27, 17/25, eyebrows 12px bold capitals, links 14px bold capitals. Spacing follows --rt-section-y
   (112px, 88px from 1068px down, 64px on phones). The theme sets every h1 (40px condensed) and h2 (40px) with
   !important, hence the longer selectors on the headings. */

/* ---------- Our Story ---------- */
.rt-story { padding-bottom: var(--rt-section-y, 112px); color: #672c45; }
.rootist-store .rt-story-eyebrow { margin: 0 0 16px; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); }
.rootist-store .rt-story h2.rt-story-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.005em; color: #672c45; text-wrap: balance; }
.rt-story-text { margin-top: 20px; max-width: 32em; font: 400 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.011em; color: rgb(103 44 69 / 0.78); text-wrap: pretty; }
.rootist-store .rt-story-text p { margin: 0; }
.rootist-store .rt-story-text p + p { margin-top: 12px; }
.rt-story-text a { color: #672c45; font-weight: 700; text-decoration: none; }
.rootist-store .rt-story-actions { margin: 32px 0 0; }
.rt-story-link { font: 700 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #672c45; text-decoration: none; }
.rt-story-link span[aria-hidden="true"] { display: inline-block; transition: transform 0.2s ease; }
.rt-story-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) {
  .rt-story-link:hover, .rt-story-text a:hover { opacity: 0.72; }
  .rt-story-link:hover span[aria-hidden="true"] { transform: translateX(3px); }
}

/* The opening picture, in the content column (the art is 1440px wide), with the title on its plain left side: the
   wall behind the words is dark and even, so they need no shade. On phones the title sits above a square crop of the
   picture (the block's focus setting picks the part shown). */
.rt-story-hero { padding-top: 20px; }
.rt-story-hero-frame { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 1440 / 680; background: #6e1f1f; }
.rt-story-hero-media, .rt-story-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-story-hero-media img { max-width: none; object-fit: cover; object-position: 50% 50%; }
.rt-story-hero-copy { position: absolute; z-index: 1; left: clamp(40px, 5.6vw, 88px); top: 50%; transform: translateY(-50%); width: min(40%, 34rem); }
.rootist-store .rt-story-hero-copy .rt-story-eyebrow { color: rgb(255 251 245 / 0.86); }
/* Four classes: the theme's h1 rule (.rootist-store h1:not(.bb .bb-heading h1)) counts three classes and an element. */
.rootist-store .rt-story .rt-story-hero-copy h1.rt-story-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 64px !important; line-height: 68px !important; letter-spacing: -0.01em; color: #fffbf5; text-wrap: balance; }

.rt-story-statement { padding-block: var(--rt-section-y, 112px); text-align: center; }
.rootist-store .rt-story-statement p { max-width: 26em; margin: 0 auto; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 40px; line-height: 48px; letter-spacing: -0.005em; color: #672c45; text-wrap: balance; }

/* A chapter: its picture beside its copy, as the homepage banners (6 : 5 columns, the copy vertically centred). The
   pictures are 720px wide, so they stop at 600px, on the column's outer edge. The copy's column is never narrower
   than its longest word (ROOTS+SCALP+HAIR); the picture gives way. */
.rt-story-chapter { display: grid; grid-template-columns: minmax(0, 6fr) minmax(min-content, 5fr); align-items: center; column-gap: clamp(40px, 6vw, 104px); }
.rt-story-chapter + .rt-story-chapter, .rt-story-band + .rt-story-chapter { margin-top: var(--rt-section-y, 112px); }
.rt-story-chapter--media-right { grid-template-columns: minmax(min-content, 5fr) minmax(0, 6fr); }
.rt-story-chapter--media-right .rt-story-media { order: 2; justify-self: end; }
.rt-story-chapter:not(.rt-story-chapter--media-right) .rt-story-media { justify-self: start; }
.rt-story-media { width: 100%; max-width: 600px; overflow: hidden; border-radius: 22px; background: #f4ece2; }
.rt-story-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rt-story-copy { max-width: 32rem; }
.rt-story-chapter:not(:has(.rt-story-media)) { grid-template-columns: minmax(0, 1fr); }

/* The promise: a colour band across the page, its copy centred. The art behind it on rootist.com is this gradient
   with a line drawn in; the band keeps the colours only. */
.rt-story-band { margin-top: var(--rt-section-y, 112px); padding-block: var(--rt-section-y, 112px); background: linear-gradient(180deg, var(--rt-band-from, #e5b168), var(--rt-band-to, #e4bc5d)); }
.rt-story-band-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rt-story-band .rt-story-text { max-width: 36em; color: #672c45; }
.rootist-store .rt-story-band .rt-story-eyebrow { color: #672c45; }

/* We believe: each line finishes the heading's sentence, set as a list ruled like the FAQ. */
.rt-story-beliefs-list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgb(103 44 69 / 0.16); }
.rt-story-beliefs-list li { padding: 18px 0; border-bottom: 1px solid rgb(103 44 69 / 0.16); font: 400 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.011em; color: #672c45; text-wrap: pretty; }

/* The title keeps to two lines on the wall: 64px from 1280px, 48px below. */
@media (max-width: 1279.98px) {
  .rootist-store .rt-story .rt-story-hero-copy h1.rt-story-title { font-size: 48px !important; line-height: 52px !important; }
}
@media (max-width: 1068px) {
  .rootist-store .rt-story h2.rt-story-h2 { font-size: 40px !important; line-height: 44px !important; }
  .rt-story-text, .rt-story-beliefs-list li { font-size: 19px; line-height: 27px; }
  .rootist-store .rt-story-statement p { font-size: 32px; line-height: 40px; }
  .rt-story-hero-copy { width: 44%; }
}
@media (max-width: 900px) {
  .rt-story-chapter { grid-template-columns: minmax(0, 1fr) minmax(min-content, 1fr); column-gap: 32px; }
  .rt-story-chapter--media-right { grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .rootist-store .rt-story .rt-story-chapter h2.rt-story-h2 { font-size: 32px !important; line-height: 36px !important; }
}
@media (max-width: 734px) {
  .rt-story-hero { padding-top: 32px; }
  .rt-story-hero-frame { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
  .rt-story-hero-copy { position: static; transform: none; width: auto; margin-bottom: 28px; }
  .rootist-store .rt-story-hero-copy .rt-story-eyebrow { color: rgb(103 44 69 / 0.78); }
  .rootist-store .rt-story .rt-story-hero-copy h1.rt-story-title { color: #672c45; }
  .rt-story-hero-media { position: relative; inset: auto; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: #6e1f1f; }
  .rt-story-hero-media img { object-position: var(--rt-story-focus, 88%) 50%; }
  .rootist-store .rt-story h2.rt-story-h2 { font-size: 32px !important; line-height: 36px !important; }
  .rt-story-text, .rt-story-beliefs-list li { font-size: 17px; line-height: 25px; letter-spacing: -0.01em; }
  .rootist-store .rt-story-statement p { font-size: 28px; line-height: 34px; }
  .rt-story-chapter, .rt-story-chapter--media-right { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .rt-story-chapter--media-right .rt-story-media { order: 0; }
  .rt-story-media, .rt-story-chapter:not(.rt-story-chapter--media-right) .rt-story-media { justify-self: stretch; max-width: none; border-radius: 20px; }
  .rt-story-copy { max-width: none; }
  .rootist-store .rt-story-actions { margin-top: 28px; }
  .rt-story-beliefs-list li { padding: 16px 0; }
}
/* Small phones: ROOTS+SCALP+HAIR, the longest heading word, still fits the column. */
@media (max-width: 374px) {
  .rootist-store .rt-story h2.rt-story-h2, .rootist-store .rt-story .rt-story-chapter h2.rt-story-h2 { font-size: 28px !important; line-height: 32px !important; }
  .rootist-store .rt-story .rt-story-hero-copy h1.rt-story-title { font-size: 40px !important; line-height: 44px !important; }
}
@media (max-width: 339px) {
  .rootist-store .rt-story h2.rt-story-h2, .rootist-store .rt-story .rt-story-chapter h2.rt-story-h2 { font-size: 24px !important; line-height: 28px !important; }
}

/* ---------- FAQ page ---------- */
/* The site's FAQ component as it is on the homepage (rootist-pdp.css), with the page's heading as its h1, topic
   links under the intro, and the group headings in the list, each followed by its questions. */
.rootist-store .rt-faq--page .rt-faq-head h1.rt-h2.rt-faq-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.005em; color: #672c45; text-wrap: balance; }
/* The page opens as the quiz page does, 72px under the header, and keeps the section rhythm at its foot. */
.rootist-store section.rt-faq--page { padding-top: 72px; }
/* The heading column stays 32px under the sticky header (83px once the announcement bar has scrolled away). */
.rt-faq--page .rt-faq-head { top: calc(83px + 32px); }
.rt-faq-topics { margin-top: 32px; }
.rt-faq-topics ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rt-faq-topics a { display: inline-block; padding: 6px 0; font: 700 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; text-decoration: none; }
.rt-faq-topics a:focus-visible { outline: 3px solid #672c45; outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .rt-faq-topics a:hover { opacity: 0.72; } }
.rt-faq-list.rt-faq-list--grouped { border-top: 0; }
/* A group heading starts where its questions' text does: the summary's 24px padding (4px on phones) plus the 18px
   left margin the theme gives every summary (.rootist-store summary in rootist-consolidated.css). */
.rootist-store .rt-faq--page h2.rt-faq-group { margin: 64px 0 0; padding: 0 24px 20px 42px; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 32px !important; line-height: 36px !important; letter-spacing: -0.005em; color: #672c45; }
.rootist-store .rt-faq--page .rt-faq-list > h2.rt-faq-group:first-child { margin-top: 0; }
.rt-faq-group + .rt-faq-item { border-top: 1px solid rgb(103 44 69 / 0.16); }
@media (max-width: 1068px) {
  .rootist-store .rt-faq--page .rt-faq-head h1.rt-h2.rt-faq-title { font-size: 40px !important; line-height: 44px !important; }
  .rootist-store .rt-faq--page h2.rt-faq-group { font-size: 28px !important; line-height: 32px !important; }
}
@media (max-width: 734px) {
  .rootist-store .rt-faq--page .rt-faq-head h1.rt-h2.rt-faq-title { font-size: 32px !important; line-height: 36px !important; }
  .rootist-store .rt-faq--page h2.rt-faq-group { margin-top: 48px; padding: 0 4px 16px 22px; font-size: 24px !important; line-height: 28px !important; }
  .rt-faq-topics { margin-top: 24px; }
}