@krizaka/ui 3.35.0 → 3.37.0

package/dist/blocks.css

@@ -23,6 +23,50 @@
 /* A frame inside a frame (a Section in a TocLayout, a Page in a card) adds no second pair of gutters. */
 .kz-frame .kz-frame { --kz-gutter: 0px; }
 
+/* ─── Paper (Cahier, ADR-004): the notebook under a page or a section ───
+   `data-paper="ruled"` — the French Seyès ruling: a strong line every 32 px (--kz-paper-module), three fine lines between
+   (--kz-paper-line) and the verticals; `data-paper="lines"` — the lines only, for a page to read. `data-margin` — the red
+   margin line on the left, where `.kz-heading-number` (§ 2) and `.kz-margin-note` hang on a wide screen. The ruling is
+   drawn by the element (backgrounds), never by an image: dark (slate) and light (paper) alike. */
+[data-paper="ruled"] {
+  background-image:
+    linear-gradient(to bottom, var(--kz-paper-rule-major) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--kz-paper-rule-minor) 1px, transparent 1px),
+    linear-gradient(to right, var(--kz-paper-rule-minor) 1px, transparent 1px);
+  background-size: 100% var(--kz-paper-module, 32px), 100% var(--kz-paper-line, 8px), var(--kz-paper-module, 32px) 100%;
+}
+[data-paper="lines"] {
+  background-image:
+    linear-gradient(to bottom, var(--kz-paper-rule-major) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--kz-paper-rule-minor) 1px, transparent 1px);
+  background-size: 100% var(--kz-paper-module, 32px), 100% var(--kz-paper-line, 8px);
+}
+[data-margin] { position: relative; --kz-margin-x: max(8px, calc(var(--kz-gutter, 16px) - 12px)); }
+[data-margin]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: var(--kz-margin-x);
+  width: 1.5px;
+  background: var(--kz-paper-rule-margin);
+  opacity: 0.8;
+  pointer-events: none;
+}
+.kz-frame[data-margin] { --kz-margin-x: max(8px, calc(var(--kz-gutter) - 12px)); }
+.kz-heading-number,
+.kz-margin-note {
+  font-family: var(--kz-font-mono);
+  font-size: 13px;
+  line-height: 16px;
+  color: var(--kz-paper-rule-margin);
+}
+.kz-margin-note { color: var(--kz-text-secondary); }
+@media (min-width: 1180px) {
+  .kz-heading { position: relative; }
+  .kz-heading-number { position: absolute; right: calc(100% + 28px); top: 0.55em; white-space: nowrap; }
+  .kz-margin-note { position: absolute; right: calc(100% + 28px); width: 12ch; text-align: right; }
+}
+
 /* Section: the content in the frame, a space above and below; `divider` draws the hairline between two sections (the
    transition), inside the gutters. */
 .kz-section { --kz-section-space: clamp(48px, 7vw, 88px); position: relative; }
@@ -34,17 +78,20 @@
 }
 .kz-section :is(h2, h3)[id] { scroll-margin-top: var(--kz-anchor-offset, 96px); }
 
+/* Cahier (ADR-004, #417): the eyebrow is a note in the margin's voice — the typewriter face, lower case, untracked,
+   inked in the margin red. No more uppercase tracked overline above every heading. */
 .kz-eyebrow {
   margin: 0;
   display: inline-flex;
-  align-items: center;
-  gap: 10px;
+  align-items: baseline;
+  gap: 8px;
   font-family: var(--kz-font-mono);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--kz-hue-text, var(--kz-accent-text));
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--kz-paper-rule-margin, var(--kz-hue-text, var(--kz-accent-text)));
 }
 .kz-label {
   margin: 0;
@@ -52,10 +99,10 @@
   align-items: center;
   gap: 6px;
   font-family: var(--kz-font-mono);
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  font-size: 12.5px;
+  font-weight: 400;
+  letter-spacing: 0;
+  text-transform: none;
   color: var(--kz-text-secondary);
 }
 .kz-heading { margin-bottom: clamp(24px, 3vw, 36px); display: grid; gap: 12px; }
@@ -68,8 +115,8 @@
   max-width: 24ch;
   font-family: var(--kz-font-display);
   font-size: clamp(1.6rem, 3.6vw, 2.3rem);
-  font-weight: 800;
-  letter-spacing: -0.028em;
+  font-weight: 400;
+  letter-spacing: -0.01em;
   line-height: 1.15;
   color: var(--kz-text-primary);
   text-wrap: balance;
@@ -156,8 +203,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   margin: 10px 0 0;
   font-family: var(--kz-font-display);
   font-size: clamp(2rem, 5.4vw, 3.1rem);
