@mdxui/named 7.0.0 → 8.1.0

package/dist/styles.css

@@ -53,11 +53,13 @@
  */
 
 /* ──────────────────────────────────────────────────────────────────
-   FONTS — Halant (serif display) + Atkinson Hyperlegible, self-contained.
-   The baseline loads Halant via next/font and Atkinson via @font-face. The
-   package can't rely on the host loading either, so the envelope ships both via
-   @font-face (Google Fonts woff2). @font-face has no ordering constraint
-   (unlike @import url()), so it is safe to drop anywhere in the consumer's entry.
+   FONTS — Halant (serif display) + Inter (body), self-contained.
+   The baseline loads both via next/font (app/layout.tsx: Halant for h1/h2
+   display, Inter for body — Hanken Grotesk / Instrument Sans are loaded there
+   too but referenced nowhere). The package can't rely on the host loading
+   either, so the envelope ships both via @font-face (Google Fonts woff2).
+   @font-face has no ordering constraint (unlike @import url()), so it is safe
+   to drop anywhere in the consumer's entry.
    ────────────────────────────────────────────────────────────────── */
 @font-face {
   font-family: 'Halant';
@@ -115,12 +117,15 @@
     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: 'Atkinson Hyperlegible';
+  font-family: 'Inter';
   font-style: normal;
-  font-weight: 400 700;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('https://fonts.gstatic.com/s/atkinsonhyperlegiblenext/v7/NaPNcYPdHfdVxJw0IfIP0lvYFqijb-UxCtm5_wdGseiJn3o.woff2')
+  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2')
     format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -210,20 +215,182 @@
   --radius-section: 36px; /* large section containers */
   --radius-image: 64px; /* hero artwork mask */
 
-  /* ---- fonts — Halant display, Atkinson/Inter body ------------------ */
+  /* ---- radius scale — stock Tailwind v4 ------------------------------ */
+  /* The baseline runs Tailwind's default radius scale (rounded-3xl = 1.5rem
+     cards, rounded-xl chips, rounded-md input). Host theme layers remap
+     --radius-{sm..3xl} as multiples of the preset's --radius (e.g. clay's
+     0.75rem makes rounded-3xl render 36px instead of 24px), so pin the
+     defaults inside the scope. Hosts that remap via `@theme inline` bake
+     `calc(var(--radius) * N)` into the utilities — the multipliers anchor on
+     lg = --radius, so pinning --radius to stock lg (0.5rem) reproduces the
+     whole default scale; the explicit --radius-* pins cover hosts whose
+     utilities read the scale tokens directly. --radius-section/-image above
+     stay the baseline's own additions. */
+  --radius: 0.5rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  /* ---- shadows — neutral black (Tailwind v4 defaults) ---------------- */
+  /* The baseline runs stock Tailwind shadows. Host theme presets re-point
+     the --shadow-* tokens (e.g. clay's warm oklch(0.35 0.08 40) tint +
+     different geometry), and Tailwind's shadow-{sm,md,lg} utilities read
+     them — so without this pin, button/card shadows inside the named scope
+     pick up the host's tint. */
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* ---- fonts — Halant display, Inter body ---------------------------- */
+  /* NOTE: do NOT write `--font-inter: var(--font-inter, …)` here — a custom
+     property referencing itself is a cycle, invalid at computed-value time,
+     and it voids every declaration that var()s it (the body font silently
+     fell back to the host font). Reference the host's token only at the
+     use site, with the packaged Inter as the var() fallback. */
   --font-halant: 'Halant', ui-serif, Georgia, serif;
-  --font-inter: var(--font-inter, 'Atkinson Hyperlegible', system-ui, sans-serif);
+  /* Template indirection: the shared h1/h2 + .font-halant rules read
+     --font-display, so other templates (executive) swap the display face by
+     re-pointing ONE token instead of fighting these rules' specificity. */
+  --font-display: var(--font-halant);
 
   /* Paint the named surface cream + warm ink, independent of the host's
      dark page, so the editorial sections read on cream. */
   background: var(--color-surface);
   color: var(--color-fg);
-  font-family: 'Atkinson Hyperlegible', var(--font-inter), system-ui, sans-serif;
+  font-family: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
 }
 
