fontisan 0.2.17 → 0.2.22

data/docs/.vitepress/theme/style.css

@@ -1,5 +1,12 @@
+/* ================================================================
+   Fontist — Type Specimen design system (site-wide)
+   One palette + type system applied across every surface:
+   body, VPNav, VPFooter, and .vp-doc (all content pages).
+   ================================================================ */
+
+/* ── Brand + specimen palette ─────────────────────────────────── */
 :root {
-  /* Brand Colors from Logo */
+  /* Brand colors from the logo */
   --fontist-rose: #bf4e6a;
   --fontist-rose-light: #d4718a;
   --fontist-dark: #4d4b54;
@@ -8,323 +15,614 @@
   --fontist-beige: #bebbac;
   --fontist-pale: #dddac8;
 
-  /* VitePress Theme Overrides - Light Mode */
-  --vp-c-brand-1: var(--fontist-rose);
+  /* Specimen tokens — LIGHT (default) */
+  --spec-paper: #f1ece1;
+  --spec-paper-deep: #e7e0d1;
+  --spec-ink: #1c1a18;
+  --spec-ink-soft: #4a4744;
+  --spec-mute: #75716c;
+  --spec-rose: #b8475f;
+  --spec-rose-soft: #d4718a;
+  --spec-rule: rgba(28, 26, 24, 0.16);
+  --spec-rule-strong: rgba(28, 26, 24, 0.5);
+  --spec-term-bg: #1c1a18;
+  --spec-term-ink: #ecdfd0;
+
+  /* VitePress brand wiring */
+  --vp-c-brand-1: var(--spec-rose);
   --vp-c-brand-2: #a3435a;
-  --vp-c-brand-3: var(--fontist-dark);
-  --vp-c-brand-soft: rgba(191, 78, 106, 0.14);
-
-  /* Text Colors */
-  --vp-c-text-1: var(--fontist-dark);
-  --vp-c-text-2: var(--fontist-gray);
-  --vp-c-text-3: #8a8888;
-
-  /* Background Colors */
-  --vp-c-bg-soft: #f8f7f4;
-  --vp-c-bg-alt: #f2f1ed;
-  --vp-c-bg: #ffffff;
-
-  /* Hero */
-  --vp-home-hero-name-color: var(--fontist-rose);
-  --vp-home-hero-name-background: linear-gradient(
-    120deg,
-    var(--fontist-rose) 30%,
-    #d4718a
-  );
+  --vp-c-brand-3: var(--spec-ink);
+  --vp-c-brand-soft: rgba(184, 71, 95, 0.12);
+  --vp-c-text-1: var(--spec-ink);
+  --vp-c-text-2: var(--spec-ink-soft);
+  --vp-c-text-3: var(--spec-mute);
+  --vp-c-bg: var(--spec-paper);
+  --vp-c-bg-soft: var(--spec-paper-deep);
+  --vp-c-bg-alt: var(--spec-paper-deep);
+  --vp-c-divider: var(--spec-rule);
+  --vp-c-gutter: var(--spec-rule);
+
+  /* Nav bg must be opaque (paper) so scrolled content doesn't leak through */
+  --vp-nav-bg-color: var(--spec-paper);
+  --vp-sidebar-bg-color: var(--spec-paper);
+
+  /* Type */
+  --spec-font-display: "Spectral", Georgia, serif;
+  --spec-font-body: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
+  --spec-font-mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", monospace;
+
+  /* Override VitePress's default Inter with our specimen fonts everywhere */
+  --vp-font-family-base: var(--spec-font-body);
+  --vp-font-family-mono: var(--spec-font-mono);
 
   /* Buttons */
-  --vp-button-brand-border: var(--fontist-rose);
+  --vp-button-brand-border: var(--spec-rose);
   --vp-button-brand-text: #ffffff;
-  --vp-button-brand-bg: var(--fontist-rose);
+  --vp-button-brand-bg: var(--spec-rose);
   --vp-button-brand-hover-border: #a3435a;
   --vp-button-brand-hover-text: #ffffff;
   --vp-button-brand-hover-bg: #a3435a;
-  --vp-button-brand-active-border: #8a3849;
-  --vp-button-brand-active-text: #ffffff;
-  --vp-button-brand-active-bg: #8a3849;
-
-  /* Sidebar */
-  --vp-sidebar-bg-color: var(--vp-c-bg-soft);
 
-  /* Nav */
-  --vp-nav-bg-color: var(--vp-c-bg);
+  --vp-button-alt-border: var(--spec-rule-strong);
+  --vp-button-alt-text: var(--spec-ink);
+  --vp-button-alt-bg: transparent;
+  --vp-button-alt-hover-border: var(--spec-rose);
+  --vp-button-alt-hover-text: var(--spec-rose);
+  --vp-button-alt-hover-bg: transparent;
 }
 