-  font-weight: 800;
-  letter-spacing: -0.035em;
+  font-weight: 400;
+  letter-spacing: -0.01em;
   line-height: 1.08;
   color: var(--kz-text-primary);
   text-wrap: balance;
@@ -182,7 +229,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-foundation-base { position: relative; display: grid; min-width: 0; }
 .kz-foundation-base::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 28px; background: var(--kz-rail); }
 .kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: 24px; }
-.kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
+.kz-foundation-label { position: absolute; top: -9px; left: 22px; padding: 0 8px; font: 500 11px/18px var(--kz-font-mono, ui-monospace, monospace); letter-spacing: 0; text-transform: none; color: var(--kz-hue-text, var(--kz-accent-text)); background: var(--kz-surface-0); }
 .kz-foundation[data-position="end"] .kz-foundation-base { order: 2; }
 .kz-foundation[data-position="end"] .kz-foundation-group { order: 1; margin-top: 0; margin-bottom: 28px; }
 .kz-foundation[data-position="end"] .kz-foundation-base::after { top: auto; bottom: 100%; }
@@ -256,8 +303,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
    keeps its status and its link on one line. `data-footer="top"` keeps them under the text. */
 .kz-link-card-foot { display: grid; gap: 5px; margin-top: auto; }
 .kz-link-card[data-footer="top"] .kz-link-card-foot { margin-top: 0; }
-.kz-link-card-meta { margin: 0; font-family: var(--kz-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-hue-text, var(--kz-accent-text)); }
-.kz-link-card-title { margin: 0; font-family: var(--kz-font-display); font-size: 16.5px; font-weight: 750; letter-spacing: -0.012em; line-height: 1.3; color: var(--kz-text-primary); }
+.kz-link-card-meta { margin: 0; font-family: var(--kz-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--kz-hue-text, var(--kz-accent-text)); }
+.kz-link-card-title { margin: 0; font-family: var(--kz-font-display); font-size: 16.5px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; color: var(--kz-text-primary); }
 .kz-link-card-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kz-text-secondary); }
 .kz-link-card-extra { margin-top: 6px; }
 .kz-link-card-cta {
@@ -280,7 +327,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-arg .kz-block-icon { width: 40px; height: 40px; }
 .kz-arg-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
 .kz-arg-id { min-width: 0; }
-.kz-arg-title { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; color: var(--kz-text-primary); }
+.kz-arg-title { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--kz-text-primary); }
 .kz-arg-meta { margin: 3px 0 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .kz-arg-mark { margin-left: auto; align-self: flex-start; margin-top: -6px; margin-right: -4px; flex-shrink: 0; --kz-accent: var(--kz-hue, var(--kz-accent)); }
 .kz-arg-line { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--kz-text-primary); text-wrap: pretty; }
@@ -352,7 +399,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   top: 6px;
   font-family: var(--kz-font-display), Georgia, serif;
   font-size: 44px;
-  font-weight: 800;
+  font-weight: 400;
   line-height: 1;
   color: var(--kz-hue, var(--kz-accent));
 }
@@ -377,15 +424,14 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   font-family: var(--kz-font-mono);
   font-size: 10.5px;
   font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  letter-spacing: 0; text-transform: none;
   color: var(--kz-hue-text, var(--kz-accent-text));
 }
 .kz-quote-bird { flex-shrink: 0; --kz-accent: var(--kz-hue, var(--kz-accent)); }
 .kz-quote[data-variant="callout"] blockquote { padding: 24px 26px 24px 68px; border-radius: 22px 22px 22px 8px; }
 .kz-quote[data-variant="callout"] blockquote::before { left: 18px; top: 12px; font-size: 72px; }
 .kz-quote[data-variant="callout"] blockquote::after { left: 36px; bottom: -8px; width: 14px; height: 14px; }