+/* ──────────────────────────────────────────────────────────────────
+   ANCHOR-SCROLL POLISH (baseline globals.css): smooth scrolling for the
+   navbar's #features/#pricing/#faq jumps + clearance so the sticky nav
+   doesn't cover the section heading on arrival. `html` can't sit under the
+   dialect scope, so the smooth rule is gated with :has() — a no-op on
+   pages that don't render the named arc.
+   ────────────────────────────────────────────────────────────────── */
+html:has([data-dialect='named']) {
+  scroll-behavior: smooth;
+}
+[data-dialect='named'] section[id] {
+  scroll-margin-top: 80px;
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the baseline's Anthropic-calm dark set (globals.css `.dark`,
+   verbatim): warm near-black surfaces, cream ink, the primary CTA gradient
+   inverted to cream-on-dark, hue library re-tuned with hue angles preserved.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">
+   sets it on an ancestor). The persona accent mapping (--color-accent-*)
+   cascades from the light block via var() — re-declaring the --hue-* values
+   here is enough, exactly like the baseline.
+   ────────────────────────────────────────────────────────────────── */
+.dark [data-dialect='named'],
+[data-dialect='named'].dark {
+  /* ---- neo shared tokens, re-pointed to the dark baseline ----------- */
+  --background: oklch(0.155 0.005 60); /* baseline dark --color-surface */
+  --foreground: oklch(0.94 0.008 80); /* baseline dark --color-fg */
+  --card: oklch(0.23 0.008 60); /* baseline dark --color-surface-raised */
+  --card-foreground: oklch(0.94 0.008 80);
+  --popover: oklch(0.23 0.008 60);
+  --popover-foreground: oklch(0.94 0.008 80);
+  --muted: oklch(0.105 0.003 60); /* baseline dark --color-surface-sunken */
+  --muted-foreground: oklch(0.7 0.012 80); /* baseline dark --color-fg-muted */
+  /* primary CTA inverts to cream-on-dark (baseline dark --color-btn-primary-*) */
+  --primary: oklch(0.87 0.01 80);
+  --primary-foreground: oklch(0.18 0.005 60);
+  --secondary: oklch(0.23 0.008 60);
+  --secondary-foreground: oklch(0.94 0.008 80);
+  --accent: oklch(0.335 0.09 45); /* dark persimmon --hue-orange-medium */
+  --accent-foreground: oklch(0.18 0.008 80);
+  --border: oklch(0.94 0.008 80 / 0.12);
+  --input: oklch(0.94 0.008 80 / 0.12);
+  --ring: oklch(0.94 0.008 80 / 0.4);
+  --destructive: oklch(0.64 0.18 25);
+  --destructive-foreground: oklch(0.18 0.005 60);
+
+  /* ---- baseline semantic layer (verbatim from globals.css .dark) ----- */
+  --color-surface: oklch(0.155 0.005 60);
+  --color-surface-raised: oklch(0.23 0.008 60);
+  --color-surface-sunken: oklch(0.105 0.003 60);
+
+  --color-fg: oklch(0.94 0.008 80);
+  --color-fg-soft: oklch(0.82 0.01 80);
+  --color-fg-muted: oklch(0.7 0.012 80);
+
+  --color-border: oklch(0.94 0.008 80 / 0.12);
+  --color-border-strong: oklch(0.94 0.008 80 / 0.25);
+  --color-ring: oklch(0.94 0.008 80 / 0.4);
+  --color-hover: oklch(0.94 0.008 80 / 0.08);
+
+  --color-btn-primary-from: oklch(0.945 0.008 80);
+  --color-btn-primary-to: oklch(0.87 0.01 80);
+  --color-btn-primary-fg: oklch(0.18 0.005 60);
+
+  --color-destructive: oklch(0.64 0.18 25);
+  --color-destructive-fg: oklch(0.18 0.005 60);
+
+  /* ---- hue library, dark values (hue angles preserved) --------------- */
+  --hue-teal-soft: oklch(0.245 0.025 210);
+  --hue-teal-medium: oklch(0.33 0.06 210);
+  --hue-teal-strong: oklch(0.65 0.09 210);
+
+  --hue-orange-soft: oklch(0.245 0.04 48);
+  --hue-orange-medium: oklch(0.335 0.09 45);
+  --hue-orange-strong: oklch(0.72 0.15 50);
+
+  --hue-green-soft: oklch(0.245 0.035 134);
+  --hue-green-medium: oklch(0.33 0.075 134);
+  --hue-green-strong: oklch(0.73 0.14 134);
+
+  --hue-sky-blue-soft: oklch(0.245 0.035 235);
+  --hue-sky-blue-medium: oklch(0.33 0.075 235);
+  --hue-sky-blue-strong: oklch(0.73 0.14 235);
+
+  --hue-purple-soft: oklch(0.245 0.03 314);
+  --hue-purple-medium: oklch(0.33 0.07 314);
+  --hue-purple-strong: oklch(0.73 0.125 314);
+}
+
+/* Dark variants for the scoped utilities that bake literal light-ink values
+   (everything var()-driven above flips automatically). */
+.dark [data-dialect='named'] .text-foreground\/70,
+[data-dialect='named'].dark .text-foreground\/70 {
+  color: oklch(0.94 0.008 80 / 0.7);
+}
+.dark [data-dialect='named'] .text-foreground\/60,
+[data-dialect='named'].dark .text-foreground\/60 {
+  color: oklch(0.94 0.008 80 / 0.6);
+}
+.dark [data-dialect='named'] .bg-primary\/10,
+[data-dialect='named'].dark .bg-primary\/10 {
+  background-color: oklch(0.87 0.01 80 / 0.1);
+}
+.dark [data-dialect='named'] .fill-muted-foreground\/20,
+[data-dialect='named'].dark .fill-muted-foreground\/20 {
+  fill: oklch(0.7 0.012 80 / 0.2);
+}
+.dark [data-dialect='named'] .stroke-muted-foreground\/20,
+[data-dialect='named'].dark .stroke-muted-foreground\/20 {
+  stroke: oklch(0.7 0.012 80 / 0.2);
+}
+/* Baseline `.dark .integration-square-shadow` (globals.css) */
+.dark [data-dialect='named'] .integration-square-shadow,
+[data-dialect='named'].dark .integration-square-shadow {
+  box-shadow: 0px 0px 0px 1px var(--color-border),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+}
+
 /* ════════════════════════════════════════════════════════════════════
    NEO UTILITIES — scoped class rules.
    Every neo utility the named markup references, defined under the subtree so
@@ -231,9 +398,20 @@
    the cream baseline values.
    ════════════════════════════════════════════════════════════════════ */
 
