/* ============================================================================
   Brotherhood MARKETING primitives — the /join landing language, extracted into
   ONE shared source so every landing/funnel page (join, brofest, future funnels)
   uses the same components instead of duplicating CSS (global Rule #9).

   Scope: shared section shell, centered intro, flanked eyebrow, display
   headings, lede/subhead, bronze divider. Page-SPECIFIC sections (benefits,
   pricing, voices, stats, etc.) stay in their own page.

   Tokens (--bronze, --accent, --text, --muted) come from site.css :root.
   Values are kept identical to the /join inline originals so join can migrate
   onto this file with no visual change (Phase 2).
   ============================================================================ */

/* ---- Section shell ---- */
.join-section            { padding: 96px var(--page-gutter); }
.join-section--cream     { background: #f3ead8 url('/assets/images/hfm-cream-bg.webp') center/cover no-repeat; position: relative; }
.join-section--cream::before { content: none; }
.join-section--cream > * { position: relative; z-index: 1; }

/* ---- Inner column widths ---- */
.join-inner          { max-width: var(--max-w); margin: 0 auto; }
.join-inner--narrow  { max-width: 880px; }

/* ---- Centered intro block ---- */
.join-intro { text-align: center; }

/* ---- Flanked eyebrow (bronze label + cyan micro-strokes) ---- */
.join-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 18px;
}
.join-eyebrow::before,
.join-eyebrow::after {
  content: ""; display: inline-block; width: 28px; height: 2px; background: var(--accent);
}

/* ---- Display headline + accent word ---- */
.join-h1 {
  font-size: clamp(34px, 5vw, 56px); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 24px; color: var(--text);
}
.join-h1 em { font-style: normal; color: var(--bronze); }

/* ---- Lede paragraph ---- */
.join-lede {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted);
  margin: 0 auto 36px; max-width: 720px;
}

/* ---- Section heading + subhead ---- */
.join-h2 {
  font-size: clamp(28px, 3.6vw, 36px); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.005em; margin: 0 0 16px; color: var(--text);
}
.join-subhead {
  font-size: clamp(15px, 1.2vw, 17px); color: var(--muted); line-height: 1.55;
  margin: 0 auto; max-width: 640px;
}
/* No single-word last lines (orphans): the browser pulls a word down so the last
   line has >=2 words. Honored by Chromium (Chrome, Samsung Internet); degrades
   gracefully elsewhere. NOT an absolute guarantee — for that, JS-nbsp the last 2 words. */
.join-h1, .join-h2, .join-lede, .join-subhead { text-wrap: pretty; }

/* ---- Bronze divider rule (the anti-manifesto divider, as a shared utility) ---- */
.join-divider { width: 60px; height: 2px; background: var(--bronze); margin: 36px auto; }

/* ---- Responsive (breakpoints + values identical to /join) ---- */
@media (max-width: 1024px) {
  .join-section { padding: 72px 24px; }
}
@media (max-width: 600px) {
  .join-section { padding: 56px 18px; }
  .join-eyebrow::before,
  .join-eyebrow::after { width: 18px; }
  .join-divider { margin: 28px auto; }
}
@media (max-width: 380px) {
  .join-section { padding: 44px 14px; }
  .join-h1 { font-size: clamp(26px, 8.5vw, 32px); }
  .join-h2 { font-size: clamp(22px, 7vw, 28px); }
  .join-lede { font-size: 15px; }
}