@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 two 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 notes, the pad) must
     be a descendant. That is also why the rule is drawn by
     .notebook-content::before rather than .notebook::before. */
  .notebook {
    container-type: inline-size;
    max-inline-size: var(--max);
    margin-inline: auto;
  }

  .notebook-content {
    --notebook-margin: 8.5rem; /* sheet edge → rule */
    --notebook-gutter: 2.125rem; /* rule → content */
    --sheet-pad: var(--col); /* spec --pad 28px; 16px in the query below */
    --color-link: var(--color-text);

    position: relative;
    min-block-size: calc(100dvh - var(--sticky-offset, 4.5rem));
    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: 2px;
    background: var(--brand-soft);
  }

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

  .notebook-content :is(section, article) > .note + * {
    --flow-space: 0;
  }

  .notebook[data-variant="landing"] .notebook-content > section:not([data-variant="final"]) h2 {
    font-size: var(--font-section);
    line-height: 1.12;
    letter-spacing: -0.01em;
  }

  /* Narrow sheet: the margin retracts and the notes drop inline above their
     section instead of hanging beside it. */
  @container (width < 52rem) {
    .notebook-content {
      --notebook-margin: var(--space-xs);
      --notebook-gutter: var(--space-s);
      --sheet-pad: 1rem;
    }

    .margin-note {
      position: static;
      display: block;
      inline-size: auto;
      text-align: start;
      margin-block-end: var(--space-2xs);
    }
  }
}