-/* —— Serif display face (baseline `font-halant`) ——————————————————— */
+/* —— Display face (baseline `font-halant`; reads the template-indirected
+      --font-display so non-studio templates can swap it) ——————————————— */
 [data-dialect='named'] .font-halant {
-  font-family: var(--font-halant);
+  font-family: var(--font-display, var(--font-halant));
+}
+
+/* Baseline @layer base rule (globals.css): every section-level heading gets
+   the display treatment; h3 and below stay on the body sans. Scoped here
+   so components only specify size + variant, exactly like the baseline. */
+[data-dialect='named'] h1,
+[data-dialect='named'] h2 {
+  font-family: var(--font-display, var(--font-halant));
+  font-weight: 400;
+  line-height: 1.1;
 }
 
 /* —— Backgrounds —————————————————————————————————————————————————— */
@@ -290,6 +468,16 @@
 }
 
 /* —— Custom utilities the baseline markup relies on ———————————————— */
+/* Primary CTA gradient (baseline @utility btn-gradient-dark) — the shared
+   Button's `default` variant. Token-driven so a persona re-pointing the
+   --color-btn-primary-* endpoints restyles every primary button at once. */
+[data-dialect='named'] .btn-gradient-dark {
+  background: linear-gradient(
+    180deg,
+    var(--color-btn-primary-from) 0%,
+    var(--color-btn-primary-to) 100%
+  );
+}
 [data-dialect='named'] .card-shadow {
   box-shadow: 0px 0.602px 0.602px -1.25px rgba(0, 0, 0, 0.36),
     0px 2.289px 2.289px -2.5px rgba(0, 0, 0, 0.32),
@@ -317,3 +505,611 @@
     transparent 83.55%
   );
 }
