@krizaka/ui 3.53.0 → 3.55.0

package/dist/blocks.css

@@ -53,6 +53,9 @@
   pointer-events: none;
 }
 .kz-frame[data-margin] { --kz-margin-x: max(8px, calc(var(--kz-gutter) - 12px)); }
+/* One margin rule per page (#620): a block that hangs its numbers in a margin (the chapter blocks, a
+   Section) inside a page that already draws one keeps its column but draws no second red line. */
+[data-margin] [data-margin]::before { content: none; }
 .kz-heading-number,
 .kz-chapter-no,
 .kz-margin-note {
@@ -91,6 +94,76 @@
 :is([data-surface="product"], .brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza) :is(.kz-heading-title, .kz-hero-title) {
   font-weight: 650; /* the serif had one weight; the sans carries the hierarchy with a semibold */
 }
+
+/* ─── The product register, 2027 (ADR-006, krizaka-ui#669) ─────────────────────────────────────────────────────────
+   The calm look of the products: slate ink, translucent hairlines, a visible edge on every field, radius 14 on cards, an
+   interactive card that answers the hand. Only here: the Cahier sites (www, the blog, ui., java., ts., motion) keep
+   ADR-004 (paper, square corners, the quiet hover). The register is a product's ROOT — `data-surface="product"`, or its
+   `.brand-<id>` on `<html>` / `<body>`; a `.brand-<id>` wrapper inside a Cahier page (www's product cards, the docs'
+   examples) only lends its accent and stays Cahier. Both themes in one rule: `light-dark()` follows the `color-scheme` the tokens pin on `:root`,
+   `html.light`, `.theme-dark` and `.theme-light`, so a dark island in a light product stays dark.
+   Text roles are ≥ 4.5:1 and the control edge ≥ 3:1 on surfaces 0–2 (product-register.test.ts); a hairline is a
+   decoration (1.16:1) and never a field's only edge. `:root:is()` outranks `html.light`; the second selector keeps the
+   register inside a theme island of a product. The card rules below read `--kz-card-*`, set here and nowhere else. */
+:is([data-surface="product"], :root:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza), body:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza)), :is([data-surface="product"], :root:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza), body:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza)) :is(.theme-dark, .theme-light) {
+  --kz-surface-0: light-dark(#fbfbfa, #111318);
+  --kz-surface-1: light-dark(#ffffff, #171a21);
+  --kz-surface-2: light-dark(#f4f4f2, #1e222b);
+  --kz-surface-3: light-dark(#f0f0ed, #272c37);
+  --kz-text-title: light-dark(#222a3a, #f3f5f9);
+  --kz-text-primary: light-dark(#242c3d, #e8ebf1);
+  --kz-text-secondary: light-dark(#576275, #a9b1bf);
+  --kz-text-muted: light-dark(#646d80, #959eae);
+  --kz-border-subtle: light-dark(rgb(28 40 65 / 0.04), rgb(255 255 255 / 0.04));
+  --kz-border-default: light-dark(rgb(28 40 65 / 0.08), rgb(255 255 255 / 0.08));
+  --kz-border-control: light-dark(#7d8799, #646d7e);
+  --kz-border-hover: light-dark(color-mix(in srgb, var(--kz-accent) 22%, transparent), color-mix(in srgb, var(--kz-accent) 30%, transparent));
+  --kz-shadow-hover: 0 10px 25px -5px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.5));
+  --kz-radius-xs: 4px;
+  --kz-radius-sm: 8px;
+  --kz-radius-md: 8px;
+  --kz-radius-lg: 14px;
+  --kz-radius-xl: 14px;
+  --kz-radius-2xl: 14px;
+  --kz-card-radius: var(--kz-radius-lg);
+  --kz-card-hover-shadow: var(--kz-shadow-hover);
+  --kz-card-hover-transform: translateY(-1px);
+  /* The faces (ADR-006 §2, #670): Plus Jakarta Sans for the titles, Courier Prime for the identifiers and tabular meta
+     (« KZ-03 », a reference, a time); code keeps the system monospace and the pen (Krizaka Cahier) is never inside a
+     product. The display steps take 550 / 650 and the tracking of a large title (−0.015 em from 24 px, −0.022 em from 40 px);
+     the page title and a statistic's value take 700 below. Going back is one token: --kz-font-display: var(--kz-font-sans). */
+  --kz-font-display: var(--kz-font-product-display);
+  --kz-type-display-2xl-weight: 550;
+  --kz-type-display-xl-weight: 550;
+  --kz-type-display-lg-weight: 550;
+  --kz-type-display-md-weight: 650;
+  --kz-type-display-sm-weight: 650;
+  --kz-type-display-2xl-tracking: -0.022em;
+  --kz-type-display-xl-tracking: -0.022em;
+  --kz-type-display-lg-tracking: -0.022em;
+  --kz-type-display-md-tracking: -0.015em;
+  --kz-type-display-sm-tracking: -0.015em;
+}
+/* Titles at 700 (PageHeader's title, Stat's value) in the title ink. */
+:is([data-surface="product"], :root:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza), body:is(.brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza)) :is(.kz-page-title, .kz-stat-value) { font-weight: 700; color: var(--kz-text-title); }
+/* The hover of an INTERACTIVE card only (a link or a button; ADR-006 amends ADR-003 here): the brand border, a soft shadow
+   and a 1 px lift in 150 ms. A static card never moves, nothing moves under reduced motion (the border and the shadow
+   still answer), a button keeps its colour-only hover. The Cahier sets none of the `--kz-card-hover-*`: it stays quiet. */
+.kz-link-card, a.kz-block-card, button.kz-block-card, [data-interactive] {
+  transition: transform 150ms var(--kz-ease, ease), box-shadow 150ms var(--kz-ease, ease), border-color 150ms var(--kz-ease, ease), background-color 150ms var(--kz-ease, ease);
+}
+@media (hover: hover) {
+  .kz-link-card:hover, a.kz-block-card:hover, button.kz-block-card:hover, [data-interactive]:hover {
+    border-color: var(--kz-border-hover);
+    box-shadow: var(--kz-card-hover-shadow, none);
+    transform: var(--kz-card-hover-transform, none);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kz-link-card, a.kz-block-card, button.kz-block-card, [data-interactive] { transition: none; }
+  .kz-link-card:hover, a.kz-block-card:hover, button.kz-block-card:hover, [data-interactive]:hover { transform: none; }
+}
+
 /* 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 {
@@ -426,12 +499,12 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-foundation { --kz-rail: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 50%, var(--kz-border-default)); display: grid; }
 .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: 0; }
+.kz-foundation-group { position: relative; margin-top: 28px; padding: 22px 14px 14px; border: 1px solid var(--kz-rail); border-radius: var(--kz-card-radius, 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%; }
-@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: 0; } }
+@media (max-width: 640px) { .kz-foundation-group { padding: 20px 8px 8px; border-radius: var(--kz-card-radius, 0); } }
 
 /* The shared surface of the cards: a rail of the hue along the top, and one quiet hover (krizaka-ui#393) — the surface
    goes one step up and the hairline strengthens, in a short colour transition. Nothing moves, nothing follows the
@@ -440,7 +513,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   position: relative;
   isolation: isolate;
   overflow: hidden;
-  border-radius: 0;
+  border-radius: var(--kz-card-radius, 0);
   background: var(--kz-surface-1);
   border: 1px solid var(--kz-border-default);
   transition: background-color 150ms var(--kz-ease, ease), border-color 150ms var(--kz-ease, ease);
@@ -643,7 +716,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: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-decision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 22px; border-radius: var(--kz-card-radius, 0); 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: 400; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: var(--kz-figures, lining-nums 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); }
@@ -661,7 +734,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 @media (max-width: 560px) { .kz-decision { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; } .kz-decision-n { font-size: 22px; } }
 
 /* ─── CodeBlock · CodeTabs: a file name, code that scrolls sideways (never shrinks), a copy button ─── */
-.kz-code { margin: 0; min-width: 0; overflow: hidden; border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); box-shadow: inset 3px 0 0 var(--kz-hue, var(--kz-accent)); }
+.kz-code { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); box-shadow: inset 3px 0 0 var(--kz-hue, var(--kz-accent)); }
 .kz-code-bar {
   display: flex;
   align-items: center;
@@ -704,7 +777,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-code .kz-line-dim, .kz-code pre[data-focus] .th-line:not(.kz-line-focus) { color: var(--kz-text-secondary); }
 .kz-code .kz-line-dim .th-token, .kz-code pre[data-focus] .th-line:not(.kz-line-focus) .th-token { color: inherit; font-weight: inherit; }
 /* Markdown (TanStack Markdown's AST on the tokens): reading text, nothing decorative. */
-.kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
+.kz-md { min-width: 0; color: var(--kz-text-primary); font-size: 15px; line-height: 1.7; overflow-wrap: break-word; }
+.kz-md :is(p, li, a, th, td) { overflow-wrap: break-word; }
+.kz-md pre { white-space: pre; overflow-wrap: normal; }
 .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: 400; line-height: 1.2; letter-spacing: -0.01em; }
@@ -722,9 +797,24 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-md :not(pre) > code { padding: 0.12em 0.4em; border-radius: 6px; font-family: var(--kz-font-mono); font-size: 0.88em; background: var(--kz-surface-3); }
 .kz-md hr { border: 0; border-top: 1px solid var(--kz-border-default); }
 .kz-md img { max-width: 100%; height: auto; border-radius: 0; }
-.kz-md-table { overflow-x: auto; }
-.kz-md-table table { width: 100%; border-collapse: collapse; font-size: 0.93em; }
+.kz-md-table {
+  overflow-x: auto;
+  border: 1px solid var(--kz-border-subtle);
+  background:
+    linear-gradient(to right, var(--kz-surface-1) 30%, transparent) left / 32px 100%,
+    linear-gradient(to left, var(--kz-surface-1) 30%, transparent) right / 32px 100%,
+    linear-gradient(to right, color-mix(in srgb, var(--kz-text-primary) 20%, transparent), transparent) left / 10px 100%,
+    linear-gradient(to left, color-mix(in srgb, var(--kz-text-primary) 20%, transparent), transparent) right / 10px 100%;
+  background-color: var(--kz-surface-1);
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+}
+.kz-md-table:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: -2px; }
+.kz-md-table table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 0.93em; }
 .kz-md-table :is(th, td) { padding: 0.55em 0.8em; text-align: start; border-bottom: 1px solid var(--kz-border-subtle); }
+.kz-md-cell { display: inline-block; vertical-align: top; width: max-content; min-width: min-content; max-width: 36ch; }
+.kz-md-table :is(th, td):first-child { width: 1%; white-space: nowrap; }
+.kz-md-table :is(th, td) code { white-space: nowrap; }
 .kz-md-table th { font-weight: 700; color: var(--kz-text-secondary); background: var(--kz-surface-2); }
 .kz-md [data-footnotes] { font-size: 0.9em; color: var(--kz-text-secondary); border-top: 1px solid var(--kz-border-subtle); padding-top: 0.8em; }
 /* A text still arriving: a caret where it goes on (still under reduced motion). */
@@ -792,7 +882,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   justify-content: space-between;
   gap: 20px;
   padding: 24px 26px;
-  border-radius: 0;
+  border-radius: var(--kz-card-radius, 0);
   background: color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 8%, var(--kz-surface-1));
   border: 1px solid color-mix(in srgb, var(--kz-hue, var(--kz-accent)) 30%, var(--kz-border-default));
 }
@@ -834,7 +924,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-split[data-reverse] > :first-child { order: 2; }
 @media (max-width: 900px) { .kz-tpl-split { grid-template-columns: minmax(0, 1fr); } .kz-tpl-split[data-reverse] > :first-child { order: 0; } }
 .kz-tpl-stage {
-  position: relative; min-width: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
+  position: relative; min-width: 0; overflow: hidden; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1);
   box-shadow: var(--kz-shadow-md);
 }
 .kz-tpl-stage-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--kz-border-subtle); background: var(--kz-surface-2);
