@echelon-foundry/design-system 0.2.0 → 0.3.0-main.216.1

package/dist/marketing.css

@@ -0,0 +1,1198 @@
+/*
+  Forma marketing role contract: brand-neutral defaults.
+
+  Marketing foundations, components, and layouts consume only these role
+  tokens and Forma's core semantic tokens. A theme (for example the compiled
+  Echelon Marketing Theme) restates the roles at :root with higher
+  specificity, so these :where() defaults apply only when no theme does.
+
+  Defaults are declared on every theme/brand scope as well as :root so that
+  derived values recompute inside a nested data-ef-theme or data-ef-brand
+  subtree instead of inheriting the root's resolved value.
+*/
+@layer echelon.tokens {
+  :where(:root, [data-ef-theme], [data-ef-brand]) {
+    /* Extended color roles, derived from core semantics. */
+    --ef-color-surface-elevated: var(--ef-color-surface-primary);
+    --ef-color-text-muted: var(--ef-color-text-secondary);
+    --ef-color-accent-hover: var(--ef-color-accent-primary);
+    /* Status defaults are deliberately hue-free: meaning is carried by text. */
+    --ef-color-status-success: var(--ef-color-text-primary);
+    --ef-color-status-warning: var(--ef-color-text-primary);
+    --ef-color-status-danger: var(--ef-color-text-primary);
+    --ef-color-status-info: var(--ef-color-text-primary);
+  }
+
+  :where(:root) {
+    /* Relational spacing scale (rem). Component gaps and padding use only
+       these steps; section and block rhythm use the fluid layout roles. */
+    --ef-space-1: var(--ef-primitive-space-1);
+    --ef-space-2: var(--ef-primitive-space-2);
+    --ef-space-3: var(--ef-primitive-space-3);
+    --ef-space-4: var(--ef-primitive-space-4);
+    --ef-space-5: var(--ef-primitive-space-5);
+    --ef-space-6: var(--ef-primitive-space-6);
+    --ef-space-7: var(--ef-primitive-space-7);
+    --ef-space-8: var(--ef-primitive-space-8);
+
+    --ef-type-family-body: var(--ef-primitive-font-family-sans);
+    --ef-type-family-display: var(--ef-primitive-font-family-display);
+    --ef-type-family-mono: var(--ef-primitive-font-family-mono);
+    --ef-type-size-label: var(--ef-primitive-font-size-xs);
+    --ef-type-size-small: var(--ef-primitive-font-size-sm);
+    --ef-type-size-body: var(--ef-primitive-font-size-md);
+    --ef-type-size-lead: var(--ef-primitive-font-size-fluid-lead);
+    --ef-type-size-h1: var(--ef-primitive-font-size-fluid-display-1);
+    --ef-type-size-h2: var(--ef-primitive-font-size-fluid-display-2);
+    --ef-type-size-h3: var(--ef-primitive-font-size-lg);
+    --ef-type-size-h4: var(--ef-primitive-font-size-md);
+    --ef-type-size-statement: var(--ef-primitive-font-size-fluid-display-3);
+    --ef-type-leading-body: var(--ef-primitive-line-height-normal);
+    --ef-type-leading-lead: var(--ef-primitive-line-height-normal);
+    --ef-type-leading-heading: var(--ef-primitive-line-height-snug);
+    --ef-type-leading-snug: var(--ef-primitive-line-height-snug);
+    --ef-type-weight-body: var(--ef-primitive-font-weight-regular);
+    --ef-type-weight-strong: var(--ef-primitive-font-weight-bold);
+    --ef-type-weight-heading: var(--ef-primitive-font-weight-semibold);
+    --ef-type-weight-label: var(--ef-primitive-font-weight-medium);
+    --ef-type-weight-nav: var(--ef-primitive-font-weight-semibold);
+    --ef-type-tracking-display: var(--ef-primitive-letter-spacing-normal);
+    --ef-type-tracking-label: var(--ef-primitive-letter-spacing-wide);
+    --ef-type-tracking-body: var(--ef-primitive-letter-spacing-normal);
+
+    --ef-layout-measure: var(--ef-primitive-size-measure);
+    --ef-layout-measure-narrow: var(--ef-primitive-size-measure-narrow);
+    --ef-layout-width-narrow: var(--ef-primitive-size-container-narrow);
+    --ef-layout-width-standard: var(--ef-primitive-size-container-standard);
+    --ef-layout-width-wide: var(--ef-primitive-size-container-wide);
+    --ef-layout-width-max: var(--ef-primitive-size-container-max);
+    --ef-layout-gutter: var(--ef-primitive-size-fluid-gutter);
+    --ef-layout-section-space: var(--ef-primitive-size-fluid-section-space);
+    --ef-layout-block-space: var(--ef-primitive-size-fluid-block-space);
+    --ef-layout-grid-gap: var(--ef-primitive-space-6);
+    --ef-layout-stack-space: var(--ef-primitive-space-6);
+    --ef-layout-target-min: var(--ef-primitive-size-target-min);
+    /* Clearance kept below a sticky header for anchors and sticky rails. */
+    --ef-layout-header-offset: 6rem;
+    /* Card and fact minimums decide when grids drop a column (content-driven). */
+    --ef-layout-card-min: 15rem;
+    --ef-layout-fact-min: 11rem;
+
+    --ef-shape-radius: var(--ef-primitive-radius-small);
+    --ef-shape-border-width: var(--ef-primitive-border-width-thin);
+    --ef-shape-border-width-accent: var(--ef-primitive-border-width-accent);
+
+    --ef-effect-shadow-raised: var(--ef-primitive-shadow-raised);
+    /* Marketing state changes are perceptual interpolation (non-spatial).
+       The fallbacks restate Forma's shared perceptual vocabulary for pages
+       that load the marketing bundle without components.css. */
+    --ef-effect-transition-duration: var(--ef-motion-perceptual-duration, 120ms);
+    --ef-effect-transition-easing: var(--ef-motion-perceptual-easing, cubic-bezier(0.2, 0, 0, 1));
+
+    --ef-focus-ring-width: var(--ef-primitive-focus-ring-width);
+    --ef-focus-ring-offset: var(--ef-primitive-focus-ring-offset);
+    --ef-focus-halo-width: var(--ef-primitive-focus-halo-width);
+  }
+}
+
+/*
+  Forma marketing foundations.
+
+  Everything here is scoped to the MarketingShell root (.ef-site) so that
+  loading the marketing layer never restyles an application that also uses
+  Forma. Values come only from role tokens (src/marketing/roles.css) and core
+  semantic tokens; no brand values live in this file.
+
+  Surface tones: every region that changes background declares a tone with
+  data-ef-tone. A tone sets a small, contrast-safe set of context variables
+  (--ef-tone-*) that components read, so text, links, labels, and rules stay
+  legible on every surface without per-component color overrides.
+*/
+@layer echelon.marketing.foundations {
+  :where(:root, [data-ef-theme], [data-ef-brand]),
+  .ef-site,
+  [data-ef-tone="page"] {
+    --ef-tone-background: var(--ef-color-surface-primary);
+    --ef-tone-text: var(--ef-color-text-primary);
+    --ef-tone-heading: var(--ef-color-text-heading);
+    --ef-tone-muted: var(--ef-color-text-muted);
+    --ef-tone-label: var(--ef-color-accent-secondary);
+    --ef-tone-link: var(--ef-color-accent-primary);
+    --ef-tone-link-hover: var(--ef-color-accent-hover);
+    --ef-tone-rule: var(--ef-color-border-subtle);
+    --ef-tone-rule-strong: var(--ef-color-border-functional);
+    --ef-tone-action-background: var(--ef-color-surface-inverse);
+    --ef-tone-action-text: var(--ef-color-text-inverse);
+    --ef-tone-action-hover: var(--ef-color-surface-inverse-secondary);
+    --ef-tone-hover: var(--ef-color-surface-secondary);
+  }
+
+  /* Accent colors are not validated against the secondary surface, so links
+     and labels on it fall back to text roles that are. Cards default to
+     this tone. */
+  [data-ef-tone="surface"],
+  :where(.ef-card:not([data-ef-tone])) {
+    --ef-tone-background: var(--ef-color-surface-secondary);
+    --ef-tone-text: var(--ef-color-text-primary);
+    --ef-tone-heading: var(--ef-color-text-heading);
+    --ef-tone-muted: var(--ef-color-text-on-secondary-surface);
+    --ef-tone-label: var(--ef-color-text-on-secondary-surface);
+    --ef-tone-link: var(--ef-color-text-primary);
+    --ef-tone-link-hover: var(--ef-color-text-primary);
+    --ef-tone-rule: var(--ef-color-border-subtle);
+    --ef-tone-rule-strong: var(--ef-color-border-functional);
+    --ef-tone-hover: var(--ef-color-surface-primary);
+  }
+
+  [data-ef-tone="elevated"] {
+    --ef-tone-background: var(--ef-color-surface-elevated);
+    --ef-tone-text: var(--ef-color-text-primary);
+    --ef-tone-heading: var(--ef-color-text-heading);
+    --ef-tone-muted: var(--ef-color-text-primary);
+    --ef-tone-label: var(--ef-color-text-primary);
+    --ef-tone-link: var(--ef-color-text-primary);
+    --ef-tone-link-hover: var(--ef-color-text-primary);
+    --ef-tone-rule: var(--ef-color-border-subtle);
+    --ef-tone-rule-strong: var(--ef-color-border-functional);
+    --ef-tone-hover: var(--ef-color-surface-primary);
+  }
+
+  [data-ef-tone="inverse"] {
+    --ef-tone-background: var(--ef-color-surface-inverse);
+    --ef-tone-text: var(--ef-color-text-inverse);
+    --ef-tone-heading: var(--ef-color-text-inverse);
+    --ef-tone-muted: var(--ef-color-text-inverse);
+    --ef-tone-label: var(--ef-color-text-inverse);
+    --ef-tone-link: var(--ef-color-text-inverse);
+    --ef-tone-link-hover: var(--ef-color-text-inverse);
+    --ef-tone-rule: var(--ef-color-surface-inverse-secondary);
+    --ef-tone-rule-strong: var(--ef-color-text-inverse);
+    --ef-tone-action-background: var(--ef-color-surface-primary);
+    --ef-tone-action-text: var(--ef-color-text-primary);
+    --ef-tone-action-hover: var(--ef-color-surface-secondary);
+    --ef-tone-hover: var(--ef-color-surface-inverse-secondary);
+  }
+
+  [data-ef-tone],
+  :where(.ef-card:not([data-ef-tone])) {
+    background: var(--ef-tone-background);
+    color: var(--ef-tone-text);
+  }
+
+  :where(html):has(> body.ef-site) {
+    background: var(--ef-color-surface-primary);
+  }
+
+  .ef-site {
+    /* Stacking context keeps an optional theme backdrop behind content even
+       when the shell is not the body element. */
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    background: var(--ef-color-surface-primary);
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-body);
+    font-size: var(--ef-type-size-body);
+    font-weight: var(--ef-type-weight-body);
+    letter-spacing: var(--ef-type-tracking-body);
+    line-height: var(--ef-type-leading-body);
+    text-rendering: optimizeLegibility;
+  }
+
+  /* The shell fills the viewport only when it is the document body. */
+  body.ef-site {
+    min-block-size: 100vh;
+    min-block-size: 100dvh;
+  }
+
+  /* Optional brand backdrop supplied by a theme; absent means none. */
+  .ef-site::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-image: var(--ef-site-backdrop, none);
+    background-size: var(--ef-site-backdrop-size, auto);
+    opacity: var(--ef-site-backdrop-opacity, 1);
+  }
+
+  .ef-site :where(h1, h2, h3, h4, h5, h6) {
+    margin-block: 0;
+    color: var(--ef-tone-heading);
+    text-wrap: balance;
+  }
+
+  .ef-site :where(h1, h2) {
+    font-family: var(--ef-type-family-display);
+    font-weight: var(--ef-type-weight-heading);
+    letter-spacing: var(--ef-type-tracking-display);
+    line-height: var(--ef-type-leading-heading);
+  }
+
+  .ef-site :where(h1) { font-size: var(--ef-type-size-h1); max-inline-size: 14ch; }
+  .ef-site :where(h2) { font-size: var(--ef-type-size-h2); max-inline-size: 18ch; }
+  .ef-site :where(h3) { font-size: var(--ef-type-size-h3); line-height: var(--ef-type-leading-snug); }
+  .ef-site :where(h4, h5, h6) { font-size: var(--ef-type-size-h4); line-height: var(--ef-type-leading-snug); }
+
+  .ef-site :where(p) {
+    margin-block: 0 var(--ef-space-4);
+    max-inline-size: var(--ef-layout-measure);
+    color: var(--ef-tone-muted);
+  }
+
+  .ef-site :where(p:last-child) { margin-block-end: 0; }
+
+  /* Links stay underlined everywhere except where a component gives them
+     another non-color cue (navigation, buttons, cards). */
+  .ef-site :where(a) {
+    color: var(--ef-tone-link);
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--ef-shape-border-width);
+    text-underline-offset: 0.2em;
+  }
+
+  .ef-site :where(a:hover) {
+    color: var(--ef-tone-link-hover);
+    text-decoration-thickness: calc(var(--ef-shape-border-width) * 2);
+  }
+
+  .ef-site :where(ul, ol) { margin-block: 0 var(--ef-space-4); padding-inline-start: var(--ef-space-5); }
+  .ef-site :where(li + li) { margin-block-start: 0.45em; }
+  /* Only prose lists take the reading measure; classed lists are structure. */
+  .ef-site :where(ul:not([class]), ol:not([class])) > li { max-inline-size: var(--ef-layout-measure); }
+  .ef-site :where(strong, b) { font-weight: var(--ef-type-weight-strong); }
+  .ef-site :where(img, svg, video, canvas, picture) { max-inline-size: 100%; block-size: auto; }
+  .ef-site :where(code, kbd, samp, pre) { font-family: var(--ef-type-family-mono); font-size: 0.9em; }
+
+  .ef-site :where(:not(pre) > code) {
+    padding: 0.1em 0.3em;
+    background: var(--ef-tone-hover);
+    color: var(--ef-tone-text);
+    overflow-wrap: anywhere;
+  }
+
+  .ef-site :where(hr) {
+    margin-block: var(--ef-layout-section-space);
+    border: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-site :where(blockquote) {
+    margin: var(--ef-layout-block-space) 0;
+    padding-inline-start: var(--ef-layout-block-space);
+    border-inline-start: var(--ef-shape-border-width-accent) solid var(--ef-color-accent-primary);
+    font-family: var(--ef-type-family-display);
+    font-size: var(--ef-type-size-lead);
+    line-height: var(--ef-type-leading-lead);
+  }
+
+  .ef-site :where(blockquote p) { color: var(--ef-tone-text); }
+
+  /* One focus treatment for the whole shell: a gap-colored outline inside a
+     ring-colored halo remains visible on every tone. */
+  .ef-site :where(:focus-visible) {
+    outline: var(--ef-focus-ring-width) solid var(--ef-color-focus-gap);
+    outline-offset: var(--ef-focus-ring-offset);
+    box-shadow: 0 0 0 var(--ef-focus-halo-width) var(--ef-color-focus-ring);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(html):has(.ef-site) { scroll-behavior: smooth; }
+  }
+
+  /* Anchored targets must land below a sticky header (see layouts.css). */
+  @media (min-width: 40rem) and (min-height: 36rem) {
+    :where(html):has(.ef-site-header) { scroll-padding-block-start: var(--ef-layout-header-offset); }
+  }
+}
+
+/*
+  Forma marketing components.
+
+  Small, composable presentation primitives for public/marketing pages. Each
+  component reads role tokens and the surrounding surface tone (--ef-tone-*);
+  none embeds a brand value, a product name, or page-specific placement.
+  Components own their intrinsic layout only. Where they sit on a page is
+  owned by layouts.css or the consuming page composition.
+
+  Responsive behavior is content-driven: wrapping flex rows and auto-fit grids
+  with minimum sizes. The two container queries below exist because a row's
+  column structure cannot be expressed as a minimum item size.
+*/
+@layer echelon.marketing.components {
+  /* Skip link --------------------------------------------------------- */
+  .ef-skip-link {
+    position: fixed;
+    inset-block-start: var(--ef-space-2);
+    inset-inline-start: var(--ef-space-2);
+    z-index: 100;
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--ef-layout-target-min);
+    padding-inline: var(--ef-space-4);
+    background: var(--ef-color-surface-primary);
+    color: var(--ef-color-text-primary);
+    font-weight: var(--ef-type-weight-strong);
+    transform: translateY(-200%);
+  }
+
+  .ef-skip-link:focus,
+  .ef-skip-link:focus-visible {
+    transform: none;
+  }
+
+  /* Site header and navigation ---------------------------------------- */
+  .ef-site-header {
+    container: ef-site-header / inline-size;
+    position: relative;
+    z-index: 20;
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    background: color-mix(in srgb, var(--ef-color-surface-primary) 94%, transparent);
+    -webkit-backdrop-filter: blur(14px);
+    backdrop-filter: blur(14px);
+  }
+
+  .ef-site-header__inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ef-space-2) var(--ef-space-7);
+    inline-size: min(100%, var(--ef-layout-width-max));
+    margin-inline: auto;
+    padding: var(--ef-space-3) var(--ef-layout-gutter);
+  }
+
+  .ef-site-header__identity {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ef-space-1) var(--ef-space-3);
+    min-inline-size: 0;
+  }
+
+  .ef-site-header__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ef-space-3);
+    min-block-size: var(--ef-layout-target-min);
+    color: var(--ef-tone-text);
+    font-weight: var(--ef-type-weight-strong);
+    text-decoration: none;
+  }
+
+  .ef-site-header__brand:hover { color: var(--ef-tone-text); text-decoration: underline; }
+
+  /* The brand name stays visible at every width; it wraps rather than hides,
+     because the mark alone is decorative (aria-hidden). */
+  .ef-site-header__name { min-inline-size: 0; overflow-wrap: anywhere; }
+
+  .ef-site-header__mark {
+    display: grid;
+    place-items: center;
+    flex: none;
+    inline-size: 2.35rem;
+    aspect-ratio: 1;
+    border-radius: var(--ef-shape-radius);
+    background: var(--ef-color-surface-inverse);
+    color: var(--ef-color-text-inverse);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  .ef-site-header__tagline {
+    margin: 0;
+    max-inline-size: 24ch;
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    line-height: var(--ef-type-leading-snug);
+  }
+
+  /* The tagline repeats identity context; below this width it would push the
+     navigation onto a third line, so it yields. The brand name never hides. */
+  @container ef-site-header (inline-size < 56rem) {
+    .ef-site-header__tagline { display: none; }
+  }
+
+  .ef-site-nav__list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ef-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-site-nav__list > li { margin: 0; }
+
+  .ef-site-nav__link {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--ef-layout-target-min);
+    padding-inline: var(--ef-space-3);
+    border-block-end: calc(var(--ef-shape-border-width) * 2) solid transparent;
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-nav);
+    text-decoration: none;
+  }
+
+  .ef-site-nav__link:hover {
+    color: var(--ef-tone-text);
+    border-block-end-color: var(--ef-color-accent-primary);
+  }
+
+  /* Current location uses a persistent rule plus aria-current, not hue alone. */
+  .ef-site-nav__link[aria-current="page"],
+  .ef-site-nav__link[aria-current="true"] {
+    border-block-end-color: var(--ef-tone-rule-strong);
+  }
+
+  .ef-site-nav__link[data-ef-variant="action"] {
+    margin-inline-start: var(--ef-space-2);
+    border-radius: var(--ef-shape-radius);
+    background: var(--ef-tone-action-background);
+    color: var(--ef-tone-action-text);
+  }
+
+  .ef-site-nav__link[data-ef-variant="action"]:hover {
+    background: var(--ef-tone-action-hover);
+    color: var(--ef-tone-action-text);
+    border-block-end-color: var(--ef-tone-action-text);
+  }
+
+  /* Text roles --------------------------------------------------------- */
+  .ef-eyebrow {
+    margin-block: 0 var(--ef-space-3);
+    color: var(--ef-tone-label);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    font-weight: var(--ef-type-weight-label);
+    letter-spacing: var(--ef-type-tracking-label);
+    line-height: var(--ef-type-leading-snug);
+    text-transform: uppercase;
+  }
+
+  .ef-lead {
+    max-inline-size: var(--ef-layout-measure-narrow);
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-lead);
+    line-height: var(--ef-type-leading-lead);
+  }
+
+  .ef-statement {
+    margin: 0;
+    padding: var(--ef-space-5) 0 0;
+    border-inline-start: 0;
+    border-block-start: var(--ef-shape-border-width-accent) solid var(--ef-color-accent-primary);
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-display);
+    font-size: var(--ef-type-size-statement);
+    line-height: var(--ef-type-leading-snug);
+  }
+
+  .ef-statement :where(p) { color: inherit; max-inline-size: none; }
+
+  /* Actions and buttons ------------------------------------------------ */
+  .ef-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ef-space-3);
+  }
+
+  .ef-site .ef-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ef-space-3);
+    min-block-size: calc(var(--ef-layout-target-min) + var(--ef-space-2));
+    padding: var(--ef-space-3) var(--ef-space-5);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    border-radius: var(--ef-shape-radius);
+    background: transparent;
+    color: var(--ef-tone-text);
+    font: inherit;
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-strong);
+    line-height: var(--ef-type-leading-snug);
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    /* Hover and press are perceptual emphasis on the surface only: the hit
+       target never moves under the pointer (MOT-014). */
+    transition:
+      background-color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing),
+      color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing);
+  }
+
+  .ef-site .ef-button:hover { background: var(--ef-tone-hover); color: var(--ef-tone-text); }
+
+  .ef-site .ef-button[data-ef-variant="primary"] {
+    border-color: var(--ef-tone-action-background);
+    background: var(--ef-tone-action-background);
+    color: var(--ef-tone-action-text);
+  }
+
+  .ef-site .ef-button[data-ef-variant="primary"]:hover {
+    background: var(--ef-tone-action-hover);
+    color: var(--ef-tone-action-text);
+  }
+
+  .ef-site .ef-button:is(:disabled, [aria-disabled="true"]) {
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary);
+    color: var(--ef-color-text-primary);
+    cursor: not-allowed;
+  }
+
+  /* Badges ------------------------------------------------------------- */
+  .ef-badge-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-space-2);
+    margin: var(--ef-space-4) 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-badge-list > li { margin: 0; }
+
+  .ef-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ef-space-1);
+    padding: var(--ef-space-1) var(--ef-space-2);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-radius: var(--ef-shape-radius);
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    line-height: var(--ef-type-leading-snug);
+    text-decoration: none;
+  }
+
+  a.ef-badge { min-block-size: 1.5rem; }
+  a.ef-badge:hover { border-color: var(--ef-tone-rule-strong); color: var(--ef-tone-text); }
+
+  /* Status is carried by the badge text; the colored edge is redundant. */
+  .ef-badge[data-ef-status] { border-inline-start-width: var(--ef-shape-border-width-accent); }
+  .ef-badge[data-ef-status="success"] { border-inline-start-color: var(--ef-color-status-success); }
+  .ef-badge[data-ef-status="warning"] { border-inline-start-color: var(--ef-color-status-warning); }
+  .ef-badge[data-ef-status="danger"] { border-inline-start-color: var(--ef-color-status-danger); }
+  .ef-badge[data-ef-status="info"] { border-inline-start-color: var(--ef-color-status-info); }
+
+  /* Cards and card grids ----------------------------------------------- */
+  .ef-card-grid {
+    --ef-card-columns: 12;
+    --ef-card-rule: var(--ef-tone-rule);
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, max(var(--ef-layout-card-min), 100% / var(--ef-card-columns))), 1fr)
+    );
+    margin: 0;
+    padding: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-card-rule);
+    border-inline-start: var(--ef-shape-border-width) solid var(--ef-card-rule);
+    list-style: none;
+  }
+
+  /* data-ef-columns caps columns; the minimum card size decides when to drop. */
+  .ef-card-grid[data-ef-columns="2"] { --ef-card-columns: 2; }
+  .ef-card-grid[data-ef-columns="3"] { --ef-card-columns: 3; }
+  .ef-card-grid[data-ef-columns="4"] { --ef-card-columns: 4; }
+  .ef-card-grid[data-ef-columns="5"] { --ef-card-columns: 5; --ef-layout-card-min: 12rem; }
+
+  .ef-card-grid + .ef-card-grid { border-block-start: 0; }
+  .ef-card-grid > li { margin: 0; }
+
+  .ef-card {
+    position: relative;
+    min-inline-size: 0;
+    padding: var(--ef-layout-block-space);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-radius: var(--ef-shape-radius);
+  }
+
+  /* Inside a grid, cards share hairline rules instead of doubling borders. */
+  .ef-card-grid > .ef-card,
+  .ef-card-grid > li > .ef-card {
+    block-size: 100%;
+    border-width: 0 var(--ef-shape-border-width) var(--ef-shape-border-width) 0;
+    border-color: var(--ef-card-rule);
+    border-radius: 0;
+  }
+
+  .ef-card[data-ef-tone="elevated"] { box-shadow: var(--ef-effect-shadow-raised); }
+
+  /* Card titles size by role, not heading level, so the document outline can
+     use whatever level the page needs (VE LAW-COMP-004 hierarchy alignment). */
+  .ef-card__title {
+    max-inline-size: 24ch;
+    margin-block-end: var(--ef-space-3);
+    font-family: var(--ef-type-family-body);
+    font-size: var(--ef-type-size-h3);
+    font-weight: var(--ef-type-weight-strong);
+    letter-spacing: var(--ef-type-tracking-body);
+    line-height: var(--ef-type-leading-snug);
+  }
+
+  /* A card link stretches over the card so the whole card is a target while
+     the accessible name stays the title, not the card's full text. */
+  .ef-card__link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .ef-card__link::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .ef-card:has(.ef-card__link) { transition: background-color var(--ef-effect-transition-duration) var(--ef-effect-transition-easing); }
+  .ef-card:has(.ef-card__link:hover) { background: var(--ef-tone-hover); }
+  .ef-card__link:hover { color: inherit; text-decoration: underline; }
+  .ef-card__link:focus-visible { box-shadow: none; outline: none; }
+
+  .ef-card:has(.ef-card__link:focus-visible) {
+    outline: var(--ef-focus-ring-width) solid var(--ef-color-focus-gap);
+    outline-offset: calc(var(--ef-focus-ring-offset) * -1 - var(--ef-focus-ring-width));
+    box-shadow: inset 0 0 0 var(--ef-focus-halo-width) var(--ef-color-focus-ring);
+  }
+
+  .ef-card__footer {
+    margin-block-start: var(--ef-space-6);
+    padding-block-start: var(--ef-space-4);
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-strong);
+  }
+
+  /* Facts: short claims with supporting detail, as a description list. */
+  .ef-facts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ef-layout-fact-min)), 1fr));
+    margin: var(--ef-layout-block-space) 0 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-inline-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+  }
+
+  .ef-facts__item {
+    min-inline-size: 0;
+    padding: var(--ef-space-4);
+    border-inline-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+  }
+
+  .ef-facts__item > dt { color: var(--ef-tone-text); font-weight: var(--ef-type-weight-strong); }
+
+  .ef-facts__item > dd {
+    margin: var(--ef-space-1) 0 0;
+    color: var(--ef-tone-muted);
+    font-size: var(--ef-type-size-small);
+  }
+
+  /* Section heading ---------------------------------------------------- */
+  .ef-section-heading {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--ef-space-6) var(--ef-layout-grid-gap);
+    margin-block-end: calc(var(--ef-layout-block-space) * 1.25);
+    padding-block-end: var(--ef-space-6);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-section-heading__text { flex: 999 1 32rem; min-inline-size: min(100%, 20rem); }
+  .ef-section-heading__text > :where(h2) { margin-block-end: var(--ef-space-4); }
+  .ef-section-heading__aside { flex: 1 1 14rem; max-inline-size: 28rem; }
+
+  .ef-section-heading__note {
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  /* Index: an ordered set of linked entries (research areas, products). */
+  .ef-index {
+    container: ef-index / inline-size;
+    display: grid;
+    grid-template-columns: 5rem minmax(0, 0.65fr) minmax(0, 1fr) minmax(0, auto);
+    column-gap: var(--ef-layout-block-space);
+    margin: 0;
+    padding: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+    list-style: none;
+  }
+
+  /* Rows share the list's columns (subgrid) so entries align down the page. */
+  .ef-index__item {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    row-gap: var(--ef-space-2);
+    align-items: start;
+    margin: 0;
+    padding-block: var(--ef-space-7);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+  }
+
+  .ef-index__marker {
+    margin: 0;
+    color: var(--ef-tone-text);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  .ef-index__title {
+    margin-block-start: var(--ef-space-1);
+    font-family: var(--ef-type-family-display);
+    font-size: var(--ef-type-size-statement);
+    font-weight: var(--ef-type-weight-heading);
+  }
+
+  .ef-index__heading > .ef-eyebrow { margin: 0; }
+  .ef-index__summary { margin: 0; }
+
+  .ef-index__link {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 1.5rem;
+    font-size: var(--ef-type-size-small);
+    font-weight: var(--ef-type-weight-strong);
+    white-space: nowrap;
+  }
+
+  /* Four disparate columns cannot degrade by a minimum item size, so the
+     row regroups by container width: marker + content, then single column. */
+  @container ef-index (inline-size < 56rem) {
+    .ef-index__item { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--ef-space-4); }
+    .ef-index__item > :not(.ef-index__marker) { grid-column: 2; }
+  }
+
+  @container ef-index (inline-size < 28rem) {
+    .ef-index__item { grid-template-columns: minmax(0, 1fr); }
+    .ef-index__item > :not(.ef-index__marker) { grid-column: 1; }
+  }
+
+  /* Steps: a numbered method or process. */
+  .ef-steps {
+    counter-reset: ef-step;
+    margin: 0;
+    padding: 0;
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    list-style: none;
+  }
+
+  .ef-steps > li {
+    counter-increment: ef-step;
+    display: flex;
+    gap: var(--ef-space-4);
+    margin: 0;
+    padding-block: var(--ef-space-4);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    color: var(--ef-tone-text);
+  }
+
+  .ef-steps > li::before {
+    content: counter(ef-step, decimal-leading-zero);
+    flex: none;
+    min-inline-size: 2ch;
+    font-family: var(--ef-type-family-mono);
+    font-weight: var(--ef-type-weight-strong);
+  }
+
+  /* Call to action ----------------------------------------------------- */
+  .ef-cta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--ef-space-6) var(--ef-layout-grid-gap);
+    padding-block-start: calc(var(--ef-layout-block-space) * 1.25);
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-cta__text { flex: 999 1 32rem; min-inline-size: min(100%, 20rem); }
+  .ef-cta__text > :where(h2) { margin-block-end: var(--ef-space-4); }
+  .ef-cta > .ef-actions { flex: 1 1 auto; justify-content: flex-start; }
+
+  .ef-cta[data-ef-tone]:not([data-ef-tone="page"]) {
+    padding: calc(var(--ef-layout-block-space) * 2);
+    border-block-start: 0;
+  }
+
+  /* Prose: long-form content inside the reading measure. */
+  .ef-prose {
+    --ef-type-size-h2: var(--ef-type-size-statement);
+    max-inline-size: var(--ef-layout-measure);
+  }
+
+  .ef-prose > :where(h1) { margin-block-end: var(--ef-space-6); max-inline-size: none; }
+  .ef-prose > :where(h2) { margin-block: var(--ef-space-8) var(--ef-space-5); max-inline-size: none; }
+  .ef-prose > :where(h3) { margin-block: var(--ef-space-7) var(--ef-space-3); }
+  .ef-prose > :where(h2, h3):first-child { margin-block-start: 0; }
+  .ef-prose :where(p, li) { color: var(--ef-tone-text); }
+  .ef-prose > :where(figure, pre, .ef-code) { margin-block: var(--ef-layout-block-space); }
+
+  /* Callout: emphasized supporting material inside prose (FORMA-CONTENT-001).
+     A visible text label names the kind; the rule pattern repeats it as a
+     second, non-color cue. Presentation only: no state and no runtime. */
+  .ef-callout {
+    --ef-callout-rule: var(--ef-tone-rule-strong);
+    margin: var(--ef-layout-block-space) 0;
+    padding: var(--ef-space-4) var(--ef-space-5);
+    max-inline-size: var(--ef-layout-measure);
+    border: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    border-inline-start: var(--ef-shape-border-width-accent) solid var(--ef-callout-rule);
+    color: var(--ef-tone-text);
+  }
+
+  .ef-callout > :first-child { margin-block-start: 0; }
+  .ef-callout > :last-child { margin-block-end: 0; }
+  .ef-callout :where(p, li) { color: var(--ef-tone-text); max-inline-size: none; }
+
+  .ef-callout__label {
+    margin-block: 0 var(--ef-space-2);
+    color: var(--ef-tone-label);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+    font-weight: var(--ef-type-weight-strong);
+    letter-spacing: var(--ef-type-tracking-label);
+    text-transform: uppercase;
+  }
+
+  /* Quoted evidence reads as body text; the callout already marks it. */
+  .ef-callout :where(blockquote) {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .ef-callout :where(figcaption) {
+    margin-block-start: var(--ef-space-3);
+    color: var(--ef-tone-muted);
+    font-size: var(--ef-type-size-small);
+  }
+
+  /* Caution: a heavy block-start rule and a full-strength frame. */
+  .ef-callout[data-ef-callout="caution"] {
+    --ef-callout-rule: var(--ef-color-status-warning);
+    border-color: var(--ef-tone-rule-strong);
+    border-block-start-width: var(--ef-shape-border-width-accent);
+    border-inline-start-color: var(--ef-callout-rule);
+  }
+
+  /* Evidence: a dashed frame marks quoted or cited source material. */
+  .ef-callout[data-ef-callout="evidence"] {
+    --ef-callout-rule: var(--ef-color-status-info);
+    border-style: dashed;
+    border-inline-start-style: solid;
+  }
+
+  /* Decision: a double rule marks a settled outcome. */
+  .ef-callout[data-ef-callout="decision"] {
+    --ef-callout-rule: var(--ef-color-accent-primary);
+    border-inline-start-style: double;
+    border-inline-start-width: calc(var(--ef-shape-border-width-accent) * 2);
+  }
+
+  /* Code: technical samples in a bounded, keyboard-scrollable region. */
+  .ef-code {
+    margin: 0;
+    max-inline-size: 100%;
+    overflow: auto;
+    padding: var(--ef-layout-block-space);
+    border-radius: var(--ef-shape-radius);
+    background: var(--ef-color-surface-inverse);
+    color: var(--ef-color-text-inverse);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-small);
+    line-height: var(--ef-type-leading-lead);
+    tab-size: 2;
+  }
+
+  .ef-code :where(code) { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }
+
+  .ef-code-figure { margin: 0; }
+
+  .ef-code-figure > figcaption {
+    margin-block-end: var(--ef-space-2);
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  /* Site footer -------------------------------------------------------- */
+  .ef-site-footer {
+    margin-block-start: auto;
+  }
+
+  .ef-site-footer__inner {
+    inline-size: min(100%, var(--ef-layout-width-max));
+    margin-inline: auto;
+    padding: calc(var(--ef-layout-block-space) * 2) var(--ef-layout-gutter);
+  }
+
+  .ef-site-footer__main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--ef-layout-grid-gap);
+  }
+
+  .ef-site-footer__main > * { flex: 1 1 18rem; }
+  .ef-site-footer__main > .ef-actions { flex-grow: 0; }
+
+  .ef-site-footer__nav ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ef-space-1) var(--ef-space-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ef-site-footer__nav li { margin: 0; }
+  .ef-site-footer__nav a { display: inline-flex; align-items: center; min-block-size: 1.5rem; }
+
+  .ef-site-footer__note {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--ef-space-2) var(--ef-space-7);
+    max-inline-size: none;
+    margin: calc(var(--ef-layout-block-space) * 1.5) 0 0;
+    padding-block-start: var(--ef-space-4);
+    border-block-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    color: var(--ef-tone-muted);
+    font-family: var(--ef-type-family-mono);
+    font-size: var(--ef-type-size-label);
+  }
+
+  /* Accessibility and output modes ------------------------------------ */
+  @media (prefers-reduced-motion: reduce) {
+    .ef-site :where(*, *::before, *::after) {
+      scroll-behavior: auto !important;
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ef-site-header__mark,
+    .ef-site [data-ef-tone]:not([data-ef-tone="page"]),
+    .ef-code { border: 1px solid CanvasText; }
+    .ef-site .ef-button,
+    .ef-badge,
+    .ef-site-nav__link[data-ef-variant="action"] { border: 1px solid ButtonText; }
+    .ef-site-nav__link[aria-current] { border-block-end-color: Highlight; }
+    .ef-statement { border-block-start-color: CanvasText; }
+    .ef-callout { border-color: CanvasText; }
+  }
+
+  @media print {
+    .ef-site::before,
+    .ef-skip-link,
+    .ef-site-nav,
+    .ef-site-footer .ef-actions { display: none; }
+    .ef-site-header { position: static; backdrop-filter: none; background: none; }
+    .ef-site [data-ef-tone] { background: none; color: CanvasText; }
+    .ef-site :where(h1, h2, h3, h4, p, li, dt, dd, a) { color: CanvasText; }
+    .ef-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
+    .ef-card, .ef-index__item, .ef-code, .ef-callout { break-inside: avoid; }
+    .ef-callout { border-color: CanvasText; }
+  }
+}
+
+/*
+  Forma marketing layouts.
+
+  Page-level structure for public/marketing sites. The MarketingShell
+  (.ef-site) owns the frame: skip link, header, main, footer, and common
+  behavior. Page layouts (Marketing, Product, Documentation) are compositions
+  of the same components inside that frame; only the documentation layout
+  needs structure of its own.
+
+  Breakpoints, and why each exists:
+  - Sticky header needs min-width 40rem and min-height 36rem. A sticky header
+    on a short or narrow viewport (or at 200-400% zoom) permanently consumes
+    reading space and can obscure focused content (WCAG 2.4.11).
+  - The documentation layout regroups at 48rem and 72rem of main-region
+    width (container queries): three regions with different roles cannot
+    share one minimum item size. Below 48rem the navigation list also wraps
+    like a cluster, so a tall vertical nav never pushes the article below
+    the fold.
+  All other recomposition is content-driven (flex-wrap / auto-fit minimums).
+*/
+@layer echelon.marketing.layouts {
+  @media (min-width: 40rem) and (min-height: 36rem) {
+    .ef-site-header { position: sticky; inset-block-start: 0; }
+  }
+
+  .ef-site__main {
+    flex: 1 0 auto;
+    inline-size: min(100%, var(--ef-layout-width-max));
+    margin-inline: auto;
+    padding-inline: var(--ef-layout-gutter);
+    padding-block-end: var(--ef-layout-section-space);
+  }
+
+  .ef-site__main:focus { outline: none; }
+
+  /* Containers constrain a region inside the page width. */
+  .ef-container {
+    inline-size: min(100%, var(--ef-container-width, var(--ef-layout-width-standard)));
+    margin-inline: auto;
+  }
+
+  .ef-container[data-ef-width="narrow"] { --ef-container-width: var(--ef-layout-width-narrow); }
+  .ef-container[data-ef-width="wide"] { --ef-container-width: var(--ef-layout-width-wide); }
+  .ef-container[data-ef-width="max"] { --ef-container-width: var(--ef-layout-width-max); }
+
+  /* Sections: consistent vertical rhythm between page regions. */
+  .ef-site .ef-section {
+    padding-block: calc(var(--ef-layout-section-space) / 2);
+  }
+
+  .ef-site .ef-section[data-ef-tone]:not([data-ef-tone="page"]) {
+    margin-block: calc(var(--ef-layout-section-space) / 2);
+    padding: calc(var(--ef-layout-block-space) * 2);
+  }
+
+  .ef-section > * + * { margin-block-start: var(--ef-layout-stack-space); }
+  .ef-section > .ef-section-heading + * { margin-block-start: 0; }
+
+  /* Split: primary content with a supporting column that wraps below it. */
+  .ef-split {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: calc(var(--ef-layout-section-space) / 2);
+  }
+
+  .ef-split > :first-child { flex: 999 1 0; min-inline-size: min(100%, 55%); }
+  .ef-split > :last-child:not(:first-child) { flex: 1 1 clamp(18rem, 32%, 30rem); min-inline-size: 0; }
+
+  /* Hero: the page's first region and its one primary recognition path. */
+  .ef-hero {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: calc(var(--ef-layout-section-space) / 2);
+    padding-block: var(--ef-layout-section-space) calc(var(--ef-layout-block-space) * 2);
+    border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule-strong);
+  }
+
+  .ef-hero__content { flex: 999 1 0; min-inline-size: min(100%, 55%); }
+  .ef-hero__aside { flex: 1 1 clamp(18rem, 32%, 30rem); min-inline-size: 0; }
+  .ef-hero__content > * + *,
+  .ef-hero__aside > * + * { margin-block-start: var(--ef-layout-stack-space); }
+  .ef-hero__title { margin-block: var(--ef-space-2) var(--ef-space-6); }
+  .ef-hero__content > .ef-eyebrow + .ef-hero__title { margin-block-start: 0; }
+
+  /* Documentation page: navigation, article, optional page outline.
+     Three regions with different roles cannot share one minimum size, so
+     the grid regroups by the width of the main region (a container):
+     one column, then navigation + article (outline follows the article),
+     then all three. Source order and reading order never change. */
+  .ef-site__main { container: ef-main / inline-size; }
+
+  .ef-doc {
+    container: ef-doc / inline-size;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--ef-layout-block-space) calc(var(--ef-layout-section-space) / 2);
+    align-items: start;
+    padding-block: calc(var(--ef-layout-section-space) / 2);
+  }
+
+  .ef-doc__nav,
+  .ef-doc__content,
+  .ef-doc__aside { min-inline-size: 0; }
+
+  .ef-doc__content { --ef-type-size-h1: var(--ef-type-size-h2); }
+
+  @container ef-main (inline-size >= 48rem) {
+    .ef-doc { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); }
+    .ef-doc__aside { grid-column: 2; }
+  }
+
+  @container ef-main (inline-size >= 72rem) {
+    .ef-doc { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(10rem, 14rem); }
+    .ef-doc__aside { grid-column: 3; }
+  }
+
+  .ef-doc__nav :where(ul),
+  .ef-doc__aside :where(ul) {
+    margin: 0;
+    padding: 0;
+    border-inline-start: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    list-style: none;
+  }
+
+  .ef-doc__nav :where(li + li),
+  .ef-doc__aside :where(li + li) { margin-block-start: 0; }
+
+  .ef-doc__nav :where(a),
+  .ef-doc__aside :where(a) {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ef-layout-target-min);
+    margin-inline-start: calc(var(--ef-shape-border-width) * -1);
+    padding-inline: var(--ef-space-4);
+    border-inline-start: calc(var(--ef-shape-border-width) * 2) solid transparent;
+    color: var(--ef-tone-text);
+    font-size: var(--ef-type-size-small);
+    text-decoration: none;
+  }
+
+  .ef-doc__nav :where(a:hover),
+  .ef-doc__aside :where(a:hover) { border-inline-start-color: var(--ef-color-accent-primary); }
+
+  .ef-doc__nav :where(a[aria-current]) {
+    border-inline-start-color: var(--ef-tone-rule-strong);
+    font-weight: var(--ef-type-weight-strong);
+  }
+
+  .ef-doc__heading { margin-block-end: var(--ef-space-2); }
+
+  @media (min-width: 64rem) and (min-height: 36rem) {
+    .ef-doc__nav,
+    .ef-doc__aside {
+      position: sticky;
+      inset-block-start: var(--ef-layout-header-offset);
+      max-block-size: calc(100vh - var(--ef-layout-header-offset) - 1rem);
+      overflow: auto;
+    }
+  }
+
+  @container ef-doc (inline-size < 48rem) {
+    .ef-doc__nav :where(ul) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0 var(--ef-space-1);
+      border-inline-start: 0;
+      border-block-end: var(--ef-shape-border-width) solid var(--ef-tone-rule);
+    }
+
+    .ef-doc__nav :where(a) {
+      margin-inline-start: 0;
+      border-inline-start: 0;
+      border-block-end: calc(var(--ef-shape-border-width) * 2) solid transparent;
+    }
+
+    .ef-doc__nav :where(a[aria-current]) { border-block-end-color: var(--ef-tone-rule-strong); }
+  }
+}