@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 {
    list-style: none;
    max-inline-size: 28.75rem;
  }

  .crossed li {
    position: relative;
    display: table;
    margin-inline-start: 0;
    padding-block: 0.4375rem; /* spec 7px */
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--weight-semi);
    color: var(--color-text-faint);
  }

  .crossed s {
    text-decoration: none;
  }

  .crossed li::after {
    content: "";
    position: absolute;
    inset-inline: -4px -10px;
    inset-block-start: 52%;
    block-size: 2.5px;
    border-radius: 2px;
    background: var(--color-decorative);
    rotate: -1.4deg;
  }

  /* The one line that survives the list. Only a touch larger than the struck
     items: the redesign steps 1.5rem to 1.6rem, so the emphasis comes from the
     colour and the missing rule, not from a jump in size. */
  .crossed li[data-state="keep"] {
    font-size: 1.6rem;
    color: var(--color-text);
  }

  .crossed li[data-state="keep"]::after {
    display: none;
  }

  .crossed li[data-state="keep"] em {
    margin-inline-start: var(--space-2xs);
    font-family: var(--font-hand);
    font-size: 1.35rem;
    font-style: normal;
    color: var(--color-accent-strong);
  }
}