@layer blocks {
  .note {
    font-family: var(--font-hand);
    font-size: var(--text-md);
    font-weight: var(--weight-semi);
    color: var(--color-accent-strong);
    rotate: -3deg;
  }

  .note[data-variant="margin"] {
    display: block;
  }

  /* A margin, not --flow-space: a custom property would also close the gaps
     inside whatever follows the note. */
  .note[data-variant="margin"] + * {
    margin-block-start: var(--space-2);
  }

  /* Wide sheet: margin notes hang left of the rule, out of the flow. */
  @container notebook (width > 55rem) {
    .note[data-variant="margin"] {
      position: absolute;
      inset-inline-start: var(--notebook-slot-offset);
      inline-size: var(--notebook-slot-size);
      text-align: end;
    }

    .note[data-variant="margin"] + * {
      margin-block-start: 0;
    }
  }
}