refactor(storybook): hide page headers and preserve accessibility

StoryPageHeader no longer shows the page title, kicker, description or the SW group notice; it renders only a visually hidden H1 with the Story title, so the preview keeps a page heading for screen readers while the first section starts at the top gutter (unchanged position).

- OrgChart verify-p8 / p9 / p9-1 / p9-2-composition wait for the first visible StoryPage content block and read the page H1 instead of .sb-page-title; existing expectations are unchanged.
- SW overview browser test clicks the page gutter as its outside-click target.
- Drop the unused .sb-page-description from the SW Storybook hide rules.
- Update the Storybook page frame rule in the project guideline.

src/components/story-page.css

@@ -1,7 +1,7 @@
 /* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
    2026-11-11 compact document rhythm, shared by Web / Chart / OrgChart (SW and CENTER pages use the same frame only):
-   H1 page title 28/36/700 (Page Header title) → description 14/20/400 secondary, 8px below (Page Header description)
-   → 24px → H2 section title 16/24/700 (body-md) over a thin divider → 12px → specimen; sections 24px apart (Dashboard gap);
+   2026-11-11: the H1 page title / description header is no longer shown (the H1 stays for screen readers only); pages start with the
+   H2 section title 16/24/700 (body-md) over a thin divider → 12px → specimen; sections 24px apart (Dashboard gap);
    H3 specimen labels 14/20/500 secondary, no divider of their own (story-board.tsx). Top / bottom gutter 16–24px.
    Side margins are unchanged (16px up to 480px, growing to 60px at 768px): the SW breakpoints 2040 / 1125 / 787 depend on them.
    No design token is added; --sb-page-* only names existing component token values for this Storybook frame. */
@@ -27,32 +27,21 @@
   margin-inline: auto;
 }
 
-/* No bottom padding: the header's margin collapses with the next block's own top margin (a section's 24px), so the first
-   content sits 24px below the title whether it is a section, a section grid or a plain preview. */
-.sb-page .sb-page-header {
-  margin-bottom: var(--sb-page-section-gap);
-  font-size: var(--hm-label-font-size);
-  line-height: var(--hm-label-line-height);
-  overflow-wrap: anywhere;
-}
-.sb-page .sb-page-header .sb-page-kicker {
-  margin: 0 0 4px;
-  color: var(--hm-sem-fg-secondary);
-  font-size: var(--hm-button-font-size-sm);
-  font-weight: var(--hm-font-weight-bold);
-}
-.sb-page .sb-page-header .sb-page-title {
-  margin: 0;
-  font-size: var(--hm-page-header-title-font-size);
-  line-height: var(--hm-page-header-title-line-height);
-  font-weight: var(--hm-page-header-title-font-weight);
-}
-.sb-page .sb-page-header .sb-page-description {
-  margin: var(--hm-page-header-description-gap) 0 0;
-  color: var(--hm-page-header-description-color);
-  font-size: var(--hm-page-header-description-font-size);
-  line-height: var(--hm-page-header-description-line-height);
-  font-weight: var(--hm-input-font-weight);
+/* 2026-11-11: no visible page header, so the first block starts right at the top gutter. StoryPageHeader only renders the
+   visually hidden page H1 (screen readers only, out of flow), so the first visible block after it gets the same reset. */
+.sb-page > .sb-page-inner > :first-child,
+.sb-page > .sb-page-inner > .sb-page-a11y-title:first-child + * { margin-top: 0; }
+.sb-page .sb-page-a11y-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 
 .sb-page .sb-page-section { margin-top: var(--sb-page-section-gap); scroll-margin-top: 16px; }
@@ -80,25 +69,3 @@
    Columns and alignment stay with the Story (className): this unlayered rule would override Tailwind's layered grid-cols-*. */
 .sb-page .sb-page-section-grid { display: grid; gap: var(--sb-page-section-gap) 24px; margin-top: var(--sb-page-section-gap); }
 .sb-page .sb-page-section-grid > .sb-page-section { margin-top: 0; }
-
-/* Group notice under the page title (StoryNotice inside StoryPageHeader): 8px below the H1, same type and color as the
-   Page Header description (one level below the title), no box. The header's own bottom margin keeps the first section 24px below. */
-.sb-page .sb-notice {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  margin: var(--hm-page-header-description-gap) 0 0;
-  font-size: var(--hm-page-header-description-font-size);
-  line-height: var(--hm-page-header-description-line-height);
-  font-weight: var(--hm-input-font-weight);
-  color: var(--hm-page-header-description-color);
-  overflow-wrap: anywhere;
-}
-.sb-page .sb-notice-icon {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  /* centers the 14px icon on the first text line (20px line height → 3px above and below) */
-  margin-block: calc((var(--hm-page-header-description-line-height) - 14px) / 2);
-}
-.sb-page .sb-notice-text { min-width: 0; }