/* Long-form article layout, shared by /story/ and the guide pages.
   Tokens come from styles.css; nothing here defines a colour of its own. */

.art-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

.art-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0 0;
}
.art-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text); text-decoration: none;
}
.art-back:hover { color: var(--color-accent); }

/* One measure for everything that is read. The bar spans the wrap; the column
   is centred, so there is no step inward between the standfirst and the body. */
.art-col { max-width: 34rem; margin-inline: auto; }

.art-head { padding: clamp(40px, 7vw, 78px) 0 0; }
.art-h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(36px, 5.6vw, 62px); line-height: 1.04;
  letter-spacing: -0.022em; margin: 14px 0 0; text-wrap: balance;
}
.art-standfirst {
  font-size: clamp(17px, 2vw, 21px); line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
  margin: 26px 0 0;
}
.art-meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 30px 0 0;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.art-body { margin: clamp(44px, 6vw, 72px) 0 0; }
.art-body p { font-size: 18px; line-height: 1.72; margin: 0 0 22px; color: var(--color-text); }
.art-body h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(23px, 3vw, 29px); line-height: 1.18;
  letter-spacing: -0.012em; margin: 52px 0 18px; text-wrap: balance;
}
.art-body h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 19px; line-height: 1.3; margin: 34px 0 12px;
}
.art-body a { color: var(--color-accent); text-underline-offset: 3px; }
.art-body ul, .art-body ol { margin: 0 0 22px; padding-left: 22px; }
.art-body li { font-size: 18px; line-height: 1.72; margin: 0 0 10px; }
.art-body li::marker { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.art-body strong { font-weight: 700; }

/* Qualified with the element: `.art-body p` is more specific than a bare
   `.art-pull`, and would otherwise flatten the quote to body size and colour. */
.art-body p.art-pull {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.14;
  letter-spacing: -0.018em; color: var(--color-accent);
  margin: 40px 0; padding: 0 0 0 22px;
  border-left: 5px solid var(--color-accent); text-wrap: balance;
}

/* The direct answer, sat above the argument. Search engines and answer engines
   both reward a page that answers its own title before it explains itself. */
.art-answer {
  margin: 0 0 34px; padding: 22px 24px;
  background: var(--color-neutral-100);
  border-left: 5px solid var(--color-accent);
  border-radius: 0 10px 10px 0;
}
.art-answer p { font-size: 18px; line-height: 1.66; margin: 0; }
.art-answer p + p { margin-top: 14px; }

.art-figure { margin: 46px 0; }
.art-figure img { width: 100%; height: auto; display: block; border: 2px solid var(--color-divider); border-radius: 12px; }
.art-figure figcaption {
  font-size: 13px; line-height: 20px; margin-top: 12px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.art-source {
  font-size: 14px; line-height: 1.6; margin: 0 0 22px;
  padding-left: 16px; border-left: 2px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

.art-sign {
  margin: 54px 0 0; padding-top: 22px;
  border-top: 2px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase;
}
.art-sign span {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 13px; letter-spacing: 0; text-transform: none; margin-top: 4px;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* Questions people also ask, marked up as FAQPage. Always open — a page whose
   answers are hidden behind a click is a page an answer engine reads last. */
.art-faq { margin: 54px 0 0; padding-top: 26px; border-top: 2px solid var(--color-divider); }
.art-faq h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(21px, 2.6vw, 26px); margin: 0 0 22px;
}
.art-faq h3 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.35; margin: 26px 0 8px; }
.art-faq p { font-size: 16px; line-height: 1.66; margin: 0; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.art-faq a { color: var(--color-accent); text-underline-offset: 3px; }

.art-related { margin: 48px 0 0; padding-top: 26px; border-top: 2px solid var(--color-divider); }
.art-related h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 16px;
}
.art-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.art-related a { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-text); text-decoration: none; }
.art-related a:hover { color: var(--color-accent); }
.art-related span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.5; margin-top: 3px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }

/* Clears the 52px between in-article headings so it reads as a larger break,
   without stranding what precedes it in white. */
.art-cta { margin: clamp(52px, 4.4vw, 64px) 0 clamp(64px, 9vw, 110px); }
.art-cta h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(25px, 3.6vw, 36px); line-height: 1.14;
  letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance;
}
.art-cta p { font-size: 16px; line-height: 1.6; margin: 0 0 26px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }