/**
 * =====================================================================
 * ARTICLE COMPONENT — STYLES
 * =====================================================================
 * Copied from the authoritative design system CSS provided earlier in
 * this project (the same file .news/.partners/.newsletter/etc. all
 * came from).
 *
 * Tag qualifiers and font-family !important applied from the start,
 * not waiting for a bug report — both confirmed necessary, repeatedly,
 * elsewhere in this project: a bare single-class selector loses to
 * Blocksy's own base styling, and font-family specifically needs
 * !important since Blocksy uses !important on that property too, even
 * on selectors that already have a class+tag ancestor (confirmed on
 * .stat__num — specificity alone wasn't enough for that one property).
 * =====================================================================
 */

section.article-hero {
  padding-block: clamp(120px, 14vw, 170px) 0;
  background: var(--ivory);
  position: relative;
}
.article-hero .container { max-width: 820px; }
/*
 * ::before dash ADDED — not in the originally-provided CSS, but
 * confirmed present in the actual target design (a small red dash
 * before the kicker text, matching the same visual technique already
 * used by .eyebrow elsewhere in this project).
 */
span.article__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono) !important; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red);
}
.article__kicker::before { content: ""; width: 26px; height: 1px; background: var(--red); }
.article-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; margin: 20px 0 24px;
}
div.article__meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--slate); font-size: 13.5px; padding: 16px 0; border-block: 1px solid var(--line); }
.article__meta span::before { content: "·"; margin-right: 8px; color: var(--red); }
.article__meta span:first-child::before { content: ""; margin-right: 0; }

figure.article__figure { max-width: 1000px; margin: 40px auto 0; padding-inline: var(--gutter); }
.article__figure img { border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.article__figure figcaption { font-family: var(--font-mono) !important; font-size: 13px; color: var(--slate); text-align: center; margin-top: 14px; letter-spacing: 0.05em; }

div.article__body {
  max-width: 720px; margin: 0 auto; padding: 60px var(--gutter) 20px;
  font-size: 1.08rem; line-height: 1.75;
}
.article__body p { color: var(--ink); margin-bottom: 1.4em; }
.article__body h2 { font-family: var(--font-display) !important; font-weight: 500; font-size: var(--step-3); margin: 1.4em 0 0.5em; line-height: 1.15; }
.article__body h3 { font-family: var(--font-display) !important; font-weight: 500; font-size: var(--step-2); margin: 1.4em 0 0.5em; }
.article__body ul { padding-left: 0; list-style: none; margin: 0 0 1.4em; }
.article__body ul li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--line); }
.article__body ul li:last-child { border-bottom: 1px solid var(--line); }
.article__body ul li::before { content: "→"; color: var(--red); position: absolute; left: 0; }
.article__body blockquote {
  margin: 40px 0; padding: 26px 30px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display) !important; font-style: italic; font-size: var(--step-2);
  line-height: 1.3; color: var(--ink);
  background: var(--ivory); border-radius: 0 12px 12px 0;
}
.article__body a { color: var(--red); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.article__body a:hover { color: var(--red-deep); }

div.article__cta {
  max-width: 720px; margin: 30px auto 0; padding: 30px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-top: 1px solid var(--line);
}
.article__share { display: flex; gap: 8px; }
.article__share a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.article__share a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.article__share svg { width: 15px; height: 15px; }

@media (max-width: 700px) {
  .article__cta { flex-direction: column; align-items: flex-start; }
}