ovellum 0.2.0 → 0.2.2

package/dist/templates/default/style.css

@@ -1,9 +1,20 @@
 /*
- * Ovellum default site theme — Tier 1 + Tier 2 token snapshot from
- * docs/internal/STYLES.md. Hand-ported; resync if the source moves.
+ * Ovellum default site theme.
+ *
+ * The Tier-1 palette, font stacks, type scale, space scale, and a few
+ * radii live between the `@tokens:from-styles-md` markers below and are
+ * auto-synced from `docs/internal/STYLES.md` by
+ * `scripts/extract-style-tokens.mjs`. Edit STYLES.md, then run
+ * `pnpm extract-tokens` to refresh; `pnpm check-tokens` reports drift.
+ *
+ * Tokens *outside* the markers are site-specific or deliberate
+ * deviations from STYLES.md — leave them alone unless you know the
+ * reason for the deviation.
  */
 
 :root {
+  /* @tokens:from-styles-md:start */
+
   /* Tier 1 — neutrals (zinc) */
   --color-zinc-50: oklch(98.5% 0.001 286.38);
   --color-zinc-100: oklch(96.7% 0.001 286.38);
@@ -15,7 +26,7 @@
   --color-zinc-900: oklch(21% 0.006 285.89);
   --color-zinc-950: oklch(14.1% 0.005 285.82);
 
-  /* Tier 1 — accents */
+  /* Tier 1 — accents (blue) */
   --color-blue-50: oklch(97% 0.014 254.6);
   --color-blue-200: oklch(88.2% 0.059 254.16);
   --color-blue-300: oklch(80.9% 0.105 251.81);
@@ -25,21 +36,23 @@
   --color-blue-700: oklch(48.8% 0.243 264.38);
   --color-blue-900: oklch(37.9% 0.146 265.52);
 
-  /* Tier 2 — semantic (default light) */
-  --color-bg: var(--color-zinc-50);
-  --color-bg-subtle: var(--color-zinc-100);
-  --color-bg-muted: var(--color-zinc-200);
-  --color-fg: var(--color-zinc-900);
-  --color-fg-muted: var(--color-zinc-700);
-  --color-fg-subtle: var(--color-zinc-500);
-  --color-border: var(--color-zinc-200);
-  --color-border-strong: var(--color-zinc-300);
-  --color-border-focus: var(--color-blue-500);
-  --color-accent: var(--color-blue-600);
-  --color-accent-hover: var(--color-blue-700);
-  --color-link: var(--color-blue-600);
-  --color-link-hover: var(--color-blue-700);
-  --color-code-bg: var(--color-zinc-100);
+  /* Tier 1 — status accents (callouts) */
+  --color-green-50: oklch(98.2% 0.018 155.83);
+  --color-green-300: oklch(87.1% 0.15 154.45);
+  --color-green-700: oklch(52.7% 0.154 150.07);
+  --color-green-950: oklch(26.6% 0.065 152.93);
+  --color-amber-50: oklch(98.7% 0.022 95.28);
+  --color-amber-300: oklch(87.9% 0.169 91.61);
+  --color-amber-800: oklch(47.3% 0.137 46.2);
+  --color-amber-950: oklch(27.9% 0.077 45.64);
+  --color-red-50: oklch(97.1% 0.013 17.38);
+  --color-red-300: oklch(80.8% 0.114 19.57);
+  --color-red-700: oklch(50.5% 0.213 27.52);
+  --color-red-950: oklch(25.8% 0.092 26.05);
+  --color-violet-50: oklch(96.9% 0.016 293.76);
+  --color-violet-300: oklch(81.1% 0.111 293.57);
+  --color-violet-700: oklch(49.1% 0.27 292.58);
+  --color-violet-950: oklch(28.3% 0.141 291.09);
 
   /* Fonts */
   --font-sans:
@@ -49,10 +62,7 @@
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
 
-  /* Type scale (Major Third → Perfect Fourth)
-     Body deliberately runs 15→16px (tightened from the Utopia default
-     of 16→19px) — closer to Stripe/Mintlify density. Other steps in
-     the scale are unchanged. */
+  /* Type scale (Major Third → Perfect Fourth) — full Utopia values */
   --font-size-0: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
   --font-size-1: clamp(1.25rem, 1.1341rem + 0.5793vw, 1.5831rem);
   --font-size-2: clamp(1.5625rem, 1.3721rem + 0.9522vw, 2.11rem);
@@ -67,29 +77,95 @@
   --space-m: clamp(1.5rem, 1.4022rem + 0.4892vw, 1.7813rem);
   --space-l: clamp(2rem, 1.8696rem + 0.6522vw, 2.375rem);
   --space-xl: clamp(3rem, 2.8043rem + 0.9783vw, 3.5625rem);
+  --space-2xl: clamp(4rem, 3.7391rem + 1.3043vw, 4.75rem);
+  --space-3xl: clamp(6rem, 5.6087rem + 1.9565vw, 7.125rem);
 
-  /* Misc */
+  /* Radii (subset shipped) */
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
+
+  /* @tokens:from-styles-md:end */
+
+  /* Tier 2 — semantic (default light) — site-specific remappings */
+  /* Body + footer-chrome are pure-neutral grays (chroma 0 — no hue) for
+     now; a blended background image is planned to replace this surface
+     later. Chrome (footer) sits ~4% L below body in light mode — the
+     smallest gap that reads as real tonal separation rather than
+     rendering noise. */
+  --color-bg: oklch(97% 0 0);
+  --color-bg-chrome: oklch(93% 0 0);
+  --color-bg-subtle: var(--color-zinc-100);
+  --color-bg-muted: var(--color-zinc-200);
+  /* Card surface — a hair lighter than body so a card lifts off the page
+     on a hairline border alone, no heavy shadow. */
+  --color-surface: oklch(100% 0 0);
+  --color-fg: var(--color-zinc-900);
+  --color-fg-muted: var(--color-zinc-700);
+  --color-fg-subtle: var(--color-zinc-500);
+  --color-border: var(--color-zinc-200);
+  --color-border-strong: var(--color-zinc-300);
+  --color-border-focus: var(--color-blue-500);
+  --color-accent: var(--color-blue-600);
+  --color-accent-hover: var(--color-blue-700);
+  --color-link: var(--color-blue-600);
+  --color-link-hover: var(--color-blue-700);
+  --color-code-bg: var(--color-zinc-100);
+
+  /* Callout types — GitHub alert vocabulary, editorial-calm palette */
+  --callout-note-fg: var(--color-blue-700);
+  --callout-note-bg: var(--color-blue-50);
+  --callout-tip-fg: var(--color-green-700);
+  --callout-tip-bg: var(--color-green-50);
+  --callout-important-fg: var(--color-violet-700);
+  --callout-important-bg: var(--color-violet-50);
+  --callout-warning-fg: var(--color-amber-800);
+  --callout-warning-bg: var(--color-amber-50);
+  --callout-caution-fg: var(--color-red-700);
+  --callout-caution-bg: var(--color-red-50);
+
+  /* Deliberate deviations from STYLES.md:
+     - shadows inlined (no shared --shadow-color token in this build)
+     - body line-height 1.55 (vs spec 1.5) — closer to Stripe density at our
+       tightened 15→16px body size
+     - tight 1.2 (vs spec 1.15) — large headings need a hair more air */
   --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.08);
   --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.08), 0 2px 4px oklch(0% 0 0 / 0.08);
