@stnd/styles 0.10.3 → 0.10.5

package/_standard-02-color.scss

@@ -329,7 +329,7 @@
   --color-light-border: oklch(from var(--color-light-foreground) l c h / 0.1);
   --color-light-surface: color-mix(
     in srgb,
-    var(--color-light-foreground) 3%,
+    white 4%,
     var(--color-light-background)
   );
   --color-light-on-accent: var(--color-light-background);
@@ -343,7 +343,7 @@
   );
   --color-dark-surface: color-mix(
     in srgb,
-    var(--color-dark-foreground) 3%,
+    white 4%,
     var(--color-dark-background)
   );
 
@@ -456,59 +456,46 @@
    *
    * @property --color-shadow Active base shadow color.
    * @property --color-highlight Active specular highlight color.
-   * @property --color-surface-lowest Deepest recessed surface step.
-   * @property --color-surface-lower Sub-surface step mixed with transparency.
-   * @property --color-surface-low Low elevation surface step.
-   * @property --color-surface Base surface color.
-   * @property --color-surface-high Elevated surface step.
-   * @property --color-surface-highest Highest surface elevation step.
+   * @property --color-surface Base surface color (defaults to surface-light-1).
+   * @property --color-surface-light-1 Subtle elevated surface step (cards, containers).
+   * @property --color-surface-light-2 Elevated surface step (popovers, menus, dialogs).
+   * @property --color-surface-light-3 High elevated surface step (active highlights, modals).
+   * @property --color-surface-dark-1 Recessed surface step (inputs, wells, code blocks).
+   * @property --color-surface-dark-2 Deep recessed surface step (switch tracks, sunken wells).
+   * @property --color-surface-dark-3 Deepest recessed surface step.
    */
 
   /* Semantic Shadow Seeds */
   --color-shadow: var(--color-light-shadow-base);
   --color-highlight: var(--color-light-highlight);
 
-  /* Surface elevation scale */
-  --color-surface-low: color-mix(
-    in srgb,
-    var(--color-foreground) 3%,
-    var(--color-surface)
-  );
-  --color-surface-lowest: color-mix(
-    in srgb,
-    var(--color-foreground) 3%,
-    var(--color-surface-low)
-  );
-  --color-surface-lower: color-mix(
-    in srgb,
-    var(--color-foreground) 3%,
-    transparent
-  );
+  /* Directional surface scale (lighter & darker than background) */
+  --color-surface-light-1: color-mix(in srgb, white 4%, var(--color-background));
+  --color-surface-light-2: color-mix(in srgb, white 9%, var(--color-background));
+  --color-surface-light-3: color-mix(in srgb, white 16%, var(--color-background));
+
+  --color-surface-dark-1: color-mix(in srgb, black 4%, var(--color-background));
+  --color-surface-dark-2: color-mix(in srgb, black 9%, var(--color-background));
+  --color-surface-dark-3: color-mix(in srgb, black 16%, var(--color-background));
+
+  /* Canonical base surface */
+  --color-surface: var(--color-surface-light-1);
 
-  --color-surface-high: color-mix(in srgb, white 50%, var(--color-surface));
-  --color-surface-highest: color-mix(
-    in srgb,
-    white 50%,
-    var(--color-surface-high)
-  );
-  --color-surface-higher: color-mix(in srgb, white 50%, transparent);
   /**
    * @component Border Shorthands
    * @category Foundation
    * @description Pre-composed border shorthand tokens for clean layout boundaries.
    *
    * @property --border Standard border shorthand (`var(--stroke-width) solid var(--color-border)`).
+   * @property --border-hover Hover border shorthand (`var(--stroke-width) solid var(--color-foreground)`).
    * @property --border-accent Tinted accent border shorthand (`var(--stroke-width) solid oklch(...)`).
    * @property --border-transparent Transparent layout placeholder border.
    */
   --border-transparent: var(--stroke-width) solid transparent;
   --border-accent: var(--stroke-width) solid
     oklch(from var(--color-accent) l c h / 0.07);
-  /* Regressed to `0 solid transparent` at some point, then a prior audit
-     correctly flagged it as dead code but "fixed" it to `none` instead of
-     restoring the real value. Git history confirms the intended value —
-     unchanged across many commits before the regression — was this. */
   --border: var(--stroke-width) solid var(--color-border);
