/* Title — owns its face and rhythm, carries no margin. The SIZE is the
   section's call, handed over as --vt-title-size. --vt-title-scale is the
   language's call: the theme sets it below 1 for ja/zh, whose full-width glyphs
   need a smaller size than Latin (tokens.css, the CJK section). Default 1. */
.vt-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--vt-title-weight, var(--fw-medium));
  font-size: calc(var(--vt-title-size, var(--fs-3xl)) * var(--vt-title-scale, 1));
  line-height: var(--vt-title-leading, var(--lh-tight));
  letter-spacing: var(--vt-title-tracking, var(--tracking-tight));
  color: var(--vt-fg, var(--color-text-brand));
  text-wrap: pretty;
}

/* Bold words are drawn in a gradient, and WHICH gradient is the surface's call:
   the mockup runs the electric wash on dark heroes and the brand wash on light
   ones (styles/hero.css .uhero--dark/--light). The skeleton hands it over as
   --vt-title-accent; the default is the dark-surface value, so saved content
   that predates the variable renders exactly as before. */
.vt-title strong {
  font-weight: var(--fw-medium);
  background: var(--vt-title-accent, var(--gradient-electric));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Forced colours (Windows high contrast) drop background images, and this
   text is transparent over one — draw it in the system text colour instead
   (launch list B3, 2026-09-30). */
@media (forced-colors: active) {
  .vt-title strong { background: none; color: CanvasText; }
}

/* Display — the flagship claim (mockup styles/lithography.css .flagship__claim):
   "1 µm L/S" at up to 150px. The ONE size that is the title's own rather than
   the section's — the same exception .vt-eyebrow--large already is, and for the
   same reason: the point of it is to be a different KIND of line, and a
   container that had set --vt-title-size would otherwise flatten it back. So it
   states font-size directly instead of reading the variable.

   13cqi, not the mockup's 13vw: the section is the container and spans the
   viewport, so the numbers agree on the front end — and cqi stays true inside
   the editor canvas, where vw does not (BLOCKS.md, the cqi rule).

   Colour and the gradient on <strong> are deliberately NOT stated: they follow
   the section's tone the way every title does — the brand wash on a light band
   (the mockup's .flagship--light .flagship__claim strong), electric on dark. */
.vt-title--display {
  font-size: calc(clamp(72px, 13cqi, 150px) * var(--vt-title-scale, 1));
  font-weight: 200;
  line-height: 0.86;
  letter-spacing: -0.04em;
}

/* Medium and Small — a lesser heading at less weight than the section's size
   (Kurt, launch list B31, 2026-09-30). Stated directly, like Display, because
   the section's --vt-title-size would otherwise win. The LEVEL still never
   decides the size: an editor chooses it here, so an H3 that should read as
   large still can. Medium sits between the section titles (31–48px) and the
   card titles (about 21px); Small sits at card-title size. */
.vt-title--medium {
  font-size: calc(clamp(24px, 3cqi, 34px) * var(--vt-title-scale, 1));
  line-height: 1.15;
}
.vt-title--small {
  font-size: calc(clamp(19px, 2.2cqi, 24px) * var(--vt-title-scale, 1));
  line-height: 1.25;
  letter-spacing: -0.005em;
}