/* ailb-hero.css — canonical hero + essay typography.
 *
 * Loaded by /about, /goal, /for-seekers, /for-experts.
 *
 * SINGLE SOURCE OF TRUTH. Never redefine these rules in a page's
 * local <style> block — the pages will silently drift.
 *
 * Canonical hero markup (every marketing page uses this):
 *
 *   <article class="essay">
 *     <div class="eyebrow">…</div>
 *     <h1>…</h1>
 *     <p class="hero-sub">…</p>
 *     <p class="hero-sub orange-callout">…</p>
 *     … page body …
 *   </article>
 *
 * Assumes standard CSS variables in :root: --display, --body,
 * --mono, --ink, --ink-mid, --ink-faint, --accent, --line,
 * --line-strong.
 */

/* ─── Essay column ─────────────────────────────────────────────── */

.essay {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  text-align: left;
}

/* ─── Eyebrow ──────────────────────────────────────────────────── */

.essay .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 1.5rem 0;
}

/* ─── H1 ───────────────────────────────────────────────────────── */

.essay h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 1.5rem 0;
}
.essay h1 em {
  color: var(--accent);
  font-style: normal;
  font-weight: 400;
}

/* ─── Hero sub (grey italic Fraunces, NO orange in body of sub) ── */

.essay .hero-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.3vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-mid);
  margin: 0 0 1rem 0;
}
/* Deliberately: no rule for .hero-sub em — we're keeping subs clean grey */

/* ─── Orange callout — the second sub line ─────────────────────── */

.essay .hero-sub.orange-callout {
  color: var(--accent);
  margin: 0 0 3rem 0;
}

/* ─── Essay body paragraphs ────────────────────────────────────── */

.essay p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.5rem 0;
}
.essay p em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.essay p strong {
  font-weight: 500;
  color: var(--ink);
}
/* Restore .hero-sub styling for p.hero-sub (in case cascade fights) */
.essay p.hero-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.3vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-mid);
  margin: 0 0 1rem 0;
}
.essay p.hero-sub.orange-callout {
  color: var(--accent);
  margin: 0 0 3rem 0;
}

/* ─── Section headers inside an essay ──────────────────────────── */

.essay .section-h2 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 1.5rem 0;
}
.essay .section-break {
  padding-top: 3rem;
}

/* ─── Closing italic mantra ────────────────────────────────────── */

.essay .close {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--accent);
  margin-top: 2.5rem;
  line-height: 1.5;
  text-align: center;
}
.essay .close em {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}