@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-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, 0px));
    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;
  }
}