@@ -853,7 +943,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* A bento: features of different weights on a six-column grid (one column on a phone). */
 .kz-tpl-bento { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
-.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 0;
+.kz-tpl-bento > li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: var(--kz-card-radius, 0);
   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; }
@@ -885,7 +975,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* A gallery: media in columns of different heights, the featured one wide. */
 .kz-tpl-gallery { margin: 0; padding: 0; list-style: none; columns: 3 280px; column-gap: 14px; }
 .kz-tpl-gallery > li { break-inside: avoid; margin-bottom: 14px; }
-.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-figure { margin: 0; overflow: hidden; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-figure-media { overflow: hidden; background: var(--kz-media); }
 .kz-tpl-figure-media > :is(img, video) { display: block; width: 100%; height: auto; }
 .kz-tpl-figure figcaption { display: grid; gap: 4px; padding: 12px 14px; }
@@ -898,7 +988,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-hub-search > * { width: 100%; }
 .kz-tpl-hub-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--kz-text-secondary); }
 .kz-tpl-collections { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
-.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: 0;
+.kz-tpl-collection { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 20px; border-radius: var(--kz-card-radius, 0);
   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; }
@@ -956,7 +1046,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-count { margin: 0; font-family: var(--kz-font-mono); font-size: 12px; color: var(--kz-text-secondary); }
 @media (max-width: 900px) {
   .kz-tpl-catalogue { grid-template-columns: minmax(0, 1fr); gap: 16px; }
-  .kz-tpl-catalogue-filters { position: static; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+  .kz-tpl-catalogue-filters { position: static; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
   .kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
     font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
   .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
@@ -1014,7 +1104,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 /* Contact: the ways to reach us beside the form; what happens next under it. */
 .kz-tpl-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
 @media (max-width: 900px) { .kz-tpl-contact { grid-template-columns: minmax(0, 1fr); } }
-.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: 0; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
+.kz-tpl-form { padding: clamp(18px, 3vw, 28px); border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }
 .kz-tpl-next { margin: 0; padding: 0; list-style: none; counter-reset: next; display: grid; gap: 12px; }
 .kz-tpl-next li { counter-increment: next; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.6; color: var(--kz-text-secondary); }
 .kz-tpl-next li::before { content: counter(next); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
@@ -1022,7 +1112,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .kz-tpl-next strong { display: block; color: var(--kz-text-primary); }
 
 /* Status: one line per service, its state in words and a dot; an incident log under it. */
-.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: 0; border: 1px solid var(--kz-border-default);
+.kz-tpl-state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 18px 20px; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default);
   background: var(--kz-surface-1); }
 .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)); }
