.mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--c-muted);
}
.mono--plain { letter-spacing: var(--ls-mono-tight); }

.measure { max-width: var(--measure-body); }
.muted { color: var(--c-muted); }
.on-dark { color: var(--c-ink-invert); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }

.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }

.tabular { font-variant-numeric: tabular-nums lining-nums; }

.rule { height: 1px; background: var(--c-line); border: 0; }

.rule--bleed { width: 100%; }

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.is-locked { overflow: hidden; }