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

  /* Any section or article on the sheet can hang a note in the margin. */
  .notebook-content :is(section, article) {
    position: relative;
  }

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

  /* Landing rhythm stays on the marketing page. Other public sheets keep the
     same rule and gutter, but use ordinary section spacing so legal h2s are
     not blown up to the section display size. */
  .notebook[data-variant="landing"] .notebook-content > section {
    padding-block: 6rem 2.5rem; /* 96px 40px */
    --flow-space: 1.125rem; /* 18px body rhythm */
  }

  .notebook[data-variant="landing"] .notebook-content > section > h2 + * {
    --flow-space: 1.375rem; /* spec h2 margin-bottom 22px */
  }

  .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;
    max-inline-size: 38.75rem; /* spec 620px */
  }

  .notebook[data-variant="landing"] .notebook-content > section[data-variant="faq"] {
    padding-block-end: 6.875rem;
  }

  .notebook[data-variant="landing"] .notebook-content > section[data-variant="final"] {
    padding-block-end: 2.125rem;
  }

  .margin-note {
    position: absolute;
    inset-inline-start: calc(-1 * (var(--notebook-margin) + var(--notebook-gutter)));
    inline-size: calc(var(--notebook-margin) - var(--space-xs));
    font-family: var(--font-hand);
    font-size: 1.55rem;
    font-weight: var(--weight-semi);
    line-height: var(--leading-tight);
    color: var(--color-decorative);
    text-align: end;
    rotate: -3deg;
  }

  /* 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;
    }

    .notebook[data-variant="landing"] .notebook-content > section {
      padding-block: 4rem 1.75rem; /* 64px 28px */
    }

    .notebook[data-variant="landing"] .notebook-content > section[data-variant="faq"] {
      padding-block-end: 6.875rem;
    }

    .notebook[data-variant="landing"] .notebook-content > section[data-variant="final"] {
      padding-block-end: 2.125rem;
    }

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