-
   --leading-normal: 1.55;
   --leading-tight: 1.2;
   --leading-mono: 1.55;
 
-  /* Layout widths */
-  --sidebar-w: 240px;
-  --toc-w: 200px;
-  --content-max: 70ch;
+  /* Layout widths (site-specific, not in STYLES.md) */
+  --sidebar-w: 260px;
+  --toc-w: 220px;
+  --content-max: 76ch;
+  /* Width tokens.
+     --chrome-max stays constant across every page — topbar and footer
+     read this so the chrome never shifts width between landing and docs
+     (avoiding the jarring "small header → wide header" jump on click).
+     --page-max governs the main content boundary: docs run wide
+     (Mintlify-style) so long code blocks and reference tables have room;
+     landing tightens via the body class for editorial centrepiece feel. */
+  --chrome-max: 1600px;
+  --page-max: 1600px;
+}
+
+body.ov-body-landing {
+  --page-max: 1100px;
 }
 
 /* Dark theme — auto + explicit */
 @media (prefers-color-scheme: dark) {
   :root[data-theme='auto'] {
-    --color-bg: var(--color-zinc-950);
+    --color-bg: oklch(14.1% 0 0);
+    /* Chrome lifts ~6% L above body in dark mode (elevation inversion:
+       you can't go darker than near-black without reading as a void).
+       The gap is bigger than light mode's 4% because the human eye
+       discriminates lightness deltas worse in dark regions. */
+    --color-bg-chrome: oklch(20% 0 0);
     --color-bg-subtle: var(--color-zinc-900);
     --color-bg-muted: var(--color-zinc-800);
+    /* Card sits between body (14.1%) and chrome (20%) — a gentle lift. */
+    --color-surface: oklch(17.5% 0 0);
     --color-fg: var(--color-zinc-100);
     --color-fg-muted: var(--color-zinc-300);
     --color-fg-subtle: var(--color-zinc-500);
@@ -101,13 +177,25 @@
     --color-link: var(--color-blue-400);
     --color-link-hover: var(--color-blue-300);
     --color-code-bg: var(--color-zinc-900);
+    --callout-note-fg: var(--color-blue-300);
+    --callout-note-bg: var(--color-blue-950);
+    --callout-tip-fg: var(--color-green-300);
+    --callout-tip-bg: var(--color-green-950);
+    --callout-important-fg: var(--color-violet-300);
+    --callout-important-bg: var(--color-violet-950);
+    --callout-warning-fg: var(--color-amber-300);
+    --callout-warning-bg: var(--color-amber-950);
+    --callout-caution-fg: var(--color-red-300);
+    --callout-caution-bg: var(--color-red-950);
   }
 }
 
 :root[data-theme='dark'] {
-  --color-bg: var(--color-zinc-950);
+  --color-bg: oklch(14.1% 0 0);
+  --color-bg-chrome: oklch(20% 0 0);
   --color-bg-subtle: var(--color-zinc-900);
   --color-bg-muted: var(--color-zinc-800);
+  --color-surface: oklch(17.5% 0 0);
   --color-fg: var(--color-zinc-100);
   --color-fg-muted: var(--color-zinc-300);
   --color-fg-subtle: var(--color-zinc-500);
@@ -119,6 +207,16 @@
   --color-link: var(--color-blue-400);
   --color-link-hover: var(--color-blue-300);
   --color-code-bg: var(--color-zinc-900);
+  --callout-note-fg: var(--color-blue-300);
+  --callout-note-bg: var(--color-blue-950);
+  --callout-tip-fg: var(--color-green-300);
+  --callout-tip-bg: var(--color-green-950);
+  --callout-important-fg: var(--color-violet-300);
+  --callout-important-bg: var(--color-violet-950);
+  --callout-warning-fg: var(--color-amber-300);
+  --callout-warning-bg: var(--color-amber-950);
+  --callout-caution-fg: var(--color-red-300);
+  --callout-caution-bg: var(--color-red-950);
 }
 
 /* Reset + base */
@@ -134,6 +232,15 @@ body {
   padding: 0;
 }
 
