@scope (page-ui) {
  :where(:scope) {
    /* ── Max-width clamps ── */
    --page-max-width-prose:  65ch;
    --page-max-width-narrow: 80ch;
    --page-max-width-wide:   1080px;
    --page-max-width-full:   100%;

    /* ── Padding default (when [padding] is set without a value) ── */
    --page-padding:  var(--a-space-6);

    /* ── Region rhythm — vertical gap between header / section / footer,
       mirroring card-ui's section inset. The page [padding] supplies the
       outer frame; this is the inter-region spacing. ── */
    --page-inset:    var(--a-space-5);

    /* ── Padded-region sub-surface (a section[padding] inside the page) ── */
    --page-region-bg:     var(--a-bg-subtle);
    --page-region-radius: var(--a-radius-md);

    /* ── Surfaces ── */
    --page-bg:               var(--a-canvas-0);
    --page-fg:               var(--a-fg);

    /* ── Sticky-header chrome (when [data-header-stuck]) ── */
    --page-sticky-bg:        var(--a-canvas-0);
    --page-sticky-border:    1px solid var(--a-border-subtle);
    --page-sticky-shadow:    var(--a-shadow-sm);
  }

  :scope {
    box-sizing: border-box;
    display: block;
    width: 100%;
    /* --page-pad carries the resolved [padding] value so the sticky header can
       bleed back over it (card-ui pattern) — see the sticky-header rule. */
    padding: var(--page-pad, 0);
    background: var(--page-bg);
    color: var(--page-fg);
  }

  /* ── max-width clamps ── */
  :scope[max-width="prose"]  { max-width: var(--page-max-width-prose);  margin-inline: auto; }
  :scope[max-width="narrow"] { max-width: var(--page-max-width-narrow); margin-inline: auto; }
  :scope[max-width="wide"]   { max-width: var(--page-max-width-wide);   margin-inline: auto; }
  :scope[max-width="full"]   { max-width: var(--page-max-width-full); }

  /* ── Padding scale (mirrors --a-space-N) — sets --page-pad, applied above ── */
  :scope[padding=""]  { --page-pad: var(--page-padding); }
  :scope[padding="0"] { --page-pad: 0; }
  :scope[padding="1"] { --page-pad: var(--a-space-1); }
  :scope[padding="2"] { --page-pad: var(--a-space-2); }
  :scope[padding="3"] { --page-pad: var(--a-space-3); }
  :scope[padding="4"] { --page-pad: var(--a-space-4); }
  :scope[padding="5"] { --page-pad: var(--a-space-5); }
  :scope[padding="6"] { --page-pad: var(--a-space-6); }
  :scope[padding="7"] { --page-pad: var(--a-space-7); }
  :scope[padding="8"] { --page-pad: var(--a-space-8); }

  /* ═══════ Region model — header / section / footer ═══════
     Mirrors card-ui's section model, adapted to the page's [padding] frame:
     the page [padding] is the OUTER inset; these rules add the vertical
     rhythm BETWEEN regions plus the [bleed] / [padding] modifiers. The
     page's own @scope styling the slot primitives is what the docs promise
     ([<header>] / [<section>] / [<footer>] and their -ui variants). */

  /* Vertical rhythm: every region after the first picks up a top margin so
     header → body → footer breathe consistently (the first region hugs the
     padding edge). */
  :scope > :where(header, header-ui, section, section-ui, footer, footer-ui)
    ~ :where(header, header-ui, section, section-ui, footer, footer-ui) {
    margin-block-start: var(--page-inset);
  }

  /* [bleed] — edge-to-edge region: cancel the page's inline [padding] so
     full-width content (hero, banner, table, chart) reaches the page edges.
     Resolves to 0 (no-op) when the page has no padding. */
  :scope > :where(header, header-ui, section, section-ui, footer, footer-ui)[bleed] {
    margin-inline: calc(-1 * var(--page-pad, 0));
  }

  /* [padding] on a region — a padded sub-surface with its own background +
     radius, like card-ui's section[padding]. */
  :scope > :where(section, section-ui)[padding] {
    padding: var(--page-inset);
    background: var(--page-region-bg);
    border-radius: var(--page-region-radius);
  }

  /* ── Scroll container ── */
  :scope[scroll] {
    overflow-y: auto;
    height: 100%;
    overscroll-behavior: contain;
  }

  /* ── Sticky-header support ── */
  /* Drop the page's TOP padding when the header is sticky — that gap is where
     scrolling content used to peek ABOVE the pinned header. The header then
     sits flush at the scroll-container top and supplies its own top spacing
     (padding-block below). */
  :scope[sticky-header] { padding-top: 0; }
  :scope[sticky-header] > :where(header, header-ui) {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--page-sticky-bg);
    /* Bleed horizontally over the page's inline [padding] so the opaque band
       spans the full scroll width, then re-inset the content so it stays
       aligned with the body. Vertical = its own breathing room. Card-ui
       header pattern. (No negative margin-top — that breaks position:sticky.) */
    margin-inline: calc(-1 * var(--page-pad, 0));
    padding: var(--a-space-3) var(--page-pad, 0);
    transition: border-color var(--a-duration-fast) var(--a-easing), box-shadow var(--a-duration-fast) var(--a-easing);
  }

  :scope[data-header-stuck] > :where(header, header-ui) {
    border-block-end: var(--page-sticky-border);
    box-shadow: var(--page-sticky-shadow);
  }
}
