@aitrien/motifspec 1.13.0 → 1.13.3

package/docs/components/site-footer.md

@@ -1,99 +1,99 @@
----
-name: site-footer
-status: stable
-tokens:
-  - border.width.hairline
-  - color.border.subtle
-  - color.link.hover
-  - color.ornament.rest
-  - color.surface.raised
-  - color.text.muted
-  - color.text.secondary
-  - font.family.mono
-  - font.family.ornament
-  - font.line-height.display
-  - font.line-height.ui
-  - font.size.label
-  - font.size.small
-  - font.tracking.label
-  - font.weight.ui
-  - size.column.sidebar
-  - size.measure.caption
-  - size.ornament.sm
-  - size.target.min
-  - space.gutter.grid
-  - space.inline.lg
-  - space.inline.xs
-  - space.inset.md
-  - space.inset.xl
-  - space.section.lg
-  - space.stack.lg
-  - space.stack.sm
----
-
-# Site footer
-
-The closing band of every page: a knitted ornament band, grouped links, a colophon and the legal line.
-
-## When to use
-
-- On every page, below `<main>`.
-- To repeat the primary nav and add secondary destinations (RSS, recent work, source code).
-
-## When not to use
-
-- For content a reader needs to finish the page. Put it in `<main>`.
-- For newsletter sign-ups or promotional blocks.
-
-## Markup
-
-```html preview
-<footer class="cx-footer">
-  <span class="cx-band" aria-hidden="true"></span>
-  <div class="cx-container">
-    <div class="cx-footer__grid">
-      <div>
-        <h2>Pages</h2>
-        <ul>
-          <li><a href="/work/">Work</a></li>
-          <li><a href="/writing/">Writing</a></li>
-          <li><a href="/about/">About</a></li>
-          <li><a href="/index.xml"><svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-rss"></use></svg>RSS feed</a></li>
-        </ul>
-      </div>
-      <div>
-        <h2>Colophon</h2>
-        <p>Set in National Park and JetBrains Mono, with ornaments from Yarndings 12. Built with Hugo.</p>
-      </div>
-    </div>
-  </div>
-  <div class="cx-container">
-    <div class="cx-footer__base">
-      <span>© 2026 Liam Marshall</span>
-      <a class="cx-version" href="https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md" aria-label="Version 1.6.0: view changelog">MotifSpec v1.6.0<svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-outward"></use></svg><span class="cx-tooltip cx-tooltip--above" aria-hidden="true">View changelog</span></a>
-      <a href="#top">Back to top<svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-upward"></use></svg></a>
-    </div>
-  </div>
-</footer>
-```
-
-## Do
-
-- Let the groups wrap. Each is an equal-width column: a link list needs half of `size.column.sidebar`, a paragraph (the colophon) a whole one. On a phone the link lists sit side by side in two columns and the colophon takes the full row below; with room, all of them share one row.
-- Keep two to four columns; the grid wraps on its own.
-- Use the footer band as the page's single ornament when the page has no other.
-- On a backdrop page, let the footer sit on the frost: `cx-backdrop-page` removes its raised surface, and the bottom fade starts above it.
-- Put the MotifSpec version in the base row on sites that consume it, as a `cx-version` link to the changelog (`changelog` in `package.json`, also served in `dist/tokens.json`). Its tooltip opens above (`cx-tooltip--above`) because it sits at the bottom of the page.
-
-## Don't
-
-- Don't add a second ornament band elsewhere on the same page.
-- Don't put social icons in place of text links. Name each destination.
-- Mark links that leave the site with `arrow-outward` after the text; the only other footer icons are `rss` and `arrow-upward`.
-
-## Accessibility
-
-- `<footer>` is the page's contentinfo landmark; column headings are `<h2>` so they appear in the headings list.
-- The band is `aria-hidden="true"` and has no text alternative because it carries no meaning.
-- Links are at least 24px tall (`size.target.min`).
-- Pairs: `color.text.secondary` on `color.surface.raised` (7:1); `color.text.muted` on `color.surface.raised` (4.5:1, labels only). On a backdrop page the frost is measured as `color.surface.base`; the contour lines beneath it are not part of the check.
+---
+name: site-footer
+status: stable
+tokens:
+  - border.width.hairline
+  - color.border.subtle
+  - color.link.hover
+  - color.ornament.rest
+  - color.surface.raised
+  - color.text.muted
+  - color.text.secondary
+  - font.family.mono
+  - font.family.ornament
+  - font.line-height.display
+  - font.line-height.ui
+  - font.size.label
+  - font.size.small
+  - font.tracking.label
+  - font.weight.ui
+  - size.column.sidebar
+  - size.measure.caption
+  - size.ornament.sm
+  - size.target.min
+  - space.gutter.grid
+  - space.inline.lg
+  - space.inline.xs
+  - space.inset.md
+  - space.inset.xl
+  - space.section.lg
+  - space.stack.lg
+  - space.stack.sm
+---
+
+# Site footer
+
+The closing band of every page: a knitted ornament band, grouped links, a colophon and the legal line.
+
+## When to use
+
+- On every page, below `<main>`.
+- To repeat the primary nav and add secondary destinations (RSS, recent work, source code).
+
+## When not to use
+
+- For content a reader needs to finish the page. Put it in `<main>`.
+- For newsletter sign-ups or promotional blocks.
+
+## Markup
+
+```html preview
+<footer class="cx-footer">
+  <span class="cx-band" aria-hidden="true"></span>
+  <div class="cx-container">
+    <div class="cx-footer__grid">
+      <div>
+        <h2>Pages</h2>
+        <ul>
+          <li><a href="/work/">Work</a></li>
+          <li><a href="/writing/">Writing</a></li>
+          <li><a href="/about/">About</a></li>
+          <li><a href="/index.xml"><svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-rss"></use></svg>RSS feed</a></li>
+        </ul>
+      </div>
+      <div>
+        <h2>Colophon</h2>
+        <p>Set in National Park and JetBrains Mono, with ornaments from Yarndings 12. Built with Hugo.</p>
+      </div>
+    </div>
+  </div>
+  <div class="cx-container">
+    <div class="cx-footer__base">
+      <span>© 2026 Liam Marshall</span>
+      <a class="cx-version" href="https://github.com/Aitrien/motifspec/blob/main/CHANGELOG.md" aria-label="Version 1.6.0: view changelog">MotifSpec v1.6.0<svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-outward"></use></svg><span class="cx-tooltip cx-tooltip--above" aria-hidden="true">View changelog</span></a>
+      <a href="#top">Back to top<svg class="cx-icon cx-icon--sm" aria-hidden="true" focusable="false"><use href="#cx-icon-arrow-upward"></use></svg></a>
+    </div>
+  </div>
+</footer>
+```
+
+## Do
+
+- Let the groups wrap. Each is an equal-width column: a link list needs half of `size.column.sidebar`, a paragraph (the colophon) a whole one. On a phone the link lists sit side by side in two columns and the colophon takes the full row below; with room, all of them share one row.
+- Keep two to four columns; the grid wraps on its own.
+- Use the footer band as the page's single ornament when the page has no other.
+- On a backdrop page, let the footer sit on the frost: `cx-backdrop-page` removes its raised surface, and the bottom fade starts above it.
+- Put the MotifSpec version in the base row on sites that consume it, as a `cx-version` link to the changelog (`changelog` in `package.json`, also served in `dist/tokens.json`). Its tooltip opens above (`cx-tooltip--above`) because it sits at the bottom of the page.
+
+## Don't
+
+- Don't add a second ornament band elsewhere on the same page.
+- Don't put social icons in place of text links. Name each destination.
+- Mark links that leave the site with `arrow-outward` after the text; the only other footer icons are `rss` and `arrow-upward`.
+
+## Accessibility
+
+- `<footer>` is the page's contentinfo landmark; column headings are `<h2>` so they appear in the headings list.
+- The band is `aria-hidden="true"` and has no text alternative because it carries no meaning.
+- Links are at least 24px tall (`size.target.min`).
+- Pairs: `color.text.secondary` on `color.surface.raised` (7:1); `color.text.muted` on `color.surface.raised` (4.5:1, labels only). On a backdrop page the frost is measured as `color.surface.base`; the contour lines beneath it are not part of the check.