+/* html bg matches the body (not the chrome) so Safari's rubber-band
+   overscroll at the top continues the topbar's body color cleanly.
+   The footer keeps its chrome tint, so bottom overscroll will reveal
+   body instead of footer — accepted tradeoff: top overscroll is the
+   one users actually notice. */
+html {
+  background: var(--color-bg);
+}
+
 body {
   font-family: var(--font-sans);
   font-size: var(--font-size-0);
@@ -159,30 +266,77 @@ a:hover {
   border-radius: 2px;
 }
 
-/* Top bar */
+/* Top bar
+   ===
+   Outer element is full-bleed so the chrome tint and bottom border span
+   the viewport — keeps the header visually identical between landing
+   (narrow body) and docs (wide body). Inner element holds the grid and
+   constrains content to --chrome-max. */
 .ov-topbar {
   position: sticky;
   top: 0;
   z-index: 10;
+  inline-size: 100%;
+  /* Topbar reads as a continuation of the body, separated only by a
+     thin hairline border-block-end. Footer keeps the chrome tint —
+     the asymmetry is intentional: a tinted footer reads as a closing
+     baseline, a tinted topbar fought every other surface on the page. */
+  background: var(--color-bg);
+  border-block-end: 1px solid var(--color-border);
+}
+.ov-topbar-inner {
   display: grid;
+  /* brand | search (fills the middle) | icon cluster */
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: var(--space-m);
   padding: var(--space-2xs) var(--space-m);
-  max-inline-size: 1320px;
+  max-inline-size: var(--chrome-max);
   margin-inline: auto;
   inline-size: 100%;
-  border-block-end: 1px solid var(--color-border);
-  background: color-mix(in oklch, var(--color-bg) 88%, transparent);
-  backdrop-filter: saturate(180%) blur(8px);
+}
+.ov-brand-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  min-inline-size: 0;
 }
 .ov-brand {
-  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  font-weight: 700;
   text-decoration: none;
   color: var(--color-fg);
-  font-size: var(--font-size-1);
+  font-size: 1.125rem;
   letter-spacing: -0.01em;
 }