@@ -1033,7 +1123,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 [data-state="degraded"] > .kz-tpl-dot, .kz-tpl-dot[data-state="degraded"] { background: var(--kz-warning); }
 [data-state="outage"] > .kz-tpl-dot, .kz-tpl-dot[data-state="outage"] { background: var(--kz-danger); }
 [data-state="building"] > .kz-tpl-dot, .kz-tpl-dot[data-state="building"] { background: var(--kz-info); }
-.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: 0; border: 1px solid var(--kz-border-default); overflow: hidden; }
+.kz-tpl-services { margin: 16px 0 0; padding: 0; list-style: none; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); overflow: hidden; }
 .kz-tpl-services li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--kz-border-subtle);
   font-size: 14.5px; color: var(--kz-text-primary); background: var(--kz-surface-1); }
 .kz-tpl-services li:first-child { border-top: 0; }
@@ -1049,7 +1139,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 
 /* Pricing: plans side by side, the featured one lifted; a comparison under them. */
 .kz-tpl-plans { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; align-items: stretch; }
-.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: 0; background: var(--kz-surface-1);
+.kz-tpl-plan { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: var(--kz-card-radius, 0); background: var(--kz-surface-1);
   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: var(--kz-shadow-md); }
@@ -1064,9 +1154,9 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 .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; text-transform: none; }
 .kz-tpl-compare tbody th { color: var(--kz-text-primary); font-weight: 600; }