-.kz-quote[data-variant="callout"] blockquote p { font-family: var(--kz-font-display); font-size: clamp(16px, 2vw, 19px); font-weight: 600; line-height: 1.55; letter-spacing: -0.005em; }
+.kz-quote[data-variant="callout"] blockquote p { font-family: var(--kz-font-display); font-size: clamp(16px, 2vw, 19px); font-weight: 400; line-height: 1.55; letter-spacing: -0.01em; }
 .kz-quote[data-variant="callout"] figcaption { gap: 12px; padding-left: 14px; font-size: 11px; }
 @media (max-width: 480px) {
   .kz-quote[data-variant="callout"] blockquote { padding: 50px 20px 20px; }
@@ -400,7 +446,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* ─── DecisionList: one card per decision — what was chosen, large; refused · because · what it costs, side by side ─── */
 .kz-decisions { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
 .kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius: 18px; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
-.kz-decision-n { font-family: var(--kz-font-display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--kz-hue-text, var(--kz-accent-text)); }
+.kz-decision-n { font-family: var(--kz-font-display); font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--kz-hue-text, var(--kz-accent-text)); }
 .kz-decision-body { display: grid; gap: 14px; min-width: 0; }
 .kz-decision-part p:not(.kz-label) { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
 .kz-decision-part[data-part="chose"] .kz-label { color: var(--kz-success-text); }
@@ -432,7 +478,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border-bottom: 1px solid var(--kz-border-subtle);
 }
 .kz-code-file { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.kz-code-lang { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-text-primary); background: var(--kz-surface-3); }
+.kz-code-lang { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--kz-text-primary); background: var(--kz-surface-3); }
 .kz-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 1.7; color: var(--kz-text-primary); tab-size: 2; }
 .kz-code pre:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: -2px; }
 /* The code's colours: TanStack Highlight's `th-*` classes on the tokens' text roles (each ≥ 4.5:1 on the code surface,
@@ -463,7 +509,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
 .kz-md > * { margin-block: 0; }
 .kz-md > * + * { margin-top: 0.9em; }
-.kz-md h1, .kz-md h2, .kz-md h3, .kz-md h4, .kz-md h5, .kz-md h6 { font-family: var(--kz-font-display); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
+.kz-md h1, .kz-md h2, .kz-md h3, .kz-md h4, .kz-md h5, .kz-md h6 { font-family: var(--kz-font-display); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
 .kz-md > * + :is(h1, h2, h3) { margin-top: 1.6em; }
 .kz-md h1 { font-size: 1.7em; } .kz-md h2 { font-size: 1.35em; } .kz-md h3 { font-size: 1.15em; } .kz-md h4, .kz-md h5, .kz-md h6 { font-size: 1em; }
 .kz-md a { color: var(--kz-accent-text); text-decoration: underline; text-underline-offset: 3px; }
@@ -553,7 +599,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, var(--kz-border-default));
 }
 .kz-cta-text { min-width: 0; flex: 1 1 320px; }
-.kz-cta-title { margin: 0 0 6px; font-family: var(--kz-font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.015em; color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
+.kz-cta-title { margin: 0 0 6px; font-family: var(--kz-font-display); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
 .kz-cta-body { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.65; color: var(--kz-text-secondary); }
 .kz-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
 
@@ -603,7 +649,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-band { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-block: 1px solid var(--kz-border-subtle); }
 .kz-tpl-band > div { padding: 20px 18px; border-left: 1px solid var(--kz-border-subtle); }
 .kz-tpl-band > div:first-child { border-left: 0; }
-.kz-tpl-band dt { font-family: var(--kz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--kz-text-primary); }
+.kz-tpl-band dt { font-family: var(--kz-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); }
 .kz-tpl-band dd { margin: 4px 0 0; font-size: 13px; color: var(--kz-text-secondary); }
 @media (max-width: 560px) { .kz-tpl-band > div { border-left: 0; border-top: 1px solid var(--kz-border-subtle); } .kz-tpl-band > div:first-child { border-top: 0; } }
 
@@ -613,7 +659,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
 .kz-tpl-bento > li[data-size="lg"] { grid-column: span 4; grid-row: span 2; background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 7%, var(--kz-surface-1)); }
 .kz-tpl-bento > li[data-size="md"] { grid-column: span 3; }
-.kz-tpl-bento h3 { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.012em; color: var(--kz-text-primary); }
+.kz-tpl-bento h3 { margin: 0; font-family: var(--kz-font-display); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); }
 .kz-tpl-bento > li[data-size="lg"] h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
 .kz-tpl-bento p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
 .kz-tpl-bento-visual { margin-top: auto; min-width: 0; }
@@ -625,9 +671,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   background: linear-gradient(var(--kz-hue, var(--kz-accent)), color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 10%, transparent)); }
 .kz-tpl-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
 .kz-tpl-step-n { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px;
-  font-family: var(--kz-font-display); font-size: 16px; font-weight: 800; color: var(--kz-text-primary); background: var(--kz-surface-1);
+  font-family: var(--kz-font-display); font-size: 16px; font-weight: 400; color: var(--kz-text-primary); background: var(--kz-surface-1);
   border: 2px solid var(--kz-hue, var(--kz-accent)); box-shadow: 0 0 0 6px var(--kz-surface-0); }
-.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-step :is(h2, h3) { margin: 6px 0 8px; font-family: var(--kz-font-display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 400; color: var(--kz-text-primary); }
 .kz-tpl-step p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kz-text-secondary); }
 .kz-tpl-step-visual { min-width: 0; }
 .kz-tpl-step:nth-child(even) .kz-tpl-step-visual { order: -1; grid-column: 2; }
@@ -658,7 +704,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   background: linear-gradient(160deg, color-mix(in srgb, var(--kz-accent) 14%, var(--kz-surface-1)), var(--kz-surface-1) 55%);
   border: 1px solid color-mix(in srgb, var(--kz-accent) 28%, var(--kz-border-default)); }
 .kz-tpl-collection-head { display: flex; align-items: center; gap: 10px; }
-.kz-tpl-collection-head a { font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); text-decoration: none; }
+.kz-tpl-collection-head a { font-family: var(--kz-font-display); font-size: 18px; font-weight: 400; color: var(--kz-text-primary); text-decoration: none; }
 .kz-tpl-collection-head a::after { content: ""; position: absolute; inset: 0; z-index: -1; }
 .kz-tpl-collection-head a:focus-visible { outline: none; }
 .kz-tpl-collection:has(.kz-tpl-collection-head a:focus-visible) { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
@@ -691,7 +737,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--kz-border-strong); }
 .kz-tpl-crumbs a { color: inherit; text-decoration: none; }
 .kz-tpl-crumbs a:hover { color: var(--kz-text-primary); }
-.kz-tpl-article-title { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--kz-text-primary); }
+.kz-tpl-article-title { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--kz-text-primary); }
 .kz-tpl-article-lead { margin: 12px 0 0; max-width: 46rem; font-size: 17px; line-height: 1.65; color: var(--kz-text-secondary); }
 .kz-tpl-article-meta { margin-top: 14px; }
 .kz-tpl-prose { max-width: 46rem; font-size: 16px; line-height: 1.75; color: var(--kz-text-secondary); }
@@ -702,7 +748,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-pager a:hover { border-color: var(--kz-accent); }
 .kz-tpl-pager a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
 .kz-tpl-pager a[rel="next"] { grid-column: 2; text-align: right; }
-.kz-tpl-pager small { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kz-text-secondary); }
+.kz-tpl-pager small { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--kz-text-secondary); }
 
 /* A catalogue: the filters in a sticky column (folded above the results on a phone). */
 .kz-tpl-catalogue { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 32px; align-items: start; }
