/* ============================================
   GLOBAL HEADING SYSTEM — SAFE, RESPONSIVE
============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 12px 0;       /* consistent spacing */
}

/* Fluid heading sizes using clamp() */
h1 { font-size: clamp(1.8rem, 2.4vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.6rem); }
h4 { font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
h5 { font-size: clamp(1rem, 1.2vw, 1.1rem); }
h6 { font-size: clamp(.9rem, 1vw, 1rem); }


/* Optional: align with your component classes */
.title-xl { font-size: clamp(2rem, 3vw, 2.6rem); }
.title-lg { font-size: clamp(1.8rem, 2.6vw, 2.2rem); }
.title-md { font-size: clamp(1.4rem, 2vw, 1.6rem); }
.title-sm { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

/* ============================================
   TAGLINE STYLE — used under page headings
============================================ */

.tagline {
  display: block;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  color: var(--ink-600);
  margin-top: -4px;       /* pull closer to heading */
  margin-bottom: 20px;    /* spacing before body text */
  line-height: 1.35;
}