+  --border-hover: var(--stroke-width) solid var(--color-foreground);
 }
 
 /* =====================================================================
@@ -550,40 +537,23 @@
 
     /* Adjusted opacity for dark backgrounds */
     --color-subtle: var(--color-dark-subtle);
-    --color-muted: var(--color-dark-muted);
     --color-border: var(--color-dark-border);
-    --color-surface: var(--color-dark-surface);
 
     --color-shadow: var(--color-dark-shadow-base);
     --color-highlight: var(--color-dark-highlight);
 
     --shadow-xl: var(--shadow-glow);
 
-    /* Surface elevation scale */
-
-    --color-surface-low: color-mix(in srgb, black 3%, var(--color-surface));
-    --color-surface-lowest: color-mix(
-      in srgb,
-      black 7%,
-      var(--color-surface-low)
-    );
-    --color-surface-lower: color-mix(in srgb, black 7%, transparent);
-
-    --color-surface-high: color-mix(
-      in srgb,
-      var(--color-dark-foreground) 3%,
-      var(--color-surface)
-    );
-    --color-surface-highest: color-mix(
-      in srgb,
-      var(--color-dark-foreground) 3%,
-      var(--color-surface-high)
-    );
-    --color-surface-higher: color-mix(
-      in srgb,
-      var(--color-dark-foreground) 3%,
-      transparent
-    );
+    /* Directional surface scale in dark mode */
+    --color-surface-light-1: color-mix(in srgb, white 4%, var(--color-background));
+    --color-surface-light-2: color-mix(in srgb, white 9%, var(--color-background));
+    --color-surface-light-3: color-mix(in srgb, white 16%, var(--color-background));
+
+    --color-surface-dark-1: color-mix(in srgb, black 4%, var(--color-background));
+    --color-surface-dark-2: color-mix(in srgb, black 9%, var(--color-background));
+    --color-surface-dark-3: color-mix(in srgb, black 16%, var(--color-background));
+
+    --color-surface: var(--color-surface-light-1);
   }
 }
 
@@ -608,7 +578,7 @@
   --color-muted: var(--color-light-muted);
   --color-subtle: var(--color-light-subtle);
   --color-border: var(--color-light-border);
-  --color-surface: var(--color-light-surface);
+  --color-surface: var(--color-surface-light-1);
   --color-shadow: var(--color-light-shadow-base);
   --color-highlight: var(--color-light-highlight);
   --color-light: var(--color-light-background);
@@ -623,7 +593,7 @@
   --color-muted: var(--color-dark-muted);
   --color-subtle: var(--color-dark-subtle);
   --color-border: var(--color-dark-border);
-  --color-surface: var(--color-dark-surface);
+  --color-surface: var(--color-surface-light-1);
   --color-shadow: var(--color-dark-shadow-base);
   --color-highlight: var(--color-dark-highlight);
   --color-light: var(--color-dark-foreground);

package/_standard-03-typography.scss

