/* ============================================================
   HealthCompass - shared display type tier.
   v2.31.0

   THE PROBLEM THIS SOLVES
   Seventeen pages had seventeen hero-title class names and SEVEN
   different clamp formulas for one editorial intent:

     clamp(2.4rem, 6vw,   4.2rem)   blood, performance
     clamp(2.6rem, 6.5vw, 4.5rem)   diets, fasting, food, sleep-guide
     clamp(2.6rem, 7vw,   4.6rem)   brain, gut, longevity, stress,
                                    water, thyroid, joint
     clamp(2.9rem, 7vw,   5.2rem)   heart
     clamp(2.4rem, 6vw,   4rem)     methodology
     clamp(2.7rem, 7vw,   4.7rem)   foodfirst

   Nobody chose seven scales; they accumulated. The ceiling also sat
   at 67-74px while the homepage masthead runs to 144px, so guide
   pages read as a different, quieter product than their own front
   door.

   THE MODEL
   One token, one formula, deliberate hierarchy:
     home masthead   144px  (--fs-display in css/elevate.css)
     guide masthead  112px  (--fs-guide-display, here)
   The guide tier is subordinate to the homepage on purpose - a guide
   is a chapter, not the cover.

   LOAD ORDER MATTERS AND IS NOT OBVIOUS
   On guide pages the inline <style> block closes AFTER the first
   stylesheet links (line ~172 vs ~16), so a link placed up top would
   LOSE to the inline font-size rules. This file must be linked after
   </style> - it is inserted next to css/a11y.css, which sits after
   </style> on all 25 pages. Do not move it up with tokens.css/nav.css.

   Brand is untouched: Fraunces stays, every colour stays. This is
   scale, tracking and leading only.
   ============================================================ */

:root {
  --fs-guide-display: clamp(2.6rem, 8vw, 7rem);
  --tr-guide-display: -.038em;   /* large Fraunces needs negative tracking */
  --lh-guide-display: .98;
}

/* Every guide masthead, one declaration. Adding a guide means adding its
   selector HERE - never a new clamp in a page's inline <style>. */
.bl-hero-title,
.br-hero-title,
.dt-hero-title,
.fh-title,
.fg-hero-title,
.gt-hero-title,
.ht-title,
.lg-hero-title,
.pf-hero-title,
.sl-hero-title,
.st-hero-title,
.wt-hero-title,
.th-hero-title,
.ji-hero-title,
.mt-title,
.ff-hero-title {
  font-size: var(--fs-guide-display);
  letter-spacing: var(--tr-guide-display);
  line-height: var(--lh-guide-display);
  /* Fraunces at this size sets tight; a hair of extra descender room
     stops comma/y tails clipping against the following element. */
  padding-bottom: .04em;
  /* Long single-word guide names (e.g. "Cardiovascular") must not force
     horizontal scroll on a 320px viewport. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* At the small end the 8vw term dominates and tracking that is right for
   112px is too tight for 42px, so relax it. */
@media (max-width: 560px) {
  :root {
    --fs-guide-display: clamp(2.35rem, 11vw, 3.4rem);
    --tr-guide-display: -.024em;
    --lh-guide-display: 1.04;
  }
}