-/* Dark Mode */
+/* ── Dark mode specimen ───────────────────────────────────────── */
 html.dark {
-  --vp-c-brand-1: var(--fontist-rose-light);
+  --spec-paper: #161513;
+  --spec-paper-deep: #211f1c;
+  --spec-ink: #ecdfd0;
+  --spec-ink-soft: #b8ada0;
+  --spec-mute: #8a857f;
+  --spec-rose: #d4718a;
+  --spec-rose-soft: #e08a9e;
+  --spec-rule: rgba(236, 223, 208, 0.14);
+  --spec-rule-strong: rgba(236, 223, 208, 0.42);
+  --spec-term-bg: #0d0c0c;
+  --spec-term-ink: #ecdfd0;
+
+  --vp-c-brand-1: var(--spec-rose);
   --vp-c-brand-2: var(--fontist-rose);
-  --vp-c-brand-3: #e1dfd2;
+  --vp-c-brand-3: var(--spec-ink);
   --vp-c-brand-soft: rgba(212, 113, 138, 0.14);
-
-  /* Text Colors - Dark Mode */
-  --vp-c-text-1: #e1dfd2;
-  --vp-c-text-2: #bebbac;
-  --vp-c-text-3: #8a8888;
-
-  /* Background Colors - Dark Mode */
-  --vp-c-bg: #1a1918;
-  --vp-c-bg-soft: #222120;
-  --vp-c-bg-alt: #2a2826;
-  --vp-c-bg-elv: #2a2826;
-
-  /* Hero - Dark Mode */
-  --vp-home-hero-name-background: linear-gradient(
-    120deg,
-    var(--fontist-rose-light) 30%,
-    #e08a9e
-  );
-
-  /* Buttons - Dark Mode */
-  --vp-button-brand-border: var(--fontist-rose-light);
-  --vp-button-brand-text: #1a1918;
-  --vp-button-brand-bg: var(--fontist-rose-light);
+  --vp-c-text-1: var(--spec-ink);
+  --vp-c-text-2: var(--spec-ink-soft);
+  --vp-c-text-3: var(--spec-mute);
+  --vp-c-bg: var(--spec-paper);
+  --vp-c-bg-soft: var(--spec-paper-deep);
+  --vp-c-bg-alt: var(--spec-paper-deep);
+  --vp-c-divider: var(--spec-rule);
+  --vp-c-gutter: var(--spec-rule);
+
+  --vp-button-brand-border: var(--spec-rose);
+  --vp-button-brand-text: #161513;
+  --vp-button-brand-bg: var(--spec-rose);
   --vp-button-brand-hover-border: var(--fontist-rose);
-  --vp-button-brand-hover-text: #1a1918;
+  --vp-button-brand-hover-text: #161513;
   --vp-button-brand-hover-bg: var(--fontist-rose);
-  --vp-button-brand-active-border: #a3435a;
-  --vp-button-brand-active-text: #1a1918;
-  --vp-button-brand-active-bg: #a3435a;
 }
 
