/* Circle — responsive system.
   Breakpoints (use in media queries; CSS vars can't live in @media conditions):
     sm 640px · md 768px · lg 1024px · xl 1200px (container max)
   Columns: 4 (mobile) / 8 (md) / 12 (lg+), gutter --space-4 mobile, --space-5 up.
*/
:root {
  /* Fluid display type — use for hero/section headlines instead of fixed sizes.
     Desktop (>=1025px) segment left byte-for-byte unchanged. Tablet/phone now
     step to the same three literal tiers as typography.css instead of riding
     the desktop formula down past 1024px. */
  --text-display-fluid: clamp(34px, 2.2vw + 26px, 62px); /* @kind other */
  --text-h2-fluid: clamp(26px, 1.2vw + 22px, 34px); /* @kind other */
  --text-lede-fluid: clamp(16px, 0.4vw + 15px, 20px); /* @kind other */

  /* Mobile overrides (apply under 768px) */
  --section-pad-mobile: 56px;
  --wrap-pad-mobile: 20px;
  --control-h-touch: 48px; /* min hit target on mobile: 44px+ */
}

/* ---- TABLET tier: 561-1024px ---- */
@media (max-width: 1024px) and (min-width: 561px) {
  :root {
    --text-display-fluid: 49px; /* matches --text-4xl tablet step */
    --text-h2-fluid: 29px;      /* matches --text-2xl tablet step */
    --text-lede-fluid: 18px;    /* matches --text-lg tablet step */
  }
}

/* ---- PHONE tier: <=560px ---- */
@media (max-width: 560px) {
  :root {
    --text-display-fluid: 34px; /* matches --text-4xl phone step */
    --text-h2-fluid: 24px;      /* matches --text-2xl phone step */
    --text-lede-fluid: 16.5px;  /* matches --text-lg phone step, clear of 15px floor */
  }
}