@@ -730,14 +776,14 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* A long read: chapters with their big numbers, pull quotes in the margin, figures that break out. */
 .kz-tpl-chapters { display: grid; gap: clamp(40px, 7vw, 88px); }
 .kz-tpl-chapter { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 42rem) minmax(0, 1fr); gap: 24px 32px; }
-.kz-tpl-chapter-n { font-family: var(--kz-font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em;
+.kz-tpl-chapter-n { font-family: var(--kz-font-display); font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.01em;
   color: transparent; -webkit-text-stroke: 1.5px var(--kz-hue, var(--kz-accent)); }
-.kz-tpl-chapter h2 { margin: 0 0 14px; font-family: var(--kz-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15;
+.kz-tpl-chapter h2 { margin: 0 0 14px; font-family: var(--kz-font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15;
   color: var(--kz-text-primary); scroll-margin-top: var(--kz-anchor-offset, 96px); }
 .kz-tpl-chapter-body { font-size: 17px; line-height: 1.8; color: var(--kz-text-secondary); }
 .kz-tpl-chapter-body p { margin: 0 0 1em; }
 .kz-tpl-chapter-aside { align-self: start; padding-top: 8px; }
-.kz-tpl-pull { margin: 0; padding-left: 16px; border-left: 3px solid var(--kz-hue, var(--kz-accent)); font-family: var(--kz-font-display); font-size: 19px; font-weight: 700;
+.kz-tpl-pull { margin: 0; padding-left: 16px; border-left: 3px solid var(--kz-hue, var(--kz-accent)); font-family: var(--kz-font-display); font-size: 19px; font-weight: 400;
   line-height: 1.4; color: var(--kz-text-primary); }
 .kz-tpl-chapter-figure { grid-column: 2 / -1; margin: 8px 0 0; }
 @media (max-width: 1023px) {
@@ -751,10 +797,10 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-log-entry:first-child { border-top: 0; }
 .kz-tpl-log-when { position: sticky; top: var(--kz-anchor-offset, 96px); align-self: start; display: grid; gap: 6px; }
 .kz-tpl-log-when time { font-family: var(--kz-font-mono); font-size: 12.5px; color: var(--kz-text-secondary); }
-.kz-tpl-log-entry :is(h2, h3) { margin: 0 0 10px; font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-log-entry :is(h2, h3) { margin: 0 0 10px; font-family: var(--kz-font-display); font-size: 19px; font-weight: 400; color: var(--kz-text-primary); }
 .kz-tpl-log-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
 .kz-tpl-log-items li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--kz-text-secondary); }
-.kz-tpl-log-kind { font-family: var(--kz-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
+.kz-tpl-log-kind { font-family: var(--kz-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; padding-top: 3px; }
 .kz-tpl-log-kind[data-kind="added"] { color: var(--kz-success-text); }
 .kz-tpl-log-kind[data-kind="changed"] { color: var(--kz-accent-text); }
 .kz-tpl-log-kind[data-kind="fixed"] { color: var(--kz-warning-text); }
@@ -783,7 +829,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-state[data-state="operational"] { border-color: color-mix(in srgb, var(--kz-success) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-success) 7%, var(--kz-surface-1)); }
 .kz-tpl-state[data-state="degraded"] { border-color: color-mix(in srgb, var(--kz-warning) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-warning) 7%, var(--kz-surface-1)); }
 .kz-tpl-state[data-state="outage"] { border-color: color-mix(in srgb, var(--kz-danger) 40%, var(--kz-border-default)); background: color-mix(in srgb, var(--kz-danger) 7%, var(--kz-surface-1)); }
-.kz-tpl-state strong { font-family: var(--kz-font-display); font-size: 19px; font-weight: 800; color: var(--kz-text-primary); }
+.kz-tpl-state strong { font-family: var(--kz-font-display); font-size: 19px; font-weight: 400; color: var(--kz-text-primary); }
 .kz-tpl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--kz-text-secondary); }
 [data-state="operational"] > .kz-tpl-dot, .kz-tpl-dot[data-state="operational"] { background: var(--kz-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kz-success) 22%, transparent); }
 [data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
@@ -797,9 +843,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* An error: the code, huge and drawn in outline, the bird beside it, the ways out under it. */
 .kz-tpl-error { display: grid; justify-items: center; gap: 16px; padding-block: calc(var(--kz-hero-top, 120px) - 16px) clamp(48px, 8vw, 96px); text-align: center; }
-.kz-tpl-error .kz-tpl-error-code { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-family: var(--kz-font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 800;
-  line-height: 0.9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--kz-hue, var(--kz-accent)); }
-.kz-tpl-error h1 { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.025em; color: var(--kz-text-primary); }
+.kz-tpl-error .kz-tpl-error-code { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-family: var(--kz-font-display); font-size: clamp(5rem, 18vw, 10rem); font-weight: 400;
+  line-height: 0.9; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 2px var(--kz-hue, var(--kz-accent)); }
+.kz-tpl-error h1 { margin: 0; font-family: var(--kz-font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 400; letter-spacing: -0.01em; color: var(--kz-text-primary); }
 .kz-tpl-error p:not(.kz-tpl-error-code) { margin: 0; max-width: 34rem; font-size: 16px; line-height: 1.65; color: var(--kz-text-secondary); }
 .kz-tpl-error-search { width: min(100%, 28rem); }
 
@@ -809,8 +855,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border: 1px solid var(--kz-border-default); }
 .kz-tpl-plan[data-featured] { border-color: var(--kz-accent); background: linear-gradient(170deg, color-mix(in srgb, var(--kz-accent) 12%, var(--kz-surface-1)), var(--kz-surface-1) 60%);
   box-shadow: 0 30px 60px -36px var(--kz-accent); }
-.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 800; color: var(--kz-text-primary); }
-.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--kz-text-primary); }
+.kz-tpl-plan :is(h2, h3) { margin: 0; font-family: var(--kz-font-display); font-size: 18px; font-weight: 400; color: var(--kz-text-primary); }
+.kz-tpl-price { margin: 0; font-family: var(--kz-font-display); font-size: 2.6rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1; color: var(--kz-text-primary); }
 .kz-tpl-price small { display: block; margin-top: 6px; font-family: var(--kz-font-text, inherit); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--kz-text-secondary); }
 .kz-tpl-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; color: var(--kz-text-secondary); }
 .kz-tpl-plan ul li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
