@layer blocks {
  /* The drawn highlighter behind headline fragments.

     NOTE: deliberately NO isolation / stacking context here. Headlines use a
     line-height tighter than the font's content area, so this ::before extends
     a few px above its own line box into the previous line's descenders.
     Letting z-index:-1 fall through to the ROOT stacking context paints it
     behind ALL heading text, which hides that overlap. Creating a stacking
     context on .mark confines the highlight to .mark and it starts covering
     the line above.
     Consequence: no ancestor of .mark may have its own background.
     (Carried verbatim from docs/brand/elephouse-redesign.html) */
  .mark {
    position: relative;
    white-space: nowrap;
    color: var(--color-mark-ink);
  }

  .mark::before {
    content: "";
    position: absolute;
    inset-inline: -0.08em;
    inset-block: 0.14em 0.04em;
    z-index: -1;
    background: var(--color-mark);
    transform: skew(-7deg) rotate(-0.6deg);
    transform-origin: left center;
  }
}