+.ov-brand-mark {
+  flex: none;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  line-height: 0;
+}
+/* Center zone — the search box stretches to fill it. */
+.ov-topbar-search {
+  display: flex;
+  min-inline-size: 0;
+}
+.ov-brand-version {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 0.45em;
+  font-family: var(--font-mono);
+  font-size: 0.7em;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--color-fg-muted);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  letter-spacing: 0;
+  user-select: all;
+}
 .ov-topbar-nav {
   display: flex;
   gap: var(--space-xs);
@@ -206,13 +360,39 @@ a:hover {
   color: var(--color-fg);
   background: var(--color-bg-subtle);
 }
+/* Icon-only links (e.g. GitHub, npm) and the theme toggle share one look:
+   rounded-corner square buttons with a hairline border, spaced apart. */
+.ov-topbar-link--icon,
+.ov-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding: 0;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-subtle);
+  color: var(--color-fg-muted);
+  border-radius: var(--radius-md);
+  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
+}
+.ov-topbar-link--icon:hover,
+.ov-theme-toggle:hover {
+  color: var(--color-fg);
+  background: var(--color-bg-muted);
+  border-color: var(--color-border-strong);
+}
+.ov-topbar-glyph {
+  line-height: 0;
+}
 .ov-topbar-icon {
   opacity: 0.7;
 }
 .ov-topbar-right {
   display: flex;
   align-items: center;
-  gap: var(--space-2xs);
+  gap: var(--space-xs);
+  min-inline-size: 0;
 }
 
 /* Search box (Pagefind UI as a floating dropdown)
@@ -228,8 +408,11 @@ a:hover {
 .ov-search {
   position: relative;
   inline-size: 100%;
-  min-inline-size: 220px;
-  max-inline-size: 320px;
+  min-inline-size: 0;
+  /* Fills the center grid column; capped so it stays comfortable on very
+     wide viewports without hugging the icon cluster. */
+  max-inline-size: 720px;
+  margin-inline: auto;
 }
 .ov-search .pagefind-ui {
   --pagefind-ui-scale: 0.6;
@@ -242,6 +425,13 @@ a:hover {
   --pagefind-ui-border-radius: var(--radius-md);
   --pagefind-ui-font: var(--font-sans);
 }
+/* Let the search collapse with its grid column — an <input>'s intrinsic
+   min-width would otherwise refuse to shrink and overflow the topbar
+   (pushing the hamburger off-screen) on narrow viewports. */
+.ov-search .pagefind-ui__form,
+.ov-search .pagefind-ui__search-input {
+  min-inline-size: 0;
+}
 .ov-search .pagefind-ui__search-input {
   font-weight: 500;
   color: var(--color-fg);
@@ -317,30 +507,10 @@ a:hover {
   display: none;
 }
 
-@media (max-width: 720px) {
-  .ov-search {
-    display: none;
-  }
-}
-
+/* Shared icon-button appearance (square, bordered) lives with
+   `.ov-topbar-link--icon` above; here we only add the toggle's cursor. */
 .ov-theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.25rem;
-  block-size: 2.25rem;
-  padding: 0;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--color-fg-muted);
-  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
-}
-.ov-theme-toggle:hover {
-  color: var(--color-fg);
-  background: var(--color-bg-subtle);
-  border-color: var(--color-border);
 }
 .ov-theme-icon {
   display: none;
@@ -406,15 +576,39 @@ a:hover {
 .ov-mobile-nav .ov-topbar-link {
   padding: var(--space-xs) var(--space-s);
   font-size: 1.05em;
+  gap: 0.6em;
+}
+/* Theme toggle lives in the sheet on mobile (kept out of the top row). */
+.ov-mobile-theme {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2xs) var(--space-s);
+  margin-block-start: var(--space-2xs);
+  border-block-start: 1px solid var(--color-border);
+}
+.ov-mobile-theme-label {
+  font-size: 1.05em;
+  font-weight: 500;
+  color: var(--color-fg-muted);
 }
 body.ov-menu-open {
   overflow: hidden;
 }
 
 @media (max-width: 720px) {
+  /* Tighter inner gap so the centered search keeps room next to the
+     larger brand and the hamburger. */
+  .ov-topbar-inner {
+    gap: var(--space-xs);
+  }
   .ov-topbar-nav {
     display: none;
   }
+  /* The desktop theme toggle hides on mobile; the sheet carries its own. */
+  .ov-topbar-right > .ov-theme-toggle {
+    display: none;
+  }
   .ov-topbar-menu {
     display: inline-flex;
   }
@@ -425,7 +619,7 @@ body.ov-menu-open {
   display: grid;
   grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
   gap: var(--space-l);
-  max-inline-size: 1320px;
+  max-inline-size: var(--page-max);
   margin-inline: auto;
   padding: var(--space-m);
 }
@@ -446,23 +640,35 @@ body.ov-menu-open {
   padding: 0;
 }
 .ov-sidebar-nav > ul > li {
-  margin-block-end: var(--space-2xs);
+  margin-block-end: var(--space-s);
+  padding-block-end: var(--space-s);
+  border-block-end: 1px solid var(--color-border);
+}
+.ov-sidebar-nav > ul > li:last-child {
+  border-block-end: 0;
+  padding-block-end: 0;
+}
+.ov-sidebar-nav li {
+  margin-block-end: var(--space-3xs);
 }
 .ov-nav-link {
   display: block;
   padding: var(--space-3xs) var(--space-2xs);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   text-decoration: none;
   color: var(--color-fg-muted);
   font-size: 0.95em;
+  border-inline-start: 2px solid transparent;
+  margin-inline-start: -2px;
+  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
 }
 .ov-nav-link:hover {
-  background: var(--color-bg-subtle);
   color: var(--color-fg);
 }
 .ov-nav-link.is-active {
-  background: var(--color-accent);
-  color: var(--color-bg);
+  color: var(--color-accent-fg, var(--color-accent));
+  font-weight: 600;
+  border-inline-start-color: var(--color-accent);
 }
 .ov-nav-group {
   display: block;
@@ -489,25 +695,31 @@ body.ov-menu-open {
 .ov-prose h1 {
   font-size: var(--font-size-4);
   line-height: var(--leading-tight);
-  letter-spacing: -0.025em;
+  letter-spacing: -0.03em;
   margin-block: 0 var(--space-m);
+  font-weight: 700;
 }
 .ov-prose h2 {
   font-size: var(--font-size-3);
   line-height: var(--leading-tight);
-  letter-spacing: -0.025em;
-  margin-block: var(--space-l) var(--space-s);
-  padding-block-start: var(--space-s);
-  border-block-start: 1px solid var(--color-border);
+  letter-spacing: -0.02em;
+  margin-block: var(--space-xl) var(--space-s);
+  font-weight: 700;
 }
 .ov-prose h3 {
   font-size: var(--font-size-2);
   line-height: 1.25;
-  margin-block: var(--space-m) var(--space-s);
+  letter-spacing: -0.015em;
+  margin-block: var(--space-l) var(--space-2xs);
+  font-weight: 600;
 }
 .ov-prose h4 {
   font-size: var(--font-size-1);
-  margin-block: var(--space-m) var(--space-s);
+  margin-block: var(--space-m) var(--space-2xs);
+  font-weight: 600;
+}
+.ov-prose :is(h1, h2, h3, h4) + p {
+  margin-block-start: 0;
 }
 .ov-prose p,
 .ov-prose ul,
@@ -522,37 +734,163 @@ body.ov-menu-open {
   border-inline-start: 3px solid var(--color-border-strong);
   color: var(--color-fg-muted);
 }
+
+/* Callouts (GitHub alert syntax: > [!NOTE] / [!TIP] / [!IMPORTANT] /
+   [!WARNING] / [!CAUTION]). Rendered as a labelled panel with a 3px
+   left rule in the type color, a faint type-color background, and an
+   uppercase eyebrow label. Editorial-calm: thin rule, restrained tint,
+   no icon — the label carries the meaning. */
+.ov-prose .ov-callout {
+  --_fg: var(--color-fg);
+  --_bg: var(--color-bg-subtle);
+  margin-block: 0 var(--space-s);
+  padding: var(--space-s) var(--space-m);
+  border-inline-start: 3px solid var(--_fg);
+  background: var(--_bg);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  color: var(--color-fg);
+}
+.ov-prose .ov-callout--note {
+  --_fg: var(--callout-note-fg);
+  --_bg: var(--callout-note-bg);
+}
+.ov-prose .ov-callout--tip {
+  --_fg: var(--callout-tip-fg);
+  --_bg: var(--callout-tip-bg);
+}
+.ov-prose .ov-callout--important {
+  --_fg: var(--callout-important-fg);
+  --_bg: var(--callout-important-bg);
+}
+.ov-prose .ov-callout--warning {
+  --_fg: var(--callout-warning-fg);
+  --_bg: var(--callout-warning-bg);
+}
+.ov-prose .ov-callout--caution {
+  --_fg: var(--callout-caution-fg);
+  --_bg: var(--callout-caution-bg);
+}
+.ov-prose .ov-callout-label {
+  font-size: 0.74em;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--_fg);
+  margin-block-end: var(--space-2xs);
+}
+.ov-prose .ov-callout > p {
+  margin-block: 0;
+}
+.ov-prose .ov-callout > p + p,
+.ov-prose .ov-callout > * + * {
+  margin-block-start: var(--space-2xs);
+}
 .ov-prose ul,
 .ov-prose ol {
   padding-inline-start: var(--space-m);
 }
+.ov-prose li {
+  margin-block-end: 0.25em;
+}
+.ov-prose li:last-child {
+  margin-block-end: 0;
+}
+.ov-prose li > p {
+  margin-block: 0;
+}
+.ov-prose li > p + p {
+  margin-block-start: var(--space-2xs);
+}
+.ov-prose ul ul,
+.ov-prose ul ol,
+.ov-prose ol ol,
+.ov-prose ol ul {
+  margin-block: 0.25em 0;
+}
+.ov-prose ul li::marker {
+  color: var(--color-fg-subtle);
+}
+.ov-prose ol li::marker {
+  color: var(--color-fg-subtle);
+  font-variant-numeric: tabular-nums;
+}
+
+/* GFM task lists: kill the bullet, keep the checkbox tight to the text. */
+.ov-prose ul.contains-task-list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+.ov-prose li.task-list-item {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5em;
+}
+.ov-prose li.task-list-item input[type='checkbox'] {
+  margin: 0;
+  accent-color: var(--color-accent);
+  transform: translateY(2px);
+}
 .ov-prose code:not(pre code) {
   font-family: var(--font-mono);
   background: var(--color-code-bg);
-  padding: 0.1em 0.4em;
-  border-radius: 4px;
-  font-size: 0.92em;
+  padding: 0.1em 0.38em;
+  border-radius: var(--radius-sm);
+  font-size: 0.88em;
+  color: var(--color-fg);
+  white-space: nowrap;
+}
+.ov-prose a > code:not(pre code) {
+  color: var(--color-link);
 }
 .ov-prose img {
   max-inline-size: 100%;
   height: auto;
   border-radius: var(--radius-md);
 }
+/* Tables — editorial-calm: horizontal rules only, no grid, no header
+   fill. Header reads via weight + a thicker bottom rule.
+   Each table is wrapped by `.ov-table-wrap` (rehypeTableWrap) so a
+   table wider than the prose column scrolls horizontally inside the
+   wrap instead of forcing the column to grow. */
+.ov-prose .ov-table-wrap {
+  margin-block: 0 var(--space-s);
+  inline-size: 100%;
+  max-inline-size: 100%;
+  overflow-x: auto;
+}
+.ov-prose .ov-table-wrap > table {
+  margin-block: 0;
+}
 .ov-prose table {
   border-collapse: collapse;
   inline-size: 100%;
-  margin-block: 0 var(--space-s);
-  font-size: 0.95em;
+  font-size: 0.92em;
+  font-variant-numeric: tabular-nums;
 }
 .ov-prose th,
 .ov-prose td {
-  padding: var(--space-2xs) var(--space-s);
-  border: 1px solid var(--color-border);
+  padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
   text-align: start;
+  vertical-align: top;
+  border-block-end: 1px solid var(--color-border);
 }
 .ov-prose th {
-  background: var(--color-bg-subtle);
   font-weight: 600;
+  font-size: 0.92em;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-fg-muted);
+  border-block-end: 1px solid var(--color-border-strong);
+  padding-block: var(--space-xs);
+}
+.ov-prose tbody tr:last-child td {
+  border-block-end: 0;
+}
+.ov-prose tbody tr:hover td {
+  background: var(--color-bg-subtle);
+}
+.ov-prose table code:not(pre code) {
+  font-size: 0.9em;
 }
 
 /* Heading anchors
@@ -578,14 +916,19 @@ body.ov-menu-open {
   color: var(--color-accent);
 }
 
-/* Code blocks (shiki dual-theme) */
+/* Code blocks (shiki dual-theme)
+   ===
+   Padding bumped on top to clear the language eyebrow injected via
+   `pre[data-language]::before`. On hover the eyebrow fades and the
+   copy button (added by script.js) fades in at the same corner —
+   they trade places rather than compete for space. */
 .ov-prose pre {
   position: relative;
-  padding: var(--space-s);
+  padding: var(--space-m) var(--space-s) var(--space-s);
   border-radius: var(--radius-md);
   overflow-x: auto;
   font-family: var(--font-mono);
-  font-size: 0.92em;
+  font-size: 0.9em;
   line-height: var(--leading-mono);
 }
 .ov-prose pre.shiki {
@@ -612,38 +955,106 @@ body.ov-menu-open {
   color: var(--shiki-dark);
 }
 
-/* Copy button (injected by script.js) */
-.ov-copy-btn {
+/* Language eyebrow (top-right of every highlighted fenced block) */
+.ov-prose pre[data-language]::before {
+  content: attr(data-language);
   position: absolute;
   top: var(--space-2xs);
+  right: var(--space-s);
+  font-family: var(--font-mono);
+  font-size: 0.66em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-fg-subtle);
+  opacity: 0.85;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+.ov-prose pre:hover[data-language]::before {
+  opacity: 0;
+}
+
+/* Copy button (injected by script.js) — shares the top-right corner
+   with the language eyebrow, swaps in on hover. */
+.ov-copy-btn {
+  position: absolute;
+  top: var(--space-3xs);
   right: var(--space-2xs);
-  padding: var(--space-3xs) var(--space-2xs);
-  font-size: 0.78em;
+  padding: 2px var(--space-2xs);
+  font-size: 0.72em;
   font-family: var(--font-sans);
-  background: var(--color-bg-subtle);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  background: transparent;
   color: var(--color-fg-muted);
-  border: 1px solid var(--color-border-strong);
-  border-radius: 4px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 120ms ease;
+  transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease, border-color 120ms ease;
 }
 .ov-prose pre:hover .ov-copy-btn,
 .ov-copy-btn:focus-visible {
   opacity: 1;
 }
+.ov-copy-btn:hover {
+  color: var(--color-fg);
+  background: var(--color-bg-subtle);
+  border-color: var(--color-border);
+}
+/* Breadcrumbs — sits above the page-meta when the page is nested 2+
+   levels deep. Slash separator inserted via ::after on each crumb so
+   it scales with text and doesn't render as an extra DOM element. */
+.ov-breadcrumbs {
+  margin: 0 0 var(--space-2xs);
+}
+.ov-breadcrumbs ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  font-size: 0.82em;
+  color: var(--color-fg-muted);
+}
+.ov-crumb {
+  display: inline-flex;
+  align-items: baseline;
+}
+.ov-crumb a {
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+.ov-crumb a:hover {
+  color: var(--color-fg);
+}
+.ov-crumb:not(:last-child)::after {
+  content: '/';
+  color: var(--color-fg-subtle);
+  opacity: 0.45;
+  padding-inline: 0.5em;
+}
+.ov-crumb.is-current {
+  color: var(--color-fg);
+}
+
 /* Page meta line (reading time + last-modified) above the article */
 .ov-page-meta {
   margin: 0 0 var(--space-s);
-  font-size: 0.88em;
-  color: var(--color-fg-muted);
+  font-size: 0.82em;
+  color: var(--color-fg-subtle);
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25em;
+  gap: 0;
   align-items: baseline;
+  font-variant-numeric: tabular-nums;
 }
 .ov-page-meta-sep {
-  opacity: 0.6;
+  opacity: 0.4;
+  padding-inline: 0.5em;
 }
 
 /* Edit-this-page link */
@@ -664,12 +1075,15 @@ body.ov-menu-open {
 }
 
 /* Prev / next page navigation */
+/* Prev / next — Retype-style bordered button pair. The whole card is
+   the click target; an arrow inline with the eyebrow label shows
+   direction. Hover lifts the border + bg-subtle to confirm clickability. */
 .ov-prevnext {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-m);
-  margin-block: var(--space-xl) var(--space-m);
-  padding-block-start: var(--space-m);
+  margin-block: var(--space-2xl) var(--space-m);
+  padding-block-start: var(--space-l);
   border-block-start: 1px solid var(--color-border);
 }
 .ov-prevnext-link {
@@ -681,25 +1095,62 @@ body.ov-menu-open {
   border-radius: var(--radius-md);
   text-decoration: none;
   color: var(--color-fg);
-  transition: border-color 120ms ease;
+  background: var(--color-bg);
+  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
+  min-inline-size: 0;
 }
 .ov-prevnext-link:hover {
-  border-color: var(--color-fg-subtle);
-  color: var(--color-fg);
+  border-color: var(--color-border-strong);
+  background: var(--color-bg-subtle);
+  color: var(--color-accent);
 }
 .ov-prevnext-next {
   text-align: end;
   align-items: flex-end;
 }
 .ov-prevnext-label {
-  font-size: 0.78em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.74em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
   color: var(--color-fg-subtle);
   font-weight: 600;
 }
+.ov-prevnext-prev .ov-prevnext-label::before {
+  content: '←';
+  font-size: 1.1em;
+  line-height: 1;
+  letter-spacing: 0;
+  transition: transform 120ms ease;
+}
+.ov-prevnext-next .ov-prevnext-label::after {
+  content: '→';
+  font-size: 1.1em;
+  line-height: 1;
+  letter-spacing: 0;
+  transition: transform 120ms ease;
+}
+.ov-prevnext-link:hover .ov-prevnext-label {
+  color: var(--color-accent);
+}
+.ov-prevnext-prev:hover .ov-prevnext-label::before {
+  transform: translateX(-2px);
+}
+.ov-prevnext-next:hover .ov-prevnext-label::after {
+  transform: translateX(2px);
+}
 .ov-prevnext-title {
-  font-weight: 500;
+  font-weight: 600;
+  font-size: var(--font-size-1);
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  /* Truncate insanely long titles rather than wrapping the button shape. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  inline-size: 100%;
 }
 .ov-prevnext-spacer {
   display: block;
@@ -715,7 +1166,8 @@ body.ov-menu-open {
 }
 
 .ov-copy-btn.is-copied {
-  color: var(--color-accent);
+  color: var(--callout-tip-fg);
+  opacity: 1;
 }
 
 /* Right ToC */
@@ -728,44 +1180,146 @@ body.ov-menu-open {
   font-size: 0.9em;
 }
 .ov-toc-title {
-  font-size: 0.78em;
+  font-size: 0.72em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.08em;
   color: var(--color-fg-subtle);
-  margin-block: 0 var(--space-2xs);
+  margin-block: 0 var(--space-xs);
   font-weight: 600;
 }
 .ov-toc ul {
   list-style: none;
   margin: 0;
   padding: 0;
+  position: relative;
+  border-inline-start: 1px solid var(--color-border);
 }
 .ov-toc li {
-  margin-block-end: var(--space-3xs);
+  margin: 0;
 }
 .ov-toc li a {
+  position: relative;
+  display: block;
+  padding: 0.3em 0;
+  padding-inline-start: var(--space-s);
   color: var(--color-fg-muted);
   text-decoration: none;
+  transition: color 120ms ease;
+  line-height: 1.4;
 }
 .ov-toc li a:hover {
   color: var(--color-fg);
 }
-.ov-toc-h3 {
-  padding-inline-start: var(--space-s);
+.ov-toc li a.is-current {
+  color: var(--color-accent);
+  font-weight: 500;
+}
+/* The active indicator: 2px accent strip overlaying the 1px ul border.
+   Pulled 1px outside so it covers the track cleanly. */
+.ov-toc li a.is-current::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: -1px;
+  inline-size: 2px;
+  background: var(--color-accent);
+}
+.ov-toc-h3 a {
+  padding-inline-start: calc(var(--space-s) + var(--space-s));
+  font-size: 0.95em;
 }
 
-/* Footer */
+/* Footer
+   ===
+   Outer is full-bleed (matches .ov-topbar) so the chrome tint and top
+   border span the viewport; inner holds the grid and constrains to
+   --chrome-max. Result: the topbar, content area, and footer rails
+   share identical vertical gutters at every viewport, and the chrome
+   width never jumps between landing and docs. */
 .ov-footer {
-  max-inline-size: 1320px;
-  margin: var(--space-l) auto 0;
-  padding: var(--space-s) var(--space-m);
+  inline-size: 100%;
+  margin-block-start: var(--space-2xl);
   border-block-start: 1px solid var(--color-border);
+  background: var(--color-bg-chrome);
   color: var(--color-fg-subtle);
-  font-size: 0.9em;
-  text-align: center;
+  font-size: 0.84em;
+}
+.ov-footer-inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--space-m);
+  padding: var(--space-m);
+  max-inline-size: var(--chrome-max);
+  margin-inline: auto;
+  inline-size: 100%;
+}
+.ov-footer-left {
+  grid-column: 1;
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.45em;
+  min-inline-size: 0;
+}
+.ov-footer-right {
+  grid-column: 3;
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+.ov-footer-link {
+  color: var(--color-fg-muted);
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+.ov-footer-link:hover {
+  color: var(--color-fg);
+}
+.ov-footer-link--icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.85rem;
+  block-size: 1.85rem;
+  border-radius: var(--radius-md);
+  color: var(--color-fg-muted);
+}
+.ov-footer-link--icon:hover {
+  color: var(--color-fg);
+  background: var(--color-bg-subtle);
+}
+.ov-footer-icon {
+  display: block;
 }
 .ov-footer-sep {
-  margin-inline: var(--space-2xs);
+  margin-inline: 0.05em;
+  opacity: 0.5;
+}
+.ov-sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (max-width: 720px) {
+  .ov-footer {
+    grid-template-columns: 1fr;
+    gap: var(--space-2xs);
+  }
+  .ov-footer-left {
+    grid-column: 1;
+  }
+  .ov-footer-right {
+    grid-column: 1;
+    justify-content: flex-start;
+  }
 }
 
 /* Narrow viewports: drop the right ToC, then collapse the sidebar */
@@ -888,61 +1442,74 @@ body.ov-body-landing {
 }
 
 .ov-landing {
-  max-inline-size: 1100px;
+  max-inline-size: var(--page-max);
   margin-inline: auto;
   padding: 0 var(--space-m) var(--space-l);
 }
 
 /* Hero
    ===
-   Two stacked background layers behind the centred prose:
-     ::before  dotted noise pattern (faint, neutral, theme-aware)
-     ::after   radial spotlight gradient (accent-tinted, low alpha)
-   Both use `pointer-events: none` and live above body bg but below content.
-   The dotted pattern is a data-URL SVG so there's no extra HTTP request and
-   no images to ship. */
+   Centred prose (title / subtitle / CTAs) on a flat background. The earlier
+   dotted-noise + accent-spotlight pseudo-layers were removed — a blended
+   background image is planned to take this surface later. The vertical
+   padding alone gives the hero its presence and the breathing room between
+   the topbar above and the body content below. The `[data-media]` variant
+   (site.landing.hero.media) still renders its own full-bleed <img> layer
+   (see .ov-hero-art below). */
 .ov-hero {
+  /* position + isolation are dormant here (flat background) but kept so the
+     [data-media] variant's absolutely-positioned .ov-hero-art layer still
+     anchors to the hero and stays in its own stacking context. */
   position: relative;
   isolation: isolate;
   text-align: center;
-  padding-block: clamp(var(--space-2xl), 12vw, var(--space-3xl))
-                 clamp(var(--space-xl), 8vw, var(--space-2xl));
-  margin-inline: calc(-1 * var(--space-m));
-  overflow: hidden;
+  padding-block: clamp(var(--space-2xl), 11vw, var(--space-3xl))
+                 clamp(var(--space-l), 7vw, var(--space-2xl));
 }
-.ov-hero::before,
-.ov-hero::after {
-  content: '';
+
+/* Imagery hero variant — when `site.landing.hero.media` is configured the
+   template adds `data-media`, switching the hero to a taller full-bleed
+   layout sized to hold the supplied <img> (.ov-hero-art). */
+.ov-hero[data-media] {
+  padding-block: clamp(var(--space-3xl), 14vw, calc(var(--space-3xl) * 1.4))
+                 clamp(var(--space-xl), 9vw, var(--space-3xl));
+  min-block-size: clamp(420px, 56vw, 640px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.ov-hero-art {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: -1;
-}
-.ov-hero::before {
-  /* 24×24 grid of 1px dots in fg-subtle (currentColor would require
-     `color`, but we'd rather not inherit). Mask to fade at the edges. */
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='1' fill='%23000' fill-opacity='0.18'/></svg>");
-  background-size: 24px 24px;
-  background-repeat: repeat;
-  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 80%);
-          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 80%);
-  opacity: 0.9;
-}
-:root[data-theme='dark'] .ov-hero::before {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='1' fill='%23fff' fill-opacity='0.18'/></svg>");
-}
+  overflow: hidden;
+  /* Soft fade-out so the art recedes into the page before the feature grid
+     begins — keeps the seam editorial-calm rather than hard-edged. */
+  -webkit-mask-image: linear-gradient(to bottom,
+    black 0%, black 78%, transparent 100%);
+          mask-image: linear-gradient(to bottom,
+    black 0%, black 78%, transparent 100%);
+}
+.ov-hero-art-img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+/* Default: light shown, dark hidden. Theme + auto-with-OS-preference flip. */
+.ov-hero-art-img--dark { opacity: 0; }
+:root[data-theme='dark'] .ov-hero-art-img--light { opacity: 0; }
+:root[data-theme='dark'] .ov-hero-art-img--dark { opacity: 1; }
 @media (prefers-color-scheme: dark) {
-  :root[data-theme='auto'] .ov-hero::before {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='1' fill='%23fff' fill-opacity='0.18'/></svg>");
-  }
+  :root[data-theme='auto'] .ov-hero-art-img--light { opacity: 0; }
+  :root[data-theme='auto'] .ov-hero-art-img--dark { opacity: 1; }
 }
-.ov-hero::after {
-  /* Spotlight: a soft accent-tinted ellipse, low alpha, no hard edges. */
-  background: radial-gradient(
-    ellipse 50% 38% at 50% 35%,
-    color-mix(in oklch, var(--color-accent) 22%, transparent) 0%,
-    transparent 70%
-  );
+.ov-hero-inner {
+  position: relative;
+  z-index: 1;
 }
 .ov-hero-title {
   position: relative;
@@ -996,17 +1563,28 @@ body.ov-body-landing {
 .ov-cta--secondary {
   background: transparent;
   color: var(--color-fg);
-  border: 1px solid var(--color-border-strong);
+  border: 1px solid var(--color-border);
 }
 .ov-cta--secondary:hover {
-  background: var(--color-bg-subtle);
-  border-color: var(--color-fg-subtle);
+  background: transparent;
+  border-color: var(--color-fg);
   color: var(--color-fg);
 }
 
-/* Feature grid */
+/* Card — a clean, subtle surface primitive. A surface a hair lighter than
+   the page, a hairline border, a modest radius, and a whisper of shadow.
+   Reused across the site; the landing feature grid is the first adopter. */
+.ov-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-m);
+  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
+}
+
+/* Feature grid — three subtle cards beneath the hero. */
 .ov-feature-grid-wrap {
-  margin-block: var(--space-xl) var(--space-l);
+  margin-block: var(--space-2xl) var(--space-xl);
 }
 .ov-feature-grid {
   display: grid;
@@ -1014,33 +1592,27 @@ body.ov-body-landing {
   gap: var(--space-m);
 }
 .ov-feature-card {
-  background: var(--color-bg-subtle);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-m);
   display: flex;
   flex-direction: column;
   gap: var(--space-2xs);
-  transition: border-color 120ms ease;
-}
-.ov-feature-card:hover {
-  border-color: var(--color-border-strong);
 }
 .ov-feature-icon {
   font-size: var(--font-size-2);
   line-height: 1;
+  color: var(--color-fg-subtle);
 }
 .ov-feature-title {
   margin: 0;
   font-size: var(--font-size-1);
-  line-height: 1.2;
+  line-height: 1.25;
   font-weight: 600;
+  letter-spacing: -0.01em;
 }
 .ov-feature-description {
   margin: 0;
   color: var(--color-fg-muted);
   font-size: var(--font-size-0);
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 /* Pitch section (from _landing.md prose body) */
@@ -1052,7 +1624,7 @@ body.ov-body-landing {
 .ov-pitch-inner {
   max-inline-size: 60ch;
   margin-inline: auto;
-  font-size: var(--font-size-0);
+  font-size: var(--font-size-1);
   line-height: 1.65;
   color: var(--color-fg-muted);
 }
@@ -1084,11 +1656,11 @@ body.ov-body-landing {
   text-align: center;
 }
 .ov-trust-label {
-  font-size: 0.78em;
+  font-size: 0.72em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   color: var(--color-fg-subtle);
-  margin-block: 0 var(--space-s);
+  margin-block: 0 var(--space-m);
   font-weight: 600;
 }
 .ov-trust-items {
@@ -1096,12 +1668,14 @@ body.ov-body-landing {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: var(--space-l);
+  gap: var(--space-xl);
 }
 .ov-trust-item {
-  color: var(--color-fg-muted);
+  color: var(--color-fg-subtle);
   text-decoration: none;
   font-weight: 500;
+  font-size: 0.95em;
+  transition: color 120ms ease;
 }
 .ov-trust-item:hover {
   color: var(--color-fg);
@@ -1116,6 +1690,60 @@ body.ov-body-landing {
   opacity: 1;
 }
 
+/* Ambient "scenes" — centered visual figures between landing sections.
+ * Editorial-calm: no chrome, top/bottom mask fades so the visual recedes
+ * into the surrounding content. SVG-driven animation lives inside each
+ * asset; this wrapper is intentionally still. */
+.ov-scene {
+  margin-block: var(--space-xl);
+  inline-size: 100%;
+  /* No full-bleed: scenes sit centered inside the landing column. The
+   * landing's --page-max (1100px on body.ov-body-landing) is the
+   * authoritative width; .ov-landing already centers itself. */
+  margin-inline: auto;
+}
+.ov-scene-art {
+  margin: 0;
+  position: relative;
+  aspect-ratio: 16 / 9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 14%,
+    black 86%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 14%,
+    black 86%,
+    transparent 100%
+  );
+}
+.ov-scene-img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  /* `contain` keeps the SVG's intrinsic aspect ratio visible; the figure
+   * sits centered (justify/align on the parent) inside the 16:9 frame. */
+  object-fit: contain;
+  object-position: center;
+  opacity: 0.95;
+  transition: opacity 200ms ease;
+}
+.ov-scene-img--dark { opacity: 0; }
+:root[data-theme='dark'] .ov-scene-img--light { opacity: 0; }
+:root[data-theme='dark'] .ov-scene-img--dark { opacity: 0.95; }
+@media (prefers-color-scheme: dark) {
+  :root[data-theme='auto'] .ov-scene-img--light { opacity: 0; }
+  :root[data-theme='auto'] .ov-scene-img--dark { opacity: 0.95; }
+}
+
 /* Landing-page responsive */
 @media (max-width: 720px) {
   .ov-landing {
@@ -1125,6 +1753,10 @@ body.ov-body-landing {
     margin-inline: calc(-1 * var(--space-s));
     padding-block: var(--space-xl) var(--space-l);
   }
+  .ov-hero[data-media] {
+    padding-block: var(--space-2xl) var(--space-xl);
+    min-block-size: clamp(320px, 70vw, 460px);
+  }
   .ov-hero-title {
     letter-spacing: -0.03em;
   }
@@ -1134,4 +1766,10 @@ body.ov-body-landing {
   .ov-trust-items {
     gap: var(--space-m);
   }
+  .ov-scene {
+    margin-block: var(--space-l);
+  }
+  .ov-scene-art {
+    aspect-ratio: 16 / 10;
+  }
 }