/* =========================================================================
   typography.css - advanced typographic layer.
   Loads AFTER theme.css and BEFORE home.css, so it sets sensible global
   defaults while component styles still win where they intend to.
   The point: modern CSS now does, in one line, what used to take JS
   (widont, FitText, jquery-balancetext). Tiny declarations, large polish.
   ========================================================================= */

/* ---- 1. Rendering quality (whole document) ---------------------------- *
 * text-rendering turns on kerning + ligatures; the smoothing pair gives a
 * crisp, even weight on both the light and dark surfaces this site uses;
 * font-synthesis:none stops the browser faking bold/italic (our variable
 * fonts carry real weights, so faux styles would look muddy).            */
html {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-synthesis: none;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* ---- 2. Balance vs pretty (the headline act) -------------------------- *
 * balance = even out line lengths across a heading (best for <=~6 lines).
 * pretty  = leave wrapping alone but forbid a lone last word (orphan).
 * Headings + short intro lines get balance; running body copy gets pretty.
 * overflow-wrap guards against a long URL/word ever breaking the layout. */
h1, h2, h3, h4, h5, h6,
.hero-display, .page-display, .section-title, .feature-title, .fit-card__title,
.team-card__name, .side-cta__title, .note-card__title, .toc-box__title,
.blog-card__h, .blog-card__title, figcaption {
  text-wrap: balance;
  overflow-wrap: break-word;
}
p, li, dd, .section-body, .post-excerpt, .term-card__bio, .blog-card__x {
  text-wrap: pretty;
}
/* Leads and subheads are short: let balance beat the generic p rule.      */
.lead, .section-sub, .testi-quote, .side-cta__sub, .step-body {
  text-wrap: balance;
}

/* ---- 3. Heading micro-typography -------------------------------------- *
 * Gradient-clipped words (background-clip:text) shave the right-most glyph
 * (the 'y' in "sales") without a hair of trailing space.                  */
.hero-display .blue, .page-display .blue, .grad-text { padding-right: .04em; }

/* ---- 4. Numerals: tabular + slashed zero where digits must line up ----- *
 * Proportional figures are right for prose; but stats, dates, table
 * columns and counters read better as tabular (fixed-width) with a
 * slashed zero so 0 never reads as O.                                     */
.tnum, .step-num, .post-date, .blog-card__d, .blog-card__meta, .post-rtime,
.prose td, .prose th, time, [class*="count"], [class*="-num"], [class*="stat"] {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ---- 5. Links: cleaner underlines ------------------------------------- *
 * Lower the underline off the baseline and let it skip descenders.        */
a { text-underline-offset: .14em; text-decoration-skip-ink: auto; }
.prose a { text-decoration-thickness: 1.5px; }

/* ---- 6. Prose (article body) refinements ------------------------------ *
 * hanging-punctuation lets opening quotes/bullets sit in the margin so the
 * text edge stays optically straight (Safari today; harmless elsewhere).  */
.prose { hanging-punctuation: first last; }
.prose p { text-wrap: pretty; }
.prose li { text-wrap: pretty; }

/* Drop cap on blog ARTICLES only (body.single-post), not the FAQ answers,
 * and only where the browser supports real initial-letter sinking (so we
 * never ship a broken float fallback).                                    */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  body.single-post .post-body.prose > p:first-of-type::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-family: var(--head);
    font-weight: 800;
    color: var(--brand);
    margin-right: .12em;
    padding-top: .02em;
  }
}

/* ---- 7. Reduced motion note ------------------------------------------- *
 * Nothing here animates, so no reduced-motion guard is needed; the whole
 * layer is static and safe to ship everywhere.                            */