/* ══ ARCA — shared title treatment ══════════════════════════════════════
   Every big title shares the manifesto's weight and tracking. Italic is
   deliberately NOT unified: only the manifesto is italic, the rest stay
   upright. That means the italic "w" in "A world of experiences" still
   differs from the roman "w" in "We believe a room full of people…" —
   that is the intended look.

   Linked AFTER each page's inline <style> so it wins on source order —
   no !important needed.

   Deliberately NOT included: card and modal titles (.pillar-title,
   .benefit-title, .svc-modal-title). Those are small type, and the brief
   was big titles only.
   ─────────────────────────────────────────────────────────────────────── */

.mi-line-1,
.section-title,
.ethos-quote,
.fp-compact-headline,
.cta-layer-title,
.showcase-title,
.hero-title,
.cta-title,
.spaces-title,
.left-title,
.form-title,
.login-title {
  /* membership/partnerships/events set .section-title to var(--display)
     (Granada) while index uses var(--serif) (Cormorant). The manifesto is
     the reference, so every title resolves to Cormorant. */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 200;
  letter-spacing: -0.01em;
  /* The last setting that still varied: the ethos quotes sat at 1.35 and
     the A.R.C.A. headline at 1.20, while the manifesto and the rest were
     at 1.10. Same typography now means the same leading too. */
  line-height: 1.1;
  font-variant-ligatures: no-common-ligatures;
}

/* Accent spans stay italic but inherit the title's weight instead of
   jumping to 400 — that jump is what made "one circle" read as bold. */
.section-title em,
.ethos-quote em,
.fp-compact-headline em,
.cta-layer-title em,
.hero-title em,
.cta-title em,
.spaces-title em,
.login-title em {
  font-style: italic;
  font-weight: inherit;
}

/* The manifesto sets its own tracking; keep it authoritative. */
.mi-line-1 {
  letter-spacing: -0.01em;
}

/* ══ Card tier ═══════════════════════════════════════════════════════════
   Aligned to jomocommunity.com, the reference build. Measured there:
   every title — hero at 104px down to card titles at 40px — sits at ONE
   weight (100 in Ivy Presto) with no optical stepping, and the card titles
   are fully roman. Only the hero is fully italic; section and CTA titles
   carry a single italic accent word. Cards carry none.

   So: same weight as the display titles, and no italic on the accent line.
   "Membership / Community" reads as one roman two-line title, which is
   exactly how the reference sets the same four cards.
   ─────────────────────────────────────────────────────────────────────── */
.pillar-title,
.svc-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-ligatures: no-common-ligatures;
}

/* The reference sets card titles fully roman — the accent italic is a
   display-title device there, not a card one. */
.pillar-title em,
.svc-modal-title em {
  font-style: normal;
  font-weight: inherit;
}

/* NOTE — weights below 300 are inert with the current font.
   Cormorant Garamond's lightest cut is 300; Google clamps anything lower to
   it. Measured: "Membership world" at 200px renders 1446.81px wide at
   font-weight 100, 200 AND 300 — byte-identical. So the 200 declared above
   is documentation of intent, not a rendered weight, and the mobile
   legibility bump that used to sit here was provably a no-op (it set 300 on
   text already rendering at 300). Removed rather than left to mislead.

   This is also why the site cannot match jomocommunity.com's hairline
   titles: Ivy Presto ships a true 100, Cormorant floors at 300. Canela
   (see canela-local.css) ships a Thin 200, which is presumably why it was
   trialled. If Canela ever ships for real, weight 200 starts rendering
   genuinely thin — at which point the ~10px mobile card titles WILL need
   the bump back, or a size increase. */


/* == Periods stay upright ================================================
   The dots are deliberately set in the label sans so they render as clean
   points, not serif diamonds. An italic period is a meaningless lean, and
   now that accents like <em>A.R.C.A.</em> wrap their own dots, guard it. */
.mi-line-1 .mi-dot,
.section-title .dot,
.ethos-quote .dot,
.fp-compact-headline .dot {
  font-style: normal;
}