+
+/* —— CodeWindow (shiki) ———————————————————————————————————————————— */
+/* The template's panel owns the surface; shiki's theme background must not
+   fight it. Scoped under the dialect attr so it covers every template. */
+[data-dialect='named'] .shiki {
+  background-color: transparent !important;
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre;
+}
+
+/* —— Marquee animation (hero tool strip) ——————————————————————————— */
+/* The baseline defines these as `--animate-marquee` + @keyframes inside its
+   Tailwind @theme block — host builds that don't replicate that theme key
+   never generate the `animate-marquee` utility, leaving the strip frozen.
+   Ship them here. Keyframe names are global, so they carry a `named-` prefix
+   to stay collision-free; the class rules are scoped like everything else.
+   The shared Marquee component sets `--duration`/`--gap` inline. */
+@keyframes named-marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
+  }
+}
+@keyframes named-marquee-vertical {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(-100% - var(--gap)));
+  }
+}
+[data-dialect='named'] .animate-marquee {
+  animation: named-marquee var(--duration, 40s) linear infinite;
+}
+[data-dialect='named'] .animate-marquee-vertical {
+  animation: named-marquee-vertical var(--duration, 40s) linear infinite;
+}
+
+
+/**
+ * @mdxui/named — EXECUTIVE template envelope ("Ledger Paper")
+ * ============================================================================
+ *
+ * The professional register of the named dialect ("Your AI CFO"): cool paper
+ * white + graphite ink, hairline rules as the structural language (no cards,
+ * no shadows), 2px corners, tabular numerals on every figure, and a single
+ * oxblood accent reserved for the primary CTA and key figures (Restrained
+ * color strategy — the accent stays under 10% of the surface).
+ *
+ * Scene: a founder or COO at a laptop in daylight, skeptical, deciding
+ * whether to hand their books to an AI agent. Light theme; rigor over vibes.
+ * Deliberately NOT navy-and-gold and NOT terminal-dark — both are the
+ * category reflexes for "finance".
+ *
+ * SCOPING — this block rides ON TOP of the studio envelope. The view renders
+ * `data-dialect="named" data-template="executive"`, so studio's bare
+ * `[data-dialect='named']` token block still matches; this selector's higher
+ * specificity (two attributes) re-points every token the executive subtree
+ * reads. Studio's scoped utility rules (.bg-background etc.) are var-driven,
+ * so they resolve to executive values here too — but executive markup writes
+ * arbitrary-value classes (`bg-(--color-surface)`) and avoids studio's
+ * literal-value utilities. Concatenated AFTER studio in dist/styles.css, so
+ * on specificity ties (e.g. studio's `.dark` block) executive wins: the
+ * dark block below restyles the ledger for ink (oxblood lifted luminous).
+ */
+
+/* Masthead/display face — Anton (black condensed grotesque; the cover voice).
+   Source Serif 4 survives only as the italic standfirst counter-voice. Inter
+   body ships from the studio block of the same stylesheet. */
+@font-face {
+  font-family: 'Anton';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8CSKlv.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Standfirst face — Source Serif 4 (variable weight, latin, + true italic). */
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: normal;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/sourceserif4/v14/vEFI2_tTDB4M7-auWDN0ahZJW1gb8te1Xb7G.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* True italic — the hero standfirst is set in it; a synthesized slant on a
+   serif reads cheap, which defeats the standfirst's whole job. */
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: italic;
+  font-weight: 200 900;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/sourceserif4/v14/vEFK2_tTDB4M7-auWDN0ahZJW1gewtW_WpzEpMs.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+[data-dialect='named'][data-template='executive'] {
+  /* ---- semantic layer — Ledger Paper ---------------------------------- */
+  /* surfaces: cool paper (hue 250, whisper of chroma — never #fff) */
+  --color-surface: oklch(0.975 0.004 250);
+  --color-surface-raised: oklch(0.99 0.003 250);
+  --color-surface-sunken: oklch(0.952 0.005 250);
+
+  /* ink: graphite, cool */
+  --color-fg: oklch(0.21 0.012 255);
+  --color-fg-soft: oklch(0.34 0.012 255);
+  --color-fg-muted: oklch(0.47 0.012 255);
+
+  /* hairline rules — the structural language */
+  --color-border: oklch(0.21 0.012 255 / 0.16);
+  --color-border-strong: oklch(0.21 0.012 255 / 0.45);
+  --color-ring: oklch(0.21 0.012 255 / 0.4);
+  --color-hover: oklch(0.21 0.012 255 / 0.04);
+
+  /* the one accent: oxblood — in TWO roles. `field` paints large surfaces
+     (the cover, the featured tier); `strong` is red TYPE and small marks
+     (numerals, squares). In light they share one value; dark splits them —
+     fields must stay deep (rich burgundy on ink), type must lift to stay
+     legible. Lifting a large field is what reads muddy-salmon. */
+  --color-accent-field: oklch(0.42 0.13 20);
+  --color-accent-strong: oklch(0.42 0.13 20);
+  --color-accent: oklch(0.49 0.12 20);
+  --color-accent-soft: oklch(0.93 0.02 20);
+  --color-accent-fg: oklch(0.985 0.004 250);
+
+  /* primary button: solid oxblood (the studio gradient collapses flat) */
+  --color-btn-primary-from: oklch(0.42 0.13 20);
+  --color-btn-primary-to: oklch(0.42 0.13 20);
+  --color-btn-primary-fg: oklch(0.985 0.004 250);
+
+  --color-destructive: oklch(0.58 0.18 25);
+  --color-destructive-fg: oklch(0.985 0.004 250);
+
+  /* ---- neo shared names, re-pointed (keeps shared primitives correct) -- */
+  --background: oklch(0.975 0.004 250);
+  --foreground: oklch(0.21 0.012 255);
+  --card: oklch(0.99 0.003 250);
+  --card-foreground: oklch(0.21 0.012 255);
+  --popover: oklch(0.99 0.003 250);
+  --popover-foreground: oklch(0.21 0.012 255);
+  --muted: oklch(0.952 0.005 250);
+  --muted-foreground: oklch(0.47 0.012 255);
+  --primary: oklch(0.42 0.13 20);
+  --primary-foreground: oklch(0.985 0.004 250);
+  --secondary: oklch(0.952 0.005 250);
+  --secondary-foreground: oklch(0.21 0.012 255);
+  --accent: oklch(0.49 0.12 20);
+  --accent-foreground: oklch(0.985 0.004 250);
+  --border: oklch(0.21 0.012 255 / 0.16);
+  --input: oklch(0.21 0.012 255 / 0.16);
+  --ring: oklch(0.21 0.012 255 / 0.4);
+  --destructive: oklch(0.58 0.18 25);
+  --destructive-foreground: oklch(0.985 0.004 250);
+
+  /* ---- geometry: square document corners, flat surfaces ---------------- */
+  /* 2px everywhere a radius utility appears (--radius anchors the host's
+     @theme-inline multipliers; see the studio block for the mechanism). */
+  --radius: 0.125rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.125rem;
+  --radius-md: 0.125rem;
+  --radius-lg: 0.125rem;
+  --radius-xl: 0.25rem;
+  --radius-2xl: 0.25rem;
+  --radius-3xl: 0.25rem;
+  --radius-4xl: 0.25rem;
+  --radius-section: 0px;
+  --radius-image: 2px;
+
+  /* no elevation — hairlines do the separating */
+  --shadow-2xs: 0 0 #0000;
+  --shadow-xs: 0 0 #0000;
+  --shadow-sm: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --shadow-xl: 0 0 #0000;
+  --shadow-2xl: 0 0 #0000;
+
+  /* ---- type ------------------------------------------------------------ */
+  /* Display = Anton (masthead, headings, the giant numerals). The serif is
+     demoted to the standfirst counter-voice via .exec-serif. */
+  --font-display: 'Anton', 'Arial Narrow', sans-serif;
+  --font-serif-exec: 'Source Serif 4', ui-serif, Georgia, serif;
+
+  background: var(--color-surface);
+  color: var(--color-fg);
+  font-family: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the ledger after hours: deep cool ink surfaces, paper type,
+   and the oxblood LIFTED to a luminous brick (the light-mode 0.42 L red
+   would die on ink). Everything var-driven inverts automatically — notably
+   the closing CTA band (bg --color-fg / text --color-surface) flips from
+   ink-band-on-paper to paper-band-on-ink: the bookend follows the theme.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">).
+   Higher specificity (3 selectors) than both the executive light block and
+   studio's dark block.
+   ────────────────────────────────────────────────────────────────── */
+.dark [data-dialect='named'][data-template='executive'],
+[data-dialect='named'][data-template='executive'].dark {
+  /* ---- semantic layer — ink paper ------------------------------------- */
+  --color-surface: oklch(0.16 0.01 255);
+  --color-surface-raised: oklch(0.205 0.012 255);
+  --color-surface-sunken: oklch(0.125 0.008 255);
+
+  --color-fg: oklch(0.945 0.005 250);
+  --color-fg-soft: oklch(0.84 0.006 250);
+  --color-fg-muted: oklch(0.67 0.008 250);
+
+  --color-border: oklch(0.945 0.005 250 / 0.15);
+  --color-border-strong: oklch(0.945 0.005 250 / 0.45);
+  --color-ring: oklch(0.945 0.005 250 / 0.4);
+  --color-hover: oklch(0.945 0.005 250 / 0.06);
+
+  /* oxblood splits by role on ink: FIELDS stay deep (rich burgundy — a
+     lifted large field reads muddy salmon), TYPE lifts to stay legible. */
+  --color-accent-field: oklch(0.37 0.115 20);
+  --color-accent-strong: oklch(0.62 0.16 24);
+  --color-accent: oklch(0.68 0.15 26);
+  --color-accent-soft: oklch(0.28 0.06 20);
+  --color-accent-fg: oklch(0.975 0.006 250);
+
+  --color-btn-primary-from: oklch(0.55 0.15 22);
+  --color-btn-primary-to: oklch(0.55 0.15 22);
+  --color-btn-primary-fg: oklch(0.975 0.006 250);
+
+  --color-destructive: oklch(0.62 0.18 25);
+  --color-destructive-fg: oklch(0.16 0.01 255);
+
+  /* ---- neo shared names, re-pointed ----------------------------------- */
+  --background: oklch(0.16 0.01 255);
+  --foreground: oklch(0.945 0.005 250);
+  --card: oklch(0.205 0.012 255);
+  --card-foreground: oklch(0.945 0.005 250);
+  --popover: oklch(0.205 0.012 255);
+  --popover-foreground: oklch(0.945 0.005 250);
+  --muted: oklch(0.125 0.008 255);
+  --muted-foreground: oklch(0.67 0.008 250);
+  --primary: oklch(0.55 0.16 22);
+  --primary-foreground: oklch(0.975 0.006 250);
+  --secondary: oklch(0.205 0.012 255);
+  --secondary-foreground: oklch(0.945 0.005 250);
+  --accent: oklch(0.62 0.15 22);
+  --accent-foreground: oklch(0.975 0.006 250);
+  --border: oklch(0.945 0.005 250 / 0.15);
+  --input: oklch(0.945 0.005 250 / 0.15);
+  --ring: oklch(0.945 0.005 250 / 0.4);
+  --destructive: oklch(0.62 0.18 25);
+  --destructive-foreground: oklch(0.16 0.01 255);
+}
+
+/* Display headings: the shared h1/h2 rule supplies var(--font-display) →
+   Anton here. Anton is a single-cut black condensed grotesque: uppercase,
+   near-solid leading, a touch of positive tracking so large settings don't
+   weld together. */
+[data-dialect='named'][data-template='executive'] h1,
+[data-dialect='named'][data-template='executive'] h2 {
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+  line-height: 0.92;
+  font-variant-numeric: lining-nums;
+}
+
+/* The standfirst counter-voice (true italic ships above). */
+[data-dialect='named'][data-template='executive'] .exec-serif {
+  font-family: var(--font-serif-exec);
+}
+
+/* Figures (prices, indices) read as ledger entries everywhere. */
+[data-dialect='named'][data-template='executive'] .exec-figure {
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+/* The ledger closing signature: a double rule (totals row). */
+[data-dialect='named'][data-template='executive'] .exec-double-rule {
+  border-top: 2px solid var(--color-border-strong);
+  position: relative;
+}
+[data-dialect='named'][data-template='executive'] .exec-double-rule::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--color-border);
+}
+
+/**
+ * @mdxui/named — GALLERY template envelope ("The Evening Gallery")
+ * ============================================================================
+ *
+ * The museum register of the named dialect: the page is an exhibition
+ * catalogue for a singular talent. Scene: an evening visitor moving alone
+ * through a dim gallery — warm near-black walls, each capability hung as a
+ * spot-lit work with its bone placard beside it, one Klein-blue wall at the
+ * end of the walk.
+ *
+ * LIGHT MODE IS THE DAY GALLERY, not an inversion: bone plaster walls under
+ * even daylight, the SAME placard system (placards are physical bone cards —
+ * they keep their material in both modes), the vitrines keep their dark
+ * velvet interiors, and the ultramarine holds. Dark mode dims the walls to
+ * warm near-black; the placards and vitrines read as lit objects by contrast
+ * alone.
+ *
+ * Color strategy: RESTRAINED — vast warm-neutral emptiness; one saturated
+ * accent (electric ultramarine, the International-Klein-Blue register of
+ * gallery walls) held under ~10% of the surface: catalogue numbers, the
+ * primary action, and the single painted wall of the closing room.
+ * Deliberately NOT gold/amber, NOT neon, NOT terminal-dark.
+ *
+ * SCOPING — rides on top of the studio envelope exactly like executive: the
+ * view renders `data-dialect="named" data-template="gallery"`, so studio's
+ * bare `[data-dialect='named']` block still matches and this two-attribute
+ * selector re-points every token the gallery subtree reads. The dark block
+ * below (3 selectors) outranks both this block and studio's `.dark` block.
+ */
+
+/* Display face — Bricolage Grotesque (variable 200–800, optical sizes 12–96):
+   a grotesque with flare cuts and real presence at exhibition-title sizes,
+   nothing like Halant's serif or Anton's condensed shout. Inter body ships
+   from the studio block of the same stylesheet. */
+@font-face {
+  font-family: 'Bricolage Grotesque';
+  font-style: normal;
+  font-weight: 200 800;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('https://fonts.gstatic.com/s/bricolagegrotesque/v9/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInHWVyNJ.woff2')
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+[data-dialect='named'][data-template='gallery'] {
+  /* ---- semantic layer — the day gallery -------------------------------- */
+  /* walls: bone plaster (warm hue, whisper of chroma — never #fff) */
+  --color-surface: oklch(0.957 0.007 80);
+  --color-surface-raised: oklch(0.978 0.005 82);
+  --color-surface-sunken: oklch(0.928 0.009 78);
+
+  /* ink: warm umber, never pure black */
+  --color-fg: oklch(0.21 0.012 55);
+  --color-fg-soft: oklch(0.34 0.012 55);
+  --color-fg-muted: oklch(0.47 0.014 60);
+
+  /* hairlines — frame edges and rule lines */
+  --color-border: oklch(0.21 0.012 55 / 0.14);
+  --color-border-strong: oklch(0.21 0.012 55 / 0.42);
+  --color-ring: oklch(0.45 0.2 264 / 0.5);
+  --color-hover: oklch(0.21 0.012 55 / 0.05);
+
+  /* the one accent: electric ultramarine (Klein blue). `field` paints the
+     large surfaces (the closing-room wall, the featured edition); `strong`
+     is blue TYPE and small marks (catalogue numbers, diamonds). They share
+     a value in daylight; after dark they split — fields stay deep and
+     saturated, type lifts to stay legible on near-black. */
+  --color-accent-field: oklch(0.45 0.28 264);
+  --color-accent-strong: oklch(0.45 0.26 264);
+  --color-accent: oklch(0.5 0.24 264);
+  --color-accent-soft: oklch(0.93 0.035 264);
+  --color-accent-fg: oklch(0.975 0.006 85);
+
+  /* placards: physical bone cards — same material in BOTH modes */
+  --color-placard: oklch(0.982 0.005 85);
+  --color-placard-fg: oklch(0.21 0.012 55);
+  --color-placard-soft: oklch(0.36 0.012 55);
+  --color-placard-muted: oklch(0.48 0.014 58);
+  --color-placard-border: oklch(0.21 0.012 55 / 0.12);
+
+  /* vitrines: dark velvet interiors — display cases stay dark by day too */
+  --color-vitrine: oklch(0.15 0.012 48);
+  --color-vitrine-fg: oklch(0.92 0.008 80);
+  --color-vitrine-border: oklch(0.21 0.012 55 / 0.35);
+
+  /* primary action: solid ultramarine (the studio gradient collapses flat) */
+  --color-btn-primary-from: oklch(0.45 0.28 264);
+  --color-btn-primary-to: oklch(0.45 0.28 264);
+  --color-btn-primary-fg: oklch(0.975 0.006 85);
+
+  --color-destructive: oklch(0.55 0.19 28);
+  --color-destructive-fg: oklch(0.975 0.006 85);
+
+  /* ---- neo shared names, re-pointed (keeps shared primitives correct) -- */
+  --background: oklch(0.957 0.007 80);
+  --foreground: oklch(0.21 0.012 55);
+  --card: oklch(0.978 0.005 82);
+  --card-foreground: oklch(0.21 0.012 55);
+  --popover: oklch(0.978 0.005 82);
+  --popover-foreground: oklch(0.21 0.012 55);
+  --muted: oklch(0.928 0.009 78);
+  --muted-foreground: oklch(0.47 0.014 60);
+  --primary: oklch(0.45 0.28 264);
+  --primary-foreground: oklch(0.975 0.006 85);
+  --secondary: oklch(0.928 0.009 78);
+  --secondary-foreground: oklch(0.21 0.012 55);
+  --accent: oklch(0.5 0.24 264);
+  --accent-foreground: oklch(0.975 0.006 85);
+  --border: oklch(0.21 0.012 55 / 0.14);
+  --input: oklch(0.21 0.012 55 / 0.14);
+  --ring: oklch(0.45 0.2 264 / 0.5);
+  --destructive: oklch(0.55 0.19 28);
+  --destructive-foreground: oklch(0.975 0.006 85);
+
+  /* ---- geometry: crisp frames, gently eased placard corners ------------ */
+  /* 4px base (--radius anchors the host's @theme-inline multipliers; see
+     the studio block for the mechanism). Frames and vitrines are sharp by
+     component class; placards take the soft 4px of a die-cut card. */
+  --radius: 0.25rem;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.1875rem;
+  --radius-md: 0.25rem;
+  --radius-lg: 0.25rem;
+  --radius-xl: 0.375rem;
+  --radius-2xl: 0.5rem;
+  --radius-3xl: 0.5rem;
+  --radius-4xl: 0.5rem;
+  --radius-section: 0px;
+  --radius-image: 4px;
+
+  /* ---- elevation: museum light --------------------------------------- */
+  /* Placards and vitrines cast soft warm shadows (objects under daylight);
+     warm-black tint so the shadow belongs to the room, not to a screen. */
+  --shadow-2xs: 0 1px 1px oklch(0.15 0.012 48 / 0.05);
+  --shadow-xs: 0 1px 2px oklch(0.15 0.012 48 / 0.06);
+  --shadow-sm: 0 1px 3px oklch(0.15 0.012 48 / 0.08),
+    0 1px 2px -1px oklch(0.15 0.012 48 / 0.08);
+  --shadow-md: 0 6px 16px -6px oklch(0.15 0.012 48 / 0.14),
+    0 2px 4px -2px oklch(0.15 0.012 48 / 0.08);
+  --shadow-lg: 0 18px 40px -16px oklch(0.15 0.012 48 / 0.2),
+    0 4px 10px -6px oklch(0.15 0.012 48 / 0.1);
+  --shadow-xl: 0 28px 56px -20px oklch(0.15 0.012 48 / 0.26);
+  --shadow-2xl: 0 36px 72px -24px oklch(0.15 0.012 48 / 0.32);
+
+  /* ---- type ------------------------------------------------------------ */
+  /* Display = Bricolage Grotesque (exhibition titles, catalogue numbers,
+     prices). Body stays on the inherited Inter. */
+  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
+
+  background: var(--color-surface);
+  color: var(--color-fg);
+  font-family: var(--font-inter, 'Inter'), system-ui, -apple-system, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* The hero's light wash — dark mode only, FULL WIDTH of the hero (inset 0,
+   never a negative-offset box): one warm pool falling from the top of the
+   wall, fading out before the ticker rule. */
+[data-dialect='named'][data-template='gallery'] .gal-wash {
+  position: relative;
+}
+.dark [data-dialect='named'][data-template='gallery'] .gal-wash::before,
+[data-dialect='named'][data-template='gallery'].dark .gal-wash::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: radial-gradient(
+    120% 100% at 50% 0%,
+    oklch(0.93 0.01 80 / 0.08),
+    transparent 58%
+  );
+}
+
+/* ──────────────────────────────────────────────────────────────────
+   DARK MODE — the evening gallery, the design's namesake. Warm near-black
+   walls (NOT cool terminal black), bone type. The placard keeps its
+   bone card material — a lit object on a dark wall — and the vitrine keeps
+   its velvet interior, now a step deeper than the room. Ultramarine splits
+   by role: painted fields stay deep IKB, type lifts to read on the dark.
+   Activated by the host's `.dark` class (DialectShell's <Site mode="dark">).
+   ────────────────────────────────────────────────────────────────── */
+.dark [data-dialect='named'][data-template='gallery'],
+[data-dialect='named'][data-template='gallery'].dark {
+  /* ---- semantic layer — after hours ------------------------------------ */
+  --color-surface: oklch(0.168 0.012 45);
+  --color-surface-raised: oklch(0.205 0.014 45);
+  --color-surface-sunken: oklch(0.13 0.01 45);
+
+  --color-fg: oklch(0.93 0.01 80);
+  --color-fg-soft: oklch(0.82 0.01 80);
+  --color-fg-muted: oklch(0.66 0.012 75);
+
+  --color-border: oklch(0.93 0.01 80 / 0.13);
+  --color-border-strong: oklch(0.93 0.01 80 / 0.4);
+  --color-ring: oklch(0.64 0.19 266 / 0.55);
+  --color-hover: oklch(0.93 0.01 80 / 0.06);
+
+  /* ultramarine after dark: fields hold deep IKB, type lifts */
+  --color-accent-field: oklch(0.43 0.27 264);
+  --color-accent-strong: oklch(0.66 0.19 266);
+  --color-accent: oklch(0.58 0.22 265);
+  --color-accent-soft: oklch(0.26 0.08 264);
+  --color-accent-fg: oklch(0.965 0.008 85);
+
+  /* the placard stays a bone card — now a lit object on the dark wall */
+  --color-placard: oklch(0.936 0.012 82);
+  --color-placard-fg: oklch(0.22 0.012 50);
+  --color-placard-soft: oklch(0.37 0.012 52);
+  --color-placard-muted: oklch(0.46 0.014 55);
+  --color-placard-border: oklch(0.22 0.012 50 / 0.14);
+
+  /* vitrine: a step deeper than the walls */
+  --color-vitrine: oklch(0.115 0.01 45);
+  --color-vitrine-fg: oklch(0.92 0.008 80);
+  --color-vitrine-border: oklch(0.93 0.01 80 / 0.22);
+
+  /* primary action: ultramarine lifted half a step for the dark room */
+  --color-btn-primary-from: oklch(0.48 0.26 264);
+  --color-btn-primary-to: oklch(0.48 0.26 264);
+  --color-btn-primary-fg: oklch(0.965 0.008 85);
+
+  --color-destructive: oklch(0.62 0.18 28);
+  --color-destructive-fg: oklch(0.168 0.012 45);
+
+  /* ---- neo shared names, re-pointed ----------------------------------- */
+  --background: oklch(0.168 0.012 45);
+  --foreground: oklch(0.93 0.01 80);
+  --card: oklch(0.205 0.014 45);
+  --card-foreground: oklch(0.93 0.01 80);
+  --popover: oklch(0.205 0.014 45);
+  --popover-foreground: oklch(0.93 0.01 80);
+  --muted: oklch(0.13 0.01 45);
+  --muted-foreground: oklch(0.66 0.012 75);
+  --primary: oklch(0.48 0.26 264);
+  --primary-foreground: oklch(0.965 0.008 85);
+  --secondary: oklch(0.205 0.014 45);
+  --secondary-foreground: oklch(0.93 0.01 80);
+  --accent: oklch(0.58 0.22 265);
+  --accent-foreground: oklch(0.965 0.008 85);
+  --border: oklch(0.93 0.01 80 / 0.13);
+  --input: oklch(0.93 0.01 80 / 0.13);
+  --ring: oklch(0.64 0.19 266 / 0.55);
+  --destructive: oklch(0.62 0.18 28);
+  --destructive-foreground: oklch(0.168 0.012 45);
+
+  /* shadows deepen after dark — spotlit objects throw real penumbrae */
+  --shadow-sm: 0 1px 3px oklch(0.08 0.008 45 / 0.3),
+    0 1px 2px -1px oklch(0.08 0.008 45 / 0.3);
+  --shadow-md: 0 8px 20px -8px oklch(0.08 0.008 45 / 0.5),
+    0 2px 6px -2px oklch(0.08 0.008 45 / 0.35);
+  --shadow-lg: 0 22px 48px -18px oklch(0.08 0.008 45 / 0.6),
+    0 6px 14px -8px oklch(0.08 0.008 45 / 0.4);
+  --shadow-xl: 0 32px 64px -22px oklch(0.08 0.008 45 / 0.65);
+  --shadow-2xl: 0 40px 80px -26px oklch(0.08 0.008 45 / 0.7);
+}
+
+/* Display headings: the shared h1/h2 rule supplies var(--font-display) →
+   Bricolage Grotesque here. Exhibition titles set tight and confident —
+   medium weight (the variable cut around 560 has the flare without the
+   shout), near-solid leading, a breath of negative tracking. Title case,
+   never uppercase — placards do the small-caps work. */
+[data-dialect='named'][data-template='gallery'] h1,
+[data-dialect='named'][data-template='gallery'] h2 {
+  font-weight: 560;
+  letter-spacing: -0.02em;
+  line-height: 0.98;
+}
+
+/* The display voice, on demand (prices, the wordmark, catalogue numbers). */
+[data-dialect='named'][data-template='gallery'] .gal-display {
+  font-family: var(--font-display);
+}
+
+/* Museum placard label — small-caps register built from uppercase + wide
+   tracking (Inter carries no true smcp; synthesis reads cheap). */
+[data-dialect='named'][data-template='gallery'] .gal-label {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  line-height: 1.5;
+}
+
+/* Catalogue number — "No. 3" in the display face, lining figures. */
+[data-dialect='named'][data-template='gallery'] .gal-no {
+  font-family: var(--font-display);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+
+/* The spotlight pool — the dark gallery's lighting model. By day the room
+   is evenly lit, so the class renders nothing; after dark a soft bone wash
+   falls from above each work. A lighting effect on the wall, not a panel
+   treatment (no blur, no glass). */