/* ==========================================================================
   TYPOGRAPHY.CSS — shared across every page. Requires variables.css.
   ========================================================================== */

body{
  font-family:var(--font-body);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:var(--h1); font-weight:800; }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); font-weight:600; }
h4{ font-size:1.1rem; font-weight:600; }

.accent-italic{ font-style:italic; font-weight:600; color:var(--green-deep); }

.lead{
  font-size:var(--lead);
  color:var(--ink-soft);
  line-height:1.6;
  max-width:46ch;
}

.eyebrow{
  font-family:var(--font-label);
  font-size:clamp(0.65rem, 2vw, 0.78rem);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--green-deep);
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}
.eyebrow::before{
  content:'';
  width:28px; height:2px;
  background:var(--green);
  flex-shrink:0;
}
.eyebrow.center{ justify-content:center; }

/* On dark sections */
.section--deep .eyebrow{ color:var(--green); }
.section--deep .eyebrow::before{ background:var(--green); }