-/* Feature cards on home page - Light */
-.VPFeature .title {
-  color: var(--fontist-dark);
+/* ── Site-wide body: paper + grain + base type ────────────────── */
+body {
+  background-color: var(--spec-paper);
+  font-family: var(--spec-font-body);
+  color: var(--spec-ink);
+}
+/* paper grain overlay (every page) */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
+  mix-blend-mode: multiply;
+}
+html.dark body::before {
+  opacity: 0.06;
+  mix-blend-mode: screen;
+}
+
+/* ── Top navigation (VPNav) — specimen restyle ─────────────────── */
+/* Use box-shadow for the rule, not border-bottom — VPNavBar is height:64px
+   with box-sizing:border-box, so border-bottom is inside the 64px and gets
+   overlapped by .content (also 64px). box-shadow renders outside the box. */
+.VPNavBar {
+  background-color: var(--spec-paper) !important;
+  border-bottom: none !important;
+  box-shadow: 0 1px 0 var(--spec-rule) !important;
+}
+.VPNavBar.has-sidebar .content,
+.VPNavBar .content {
+  background-color: transparent !important;
+}
+.VPNavBar .content .curtain {
+  display: none !important;
+}
+
+/* Nav links + dropdown groups: mono, tracked */
+.VPNavBarMenuLink,
+.VPNavBarMenuGroup {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 12px !important;
+  letter-spacing: 0.14em !important;
+  text-transform: uppercase !important;
+  color: var(--spec-ink-soft) !important;
+  font-weight: 500 !important;
+  transition: color 0.2s ease;
+}
+.VPNavBarMenuLink:hover,
+.VPNavBarMenuGroup:hover {
+  color: var(--spec-rose) !important;
+}
+.VPNavBarMenuLink .text,
+.VPNavBarMenuGroup .text {
+  font-family: inherit !important;
+}
+/* Dropdown button — VitePress styles .button directly, so inheritance isn't enough */
+.VPNavBarMenuGroup .button,
+.VPNavBarExtra .button {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 12px !important;
+  letter-spacing: 0.14em !important;
+  text-transform: uppercase !important;
+  font-weight: 500 !important;
+  color: var(--spec-ink-soft) !important;
+  line-height: 64px !important;
+  transition: color 0.2s ease;
+}
+.VPNavBarMenuGroup:hover .button,
+.VPNavBarExtra:hover .button {
+  color: var(--spec-rose) !important;
+}
+/* VitePress renders the visible text in an inner .text span with its own
+   font-size (14px) and color — must target it directly, not via .button */
+.VPNavBarMenuGroup .button .text,
+.VPNavBarExtra .button .text {
+  font-size: 12px !important;
+  color: var(--spec-ink-soft) !important;
+  font-weight: 500 !important;
+}
+.VPNavBarMenuGroup:hover .button .text,
+.VPNavBarExtra:hover .button .text {
+  color: var(--spec-rose) !important;
+}
+
+/* Flyout menu panel (shared by Integrations dropdown + ellipsis extra menu) */
+.VPMenu {
+  background: var(--spec-paper) !important;
+  border: 1px solid var(--spec-rule) !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+.VPMenu .group-title {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 11px !important;
+  letter-spacing: 0.14em !important;
+  text-transform: uppercase !important;
+  color: var(--spec-mute) !important;
+}
+/* Menu links — must out-specify VitePress's .VPLink.link (0-2-0),
+   so we chain .VPMenu parent to reach 0-2-1. Actual DOM:
+   .VPMenu > .items > .VPMenuLink > a.VPLink.link > span */
+.VPMenu .VPMenuLink a,
+.VPMenu .VPMenuLink a span {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 12px !important;
+  letter-spacing: 0.14em !important;
+  text-transform: uppercase !important;
+  font-weight: 500 !important;
+  color: var(--spec-ink-soft) !important;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+.VPMenu .VPMenuLink a:hover {
+  color: var(--spec-rose) !important;
+  background: var(--spec-paper-deep) !important;
+}
+.VPMenu .VPMenuLink a:hover span {
+  color: var(--spec-rose) !important;
+}
+/* Ellipsis menu: Appearance label + item labels — .VPMenu parent
+   boosts specificity above VitePress's scoped component styles */
+.VPMenu .item .label,
+.VPMenu .group .item {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 12px !important;
+  letter-spacing: 0.14em !important;
+  text-transform: uppercase !important;
+  font-weight: 500 !important;
+  color: var(--spec-ink-soft) !important;
+}
+
+/* Logo / title */
+.VPNavBar .VPNavBarTitle .title {
+  font-family: var(--spec-font-display) !important;
+  font-weight: 400 !important;
+  font-size: 18px !important;
+  letter-spacing: 0.02em !important;
+  color: var(--spec-ink) !important;
 }
-
-.VPFeature .details {
-  color: var(--fontist-gray);
-}
-
-.VPFeature:hover {
-  border-color: var(--fontist-rose);
+.VPNav .VPImage {
+  height: 32px;
 }
 
-/* Feature cards - Dark */
-html.dark .VPFeature .title {
-  color: var(--fontist-cream);
+/* Social links + appearance toggle + search: quieter */
+.VPNavBar .VPNavBarSocialLinks .social-link,
+.VPNavBar .VPSocialLink,
+.VPNavBarAppearance,
+.VPNavBarExtra {
+  color: var(--spec-ink-soft) !important;
 }
-
-html.dark .VPFeature .details {
-  color: var(--fontist-beige);
+.VPNavBar .VPNavBarSearch {
+  --vp-nav-height: 56px;
 }
-
-/* Links */
-.vp-doc a {
-  color: var(--fontist-rose);
+.VPNavBarSearch .DocSearch-Button {
+  background: transparent !important;
+  border: 1px solid var(--spec-rule) !important;
+  font-family: var(--spec-font-mono) !important;
+  font-size: 12px !important;
+  letter-spacing: 0.06em !important;
 }
-
-.vp-doc a:hover {
-  color: #a3435a;
+.VPNavBarSearch .DocSearch-Button:hover {
+  border-color: var(--spec-rose) !important;
 }
 
-html.dark .vp-doc a {
-  color: var(--fontist-rose-light);
+/* ── Footer — specimen colophon ───────────────────────────────── */
+.VPFooter {
+  border-top: 1px solid var(--spec-rule) !important;
+  background-color: transparent !important;
+  padding: 28px 24px 40px !important;
+}
+.VPFooter .copyright,
+.VPFooter .message {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 11px !important;
+  letter-spacing: 0.1em !important;
+  color: var(--spec-mute) !important;
+}
+.VPFooter .message a {
+  color: var(--spec-ink-soft) !important;
+  border-bottom: 1px solid var(--spec-rule-strong);
+  text-decoration: none;
+}
+.VPFooter .message a:hover {
+  color: var(--spec-rose) !important;
+}
+
+/* ── .vp-doc typography — every content page (about, blog, docs) ─ */
+.vp-doc {
+  font-family: var(--spec-font-body);
+  color: var(--spec-ink);
+}
+.vp-doc h1,
+.vp-doc h2,
+.vp-doc h3,
+.vp-doc h4,
+.vp-doc h5,
+.vp-doc h6 {
+  font-family: var(--spec-font-display);
+  color: var(--spec-ink);
+  letter-spacing: -0.018em;
+  font-weight: 380;
+}
+.vp-doc h1 {
+  font-size: clamp(40px, 6vw, 64px);
+  font-weight: 360;
+  font-variation-settings: "opsz" 120;
+  line-height: 1.02;
+  letter-spacing: -0.025em;
+  margin-top: 0;
+}
+.vp-doc h2 {
+  font-size: clamp(28px, 3.4vw, 40px);
+  font-variation-settings: "opsz" 60;
+  border-top: 1px solid var(--spec-rule);
+  padding-top: 1.6em;
+  margin-top: 2.2em;
+}
+.vp-doc h3 {
+  font-size: clamp(20px, 2vw, 24px);
+  font-variation-settings: "opsz" 36;
+}
+.vp-doc p,
+.vp-doc li {
+  font-size: 16.5px;
+  line-height: 1.65;
+  color: var(--spec-ink-soft);
+}
+.vp-doc p {
+  margin: 1.1em 0;
 }
-
-html.dark .vp-doc a:hover {
-  color: var(--fontist-rose);
+.vp-doc a {
+  color: var(--spec-rose);
+  text-decoration: none;
+  border-bottom: 1px solid var(--spec-rule);
+  transition: color 0.2s, border-color 0.2s;
 }
-
-/* Footer */
-.VPFooter {
-  background-color: var(--vp-c-bg-soft);
-  border-top: 1px solid var(--fontist-pale);
+.vp-doc a:hover {
+  color: var(--spec-rose);
+  border-color: var(--spec-rose);
 }
-
-html.dark .VPFooter {
-  border-top-color: #3a3836;
+.vp-doc strong {
+  color: var(--spec-ink);
+  font-weight: 600;
 }
-
-/* Code blocks - Light */
+.vp-doc blockquote {
+  font-family: var(--spec-font-display);
+  font-style: italic;
+  font-weight: 380;
+  font-size: 1.25em;
+  line-height: 1.5;
+  color: var(--spec-ink);
+  border-left: 3px solid var(--spec-rose);
+  padding-left: 1.5em;
+  margin: 2em 0;
+}
+.vp-doc hr {
+  border: none;
+  border-top: 1px solid var(--spec-rule-strong);
+  width: 48px;
+  margin: 3em auto;
+}
+/* Drop cap — rose Spectral italic on the first paragraph of content pages */
+.vp-doc > p:first-of-type::first-letter {
+  font-family: var(--spec-font-display);
+  font-style: italic;
+  font-weight: 460;
+  font-size: 3.4em;
+  float: left;
+  line-height: 0.8;
+  padding: 0.04em 0.1em 0 0;
+  color: var(--spec-rose);
+  font-variation-settings: "opsz" 72, "wght" 520;
+}
+/* Code blocks — light: warm paper-deep (matches Shiki light tokens);
+   dark: terminal ink (matches Shiki dark tokens) */
 .vp-doc [class*="language-"] {
-  background-color: var(--fontist-dark);
+  background-color: var(--spec-paper-deep) !important;
+  border: 1px solid var(--spec-rule);
+  font-family: var(--spec-font-mono);
+  font-size: 13.5px;
 }
-
-/* Code blocks - Dark */
 html.dark .vp-doc [class*="language-"] {
-  background-color: #0d0c0c;
-}
-
-/* Logo sizing */
-.VPNav .VPImage {
-  height: 39px;
-}
-
-/* Search */
-.VPLocalSearchBox {
-  --vp-c-brand-1: var(--fontist-rose);
-}
-
-/* Feature Comparison Tables */
-.feature-comparison {
-  width: 100%;
+  background-color: var(--spec-term-bg) !important;
+}
+.vp-doc :not(pre) > code {
+  font-family: var(--spec-font-mono);
+  font-size: 0.9em;
+  background: var(--spec-paper-deep);
+  border: 1px solid var(--spec-rule);
+  padding: 0.1em 0.4em;
+  border-radius: 2px;
+  color: var(--spec-ink);
+}
+/* Tables */
+.vp-doc table {
+  font-size: 14px;
   border-collapse: collapse;
-  margin: 1.5rem 0;
-  font-size: 0.9rem;
-}
-
-.feature-comparison th,
-.feature-comparison td {
-  padding: 0.75rem 1rem;
-  text-align: left;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.feature-comparison th {
-  background: var(--vp-c-bg-soft);
-  font-weight: 600;
-  white-space: nowrap;
 }
-
-.feature-comparison .feature-name {
-  font-weight: 500;
-}
-
-.feature-comparison .supported {
-  color: var(--vp-c-green-1);
+.vp-doc table th,
+.vp-doc table td {
+  border: 1px solid var(--spec-rule);
+  padding: 8px 12px;
 }
-
-.feature-comparison .not-supported {
-  color: var(--vp-c-red-1);
-}
-
-.feature-comparison .advantage {
-  background: linear-gradient(
-    135deg,
-    rgba(191, 78, 106, 0.1) 0%,
-    rgba(212, 113, 138, 0.05) 100%
-  );
-}
-
-/* Badge styles */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  vertical-align: middle;
-}
-
-.badge.pure-ruby {
-  background: linear-gradient(135deg, var(--fontist-rose), #d4718a);
-  color: white;
-  font-weight: 700;
+.vp-doc table th {
+  font-family: var(--spec-font-mono);
+  font-size: 11px;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.badge.tip {
-  background-color: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand-1);
-}
-
-.badge.preview {
-  background-color: rgba(255, 197, 61, 0.14);
-  color: #c4a226;
-}
-
-.badge.planned {
-  background-color: rgba(96, 165, 250, 0.14);
-  color: #60a5fa;
-}
-
-/* Home page enhancements */
-.my-index-page .VPHero .name {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.my-index-page .VPHero .tagline {
-  font-size: 1.25rem !important;
+  color: var(--spec-mute);
+  background: var(--spec-paper-deep);
+}
+
+/* ── Sidebar (if used) ────────────────────────────────────────── */
+.VPSidebar {
+  background-color: var(--spec-paper) !important;
+  border-right: 1px solid var(--spec-rule) !important;
+  font-family: var(--spec-font-mono);
+}
+.VPSidebar .VPSidebarItem .text {
+  font-size: 13px;
+}
+
+/* ── 404 page — specimen ───────────────────────────────────────── */
+.NotFound {
+  text-align: center;
+  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(4rem, 10vw, 8rem);
+  font-family: var(--spec-font-body);
+}
+.NotFound .code {
+  font-family: var(--spec-font-display);
+  font-style: italic;
+  font-weight: 300;
+  font-variation-settings: "opsz" 144;
+  font-size: clamp(120px, 24vw, 280px);
+  line-height: 1;
+  color: var(--spec-rose);
   opacity: 0.9;
+  margin: 0 0 0.5rem;
 }
-
-/* Pure Ruby badge on hero */
-.pure-ruby-hero {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.75rem;
-  background: linear-gradient(135deg, var(--fontist-rose), #d4718a);
-  color: white;
-  border-radius: 9999px;
-  font-size: 0.85rem;
-  font-weight: 700;
+.NotFound .title {
+  font-family: var(--spec-font-mono);
+  font-size: 12px;
+  letter-spacing: 0.22em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-top: 1rem;
-}
-
-/* Code comparison blocks */
-.code-comparison {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin: 1.5rem 0;
-}
-
-@media (max-width: 768px) {
-  .code-comparison {
-    grid-template-columns: 1fr;
-  }
-}
-
-.code-comparison > div {
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.code-comparison h4 {
+  color: var(--spec-ink-soft);
   margin: 0;
-  padding: 0.75rem 1rem;
-  background: var(--vp-c-bg-alt);
-  font-size: 0.85rem;
-  font-weight: 600;
-  border-bottom: 1px solid var(--vp-c-divider);
 }
-
-/* CLI command reference */
-.cli-command {
-  padding: 1rem;
-  margin: 1rem 0;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  border-left: 3px solid var(--fontist-rose);
+.NotFound .divider {
+  width: 60px;
+  border-top: 1px solid var(--spec-rule-strong);
+  margin: 2rem auto;
+}
+.NotFound .quote {
+  font-family: var(--spec-font-display);
+  font-style: italic;
+  font-weight: 380;
+  font-size: clamp(18px, 2.2vw, 26px);
+  line-height: 1.5;
+  color: var(--spec-ink);
+  border: none;
+  max-width: 32ch;
+  margin: 0 auto 2rem;
+  padding: 0;
+}
+.NotFound .action .link {
+  font-family: var(--spec-font-mono);
+  font-size: 13px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--spec-paper);
+  background: var(--spec-ink);
+  padding: 12px 22px;
+  text-decoration: none;
+  display: inline-block;
+  transition: background 0.25s ease;
 }
-
-.cli-command code {
-  font-weight: 500;
+.NotFound .action .link:hover {
+  background: var(--spec-rose);
 }
 
-/* Info boxes */
-.custom-block {
-  margin: 1.5rem 0;
-  padding: 1rem 1.25rem;
-  border-radius: 8px;
-}
+/* ================================================================
+   VitePress home layout — VPHero + VPFeatures specimen restyle
+   Used by the fontist/docs and fontisan/docs homepages.
+   ================================================================ */
 
-.custom-block.tip {
-  border-left: 4px solid var(--fontist-rose);
-  background: rgba(191, 78, 106, 0.08);
+/* ── VPHero ───────────────────────────────────────────────────── */
+.VPHero .container { gap: 48px; }
+.VPHero .heading {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.5rem;
+}
+.VPHero .name {
+  font-family: var(--spec-font-display) !important;
+  font-weight: 360 !important;
+  font-variation-settings: "opsz" 72;
+  font-size: clamp(40px, 6vw, 72px) !important;
+  line-height: 1 !important;
+  letter-spacing: -0.02em !important;
+  background: none !important;
+  -webkit-background-clip: unset !important;
+  -webkit-text-fill-color: var(--spec-ink) !important;
+  color: var(--spec-ink) !important;
+}
+.VPHero .text {
+  font-family: var(--spec-font-display) !important;
+  font-weight: 340 !important;
+  font-size: clamp(28px, 4vw, 44px) !important;
+  line-height: 1.05 !important;
+  letter-spacing: -0.02em !important;
+  color: var(--spec-rose) !important;
+  margin-top: 0.1em !important;
+  display: block !important;
+}
+.VPHero .tagline {
+  font-family: var(--spec-font-body) !important;
+  font-size: 16px !important;
+  line-height: 1.6 !important;
+  color: var(--spec-ink-soft) !important;
+  max-width: 480px !important;
+}
+.VPHero .actions { gap: 12px; }
+.VPHero .VPButton {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 12px !important;
+  letter-spacing: 0.12em !important;
+  text-transform: uppercase !important;
+  border-radius: 0 !important;
+}
+.VPHero .VPButton.brand {
+  border: 1px solid var(--spec-ink) !important;
+  background: var(--spec-ink) !important;
+  color: var(--spec-paper) !important;
+}
+.VPHero .VPButton.brand:hover {
+  background: var(--spec-rose) !important;
+  border-color: var(--spec-rose) !important;
+}
+.VPHero .VPButton.alt {
+  border: 1px solid var(--spec-rule-strong) !important;
+  background: transparent !important;
+  color: var(--spec-ink) !important;
+}
+.VPHero .VPButton.alt:hover {
+  border-color: var(--spec-rose) !important;
+  color: var(--spec-rose) !important;
+  background: transparent !important;
+}
+
+/* ── HeroCodeBlock → specimen terminal plate ──────────────────── */
+.hero-code-block {
+  background: var(--spec-term-bg) !important;
+  border: 1px solid var(--spec-rule) !important;
+  border-radius: 0 !important;
+  box-shadow: 12px 12px 0 -1px var(--spec-paper-deep), 12px 12px 0 var(--spec-rule) !important;
+  max-width: 520px !important;
+}
+.code-header {
+  background: rgba(0, 0, 0, 0.2) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+.code-title {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 11px !important;
+  letter-spacing: 0.12em !important;
+  text-transform: uppercase !important;
+  color: var(--spec-rose-soft) !important;
+}
+.code-content {
+  font-family: var(--spec-font-mono) !important;
+  font-size: 13px !important;
+  line-height: 1.7 !important;
+  color: var(--spec-term-ink) !important;
+}
+.code-content .prompt { color: var(--spec-rose-soft) !important; font-weight: 500; }
+.code-content .cmd { color: #93c5fd !important; }
+.code-content .success { color: #8fb98a !important; }
+.code-content .comment { color: rgba(236, 223, 208, 0.45) !important; }
+.code-content .line { padding: 1px 0; }
+
+/* ── VPFeatures — only style cards, DON'T override grid layout ─── */
+/* VitePress renders responsive columns on .item.grid-N (child of .items).
+   Overriding .items as a grid fights VitePress's own engine. Only style .box. */
+.VPFeatures .container { padding-top: 2rem; }
+
+.VPFeature {
+  background: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+.VPFeature .box {
+  background: var(--spec-paper) !important;
+  border: 1px solid var(--spec-rule) !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  height: 100% !important;
+  transition: border-color 0.2s ease, background 0.2s ease !important;
+}
+.VPFeature .box:hover {
+  background: var(--spec-paper-deep) !important;
+  border-color: var(--spec-rose) !important;
 }
-
-.custom-block.warning {
-  border-left: 4px solid #ffc53d;
-  background: rgba(255, 197, 61, 0.08);
+.VPFeature .title {
+  font-family: var(--spec-font-display) !important;
+  font-weight: 400 !important;
+  font-size: 1.1rem !important;
+  color: var(--spec-ink) !important;
 }
-
-.custom-block.danger {
-  border-left: 4px solid #f43f5e;
-  background: rgba(244, 63, 94, 0.08);
+.VPFeature .details {
+  font-family: var(--spec-font-body) !important;
+  font-size: 14px !important;
+  line-height: 1.55 !important;
+  color: var(--spec-ink-soft) !important;
 }
+html.dark .VPFeature .box { background: var(--spec-paper) !important; }
+html.dark .VPFeature .box:hover { background: var(--spec-paper-deep) !important; }
 
-.custom-block.info {
-  border-left: 4px solid #60a5fa;
-  background: rgba(96, 165, 250, 0.08);
-}