@@ -818,7 +864,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-plan > :last-child { margin-top: auto; }
 .kz-tpl-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
 .kz-tpl-compare th, .kz-tpl-compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--kz-border-subtle); color: var(--kz-text-secondary); }
-.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
+.kz-tpl-compare thead th { font-family: var(--kz-font-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
 .kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
 .kz-tpl-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-faq { display: grid; gap: 8px; }
@@ -841,3 +887,154 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-plan .kz-tpl-collection-head { justify-content: space-between; }
 .kz-tpl-scroll:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
 .kz-tpl-prose > p, .kz-tpl-prose > ul, .kz-tpl-prose > ol { margin: 0 0 1em; }
+
+/* ─── The Cahier's signature blocks (ADR-004, #417): the specimen tag, the stamp, the bird plate, the anatomy plate,
+   the index, the caption and the footnotes. Paper and ink on the --kz-paper-* roles; nothing blurs, nothing glows. ─── */
+
+/* SpecimenTag — manila, an eyelet, a typed record. `data-mount="hang"`: a string from the wire above. */
+.kz-tag {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 40px 20px 16px;
+  color: var(--kz-paper-tag-ink);
+  background: var(--kz-paper-tag);
+  border: 1px solid var(--kz-paper-tag-edge);
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  corner-shape: bevel;
+  box-shadow: var(--kz-shadow-raised);
+}
+.kz-tag-eyelet {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  margin-left: -7px;
+  border-radius: 9999px;
+  background: var(--kz-surface-0);
+  box-shadow: inset 0 0 0 3px var(--kz-paper-tag-edge);
+}
+.kz-tag[data-mount="hang"] { margin-top: 32px; }
+.kz-tag[data-mount="hang"]::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: -33px;
+  height: 52px;
+  border-left: 1.5px solid var(--kz-text-secondary);
+  opacity: 0.75;
+}
+.kz-tag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
+.kz-tag-code { font-family: var(--kz-font-mono); font-size: 12.5px; font-weight: 700; line-height: 16px; }
+.kz-tag-title { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--kz-font-display); font-weight: 400; font-size: 26px; line-height: 32px; color: inherit; }
+.kz-tag-mark { display: inline-flex; flex-shrink: 0; }
+.kz-tag-mark > svg, .kz-tag-mark > img { width: 32px; height: 32px; }
+.kz-tag-body { font-size: 15px; line-height: 22px; }
+.kz-tag-body > p { margin: 0; }
+.kz-tag-fields { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; font-family: var(--kz-font-mono); font-size: 13px; line-height: 24px; }
+.kz-tag-fields > div { display: contents; }
+.kz-tag-fields dt { opacity: 0.72; }
+.kz-tag-fields dd { margin: 0; font-weight: 700; border-bottom: 1px dashed var(--kz-paper-tag-edge); overflow-wrap: anywhere; }
+.kz-tag-foot { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; border-top: 1px dashed var(--kz-paper-tag-edge); }
+.kz-tag-foot a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
+
+/* Stamp — a rubber stamp: lower case, double-ruled, askew; the tone is its ink. */
+.kz-stamp {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 3px 8px 2px;
+  font-family: var(--kz-font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  white-space: nowrap;
+  color: var(--kz-stamp-ink, var(--kz-text-primary));
+  border: 2px solid currentColor;
+  border-radius: 2px;
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+  transform: rotate(-3deg);
+}
+.kz-stamp[data-tone="ok"] { --kz-stamp-ink: var(--kz-success-text); }
+.kz-stamp[data-tone="wip"] { --kz-stamp-ink: var(--kz-text-secondary); }
+.kz-stamp[data-tone="construction"] { --kz-stamp-ink: var(--kz-paper-rule-margin); }
+.kz-tag .kz-stamp[data-tone="wip"], .kz-tag .kz-stamp[data-tone="neutral"] { --kz-stamp-ink: var(--kz-paper-tag-ink); }
+/* On the manila (or the slate tag), the margin's red is mixed with the tag's ink so a small stamp stays ≥ 4.5:1 (axe). */
+.kz-tag .kz-stamp[data-tone="construction"] { --kz-stamp-ink: color-mix(in oklab, var(--kz-paper-rule-margin) 72%, var(--kz-paper-tag-ink)); }
+
+/* BirdPlate and AnatomyPlate — a sheet of the field guide. */
+.kz-plate, .kz-anatomy {
+  margin: 0;
+  padding: 20px 24px 24px;
+  background: var(--kz-surface-1);
+  border: 1px solid var(--kz-border-default);
+  box-shadow: var(--kz-shadow-md);
+}
+.kz-plate-head, .kz-anatomy-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
+.kz-plate-title { font-family: var(--kz-font-display); font-size: 22px; line-height: 32px; font-weight: 400; color: var(--kz-text-primary); }
+.kz-plate-sub { font-family: var(--kz-font-mono); font-size: 13px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-plate-figures { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 20px; }
+.kz-plate-figure { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
+.kz-plate-bird { width: 112px; height: 112px; }
+.kz-plate-caption { position: relative; margin: 0; padding-top: 22px; max-width: 24ch; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-plate-caption b { display: block; font-weight: 700; color: var(--kz-text-primary); }
+.kz-plate-caption::before { content: ""; position: absolute; top: 2px; left: 50%; height: 16px; border-left: 1px solid var(--kz-text-secondary); }
+.kz-plate-caption::after { content: ""; position: absolute; top: 0; left: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: 9999px; background: var(--kz-paper-rule-margin); }
+.kz-plate[data-layout="single"] .kz-plate-figures { grid-template-columns: 1fr; }
+.kz-plate[data-layout="single"] .kz-plate-figure { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; gap: 32px; }
+.kz-plate[data-layout="single"] .kz-plate-bird { width: 168px; height: 168px; }
+.kz-plate[data-layout="single"] .kz-plate-caption { padding: 0 0 0 4px; max-width: 32ch; font-size: 13.5px; line-height: 20px; }
+.kz-plate[data-layout="single"] .kz-plate-caption::before { top: 50%; left: -28px; height: 0; width: 26px; border-left: 0; border-top: 1px solid var(--kz-text-secondary); }
+.kz-plate[data-layout="single"] .kz-plate-caption::after { top: calc(50% - 2.5px); left: -31px; }
+
+.kz-anatomy-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 56px; min-height: 240px; }
+.kz-anatomy-specimen { display: grid; place-items: center; padding: 40px 24px; }
+.kz-anatomy-scale { transform: scale(var(--kz-anatomy-scale, 1.6)); transform-origin: center; }
+.kz-anatomy-parts { margin: 0; padding: 0; list-style: none; display: grid; gap: 28px; }
+.kz-anatomy-part { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-anatomy-part b { font-weight: 700; color: var(--kz-paper-rule-margin); }
+.kz-anatomy-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--kz-paper-rule-margin); border-radius: 9999px; font-family: var(--kz-font-text); font-size: 12px; font-weight: 700; color: var(--kz-paper-rule-margin); }
+.kz-anatomy-parts[data-side="left"] .kz-anatomy-part::after,
+.kz-anatomy-parts[data-side="right"] .kz-anatomy-part::after { content: ""; position: absolute; top: 12px; width: 44px; border-top: 1px solid var(--kz-text-secondary); }
+.kz-anatomy-parts[data-side="left"] .kz-anatomy-part::after { right: -52px; }
+.kz-anatomy-parts[data-side="right"] .kz-anatomy-part::after { left: -52px; }
+@media (max-width: 720px) {
+  .kz-anatomy-stage { grid-template-columns: 1fr; gap: 16px; }
+  .kz-anatomy-specimen { order: -1; padding: 24px 0; }
+  .kz-anatomy-scale { transform: none; }
+  .kz-anatomy-parts { gap: 16px; }
+  .kz-anatomy-parts[data-side] .kz-anatomy-part::after { display: none; }
+  .kz-plate[data-layout="single"] .kz-plate-figure { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
+  .kz-plate[data-layout="single"] .kz-plate-caption { padding-top: 22px; }
+  .kz-plate[data-layout="single"] .kz-plate-caption::before { top: 2px; left: 50%; height: 16px; width: 0; border-top: 0; border-left: 1px solid var(--kz-text-secondary); }
+  .kz-plate[data-layout="single"] .kz-plate-caption::after { top: 0; left: calc(50% - 2.5px); }
+}
+
+/* PageIndex — a book's index: dotted leaders and page numbers; the current entry marked in the margin. */
+.kz-index { font-size: 15px; line-height: 24px; }
+.kz-index-group + .kz-index-group { margin-top: 16px; }
+.kz-index-title { margin: 0 0 4px; font-family: var(--kz-font-mono); font-size: 12.5px; font-weight: 700; line-height: 24px; color: var(--kz-paper-rule-margin); }
+.kz-index ul { margin: 0; padding: 0; list-style: none; }
+.kz-index-entry { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 4px 0; color: var(--kz-text-secondary); text-decoration: none; }
+.kz-index-entry:hover { color: var(--kz-text-primary); }
+.kz-index-entry:focus-visible { outline: var(--kz-ring-width, 2px) solid var(--kz-ring); outline-offset: 2px; }
+.kz-index-label { min-width: 0; }
+.kz-index-leader { flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--kz-text-muted); transform: translateY(-4px); }
+.kz-index-page { font-family: var(--kz-font-mono); font-size: 12.5px; color: var(--kz-text-secondary); font-variant-numeric: tabular-nums; }
+.kz-index-entry[aria-current="page"] { color: var(--kz-text-primary); font-weight: 700; }
+.kz-index-entry[aria-current="page"]::before { content: "→"; position: absolute; left: -20px; color: var(--kz-paper-rule-margin); font-weight: 400; }
+
+/* Caption, footnote refs and the notes — the small print. */
+.kz-caption { display: block; margin: 8px 0 0; font-family: var(--kz-font-mono); font-size: 12.5px; line-height: 16px; color: var(--kz-text-secondary); }
+.kz-caption-figure { font-weight: 700; color: var(--kz-text-primary); }
+.kz-fnref { line-height: 0; }
+.kz-fnref a { padding: 0 1px; font-family: var(--kz-font-mono); font-size: 0.72em; font-weight: 700; color: var(--kz-paper-rule-margin); text-decoration: none; }
+.kz-fnref a:hover { text-decoration: underline; }
+.kz-footnotes { margin-top: 24px; padding-top: 12px; font-size: 13.5px; line-height: 20px; color: var(--kz-text-secondary); background: linear-gradient(var(--kz-text-secondary), var(--kz-text-secondary)) top left / 12ch 1px no-repeat; }
+.kz-footnotes ol { margin: 0; padding-left: 1.6em; display: grid; gap: 6px; }
+.kz-footnotes li::marker { font-family: var(--kz-font-mono); color: var(--kz-paper-rule-margin); }
+.kz-fn-back { color: var(--kz-accent-text); text-decoration: none; }

package/dist/card.d.ts

@@ -20,7 +20,7 @@ declare const card: tailwind_variants.TVReturnType<{
             readonly root: "bg-surface-2 shadow-md";
         };
         readonly glass: {
-            readonly root: "bg-surface-1/70 backdrop-blur-md";
+            readonly root: "bg-glass border-glass-border";
         };
     };
     readonly interactive: {
@@ -52,7 +52,7 @@ declare const card: tailwind_variants.TVReturnType<{
     readonly title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent";
     readonly description: "line-clamp-2 text-xs text-fg-secondary";
     readonly stat: "min-w-0";
-    readonly statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary";
+    readonly statLabel: "font-mono text-[11.5px] text-fg-secondary";
     readonly statValue: "font-display text-xl font-black tabular-nums text-fg";
     readonly footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary";
 }, undefined, {
@@ -73,7 +73,7 @@ declare const card: tailwind_variants.TVReturnType<{
             readonly root: "bg-surface-2 shadow-md";
         };
         readonly glass: {
-            readonly root: "bg-surface-1/70 backdrop-blur-md";
+            readonly root: "bg-glass border-glass-border";
         };
     };
     readonly interactive: {
@@ -105,7 +105,7 @@ declare const card: tailwind_variants.TVReturnType<{
     readonly title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent";
     readonly description: "line-clamp-2 text-xs text-fg-secondary";
     readonly stat: "min-w-0";
-    readonly statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary";
+    readonly statLabel: "font-mono text-[11.5px] text-fg-secondary";
     readonly statValue: "font-display text-xl font-black tabular-nums text-fg";
     readonly footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary";
 }, tailwind_variants.TVReturnTypeLike<{
@@ -126,7 +126,7 @@ declare const card: tailwind_variants.TVReturnType<{
             readonly root: "bg-surface-2 shadow-md";
         };
         readonly glass: {
-            readonly root: "bg-surface-1/70 backdrop-blur-md";
+            readonly root: "bg-glass border-glass-border";
         };
     };
     readonly interactive: {
@@ -158,7 +158,7 @@ declare const card: tailwind_variants.TVReturnType<{
     readonly title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent";
     readonly description: "line-clamp-2 text-xs text-fg-secondary";
     readonly stat: "min-w-0";
-    readonly statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary";
+    readonly statLabel: "font-mono text-[11.5px] text-fg-secondary";
     readonly statValue: "font-display text-xl font-black tabular-nums text-fg";
     readonly footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary";
 }>>;

package/dist/card.js

@@ -21,13 +21,13 @@ var cardRecipe = defineRecipe({
     title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent",
     description: "line-clamp-2 text-xs text-fg-secondary",
     stat: "min-w-0",
-    statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
+    statLabel: "font-mono text-[11.5px] text-fg-secondary",
     statValue: "font-display text-xl font-black tabular-nums text-fg",
     footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary"
   },
   variants: {
     radius: { md: { root: "rounded-md" }, lg: { root: "rounded-lg" }, xl: { root: "rounded-xl" } },
-    tone: { default: {}, elevated: { root: "bg-surface-2 shadow-md" }, glass: { root: "bg-surface-1/70 backdrop-blur-md" } },
+    tone: { default: {}, elevated: { root: "bg-surface-2 shadow-md" }, glass: { root: "bg-glass border-glass-border" } },
     interactive: { true: { root: "duration-150 hover:border-border-strong hover:bg-surface-2" } },
     padding: { none: { body: "p-0" }, sm: { body: "p-3" }, md: { body: "p-4" }, lg: { body: "p-6" } }
   },

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/card/card.tsx","../src/card/recipe.ts"],"sourcesContent":["// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The quiet hover — the hairline and the surface one step up, nothing moves (krizaka-ui#393): for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n","// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the hover's tint) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"duration-150 hover:border-border-strong hover:bg-surface-2\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/card/card.tsx","../src/card/recipe.ts"],"sourcesContent":["// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { cardRecipe } from \"./recipe\";\n\nexport const card = tv(cardRecipe);\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The quiet hover — the hairline and the surface one step up, nothing moves (krizaka-ui#393): for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n","// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the hover's tint) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"font-mono text-[11.5px] text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-glass border-glass-border\" } },\n    interactive: { true: { root: \"duration-150 hover:border-border-strong hover:bg-surface-2\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"],"mappings":"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","names":[]}