@layer blocks {
  /* "What Elephouse deliberately leaves out": items struck through with a
     drawn rule rather than text-decoration, so the stroke can sit at an angle.

     The markup keeps a real <s> around each item: that carries the "not
     included" meaning for assistive tech, while the drawn rule below carries
     it for eyes. Removing either half breaks one of the two audiences. */
  .crossed li {
    position: relative;
    display: table;
    padding-block: var(--space-2xs); /* spec 7px */
    font-size: var(--text-lg);
  }

  .crossed s {
    text-decoration: none;
  }

  .crossed li::after {
    content: "";
    position: absolute;
    inset-inline: calc(-1 * var(--space-3xs)) calc(-1 * var(--space-2xs));
    inset-block-start: 52%;
    block-size: var(--stroke-l);
    border-radius: var(--radius-s);
    background: var(--color-decorative);
    rotate: -1.4deg;
  }

  /* The one line that survives the list. Same size as the struck items: the
     emphasis comes from the colour and the missing rule, not from size. */
  .crossed li[data-state="keep"]::after {
    display: none;
  }

  .crossed em {
    margin-inline-start: var(--space-2xs);
  }
}