/* =====================================================================
   MG LAW — typography.css
   Named, reusable TEXT FORMATS. Pull-once, reuse-everywhere.
   Linked after common.css on every page.

   Spoken name  ->  class
     "Hero"      ->  .fmt-hero-title / .fmt-hero-text   (text over an image)
     "Default"   ->  .fmt-default                       (standard body paragraph)
     "Sub-Text"  ->  .fmt-subtext-title / .fmt-subtext-text

   These classes carry ONLY font properties (size/weight/line-height/
   letter-spacing/color). Keep layout props (margin/max-width/etc.) on the
   element. Change a value here once -> it applies across all pages.
   ===================================================================== */

/* ---- "Hero" — title + paragraph that sit on a dark image overlay ---- */
.fmt-hero-title{font-weight:500;font-size:clamp(30px,3.9vw,48px);line-height:1.08;letter-spacing:-0.02em;color:#fff;}
.fmt-hero-text{font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:rgba(255,255,255,.92);}

/* ---- "Default" — standard body paragraph (tokens: single source of truth) ---- */
.fmt-default{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body);color:#5a5a5a;}

/* ---- "Sub-Text" — compact title + paragraph (cards, news, steps) ---- */
.fmt-subtext-title{font-weight:var(--fw-heading);font-size:clamp(18px,1.65vw,22px);line-height:1.22;letter-spacing:-0.01em;color:#111;}
.fmt-subtext-text{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:#555;}