@@ -137,37 +137,37 @@ h6 {
    controls heading line-height now. */
 h1 {
   font-weight: var(--font-weight-h1);
-  font-size: clamp(var(--size-xl), 5.5vw, var(--size-2xl));
+  font-size: clamp(var(--scale-3), 5.5vw, var(--scale-4));
   line-height: var(--font-header-line-height, 1);
 }
 
 h2 {
   font-weight: var(--font-weight-h2);
-  font-size: clamp(var(--size-lg), 4vw, var(--size-xl));
+  font-size: clamp(var(--scale-2), 4vw, var(--scale-3));
   line-height: var(--font-header-line-height, 1);
 }
 
 h3 {
   font-weight: var(--font-weight-h3);
-  font-size: clamp(var(--size-base), 3vw, var(--size-lg));
+  font-size: clamp(var(--scale), 3vw, var(--scale-2));
   line-height: var(--font-header-line-height, 1);
 }
 
 h4 {
   font-weight: var(--font-weight);
-  font-size: var(--size-base);
+  font-size: var(--scale);
   line-height: var(--line-height);
 }
 
 h5 {
   font-weight: var(--font-weight);
-  font-size: var(--size-sm);
+  font-size: var(--scale-d2);
   line-height: var(--line-height);
 }
 
 h6 {
   font-weight: var(--font-weight);
-  font-size: var(--size-xs);
+  font-size: var(--scale-d3);
   line-height: var(--line-height);
 }
 
@@ -191,7 +191,7 @@ h6 {
 .overline {
   font-variant-caps: small-caps;
   letter-spacing: 0.04em;
-  font-size: var(--size-sm);
+  font-size: var(--scale-d2);
   border-top: var(--stroke-width) solid var(--color-border);
   padding-block-start: var(--space-d2);
   margin-block-end: var(--space);
@@ -202,7 +202,7 @@ a {
   color: var(--color-link);
   text-decoration: none;
   text-decoration-thickness: var(--stroke-width);
-  text-underline-offset: calc(var(--stroke-width) * 2);
+  text-underline-offset: var(--trim);
   text-decoration-color: transparent;
   box-shadow: none;
   transition:
@@ -221,7 +221,7 @@ a:hover {
 a[target="_blank"]:not(.internal-link)::after {
   content: "↗";
   display: inline-block;
-  font-size: var(--size-xs);
+  font-size: var(--scale-d3);
   color: var(--color-subtle);
   margin-inline-start: 0.2em;
   transition: all var(--transition-fast);
@@ -236,7 +236,7 @@ a[target="_blank"]:not(.internal-link):hover::after {
   transition: all var(--transition-fast);
   &::after {
     content: "⊗";
-    font-size: var(--size-xs);
+    font-size: var(--scale-d3);
     color: var(--color-error);
     margin-inline-start: 0.2em;
   }
@@ -261,7 +261,7 @@ a[target="_blank"]:not(.internal-link):hover::after {
   font-variation-settings: var(--font-interface-variation);
   font-feature-settings: var(--font-interface-feature);
   font-weight: var(--font-interface-weight, var(--font-weight));
-  font-size: var(--size-xs);
+  font-size: var(--scale-d3);
 }
 
 code,
@@ -287,12 +287,12 @@ blockquote {
 
 /* Utilities & Inline Elements */
 small {
-  font-size: var(--size-sm);
+  font-size: var(--scale-d2);
 }
 
 sub,
 sup {
-  font-size: var(--size-xs);
+  font-size: var(--scale-d3);
   line-height: 0;
 }
 
@@ -321,14 +321,14 @@ mark {
 
 /* Keycaps */
 kbd {
-  background-color: var(--color-surface);
+  background-color: var(--color-surface-light-2);
   background-image: var(--effect-grain);
   border: none;
-  border-radius: var(--radius);
+  border-radius: var(--radius-sm);
   box-shadow: var(--shadow);
-  padding: var(--space-d6) var(--space-d3);
+  padding: calc(var(--trim) / 2) var(--trim);
   font-family: var(--font-monospace);
-  font-size: var(--size-xs);
+  font-size: var(--scale-d3);
   pointer-events: none;
 }
 

package/_standard-04-grid.scss

@@ -102,7 +102,7 @@ $grid-selectors: ".grid, .grid-row";
 /* Gap variants aligned to rhythm — this is the LIVE definition (sets --gap,
    the property actually consumed by column-gap/row-gap above). */
 :is(.grid, [class^="grid-"]).compact {
-  --gap: var(--trim);
+  --gap: var(--gap-compact);
 }
 
 :is(.grid, [class^="grid-"]).relaxed {

package/_standard-05-rhythm.scss

@@ -12,7 +12,7 @@
  *
  * @property .rhythm The container class. Sets `display: flow-root` so child margins cannot collapse out of it.
  * @property .no-rhythm Zeroes `margin-block-start` on every descendant — a subtree-wide rhythm opt-out.
- * @property --gap-multiplicator Rhythm multiplier factor for block-level spacing and heading exceptions.
+ * @property --rhythm-block-scale Rhythm multiplier factor for block-level spacing and heading exceptions.
  * @property .flex > * Zeroes `margin-block-start` for flex children so margins do not stack with flex gap.
  *
  * @example html - Turn any container into a rhythm block
@@ -50,38 +50,38 @@
      top-level document flow only) — flagging since the asymmetry itself
      isn't declared anywhere, just falls out of one missing `>`. */
   :where(:is(#{$rhythm-tags})) + :where(:is(#{$rhythm-tags})) {
-    margin-block-start: calc(var(--gap) * 1);
+    margin-block-start: var(--space);
   }
 
   > :where(:is(#{$rhythm-double-tags})) + :where(:is(#{$rhythm-simple-tags})),
   > :where(:is(#{$rhythm-simple-tags})) + :where(:is(#{$rhythm-double-tags})) {
-    margin-block-start: calc(var(--gap) * var(--gap-multiplicator, 2));
+    margin-block-start: calc(var(--space) * var(--rhythm-block-scale, 2));
   }
 
   // EXCEPTIONS
   //*
   > :where(:is(#{$rhythm-tags})) ~ :where(:is(h1, h2)) {
     margin-block-start: calc(
-      var(--gap) * calc(var(--gap-multiplicator, 2) + 2)
+      var(--space) * calc(var(--rhythm-block-scale, 2) + 2)
     );
   }
 
   > :where(:is(#{$rhythm-tags})) ~ :where(:is(h3, h4, h5, h6)) {
     margin-block-start: calc(
-      var(--gap) * calc(var(--gap-multiplicator, 2) + 1)
+      var(--space) * calc(var(--rhythm-block-scale, 2) + 1)
     );
   }
 
   > :where(:is(h1, h2, h3, h4)) + :where(:is(h2, h3, h4, h5, h6)) {
-    margin-block-start: calc(var(--gap) * var(--gap-multiplicator, 2));
+    margin-block-start: calc(var(--space) * var(--rhythm-block-scale, 2));
   }
 
   > :where(:is(h1, h2, h3)) + * {
-    margin-block-start: calc(var(--gap) * var(--gap-multiplicator, 2));
+    margin-block-start: calc(var(--space) * var(--rhythm-block-scale, 2));
   }
 
   > :where(:is(h4, h5, h6)) + * {
-    margin-block-start: calc(var(--gap) * 1);
+    margin-block-start: var(--space);
   }
 
   //*/

package/_standard-06-prose.scss

@@ -10,18 +10,12 @@
  *
  * @property .prose Main article/content grid container for readable prose with named tracks.
  * @property .prose.left Left-aligned prose variant hugging the left edge.
- * @property .small Narrow sidebar breakout column track.
- * @property .editorial Editorial column breakout track (`minmax(0, var(--space-2))`).
- * @property .feature Feature callout breakout track (`minmax(0, var(--space-4))`).
- * @property .hero Full-bleed viewport width hero track (`minmax(0, 1fr)`).
- * @property .full Full viewport width breakout track.
- * @property --line-width Active reading column measure.
- * @property --line-width-xs Extra small reading measure (24rem / 384px).
- * @property --line-width-sm Small reading measure (32rem / 512px).
- * @property --line-width-md Medium reading measure (42rem / 672px) - default.
- * @property --line-width-lg Large reading measure (50rem / 800px).
- * @property --line-width-xl Extra large reading measure (60rem / 960px).
- * @property --body-max-width Overall page max-width constraint (900px).
+ * @property .narrow Inset element narrower than prose reading column (`var(--prose-inset)`).
+ * @property .wide Breakout column extending past prose reading column (`var(--prose-breakout)`).
+ * @property .full Full container width breakout track spanning to `--page-max-width`.
+ * @property .full-bleed Full viewport width breakout track (`100vw`).
+ * @property --prose-width Active reading column measure.
+ * @property --page-max-width Overall page max-width constraint (1400px).
  *
  * @example
  * // Standard article with proper reading width
@@ -57,35 +51,26 @@
   &.left {
     margin-inline: 0;
     grid-template-columns:
-      [hero-start feature-start editorial-start content-start] var(
-        --content-width
-      )
-      [content-end editorial-end feature-end] 1fr [hero-end];
+      [full-start wide-start content-start] min(100%, var(--prose-width))
+      [content-end wide-end] 1fr [full-end];
   }
 
   grid-template-columns:
-    [hero-start] var(--content-width-hero)
-    [feature-start] var(--content-width-feature) [editorial-start] var(
-      --content-width-editorial
-    )
-    [content-start] var(--content-width) [content-end] var(
-      --content-width-editorial
-    )
-    [editorial-end] var(--content-width-feature) [feature-end] var(
-      --content-width-hero
-    )
-    [hero-end];
+    [full-start] var(--prose-track-full, minmax(0, 1fr))
+    [wide-start] var(--prose-breakout, minmax(0, var(--space)))
+    [content-start] min(100%, var(--prose-width)) [content-end]
+    var(--prose-breakout, minmax(0, var(--space))) [wide-end]
+    var(--prose-track-full, minmax(0, 1fr)) [full-end];
 
   transition: grid-template-columns var(--transition);
 
   position: relative;
   width: 100%;
-  max-width: var(--body-max-width);
+  max-width: var(--page-max-width);
   margin-inline: auto;
-  padding-inline: var(--gap-body);
-  /*z-index: var(--z-base);*/
-  /* Default content positioning */
+  padding-inline: var(--page-padding);
 
+  /* Default content positioning */
   > * {
     grid-column: content;
     min-width: 0;
@@ -102,52 +87,40 @@
     min-width: 0;
   }
 
-  > .small,
-  > .container-small,
+  /* Narrow: inset elements (callouts, blockquotes, code blocks, or .narrow) */
+  > .narrow,
+  > .container-narrow,
   > .callout,
   > blockquote,
   > pre,
-  > figure:not(.full-bleed):not(.breakout),
-  > p:has(img:not(.full-bleed):not(.breakout):not(.hero):not(.full)),
+  > figure:not(.full-bleed):not(.wide):not(.full),
+  > p:has(img:not(.full-bleed):not(.wide):not(.full)),
   > .stnd-code-block {
     grid-column: content;
-    margin-inline: var(--content-width-sm);
+    margin-inline: var(--prose-inset);
   }
 
+  /* Wide: breakout elements (tables, or .wide / .container-wide) */
   table,
   .scroll:has(table),
-  .editorial {
-    grid-column: editorial;
-    margin-inline: 0;
-    max-width: none;
-  }
-
-  .feature {
-    grid-column: feature;
+  .wide,
+  .container-wide,
+  p:has(> img.wide),
+  p:has(> video.wide) {
+    grid-column: wide;
     margin-inline: 0;
     max-width: none;
   }
 
-  .breakout,
-  p:has(> img.breakout),
-  p:has(> video.breakout),
-  figure.breakout {
-    grid-column: 1 / -1;
-    width: min(100%, 72rem);
-    max-width: 72rem;
-    margin-inline: auto !important;
-  }
-
+  /* Full: spans to page shell (--page-max-width) */
   .full,
-  .hero,
-  p:has(> img.hero),
+  .container-full,
   p:has(> img.full),
-  p:has(> video.hero),
   p:has(> video.full) {
-    grid-column: 1 / -1;
-    width: calc(100% + var(--gap-body) * 2);
-    max-width: calc(100% + var(--gap-body) * 2);
-    margin-inline: calc(var(--gap-body) * -1);
+    grid-column: full;
+    width: calc(100% + var(--page-padding) * 2);
+    max-width: calc(100% + var(--page-padding) * 2);
+    margin-inline: calc(var(--page-padding) * -1);
     border-radius: 0 !important;
 
     > * {
@@ -185,7 +158,7 @@
     margin-inline: auto;
     width: min(100%, 18rem);
     position: relative;
-    scroll-margin-top: calc(var(--gap-header, 3.5rem) + 1.5rem);
+    scroll-margin-top: var(--space-6);
 
     &.screen-full {
       width: 100%;
@@ -209,7 +182,7 @@
     grid-column: 1 / -1;
     width: 100%;
     margin-block: var(--gap-section, 4rem);
-    scroll-margin-top: calc(var(--gap-header, 3.5rem) + 1.5rem);
+    scroll-margin-top: var(--space-6);
 
     &.screen-full {
       min-height: 85vh;
@@ -290,7 +263,8 @@
   }
 
   @media (max-width: #{$mobile}) {
-    .container-small,
+    .narrow,
+    .container-narrow,
     .callout,
     blockquote,
     pre,
@@ -303,8 +277,7 @@
 
   @media (max-width: #{$small}) {
     .card.accent,
-    .card.feature,
-    .card.editorial,
+    .card.wide,
     .card.full {
       margin-inline: calc(var(--space) * -1);
       border-radius: 0;
@@ -327,7 +300,7 @@
   }
 
   /* Fixed 2026-07-14 — swapped undefined tokens for their real equivalents
-     (--color-muted, --color-accent, --color-surface-high). */
+     (--color-muted, --color-accent, --color-surface-light-2). */
   .mycelial-link,
   .mycelial-graft {
     text-decoration: none;
@@ -339,7 +312,7 @@
     &:hover {
       color: var(--color-accent);
       border-bottom: 1px solid var(--color-accent);
-      background-color: var(--color-surface-high);
+      background-color: var(--color-surface-light-2);
     }
   }
 }

package/_standard-07-base.scss

@@ -9,7 +9,7 @@
  * inside `.prose`), theme-transition rules, and selection/mark highlights.
  *
  * @property html Root element establishing background color, foreground text color, font smoothing, and smooth scrolling.
- * @property body Document container centered at `--body-max-width` with responsive padding and scroll margins.
+ * @property body Document container centered at `--page-max-width` with responsive padding and scroll margins.
  * @property .no-body-margin Full-bleed helper applied to `<header>` or `<footer>` to extend edge-to-edge past body padding.
  * @property .container-hero Hero section container with vertical padding and hairline borders.
  * @property ::selection Custom highlight selection using subtle yellow background tint and accent text color.
@@ -33,7 +33,7 @@ html {
   -webkit-overflow-scrolling: touch;
 
   font-family: var(--font-text), system-ui, sans-serif;
-  font-size: var(--size-base);
+  font-size: var(--scale);
   font-weight: var(--font-weight);
   letter-spacing: var(--font-letter-spacing);
 
@@ -85,8 +85,6 @@ body {
 body {
   margin: 0;
   padding: 0;
-  padding-top: var(--gap-header);
-  padding-bottom: var(--gap-footer);
   width: 100%;
   min-height: 100vh;
 
@@ -99,15 +97,15 @@ body {
 
   [id] {
     /* Keeps anchor-linked headings from landing under the sticky header. */
-    scroll-margin-top: calc(var(--space-2) + var(--gap-header));
+    scroll-margin-top: calc(var(--space-2) + 4rem);
   }
 }
 
 .container {
   width: 100%;
-  max-width: var(--body-max-width);
+  max-width: var(--page-max-width);
   margin-inline: auto;
-  padding-inline: var(--gap-body);
+  padding-inline: var(--page-padding);
 }
 
 main {
@@ -142,7 +140,7 @@ h6,
 li,
 div.callout,
 summary {
-  max-width: var(--line-width);
+  max-width: var(--prose-width);
 }
 p:has(img),
 blockquote p {
@@ -168,7 +166,7 @@ section.container-hero {
   box-shadow: var(--shadow);
 
   p {
-    max-width: var(--line-width);
+    max-width: var(--prose-width);
     margin-inline: auto !important;
   }
 }
@@ -202,37 +200,13 @@ dt {
    valid enough HTML that it would have rendered live on the docs page,
    not shown as a code sample. */
 
-/* Negate horizontal body padding (left/right) — allows full-width
-   backgrounds while keeping vertical padding. */
-
-body > footer.no-body-margin:last-of-type,
-body > header.no-body-margin:first-of-type {
-  margin-inline: calc(var(--gap-body) * -1);
-  padding-inline: calc(var(--gap-body) * 1);
-
-  @media (max-width: #{$small}) {
-    margin-inline: calc(var(--gap-body-mobile) * -1);
-  }
-}
-
-/* Negate bottom body padding (extra 1.5× multiplier) — removes the
-   generous bottom padding applied to body elements, for a footer that
-   should sit flush at the bottom. */
-body > footer.no-body-margin:last-of-type {
-  margin-block-end: calc(var(--gap-body) * -1.5);
-
-  @media (max-width: #{$small}) {
-    margin-block-end: calc(var(--gap-body-mobile) * -1.5);
-  }
-}
-
-/* Fixed 2026-07-14 — was margin-block-end (wrong property, copy-paste
-   typo), now correctly overrides margin-block-start to match the footer's
-   symmetric pattern. */
-body > header.no-body-margin:first-of-type {
-  margin-block-start: calc(var(--gap-body) * -1);
-
-  @media (max-width: #{$small}) {
-    margin-block-start: calc(var(--gap-body-mobile) * -1);
-  }
+/* Safe default containment for direct body children:
+   every element placed directly in body is centered and padded
+   unless explicitly marked full-bleed, a header, or a footer. */
+body > :not(.full-bleed, .stnd-header, .stnd-footer, [data-full-bleed], script, style, template, astro-island) {
+  width: 100%;
+  max-width: var(--page-max-width);
+  margin-inline: auto;
+  padding-inline: var(--page-padding);
+  box-sizing: border-box;
 }

package/_standard-08-media.scss

@@ -78,7 +78,7 @@ figure {
 }
 
 figcaption {
-  font-size: var(--size-sm);
+  font-size: var(--scale-d2);
   font-style: italic;
   text-align: center;
 }