@layer compositions {
  /*
  NOTEBOOK COMPOSITION
  The sheet's geometry: a margin column, the rule edge, and the content column.
  No colour, border or decoration. The red rule is the .margin-rule block; the
  paper and the dot grid are global on <body>.

  The margin collapses intrinsically. While the content column can stay at
  least --notebook-content-min wide, the margin is 3 grid cells; below that it
  shrinks to the spine. The 999 multiplier turns the difference into an on/off
  switch, like the Switcher, so there is no query here.

  Collapse width: content 15 cells + margin 3 + gutter 1 + both sheet pads 1
  = 20 cells = 55rem (880px). Blocks that change form at that point (margin
  notes, the margin nav, the compose bar) are written narrow first and answer
  `@container notebook (width > 55rem)` for the wide sheet. The value is
  written out in each query because custom properties can't be used in query
  conditions; test/lib/cube_css_test.rb fails on any other value or container.

  The sheet starts half a cell below the header. The header and footer are
  1.5 cells tall (2.5 when the narrow header wraps), so that half cell puts
  the sheet's top edge on a dot row. If the header height changes, change
  this offset with it.

  .notebook is the container and .notebook-content carries the geometry: an
  element never matches a container query against itself.

  CUSTOM PROPERTIES
  --notebook-slot-offset, --notebook-slot-size: where content hung left of the
    rule sits, relative to the content column. Only meaningful on a wide sheet;
    .notebook-slot reads them.
  --notebook-spine, --notebook-spine-gutter: the collapsed margin.
  --notebook-rule-at: the rule's distance from the sheet edge. It holds a %
    of the sheet width, so only .notebook-content and its own pseudo-elements
    may read it.
  */
  .notebook {
    container: notebook / inline-size;
    max-inline-size: var(--max);
    margin-inline: auto;
  }

  .notebook-content {
    --sheet-pad: var(--col);
    --notebook-margin: var(--space-3cell);
    --notebook-gutter: var(--space-cell);
    --notebook-spine: var(--space-quarter);
    --notebook-spine-gutter: var(--space-half);
    --notebook-content-min: calc(15 * var(--grid-cell));
    --notebook-collapse: calc(var(--notebook-content-min) + var(--notebook-margin) + var(--notebook-gutter) + 2 * var(--sheet-pad));
    --notebook-slot-offset: calc(-1 * (var(--sheet-pad) + var(--notebook-margin) + var(--notebook-gutter)));
    --notebook-slot-size: calc(var(--sheet-pad) + var(--notebook-margin) - var(--space-quarter));
    --notebook-rule-at: calc(var(--sheet-pad) + clamp(var(--notebook-spine), (100% - var(--notebook-collapse)) * 999, var(--notebook-margin)));

    position: relative;
    min-block-size: calc(100dvh - var(--sticky-offset));
    padding-block-start: var(--space-half);
    padding-inline-end: var(--sheet-pad);
    padding-inline-start: calc(var(--notebook-rule-at) + clamp(var(--notebook-spine-gutter), (100% - var(--notebook-collapse)) * 999, var(--notebook-gutter)));
  }

  .notebook-content :is(section, article) {
    position: relative;
  }

  /* Content hung in the margin (margin notes, the margin nav). Narrow sheet:
     a block in the flow. Wide sheet: left of the rule, in the margin slot.
     The next sibling is still spaced by the parent's flow, so the slot drops
     by the same gap to stay level with it. */
  .notebook-slot {
    display: block;
  }

  @container notebook (width > 55rem) {
    .notebook-slot {
      position: absolute;
      inset-inline-start: var(--notebook-slot-offset);
      inline-size: var(--notebook-slot-size);
      margin-block-start: var(--flow-space);
      text-align: end;
    }
  }
}