:root {--baseline-step:4px}
.baseline-marker {display:inline-block;width:0;height:0;margin:0;padding:0;border:0;vertical-align:baseline;line-height:0;pointer-events:none}
.baseline-text {display:block}
.grid-toggle {display:grid;place-items:center}

/* Trim to the font's cap/baseline metrics, then restore an integer line box.
   This aligns ink without per-element JavaScript offsets or transforms. */
@supports (text-box-trim:trim-both) and (text-box-edge:cap alphabetic) and (padding-top:calc(round(up,1cap,4px) - 1cap)) {
  :is(h1,h2,h3,h4,h5,h6,p,figcaption,pre,.row-title,.row-sub,.row-meta,
    .baseline-text,.skip-link,.footer>a) {
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
    padding-block-start:calc(round(up,1cap,var(--baseline-step)) - 1cap + var(--baseline-inset,0px));
    padding-block-end:calc(1lh - round(up,1cap,var(--baseline-step)) + var(--baseline-inset,0px) + var(--baseline-scrollbar-pad,0px));
  }
  .article-code pre,.skip-link {--baseline-inset:8px}
  /* Fractional image heights must not shift the baselines below them.
     Only the outer frame is rounded; media keeps its intrinsic proportions. */
  .article-media,.merge-study,.loader-sequence {container-type:inline-size}
  :is(.article-image-frame,.article-video-frame,.loader-sequence-frame) {height:round(up,calc(100cqw * var(--media-aspect)),var(--baseline-step))}
  .merge-stage {height:round(up,calc(100cqw * 7 / 16),var(--baseline-step))}
  .layout-guide-rows > span {background-size:100% calc(var(--layout-unit) * 8),100% var(--baseline-step)}
}