/* ============================================================
   PRAXIS TYPE - the typographic system ("o caro esta aqui")
   costandprofitability.com - FABLE, 05 Jul 2026
   Enqueue AFTER cnp-praxis.css, BEFORE praxis-motion.css.
   Newsreader (serif display) / Hanken Grotesk (body) / IBM Plex Mono (labels).
   ============================================================ */

:root{
  /* ---------- modular scale (1.25 major third, tuned) ---------- */
  --tp-xs:   12px;   /* mono micro-labels */
  --tp-sm:   13.5px; /* captions, meta */
  --tp-base: 16px;   /* body */
  --tp-md:   18px;   /* ledes on content pages */
  --tp-lg:   21px;   /* ledes on top pages, pull-quote base */
  --tp-h4:   clamp(19px, 1.6vw, 22px);
  --tp-h3:   clamp(22px, 2.2vw, 27px);
  --tp-h2:   clamp(27px, 3.2vw, 38px);
  --tp-h1:   clamp(36px, 5vw, 58px);
  --tp-hero: clamp(40px, 5.6vw, 66px);

  /* ---------- line heights ---------- */
  --lh-display: 1.05;   /* h1/hero */
  --lh-head:    1.14;   /* h2/h3 */
  --lh-body:    1.62;   /* body copy */
  --lh-tight:   1.4;    /* captions, cards */

  /* ---------- letter spacing ---------- */
  --ls-display: -0.015em;  /* serif display sizes */
  --ls-head:    -0.008em;
  --ls-mono:     0.1em;    /* mono labels, uppercase */

  /* ---------- measure ---------- */
  --measure-body: 66ch;
  --measure-lede: 58ch;
  --measure-head: 24ch;

  /* ---------- vertical rhythm (spacing scale, 8px base) ---------- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 144px;
  /* section paddings: top pages breathe more */
  --sec-pad: var(--sp-6);
  --sec-pad-hero: clamp(64px, 9vh, 112px);
}

/* ---------- headings ---------- */
.tp h1, .tp-h1{ font-family:'Newsreader',serif; font-weight:500;
  font-size:var(--tp-h1); line-height:var(--lh-display); letter-spacing:var(--ls-display);
  max-width:var(--measure-head); text-wrap:balance; }
.tp h2, .tp-h2{ font-family:'Newsreader',serif; font-weight:500;
  font-size:var(--tp-h2); line-height:var(--lh-head); letter-spacing:var(--ls-head);
  max-width:32ch; text-wrap:balance; }
.tp h3, .tp-h3{ font-family:'Newsreader',serif; font-weight:500;
  font-size:var(--tp-h3); line-height:var(--lh-head); }
.tp h4, .tp-h4{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:var(--tp-h4); }

/* title-turn: last words of a display heading in italic orange (site canon).
   Markup: <h1>Watch your profit <em class="turn">change shape.</em></h1> */
.turn, .tp h1 em, .tp h2 em{ font-style:italic; color:var(--orange, #C75B22); }

/* ---------- body ---------- */
.tp p, .tp-body{ font-family:'Hanken Grotesk',sans-serif; font-size:var(--tp-base);
  line-height:var(--lh-body); max-width:var(--measure-body); text-wrap:pretty; }
.tp .lede, .tp-lede{ font-size:var(--tp-lg); line-height:1.55; max-width:var(--measure-lede);
  color:var(--ink2, #4A443C); text-wrap:pretty; }

/* ---------- mono labels (kickers, captions, axes) ---------- */
.tp-label{ font-family:'IBM Plex Mono',monospace; font-size:var(--tp-xs);
  letter-spacing:var(--ls-mono); text-transform:uppercase; font-weight:500; }

/* ---------- editorial details ---------- */
/* drop cap: first paragraph of an article. Markup: <p class="dropcap"> */
.dropcap::first-letter{
  font-family:'Newsreader',serif; font-weight:500;
  font-size:3.1em; line-height:.82; float:left;
  padding:6px 10px 0 0; color:var(--orange, #C75B22);
}
/* lead-in: first phrase in small caps. Markup: <span class="leadin">First words</span> */
.leadin{ font-weight:700; letter-spacing:.04em; font-variant:small-caps; }

/* typographic quotes for pull quotes */
.pullquote{ font-family:'Newsreader',serif; font-style:italic; font-weight:400;
  font-size:clamp(21px, 2.6vw, 28px); line-height:1.35; max-width:44ch;
  padding-left:22px; border-left:3px solid var(--orange, #C75B22); text-wrap:pretty; }
.pullquote::before{ content:"\201C"; }
.pullquote::after{ content:"\201D"; }
.pullquote .cite{ display:block; margin-top:12px; font-family:'IBM Plex Mono',monospace;
  font-style:normal; font-size:var(--tp-xs); letter-spacing:var(--ls-mono);
  text-transform:uppercase; color:var(--muted, #8A8071); }
.pullquote .cite::before{ content:""; } /* no dash: guardrail, mono caps is enough */

/* widow/orphan control everywhere it matters */
.tp h1,.tp h2,.tp h3{ text-wrap:balance; }
.tp p, .tp li, .tp .lede{ text-wrap:pretty; }

/* ---------- vertical rhythm helpers ---------- */
.sec-rhythm{ padding-block:var(--sec-pad); }
.sec-rhythm.hero{ padding-block:var(--sec-pad-hero) var(--sp-5); }
.tp h2 + p{ margin-top:var(--sp-2); }
.tp p + p{ margin-top:var(--sp-2); }
.tp .lede{ margin-top:var(--sp-3); }

/* blog/SEO pages inherit ONLY this file (not hero art):
   wrap article body in .tp.article */
.tp.article p{ margin-top:var(--sp-2); }
.tp.article h2{ margin-top:var(--sp-4); }
.tp.article h3{ margin-top:var(--sp-3); }
.tp.article ul, .tp.article ol{ max-width:var(--measure-body); padding-left:1.2em; }
.tp.article li{ line-height:var(--lh-body); margin-top:6px; }