@layer blocks {
  /* The notebook sheet: a ruled red margin down the left, content set to its
     right, and handwritten notes hanging in the margin beside each section.

     The custom properties live on .notebook-content, not on .notebook,
     and that is deliberate. .notebook is the container, and an element can
     never match a @container query against itself, so everything that has to
     respond at narrow widths (the rule, the offset, the pad) must be a
     descendant. That is also why the rule is drawn by
     .notebook-content::before rather than .notebook::before.

     Blocks that live on the sheet (.search, .task-list, .margin-nav, .note)
     answer `@container notebook` in their own files. */
  .notebook {
    container: notebook / inline-size;
    max-inline-size: var(--max);
    margin-inline: auto;
  }

  .notebook-content {
    --notebook-margin: calc(4.5 * var(--grid-cell)); /* sheet edge → rule, spec 136px */
    --notebook-gutter: var(--space-l); /* rule → content, spec 34px */
    --sheet-pad: var(--col);
    --color-link: var(--color-text);

    position: relative;
    min-block-size: calc(100dvh - var(--sticky-offset, 0px));
    padding-inline-end: var(--sheet-pad);
    padding-inline-start: calc(var(--sheet-pad) + var(--notebook-margin) + var(--notebook-gutter));
  }

  .notebook-content::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--sheet-pad) + var(--notebook-margin));
    inline-size: var(--stroke-m);
    background: var(--color-accent-border);
  }

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

  .notebook[data-variant="landing"] .notebook-content > section:not([data-variant="final"]) h2 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  /* Narrow sheet: the margin retracts. */
  @container notebook (width < 56rem) {
    .notebook-content {
      --notebook-margin: var(--space-xs);
      --notebook-gutter: var(--space-s);
    }
  }
}