-.kz-tpl-scroll { overflow-x: auto; border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-scroll { overflow-x: auto; border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-faq { display: grid; gap: 8px; }
-.kz-tpl-faq details { border-radius: 0; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+.kz-tpl-faq details { border-radius: var(--kz-card-radius, 0); border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
 .kz-tpl-faq summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; color: var(--kz-text-primary); }
 .kz-tpl-faq summary::-webkit-details-marker { display: none; }
 .kz-tpl-faq summary:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; border-radius: 0; }
@@ -1172,23 +1262,71 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   --kz-tape-w: clamp(54px, 8vw, 92px); --kz-tape-h: clamp(17px, 2.4vw, 26px);
   padding: clamp(7px, 1.2vw, 14px); background: var(--kz-print); transform: rotate(var(--kz-taped-tilt, -1.6deg)); transform-origin: 50% 60%;
   box-shadow: 0 1px 0 hsl(30 20% 8% / 0.22), 2px 4px 0 hsl(30 20% 8% / 0.14), 4px 8px 0 -2px hsl(30 20% 8% / 0.08); }
+.kz-stuck-body { --kz-tape: hsl(46 58% 82% / 0.72); --kz-tape-w: clamp(54px, 8vw, 92px); --kz-tape-h: clamp(17px, 2.4vw, 26px); }
 :root:not(.light) .kz-taped { --kz-print: hsl(42 22% 88%); --kz-tape: hsl(46 40% 70% / 0.62); }
-.kz-taped::before, .kz-taped::after { content: ""; position: absolute; z-index: 1; width: var(--kz-tape-w); height: var(--kz-tape-h); background: var(--kz-tape);
+:root:not(.light) .kz-stuck-body { --kz-tape: hsl(46 40% 70% / 0.62); }
+/* Stuck's tape is this tape: the same strip, the same torn ends — one rule, two selectors. */
+.kz-taped::before, .kz-taped::after, .kz-stuck-body:is([data-hold="tape"], [data-hold="tape-corners"])::before, .kz-stuck-body:is([data-hold="tape"], [data-hold="tape-corners"])::after { content: ""; position: absolute; z-index: 1; width: var(--kz-tape-w); height: var(--kz-tape-h); background: var(--kz-tape);
   box-shadow: 0 1px 0 hsl(30 20% 8% / 0.2); pointer-events: none;
   clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); }
-.kz-taped::before { top: calc(-0.55 * var(--kz-tape-h)); left: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
-.kz-taped::after { bottom: calc(-0.55 * var(--kz-tape-h)); right: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
-.kz-taped[data-tape="top"]::before { top: calc(-0.5 * var(--kz-tape-h)); left: calc(50% - var(--kz-tape-w) / 2); transform: rotate(-3deg); }
-.kz-taped[data-tape="top"]::after, .kz-taped[data-tape="none"]::before, .kz-taped[data-tape="none"]::after { display: none; }
+.kz-taped::before, .kz-stuck-body[data-hold="tape-corners"]::before { top: calc(-0.55 * var(--kz-tape-h)); left: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
+.kz-taped::after, .kz-stuck-body[data-hold="tape-corners"]::after { bottom: calc(-0.55 * var(--kz-tape-h)); right: calc(-0.35 * var(--kz-tape-w)); transform: rotate(-34deg); }
+.kz-taped[data-tape="top"]::before, .kz-stuck-body[data-hold="tape"]::before { top: calc(-0.5 * var(--kz-tape-h)); left: calc(50% - var(--kz-tape-w) / 2); transform: rotate(-3deg); }
+.kz-taped[data-tape="top"]::after, .kz-taped[data-tape="none"]::before, .kz-taped[data-tape="none"]::after, .kz-stuck-body[data-hold="tape"]::after { display: none; }
 .kz-taped-picture { position: relative; overflow: hidden; }
 .kz-taped-picture > img, .kz-taped-picture > video { display: block; width: 100%; height: auto; }
 .kz-taped-caption { margin: 0; padding: 10px 4px 2px; font-family: var(--kz-font-mono); font-size: 13px; line-height: 20px; color: var(--kz-print-ink); }
 @media (max-width: 640px) {
   .kz-taped { transform: rotate(calc(var(--kz-taped-tilt, -1.6deg) * 0.6)); }
-  .kz-taped::before { left: -4px; } .kz-taped::after { right: -4px; }
-  .kz-taped[data-tape="top"]::before { left: calc(50% - var(--kz-tape-w) / 2); }
+  .kz-taped::before, .kz-stuck-body[data-hold="tape-corners"]::before { left: -4px; } .kz-taped::after, .kz-stuck-body[data-hold="tape-corners"]::after { right: -4px; }
+  .kz-taped[data-tape="top"]::before, .kz-stuck-body[data-hold="tape"]::before { left: calc(50% - var(--kz-tape-w) / 2); }
 }
 
+/* ─── Stuck (ADR-004): any block stuck into the notebook — held by tape (TapedPhoto's, above), a pin, photo corners or a
+   lifted edge. The outer element stays still (it carries the doodles); the body leans by `--kz-stuck-tilt` (a transform:
+   nothing shifts) on the hard paper shadow. A TapedPhoto or a SpecimenTag inside gives its own lean, shadow and tape up. ─── */
+.kz-stuck { position: relative; }
+.kz-stuck-body { position: relative; transform: rotate(var(--kz-stuck-tilt, 0deg)); transform-origin: 50% 60%; --kz-stuck-fold: var(--kz-paper-tag); --kz-stuck-metal: var(--kz-paper-tag-edge);
+  box-shadow: var(--kz-shadow-floating); }
+.kz-stuck-body > :is(.kz-taped, .kz-tag) { transform: none; box-shadow: none; }
+.kz-stuck-body > .kz-taped::before, .kz-stuck-body > .kz-taped::after { display: none; }
+.kz-stuck-pin { position: absolute; z-index: 2; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 9999px; pointer-events: none;
+  background: var(--kz-paper-rule-margin); box-shadow: inset -2px -2px 0 var(--kz-edge-well), var(--kz-shadow-floating); }
+.kz-stuck-body[data-hold="corner"]::before { content: ""; position: absolute; z-index: 1; inset: -3px; pointer-events: none;
+  background:
+    linear-gradient(135deg, var(--kz-stuck-fold) 50%, transparent 50%) top left / 18px 18px no-repeat,
+    linear-gradient(225deg, var(--kz-stuck-fold) 50%, transparent 50%) top right / 18px 18px no-repeat,
+    linear-gradient(315deg, var(--kz-stuck-fold) 50%, transparent 50%) bottom right / 18px 18px no-repeat,
+    linear-gradient(45deg, var(--kz-stuck-fold) 50%, transparent 50%) bottom left / 18px 18px no-repeat; }
+.kz-stuck-body[data-hold="glue"]::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; width: 20px; height: 20px; pointer-events: none;
+  background: linear-gradient(135deg, transparent 50%, var(--kz-stuck-fold) 50%); box-shadow: -2px -2px 0 var(--kz-stuck-metal); }
+@media (max-width: 640px) { .kz-stuck-body { transform: rotate(calc(var(--kz-stuck-tilt, 0deg) * 0.6)); } }
+
+/* ─── Doodle (ADR-004): a margin doodle — in the margin ink, never over text. Beside the block only where the page's margin
+   is wide enough to hold it (1360 px and up); below that it is gone (`place="inline"` stays in the flow). ─── */
+.kz-doodle { display: none; position: relative; width: 56px; color: var(--kz-paper-rule-margin); pointer-events: none; transform: rotate(var(--kz-doodle-tilt, 0deg)); }
+.kz-doodle[data-place="inline"] { display: inline-block; }
+.kz-doodle svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.kz-doodle[data-side="right"] svg { transform: scaleX(-1); }
+.kz-doodle[data-kind="circle"] { width: 72px; }
+.kz-doodle-word { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--kz-font-cahier, var(--kz-font-display)); font-size: 18px; line-height: 24px; color: var(--kz-text-secondary); }
+@media (min-width: 1360px) {
+  .kz-doodle[data-place="margin"] { display: block; position: absolute; top: var(--kz-doodle-top, 0px); right: calc(100% + 16px); }
+  .kz-doodle[data-place="margin"][data-side="right"] { right: auto; left: calc(100% + 16px); }
+  .kz-stuck:has(> .kz-doodle[data-place="margin"][data-side="left"]) { margin-left: 96px; width: calc(100% - 96px); }
+  .kz-stuck:has(> .kz-doodle[data-place="margin"][data-side="right"]) { margin-right: 96px; width: calc(100% - 96px); }
+  .kz-stuck:has(> .kz-doodle[data-place="margin"][data-side="left"]):has(> .kz-doodle[data-place="margin"][data-side="right"]) { width: calc(100% - 192px); }
+}
+
+/* ─── Signature (ADR-004): the house signs the page — the mark as an ink stamp, the name in the notebook's pen, one ink
+   (the host's text role: chalk on slate, ink on paper), a slight grain from the SVG filter. Fixed sizes: nothing shifts. ─── */
+.kz-signature { position: relative; display: inline-flex; align-items: center; gap: 14px; color: var(--kz-text-primary); }
+.kz-signature-defs { position: absolute; width: 0; height: 0; }
+.kz-signature-stamp { flex: none; width: 48px; height: 48px; transform: rotate(-6deg); }
+.kz-signature-text { display: grid; gap: 2px; transform: rotate(-2deg); transform-origin: 0 100%; }
+.kz-signature-name { font-family: var(--kz-font-cahier, var(--kz-font-display)); font-size: 26px; line-height: 32px; white-space: nowrap; }
+.kz-signature-date { font-family: var(--kz-font-mono); font-size: 12px; line-height: 16px; color: var(--kz-text-secondary); }
+
 .kz-plate, .kz-anatomy {
   margin: 0;
   padding: 20px 24px 24px;
@@ -1335,6 +1473,43 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   .kz-chapter-detail { display: block; padding-left: 0; }
 }
 
+/* The album (#621): each chapter is its cover as a taped print beside its words, the rows alternating left and right and
+   the prints facing each other (the tilt is set per row). One grid per row — margin · print · words — whose middle rows
+   hold the title, the line and the period, so the number shares the title's baseline and the words sit centred on the
+   print. The print keeps its own aspect-ratio (the cover's width and height), so nothing shifts while it loads. Light:
+   no card, no border, the lines of the paper run under it all; nothing moves. */
+.kz-chapters[data-variant="album"] { --kz-chapters-max: 60rem; --kz-album-print: minmax(0, 5fr); --kz-album-words: minmax(0, 6fr); }
+.kz-chapters[data-variant="album"] .kz-chapter-row {
+  grid-template-columns: var(--kz-margin-x) var(--kz-album-print) var(--kz-album-words);
+  grid-template-rows: 1fr auto auto auto 1fr;
+  padding-block: var(--kz-chapter-line);
+}
+.kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(even) { grid-template-columns: var(--kz-margin-x) var(--kz-album-words) var(--kz-album-print); }
+.kz-chapters[data-variant="album"] .kz-chapter-print { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 16px 32px 16px var(--kz-chapter-gap); }
+.kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(even) .kz-chapter-print { grid-column: 3; margin: 16px 28px 16px 32px; }
+.kz-chapters[data-variant="album"] .kz-chapter-row > :not(.kz-chapter-print, .kz-chapter-no) { grid-column: 3; }
+.kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(even) > :not(.kz-chapter-print, .kz-chapter-no) { grid-column: 2; }
+.kz-chapters[data-variant="album"] .kz-chapter-no { grid-column: 1; grid-row: 2; }
+.kz-chapters[data-variant="album"] .kz-chapter-link { grid-row: 2; font-size: clamp(1.3125rem, 2.4vw, 1.625rem); line-height: 1.25; text-wrap: balance; }
+.kz-chapters[data-variant="album"] .kz-chapter-detail { grid-row: 3; max-width: 36ch; margin-top: 8px; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
+.kz-chapters[data-variant="album"] .kz-chapter-period { grid-row: 4; margin-top: 12px; padding-left: var(--kz-chapter-gap); }
+/* A phone: one column — the print above its words (at most 60 % wide, still tilted), the number beside the title. */
+@container (max-width: 34rem) {
+  /* `:nth-child(n)` lifts these over the wide rows' alternation: on a phone every row is the same column. */
+  .kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(n) {
+    display: grid;
+    grid-template-columns: var(--kz-margin-x) minmax(0, 1fr);
+    grid-template-rows: auto;
+    padding: 0 0 var(--kz-chapter-line);
+  }
+  .kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(n) .kz-chapter-print {
+    grid-column: 2; grid-row: 1; justify-self: start; width: 60%; margin: 20px 0 24px calc(var(--kz-chapter-gap) + 4px);
+  }
+  .kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(even) .kz-chapter-print { justify-self: end; margin: 20px 12px 24px 0; }
+  .kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(n) > :not(.kz-chapter-print, .kz-chapter-no) { grid-column: 2; display: block; padding-left: var(--kz-chapter-gap); }
+  .kz-chapters[data-variant="album"] .kz-chapter-row:nth-child(n) .kz-chapter-no { display: block; width: auto; margin: 0; }
+}
+
 /* The foot: the previous and the next as two rows of the index, then one quiet line back to the story. */
 .kz-chapter-row[data-dir] .kz-chapter-period { color: var(--kz-text-secondary); }
 .kz-chapter-back { margin: 0; padding-left: calc(var(--kz-margin-x) + var(--kz-chapter-gap)); font-size: 14.5px; line-height: var(--kz-chapter-line); }

package/dist/chapter.d.ts

@@ -18,6 +18,17 @@ interface ChapterEntry {
     isNew?: boolean;
     /** The page the reader is on. */
     current?: boolean;
+    /** Its cover, drawn by the `album` variant as a taped print. Decorative there (`alt=""`): the title carries the link. */
+    cover?: ChapterCover;
+}
+/** A chapter's cover: its intrinsic size gives the print its aspect-ratio, so nothing shifts while it loads. */
+interface ChapterCover {
+    src: string;
+    width: number;
+    height: number;
+    srcSet?: string;
+    /** @default "(max-width: 34rem) 60vw, 26rem" */
+    sizes?: string;
 }
 type ChapterIndexProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> & {
     /** The chapters, in reading order. */
@@ -30,9 +41,15 @@ type ChapterIndexProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "childre
     paper?: ChapterPaper;
     /** The app's router link (Next's `Link`), so internal chapters prefetch. */
     linkAs?: LinkComponent;
+    /**
+     * `lines` — one ruled line per chapter (the compact index); `album` — each chapter's `cover` as a taped print beside
+     * its title, its `detail` (one short line) and its period, the rows alternating left and right.
+     * @default "lines"
+     */
+    variant?: "lines" | "album";
 };
-/** The chapters of a story as a sober timeline: one ruled line each, the number in the margin, the title the link. */
-declare function ChapterIndex({ chapters, newLabel, label, paper, linkAs, className, ...props }: ChapterIndexProps): React.JSX.Element;
+/** The chapters of a story as a sober timeline: one ruled line each (or a taped print each), the number in the margin, the title the link. */
+declare function ChapterIndex({ chapters, newLabel, label, paper, linkAs, variant, className, ...props }: ChapterIndexProps): React.JSX.Element;
 type ChapterHeadProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     /** The chapter's number, hung in the margin: `01`, `Chapitre 1`. */
     number: React.ReactNode;
@@ -86,4 +103,4 @@ type ChapterFootProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
 /** The foot of a chapter: the previous and the next on the ruled lines, then one line back to the story. */
 declare function ChapterFoot({ previous, next, back, labels, label, paper, linkAs, className, ...props }: ChapterFootProps): React.JSX.Element;
 
-export { type ChapterEntry, ChapterFoot, type ChapterFootProps, ChapterHead, type ChapterHeadProps, ChapterIndex, type ChapterIndexProps, type ChapterLink, LinkComponent };
+export { type ChapterCover, type ChapterEntry, ChapterFoot, type ChapterFootProps, ChapterHead, type ChapterHeadProps, ChapterIndex, type ChapterIndexProps, type ChapterLink, LinkComponent };

package/dist/chapter.js

@@ -5,8 +5,43 @@ import {
   cn
 } from "./chunk-W675RFOA.js";
 
+// src/taped-photo/taped-photo.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TapedPhoto({ children, caption, tilt = -1.6, tape = "corners", className, style, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      className: cn("kz-taped", className),
+      "data-tape": tape === "corners" ? void 0 : tape,
+      style: { ...style, ["--kz-taped-tilt"]: `${tilt}deg` },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "kz-taped-picture", children }),
+        caption ? /* @__PURE__ */ jsx("figcaption", { className: "kz-taped-caption", children: caption }) : null
+      ]
+    }
+  );
+}
+
 // src/chapter/chapter.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EAGER_COVERS = 2;
