/* =================================================================
   Mali Richlen Advisory — Insight Article / White Paper
   ----------------------------------------------------------------
   Page-specific CSS for the long-form Insight detail pages
   ("The Valuation Gap," "AI and the Owner-Led Business").

   Article structure:
     .article-head        — eyebrow, H1, optional subline, meta-row
     .article-body        — prose with sectioned H2s (48px camel hairline)
     .article-close-section — italic camel-deep closing line
     .related-section     — related-reading card(s)

   The prose has TWO opening-paragraph variants:
     - Default: standard body paragraph
     - `.article-prose.has-lede p:first-of-type`: Playfair italic
       camel-deep lede (used on "The Valuation Gap")

   Loads AFTER tokens.css → globals.css → site.css.
   ================================================================= */


/* =================================================================
   ARTICLE HEAD — eyebrow, H1, optional subline, meta-row
   ================================================================= */

.article-head {
  padding-top: clamp(48px, 6vh, 88px);
  padding-bottom: clamp(40px, 5vh, 72px);
  border-bottom: 1px solid var(--line-soft);
}
.article-head-grid {
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

h1.article-h {
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  max-width: 22ch;
  color: var(--navy);
}
h1.article-h em { font-style: italic; font-weight: 400; color: var(--forest); }

.article-subline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  color: var(--camel-deep);
  margin: 28px 0 0;
  max-width: 42ch;
  letter-spacing: -0.005em;
}

.article-meta {
  margin-top: 32px;
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.article-meta div {
  display: grid;
  gap: 4px;
}
.article-meta b {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  line-height: 1;
}
.article-meta span {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.3;
}


/* =================================================================
   ARTICLE BODY — prose with sectioned H2s
   ================================================================= */

.article-body {
  padding: clamp(56px, 7vh, 96px) 0 clamp(72px, 9vh, 120px);
}
.article-body-grid {
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.article-prose {
  max-width: var(--read-max);
}
.article-prose p {
  font-family: var(--body);
  font-size: var(--fs-body-l);
  line-height: 1.7;
  color: var(--navy-ink);
  margin: 0 0 1.4em;
  text-wrap: pretty;
}

/* Opt-in italic Playfair lede on the first paragraph
   (used on "The Valuation Gap" — set class="article-prose has-lede") */
.article-prose.has-lede p:first-of-type {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.45;
  color: var(--camel-deep);
  margin: 0 0 1.6em;
  letter-spacing: -0.005em;
}

.article-prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 2.2em 0 0.8em;
  max-width: 26ch;
  position: relative;
  padding-top: 1em;
}
.article-prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--camel);
}
.article-prose h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--forest);
}
.article-prose h2 + p { margin-top: 0; }

.article-prose strong {
  font-family: var(--body);
  font-weight: 600;
  color: var(--navy);
}


/* =================================================================
   ARTICLE CLOSING — italic camel-deep line on cream-warm ground
   ================================================================= */

.article-close-section {
  background: var(--cream-warm);
  border-top: 1px solid var(--line-soft);
  padding: clamp(72px, 10vh, 120px) 0;
  text-align: center;
}
.article-close-grid {
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.article-close-inner {
  max-width: 56ch;
  margin: 0 auto;
}
.article-close-rule {
  width: 80px;
  height: 1px;
  background: var(--camel);
  margin: 0 auto 36px;
  border: 0;
}
.article-close-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.4;
  color: var(--camel-deep);
  margin: 0 0 36px;
  letter-spacing: -0.005em;
}


/* =================================================================
   RELATED READING
   ================================================================= */

.related-section {
  padding: clamp(72px, 10vh, 120px) 0;
  background: var(--paper);
}
.related-grid {
  display: grid;
  grid-template-columns: var(--rail-col) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.related-inner {
  max-width: var(--read-max);
}

.related-card {
  display: block;
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  padding: clamp(32px, 4vw, 48px);
  text-decoration: none;
  color: inherit;
  margin-top: 24px;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--forest);
  box-shadow: 0 18px 40px -28px rgba(31, 42, 68, 0.5);
}

.related-card-eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 16px;
  display: block;
}
.related-card-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 12px;
  max-width: 30ch;
}
.related-card-h em { font-style: italic; font-weight: 400; color: var(--forest); }
.related-card-p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--navy-ink);
  margin: 0 0 16px;
  max-width: 56ch;
}
.related-card-read {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--forest);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 220ms ease, gap 220ms ease;
}
.related-card:hover .related-card-read {
  gap: 14px;
  border-bottom-color: var(--forest);
}
.related-card-read .arr { color: var(--camel); }


/* =================================================================
   RESPONSIVE
   ================================================================= */

/* 820px — article body collapses to single column */
@media (max-width: 820px) {
  .article-head-grid,
  .article-body-grid,
  .article-close-grid,
  .related-grid { grid-template-columns: 1fr; }
}