/* ───────── typography ─────────
   Five sizes (--text-label, -small, -body, -title, -heading, defined in base.css) and the
   few rules below. Nothing else sets a font family, style or tracking: pick a size token,
   or add the element to one of these groups. The giant jen. wordmarks (.mega) only
   set their own size, they're lettering. */

/* inline code: one chip style (:where, so a component can restyle it) */
code { font-size: 0.9em; }
:where(code) { background: var(--card); border: thin solid var(--border); border-radius: var(--radius-s); padding: 0 0.3em; }

/* label: tiny spaced capitals */
.eyebrow, .kicker, .toc h4, .pill.label, .lang small, .cards .meta span {
  font-size: var(--text-label);
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* display: heavy tight serif italics */
.bar .logo, .mega, .finale::after, h2.big, .doc h2, .finale h2, .steps li::before, .mini .n {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.bar .logo { font-size: var(--text-title); }
h2.big, .doc h2, .finale h2, .steps li::before { font-size: var(--text-heading); }

/* the red dot of a jen. wordmark: upright, in the accent color */
.bar .logo i, .mega .dot { color: var(--accent); font-style: normal; }

/* title: lighter serif for the small headings */
.steps h3, .why li strong, .actions h3, .facts h3, .lede {
  font-family: var(--serif);
  font-size: var(--text-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.steps h3, .why li strong, .actions h3, .facts h3 { font-style: italic; }

/* secondary text: muted, small; code and links inside it stand out in --fg */
.steps p, .why li, .facts p, .mini li, .doc > p { color: var(--muted); font-size: var(--text-small); }
:where(.steps, .why, .mini, .facts, .sub, .doc > p, .cards) code { color: var(--fg); }
:where(.sub, .split p, .doc > p, .facts) a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 0.1875rem; }