package/docs/components/site-header.md

@@ -1,133 +1,133 @@
----
-name: site-header
-status: stable
-tokens:
-  - border.focus.offset
-  - border.focus.width
-  - border.width.hairline
-  - color.accent.border
-  - color.accent.fill.rest
-  - color.border.subtle
-  - color.focus.ring
-  - color.surface.base
-  - color.surface.highlight
-  - color.text.muted
-  - color.text.on-accent
-  - color.text.primary
-  - color.text.secondary
-  - color.wash.hover
-  - font.family.display
-  - font.family.mono
-  - font.line-height.ui
-  - font.size.heading-4
-  - font.size.label
-  - font.tracking.heading
-  - font.tracking.label
-  - font.weight.display
-  - font.weight.strong
-  - font.weight.ui
-  - motion.duration.fast
-  - motion.duration.slow
-  - motion.easing.standard
-  - radius.pill
-  - size.container.page
-  - size.target.touch
-  - space.gutter.page
-  - space.inline.lg
-  - space.inline.sm
-  - space.inline.xs
-  - space.inset.md
-  - space.inset.sm
-  - space.inset.xs
----
-
-# Site header and nav
-
-The bar at the top of every page: wordmark, primary nav, the backdrop pause control and the theme toggle. On a backdrop page (`backdrop.md`) it sits on the frost and scrolls away with the page; elsewhere it is sticky.
-
-## When to use
-
-- On every page of a site, including the 404, so a reader is never stranded.
-- For three to five primary destinations with plain, functional labels (Work, Writing, About).
-
-## When not to use
-
-- For in-page navigation; use `table-of-contents`.
-- For more than five links. Move the rest to the footer.
-- For calls to action. The header holds destinations, not buttons.
-
-## Markup
-
-```html preview
-<a class="cx-skip-link" href="#main">Skip to content</a>
-<header class="cx-header">
-  <div class="cx-container cx-header__inner">
-    <a class="cx-wordmark" href="/">Liam Marshall <span class="cx-wordmark__role">Web engineer</span></a>
-    <div class="cx-header__end">
-      <nav class="cx-nav" aria-label="Main">
-        <ul>
-          <li><a href="/work/" aria-current="page">Work</a></li>
-          <li><a href="/writing/">Writing</a></li>
-          <li><a href="/about/">About</a></li>
-        </ul>
-      </nav>
-      <label class="cx-backdrop__pause" hidden>
-        <input class="cx-visually-hidden" type="checkbox" aria-label="Pause background animation">
-        <svg class="cx-icon" data-when="running" aria-hidden="true" focusable="false"><use href="#cx-icon-pause"></use></svg>
-        <svg class="cx-icon" data-when="paused" aria-hidden="true" focusable="false"><use href="#cx-icon-play"></use></svg>
-        <span class="cx-tooltip" aria-hidden="true"><span data-when="running">Pause background</span><span data-when="paused">Play background</span></span>
-      </label>
-      <button class="cx-theme-toggle" type="button" data-theme-toggle hidden aria-label="Switch to dark theme">
-        <svg class="cx-icon" data-icon="to-dark" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-dark"></use></svg>
-        <svg class="cx-icon" data-icon="to-light" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-light"></use></svg>
-        <span class="cx-tooltip" aria-hidden="true">Switch to dark theme</span>
-      </button>
-    </div>
-  </div>
-</header>
-```
-
-### Scripts
-
-The toggle needs two scripts, both shipped in `dist/`. The first is a one-line snippet (`dist/theme-init.js`) inlined in `<head>` before the stylesheet, so a stored choice is on `<html>` before the first paint and the page never flashes the wrong theme. The second is `dist/codex.js`, loaded with `defer`, which reveals the toggle and wires it up (it also sets the header's scroll state on backdrop pages, and runs copy buttons, tooltip dismissal and the table of contents).
-
-```html
-<head>
-  <script>try{var t=localStorage.getItem('cx-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
-  <link rel="stylesheet" href="/motifspec/codex.css">
-  <script src="/motifspec/codex.js" defer></script>
-</head>
-```
-
-Copy the snippet as it is: the build fails if this doc and `js/theme-init.js` differ. It reads the same `cx-theme` key that `codex.js` writes (`light` or `dark`; no key means follow the system), and does nothing when storage is blocked. In Hugo, inline it from the mounted file: `{{ with resources.Get "motifspec/theme-init.js" }}<script>{{ .Content | safeJS }}</script>{{ end }}`. If your Content-Security-Policy blocks inline scripts, allow this one by its hash.
-
-## Do
-
-- Mark the current section with `aria-current="page"`, including on child pages (a post marks Writing). It gets a `color.surface.highlight` background with a `color.accent.border` hairline inside its edge, not an underline. The outline is what stands out from the header (3:1); the fill alone is close to `color.surface.base` in both themes.
-- Nav items are pills (`radius.pill`), the same shape as the pause control and the theme toggle, so every header control reads as one set.
-- When the nav and controls wrap below the wordmark, `dist/codex.js` sets `data-wrapped` on the header: the nav moves to the start of its row and is offset by its pills' padding, so the link text lines up with the wordmark and the page text, while the controls stay at the end. Without the script the row stays right-aligned.
-- Every header control rests in `color.text.secondary` and shares one hover, shown only where the pointer can hover (`@media (hover: hover)`), so it never sticks after a tap: `color.text.primary` text on a wash of `color.text.primary` at `color.wash.hover`. A solid `color.surface.hover` would all but match the frost.
-- Include the backdrop pause control on every backdrop page, between the nav and the theme toggle. It ships `hidden` and `dist/plate.js` reveals it when the drift starts; it never appears on a page without the backdrop. The choice is kept like the theme: `dist/plate.js` stores `paused` under `cx-backdrop` and restores it on every page.
-- On a backdrop page, let the header start on the frost. `dist/codex.js` sets `data-scrolled` on it: from then on it is sticky, and as soon as the page leaves the top (`"true"`) its `color.surface.base` surface fades in over `motion.duration.slow`. Back at the top (`"false"`) the surface fades out and the frost shows through again. Without the script the header has no surface and scrolls away with the page.
-- Keep labels to one functional word each.
-- Ship the toggle with `hidden` and let the script reveal it, so no dead control appears without JavaScript.
-- Make the toggle an icon-only circle that shows the action, not the state: a moon while light is showing, a sun while dark is showing. Its tooltip says the same ("Switch to dark theme").
-- Each click flips the theme you see. If the result matches the system setting, clear the stored choice (`auto`) so the page follows the system again; otherwise store `light` or `dark` on `data-theme`.
-- Include both icons. CSS picks the right one from `data-theme` and `prefers-color-scheme`, so the script only updates the label.
-
-## Don't
-
-- Don't hide the nav behind a menu button at small widths. The list scrolls inside its row instead.
-- Don't add icons or ornaments to nav items. The pause control and the theme toggle are the only header controls with icons.
-- Don't make the header sticky on a backdrop page without its surface; see-through, it would sit on the text below it. The `data-scrolled` rules keep the two together.
-- Don't animate the header on scroll beyond that surface fade (no shrink, hide or reveal).
-
-## Accessibility
-
-- The skip link is the first focusable element and targets `<main id="main">`.
-- `<nav aria-label="Main">`; only one nav per page uses that label.
-- Nav links, the pause control and the toggle are 44px (`size.target.touch`); the pause control and the toggle are pills with equal sides, so they render as circles.
-- The pause control is a native checkbox named "Pause background animation" (checked means paused), focusable by keyboard, with its focus ring on the round control.
-- The toggle's `aria-label` is its action ("Switch to light theme"); the visible tooltip repeats it and is `aria-hidden`. Escape hides the tooltip without moving the pointer (see `tooltip.md`).
-- `aria-current` carries the current state for assistive tech; the highlight is the visual cue.
-- Pairs: `color.text.secondary` and `color.text.primary` on `color.surface.base` (7:1); `color.text.primary` on `color.surface.highlight` (current, 7:1); `color.accent.border` on `color.surface.base` (current outline, 3:1). On a backdrop page the frost is measured as `color.surface.base`; the contour lines beneath it are not part of the check.
+---
+name: site-header
+status: stable
+tokens:
+  - border.focus.offset
+  - border.focus.width
+  - border.width.hairline
+  - color.accent.border
+  - color.accent.fill.rest
+  - color.border.subtle
+  - color.focus.ring
+  - color.surface.base
+  - color.surface.highlight
+  - color.text.muted
+  - color.text.on-accent
+  - color.text.primary
+  - color.text.secondary
+  - color.wash.hover
+  - font.family.display
+  - font.family.mono
+  - font.line-height.ui
+  - font.size.heading-4
+  - font.size.label
+  - font.tracking.heading
+  - font.tracking.label
+  - font.weight.display
+  - font.weight.strong
+  - font.weight.ui
+  - motion.duration.fast
+  - motion.duration.slow
+  - motion.easing.standard
+  - radius.pill
+  - size.container.page
+  - size.target.touch
+  - space.gutter.page
+  - space.inline.lg
+  - space.inline.sm
+  - space.inline.xs
+  - space.inset.md
+  - space.inset.sm
+  - space.inset.xs
+---
+
+# Site header and nav
+
+The bar at the top of every page: wordmark, primary nav, the backdrop pause control and the theme toggle. On a backdrop page (`backdrop.md`) it sits on the frost and scrolls away with the page; elsewhere it is sticky.
+
+## When to use
+
+- On every page of a site, including the 404, so a reader is never stranded.
+- For three to five primary destinations with plain, functional labels (Work, Writing, About).
+
+## When not to use
+
+- For in-page navigation; use `table-of-contents`.
+- For more than five links. Move the rest to the footer.
+- For calls to action. The header holds destinations, not buttons.
+
+## Markup
+
+```html preview
+<a class="cx-skip-link" href="#main">Skip to content</a>
+<header class="cx-header">
+  <div class="cx-container cx-header__inner">
+    <a class="cx-wordmark" href="/">Liam Marshall <span class="cx-wordmark__role">Web engineer</span></a>
+    <div class="cx-header__end">
+      <nav class="cx-nav" aria-label="Main">
+        <ul>
+          <li><a href="/work/" aria-current="page">Work</a></li>
+          <li><a href="/writing/">Writing</a></li>
+          <li><a href="/about/">About</a></li>
+        </ul>
+      </nav>
+      <label class="cx-backdrop__pause" hidden>
+        <input class="cx-visually-hidden" type="checkbox" aria-label="Pause background animation">
+        <svg class="cx-icon" data-when="running" aria-hidden="true" focusable="false"><use href="#cx-icon-pause"></use></svg>
+        <svg class="cx-icon" data-when="paused" aria-hidden="true" focusable="false"><use href="#cx-icon-play"></use></svg>
+        <span class="cx-tooltip" aria-hidden="true"><span data-when="running">Pause background</span><span data-when="paused">Play background</span></span>
+      </label>
+      <button class="cx-theme-toggle" type="button" data-theme-toggle hidden aria-label="Switch to dark theme">
+        <svg class="cx-icon" data-icon="to-dark" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-dark"></use></svg>
+        <svg class="cx-icon" data-icon="to-light" aria-hidden="true" focusable="false"><use href="#cx-icon-theme-light"></use></svg>
+        <span class="cx-tooltip" aria-hidden="true">Switch to dark theme</span>
+      </button>
+    </div>
+  </div>
+</header>
+```
+
+### Scripts
+
+The toggle needs two scripts, both shipped in `dist/`. The first is a one-line snippet (`dist/theme-init.js`) inlined in `<head>` before the stylesheet, so a stored choice is on `<html>` before the first paint and the page never flashes the wrong theme. The second is `dist/codex.js`, loaded with `defer`, which reveals the toggle and wires it up (it also sets the header's scroll state on backdrop pages, and runs copy buttons, tooltip dismissal and the table of contents).
+
+```html
+<head>
+  <script>try{var t=localStorage.getItem('cx-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
+  <link rel="stylesheet" href="/motifspec/codex.css">
+  <script src="/motifspec/codex.js" defer></script>
+</head>
+```
+
+Copy the snippet as it is: the build fails if this doc and `js/theme-init.js` differ. It reads the same `cx-theme` key that `codex.js` writes (`light` or `dark`; no key means follow the system), and does nothing when storage is blocked. In Hugo, inline it from the mounted file: `{{ with resources.Get "motifspec/theme-init.js" }}<script>{{ .Content | safeJS }}</script>{{ end }}`. If your Content-Security-Policy blocks inline scripts, allow this one by its hash.
+
+## Do
+
+- Mark the current section with `aria-current="page"`, including on child pages (a post marks Writing). It gets a `color.surface.highlight` background with a `color.accent.border` hairline inside its edge, not an underline. The outline is what stands out from the header (3:1); the fill alone is close to `color.surface.base` in both themes.
+- Nav items are pills (`radius.pill`), the same shape as the pause control and the theme toggle, so every header control reads as one set.
+- When the nav and controls wrap below the wordmark, `dist/codex.js` sets `data-wrapped` on the header: the nav moves to the start of its row and is offset by its pills' padding, so the link text lines up with the wordmark and the page text, while the controls stay at the end. Without the script the row stays right-aligned.
+- Every header control rests in `color.text.secondary` and shares one hover, shown only where the pointer can hover (`@media (hover: hover)`), so it never sticks after a tap: `color.text.primary` text on a wash of `color.text.primary` at `color.wash.hover`. A solid `color.surface.hover` would all but match the frost.
+- Include the backdrop pause control on every backdrop page, between the nav and the theme toggle. It ships `hidden` and `dist/plate.js` reveals it when the drift starts; it never appears on a page without the backdrop. The choice is kept like the theme: `dist/plate.js` stores `paused` under `cx-backdrop` and restores it on every page.
+- On a backdrop page, let the header start on the frost. `dist/codex.js` sets `data-scrolled` on it: from then on it is sticky, and as soon as the page leaves the top (`"true"`) its `color.surface.base` surface fades in over `motion.duration.slow`. Back at the top (`"false"`) the surface fades out and the frost shows through again. Without the script the header has no surface and scrolls away with the page.
+- Keep labels to one functional word each.
+- Ship the toggle with `hidden` and let the script reveal it, so no dead control appears without JavaScript.
+- Make the toggle an icon-only circle that shows the action, not the state: a moon while light is showing, a sun while dark is showing. Its tooltip says the same ("Switch to dark theme").
+- Each click flips the theme you see. If the result matches the system setting, clear the stored choice (`auto`) so the page follows the system again; otherwise store `light` or `dark` on `data-theme`.
+- Include both icons. CSS picks the right one from `data-theme` and `prefers-color-scheme`, so the script only updates the label.
+
+## Don't
+
+- Don't hide the nav behind a menu button at small widths. The list scrolls inside its row instead.
+- Don't add icons or ornaments to nav items. The pause control and the theme toggle are the only header controls with icons.
+- Don't make the header sticky on a backdrop page without its surface; see-through, it would sit on the text below it. The `data-scrolled` rules keep the two together.
+- Don't animate the header on scroll beyond that surface fade (no shrink, hide or reveal).
+
+## Accessibility
+
+- The skip link is the first focusable element and targets `<main id="main">`.
+- `<nav aria-label="Main">`; only one nav per page uses that label.
+- Nav links, the pause control and the toggle are 44px (`size.target.touch`); the pause control and the toggle are pills with equal sides, so they render as circles.
+- The pause control is a native checkbox named "Pause background animation" (checked means paused), focusable by keyboard, with its focus ring on the round control.
+- The toggle's `aria-label` is its action ("Switch to light theme"); the visible tooltip repeats it and is `aria-hidden`. Escape hides the tooltip without moving the pointer (see `tooltip.md`).
+- `aria-current` carries the current state for assistive tech; the highlight is the visual cue.
+- Pairs: `color.text.secondary` and `color.text.primary` on `color.surface.base` (7:1); `color.text.primary` on `color.surface.highlight` (current, 7:1); `color.accent.border` on `color.surface.base` (current outline, 3:1). On a backdrop page the frost is measured as `color.surface.base`; the contour lines beneath it are not part of the check.