+var ALBUM_TILT = 1.4;
+function ChapterPrint({ cover, index }) {
+  return /* @__PURE__ */ jsx2(TapedPhoto, { className: "kz-chapter-print", tilt: index % 2 === 0 ? -ALBUM_TILT : ALBUM_TILT, "aria-hidden": true, children: /* @__PURE__ */ jsx2(
+    "img",
+    {
+      src: cover.src,
+      srcSet: cover.srcSet,
+      sizes: cover.srcSet ? cover.sizes ?? "(max-width: 34rem) 60vw, 26rem" : void 0,
+      width: cover.width,
+      height: cover.height,
+      alt: "",
+      loading: index < EAGER_COVERS ? "eager" : "lazy",
+      decoding: "async"
+    }
+  ) });
+}
 function ChapterRow({
   number,
   title,
@@ -18,46 +53,62 @@ function ChapterRow({
   rel,
   linkAs
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: "kz-chapter-no", children: number }),
-    /* @__PURE__ */ jsxs(BlockLink, { href, linkAs, rel, className: "kz-chapter-link", "aria-current": current ? "page" : void 0, children: [
-      /* @__PURE__ */ jsx("span", { className: "kz-chapter-title", children: title }),
-      mark && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("span", { className: "kz-chapter-no", children: number }),
+    /* @__PURE__ */ jsxs2(BlockLink, { href, linkAs, rel, className: "kz-chapter-link", "aria-current": current ? "page" : void 0, children: [
+      /* @__PURE__ */ jsx2("span", { className: "kz-chapter-title", children: title }),
+      mark && /* @__PURE__ */ jsxs2(Fragment, { children: [
         " ",
-        /* @__PURE__ */ jsx("span", { className: "kz-chapter-new", children: mark })
+        /* @__PURE__ */ jsx2("span", { className: "kz-chapter-new", children: mark })
       ] })
     ] }),
-    aside && /* @__PURE__ */ jsxs(Fragment, { children: [
+    aside && /* @__PURE__ */ jsxs2(Fragment, { children: [
       " ",
-      /* @__PURE__ */ jsx("span", { className: "kz-chapter-period", children: aside })
+      /* @__PURE__ */ jsx2("span", { className: "kz-chapter-period", children: aside })
     ] }),
-    detail && /* @__PURE__ */ jsx("span", { className: "kz-chapter-detail", children: detail })
+    detail && /* @__PURE__ */ jsx2("span", { className: "kz-chapter-detail", children: detail })
   ] });
 }
-function ChapterIndex({ chapters, newLabel = "New", label, paper = "lines", linkAs, className, ...props }) {
+function ChapterIndex({ chapters, newLabel = "New", label, paper = "lines", linkAs, variant = "lines", className, ...props }) {
+  const album = variant === "album";
   return (
     // `role="list"`: a list without bullets is still a list to VoiceOver.
-    /* @__PURE__ */ jsx("ol", { role: "list", "aria-label": label, "data-paper": paper || void 0, "data-margin": "", className: cn("kz-chapters", className), ...props, children: chapters.map((c, i) => /* @__PURE__ */ jsx("li", { className: "kz-chapter-row", "data-new": c.isNew ? "" : void 0, "data-detail": c.detail ? "" : void 0, children: /* @__PURE__ */ jsx(ChapterRow, { number: c.number, title: c.title, href: c.href, aside: c.period, mark: c.isNew ? newLabel : void 0, detail: c.detail, current: c.current, linkAs }) }, i)) })
+    /* @__PURE__ */ jsx2(
+      "ol",
+      {
+        role: "list",
+        "aria-label": label,
+        "data-paper": paper || void 0,
+        "data-margin": "",
+        "data-variant": album ? "album" : void 0,
+        className: cn("kz-chapters", className),
+        ...props,
+        children: chapters.map((c, i) => /* @__PURE__ */ jsxs2("li", { className: "kz-chapter-row", "data-new": c.isNew ? "" : void 0, "data-detail": c.detail ? "" : void 0, children: [
+          album && c.cover && /* @__PURE__ */ jsx2(ChapterPrint, { cover: c.cover, index: i }),
+          /* @__PURE__ */ jsx2(ChapterRow, { number: c.number, title: c.title, href: c.href, aside: c.period, mark: c.isNew ? newLabel : void 0, detail: c.detail, current: c.current, linkAs })
+        ] }, i))
+      }
+    )
   );
 }
 function ChapterHead({ number, title, period, readingTime, faced, built, versusLabels, level = 1, className, children, ...props }) {
   const H = level === 1 ? "h1" : "h2";
   const meta = [period, readingTime].filter((m) => m !== void 0 && m !== null && m !== "");
-  return /* @__PURE__ */ jsxs("header", { "data-margin": "", className: cn("kz-chapter-head", className), ...props, children: [
-    /* @__PURE__ */ jsx("p", { className: "kz-chapter-no", children: number }),
-    /* @__PURE__ */ jsx(H, { className: "kz-chapter-head-title", children: title }),
-    meta.length > 0 && /* @__PURE__ */ jsx("p", { className: "kz-chapter-meta", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { children: [
-      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \xB7 " }),
+  return /* @__PURE__ */ jsxs2("header", { "data-margin": "", className: cn("kz-chapter-head", className), ...props, children: [
+    /* @__PURE__ */ jsx2("p", { className: "kz-chapter-no", children: number }),
+    /* @__PURE__ */ jsx2(H, { className: "kz-chapter-head-title", children: title }),
+    meta.length > 0 && /* @__PURE__ */ jsx2("p", { className: "kz-chapter-meta", children: meta.map((m, i) => /* @__PURE__ */ jsxs2("span", { children: [
+      i > 0 && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: " \xB7 " }),
       m
     ] }, i)) }),
-    faced && built && /* @__PURE__ */ jsxs("p", { className: "kz-chapter-standfirst", children: [
-      versusLabels && /* @__PURE__ */ jsxs("span", { className: "kz-sr-only", children: [
+    faced && built && /* @__PURE__ */ jsxs2("p", { className: "kz-chapter-standfirst", children: [
+      versusLabels && /* @__PURE__ */ jsxs2("span", { className: "kz-sr-only", children: [
         versusLabels[0],
         ", "
       ] }),
       faced,
-      /* @__PURE__ */ jsx("span", { className: "kz-chapter-arrow", "aria-hidden": true, children: " \u2192 " }),
-      versusLabels && /* @__PURE__ */ jsxs("span", { className: "kz-sr-only", children: [
+      /* @__PURE__ */ jsx2("span", { className: "kz-chapter-arrow", "aria-hidden": true, children: " \u2192 " }),
+      versusLabels && /* @__PURE__ */ jsxs2("span", { className: "kz-sr-only", children: [
         "; ",
         versusLabels[1],
         ", "
@@ -78,9 +129,9 @@ function ChapterFoot({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, "data-paper": paper || void 0, "data-margin": "", className: cn("kz-chapters kz-chapter-foot", className), ...props, children: [
-    /* @__PURE__ */ jsxs("ul", { role: "list", children: [
-      previous && /* @__PURE__ */ jsx("li", { className: "kz-chapter-row", "data-dir": "previous", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("nav", { "aria-label": label, "data-paper": paper || void 0, "data-margin": "", className: cn("kz-chapters kz-chapter-foot", className), ...props, children: [
+    /* @__PURE__ */ jsxs2("ul", { role: "list", children: [
+      previous && /* @__PURE__ */ jsx2("li", { className: "kz-chapter-row", "data-dir": "previous", children: /* @__PURE__ */ jsx2(
         ChapterRow,
         {
           number: previous.number,
@@ -88,13 +139,13 @@ function ChapterFoot({
           href: previous.href,
           rel: "prev",
           linkAs,
-          aside: /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2190 " }),
+          aside: /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u2190 " }),
             labels.previous
           ] })
         }
       ) }),
-      next && /* @__PURE__ */ jsx("li", { className: "kz-chapter-row", "data-dir": "next", children: /* @__PURE__ */ jsx(
+      next && /* @__PURE__ */ jsx2("li", { className: "kz-chapter-row", "data-dir": "next", children: /* @__PURE__ */ jsx2(
         ChapterRow,
         {
           number: next.number,
@@ -102,15 +153,15 @@ function ChapterFoot({
           href: next.href,
           rel: "next",
           linkAs,
-          aside: /* @__PURE__ */ jsxs(Fragment, { children: [
+          aside: /* @__PURE__ */ jsxs2(Fragment, { children: [
             labels.next,
-            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \u2192" })
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: " \u2192" })
           ] })
         }
       ) })
     ] }),
-    back && /* @__PURE__ */ jsx("p", { className: "kz-chapter-back", children: /* @__PURE__ */ jsxs(BlockLink, { href: back.href, linkAs, className: "kz-chapter-back-link", children: [
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u21A9 " }),
+    back && /* @__PURE__ */ jsx2("p", { className: "kz-chapter-back", children: /* @__PURE__ */ jsxs2(BlockLink, { href: back.href, linkAs, className: "kz-chapter-back-link", children: [
+      /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u21A9 " }),
       back.label
     ] }) })
   ] });