@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;
  }

  .note[data-variant="margin"] + * {
    --flow-space: var(--space-2xs);
  }

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

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