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

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

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

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

  :scope {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background: var(--page-bg, var(--page-bg-default));
    color: var(--page-fg, var(--page-fg-default));
  }

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

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

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

  /* ── Sticky-header support ── */
  :scope[sticky-header] > :where(header, header-ui) {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--page-sticky-bg, var(--page-sticky-bg-default));
    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, var(--page-sticky-border-default));
    box-shadow: var(--page-sticky-shadow, var(--page-sticky-shadow-default));
  }
}
