@open-press/cli 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (113) hide show
  1. package/dist/cli.js +114 -23
  2. package/package.json +1 -1
  3. package/template/core/CHANGELOG.md +97 -1
  4. package/template/core/README.md +9 -5
  5. package/template/core/engine/cli.mjs +2 -5
  6. package/template/core/engine/commands/_shared.mjs +4 -4
  7. package/template/core/engine/commands/deploy.mjs +1 -1
  8. package/template/core/engine/commands/inspect.mjs +3 -3
  9. package/template/core/engine/commands/replace.mjs +1 -1
  10. package/template/core/engine/commands/search.mjs +1 -1
  11. package/template/core/engine/commands/validate.mjs +2 -2
  12. package/template/core/engine/document-export.mjs +1 -1
  13. package/template/core/engine/{chrome-pdf.mjs → output/chrome-pdf.mjs} +1 -2
  14. package/template/core/engine/{deploy-sync.mjs → output/deploy-sync.mjs} +2 -2
  15. package/template/core/engine/{fonts.mjs → output/fonts.mjs} +1 -1
  16. package/template/core/engine/{public-assets.mjs → output/public-assets.mjs} +2 -2
  17. package/template/core/engine/{static-server.mjs → output/static-server.mjs} +2 -2
  18. package/template/core/engine/react/caption-numbering.mjs +73 -0
  19. package/template/core/engine/react/comment-marker.mjs +54 -10
  20. package/template/core/engine/react/document-entry.mjs +124 -64
  21. package/template/core/engine/react/document-export.mjs +252 -311
  22. package/template/core/engine/react/mdx-compile.mjs +123 -3
  23. package/template/core/engine/react/measurement-css.mjs +3 -3
  24. package/template/core/engine/react/pagination/allocator.mjs +122 -0
  25. package/template/core/engine/react/pagination/regions.mjs +81 -0
  26. package/template/core/engine/react/pagination.mjs +9 -121
  27. package/template/core/engine/react/pipeline/allocate.mjs +248 -0
  28. package/template/core/engine/react/pipeline/final-render.mjs +94 -0
  29. package/template/core/engine/react/pipeline/frame-measurement.mjs +271 -0
  30. package/template/core/engine/react/pipeline/press-tree.mjs +135 -0
  31. package/template/core/engine/react/project-asset-endpoint.mjs +2 -2
  32. package/template/core/engine/react/{chapter-css.mjs → section-css.mjs} +12 -9
  33. package/template/core/engine/react/sources/heading-numbering.mjs +132 -0
  34. package/template/core/engine/react/sources/mdx-resolver.mjs +441 -0
  35. package/template/core/engine/react/{workspace-discovery.mjs → style-discovery.mjs} +29 -40
  36. package/template/core/engine/{config.mjs → runtime/config.mjs} +15 -0
  37. package/template/core/engine/{file-utils.mjs → runtime/file-utils.mjs} +1 -1
  38. package/template/core/engine/{inspection.mjs → runtime/inspection.mjs} +3 -4
  39. package/template/core/engine/{source-text-tools.mjs → runtime/source-text-tools.mjs} +24 -7
  40. package/template/core/engine/runtime/source-workspace.mjs +186 -0
  41. package/template/core/engine/{validation.mjs → runtime/validation.mjs} +19 -17
  42. package/template/core/package.json +5 -2
  43. package/template/core/src/openpress/anchorMap.ts +27 -0
  44. package/template/core/src/openpress/core/Frame.tsx +80 -0
  45. package/template/core/src/openpress/core/FrameContext.tsx +19 -0
  46. package/template/core/src/openpress/core/MdxArea.tsx +35 -0
  47. package/template/core/src/openpress/core/Press.tsx +34 -0
  48. package/template/core/src/openpress/core/index.tsx +34 -15
  49. package/template/core/src/openpress/core/primitives.tsx +23 -0
  50. package/template/core/src/openpress/core/types.ts +131 -19
  51. package/template/core/src/openpress/core/useSource.ts +28 -0
  52. package/template/core/src/openpress/manuscript/index.tsx +196 -0
  53. package/template/core/src/openpress/mdx/index.ts +88 -0
  54. package/template/core/src/openpress/numbering/index.ts +294 -0
  55. package/template/core/src/openpress/publicPage.tsx +4 -186
  56. package/template/core/src/openpress/reactDocumentMetadata.ts +2 -16
  57. package/template/core/src/openpress/types.ts +0 -16
  58. package/template/core/src/openpress/workbench.tsx +2 -36
  59. package/template/core/src/styles/openpress/responsive.css +0 -14
  60. package/template/core/tsconfig.json +4 -1
  61. package/template/core/vite.config.ts +10 -3
  62. package/template/packs/academic-paper/document/chapters/01-introduction/content/01-introduction.mdx +21 -0
  63. package/template/packs/academic-paper/document/chapters/02-methods/content/01-methods.mdx +30 -0
  64. package/template/packs/academic-paper/document/chapters/03-results-and-discussion/content/01-results.mdx +29 -0
  65. package/template/packs/academic-paper/document/chapters/04-acknowledgment/content/01-acknowledgment.mdx +12 -0
  66. package/template/packs/academic-paper/document/chapters/05-references/content/01-references.mdx +27 -0
  67. package/template/packs/academic-paper/document/components/ChapterOpenerVisual/index.tsx +76 -0
  68. package/template/packs/academic-paper/document/components/Page.tsx +37 -0
  69. package/template/packs/academic-paper/document/components/TokenSwatchGrid/index.tsx +46 -0
  70. package/template/packs/academic-paper/document/components/TokenSwatchGrid/style.css +63 -0
  71. package/template/packs/academic-paper/document/components/TypeSpecimen/index.tsx +38 -0
  72. package/template/packs/academic-paper/document/components/TypeSpecimen/style.css +111 -0
  73. package/template/packs/academic-paper/document/design.md +279 -0
  74. package/template/packs/academic-paper/document/index.tsx +131 -0
  75. package/template/packs/academic-paper/document/media/README.md +13 -0
  76. package/template/packs/academic-paper/document/openpress.config.mjs +26 -0
  77. package/template/packs/academic-paper/document/theme/README.md +11 -0
  78. package/template/packs/academic-paper/document/theme/base/page-contract.css +505 -0
  79. package/template/packs/academic-paper/document/theme/base/print.css +93 -0
  80. package/template/packs/academic-paper/document/theme/base/typography.css +336 -0
  81. package/template/packs/academic-paper/document/theme/fonts.css +3 -0
  82. package/template/packs/academic-paper/document/theme/page-surfaces/back-cover.css +43 -0
  83. package/template/packs/academic-paper/document/theme/page-surfaces/chapter-opener.css +205 -0
  84. package/template/packs/academic-paper/document/theme/page-surfaces/cover.css +267 -0
  85. package/template/packs/academic-paper/document/theme/page-surfaces/toc.css +149 -0
  86. package/template/packs/academic-paper/document/theme/patterns/_chart-frame.css +49 -0
  87. package/template/packs/academic-paper/document/theme/patterns/figure-grid.css +68 -0
  88. package/template/packs/academic-paper/document/theme/patterns/table-utilities.css +66 -0
  89. package/template/packs/academic-paper/document/theme/shell/reader-controls.css +761 -0
  90. package/template/packs/academic-paper/document/theme/tokens.css +80 -0
  91. package/template/packs/academic-paper/openpress.config.mjs +5 -0
  92. package/template/packs/claude-document/document/components/Page.tsx +24 -14
  93. package/template/packs/claude-document/document/design.md +2 -2
  94. package/template/packs/claude-document/document/index.tsx +67 -62
  95. package/template/packs/claude-document/document/theme/page-surfaces/toc.css +19 -7
  96. package/template/packs/editorial-monograph/document/components/Page.tsx +24 -14
  97. package/template/packs/editorial-monograph/document/design.md +2 -2
  98. package/template/packs/editorial-monograph/document/index.tsx +71 -47
  99. package/template/packs/editorial-monograph/document/theme/page-surfaces/toc.css +19 -9
  100. package/template/core/engine/commands/migrate-to-react.mjs +0 -27
  101. package/template/core/engine/page-renderer.mjs +0 -217
  102. package/template/core/engine/react/migrate-to-react.mjs +0 -355
  103. package/template/core/engine/source-workspace.mjs +0 -76
  104. package/template/core/src/openpress/core/basePages.tsx +0 -87
  105. package/template/core/src/openpress/pagination.ts +0 -845
  106. package/template/packs/claude-document/document/chapters/01-document-shape/chapter.tsx +0 -30
  107. package/template/packs/claude-document/document/chapters/02-review-loop/chapter.tsx +0 -30
  108. /package/template/core/engine/{chrome-pdf.d.mts → output/chrome-pdf.d.mts} +0 -0
  109. /package/template/core/engine/{katex-assets.mjs → output/katex-assets.mjs} +0 -0
  110. /package/template/core/engine/{page-block.mjs → output/page-block.mjs} +0 -0
  111. /package/template/core/engine/{pdf-media.mjs → output/pdf-media.mjs} +0 -0
  112. /package/template/core/engine/{config.d.mts → runtime/config.d.mts} +0 -0
  113. /package/template/core/engine/{issue-report.mjs → runtime/issue-report.mjs} +0 -0
@@ -0,0 +1,336 @@
1
+ /* Page-surface styles (cover, back-cover, toc) live in
2
+ * document/theme/page-surfaces/. */
3
+
4
+ .reader-page--content {
5
+ padding: 0;
6
+ }
7
+
8
+ .content-body {
9
+ background: var(--openpress-color-document);
10
+ }
11
+
12
+ h2,
13
+ h3,
14
+ h4 {
15
+ break-after: avoid;
16
+ color: var(--openpress-color-ink);
17
+ letter-spacing: 0.04em;
18
+ }
19
+
20
+ h2 {
21
+ margin: 0 0 var(--openpress-space-4);
22
+ padding: 0;
23
+ font-family: var(--openpress-font-serif);
24
+ font-size: clamp(5.7pt, 3.4cqw, 17pt);
25
+ line-height: 1.45;
26
+ font-weight: 300;
27
+ border: 0;
28
+ }
29
+
30
+ h2::before {
31
+ content: "";
32
+ display: block;
33
+ width: 36px;
34
+ height: 1px;
35
+ background: var(--openpress-color-ink);
36
+ margin-bottom: var(--openpress-space-4);
37
+ }
38
+
39
+ .reader-page--content .page-body > h2:first-child {
40
+ display: flex;
41
+ align-items: baseline;
42
+ gap: 0.55em;
43
+ margin: 0 0 var(--openpress-space-4);
44
+ }
45
+
46
+ .reader-page--content .page-body > h2:first-child::before {
47
+ content: attr(data-chapter);
48
+ display: inline-block;
49
+ flex-shrink: 0;
50
+ font-family: var(--openpress-font-serif);
51
+ font-size: 1.55em;
52
+ font-weight: 300;
53
+ color: var(--openpress-color-muted);
54
+ line-height: 1;
55
+ letter-spacing: 0.06em;
56
+ width: auto;
57
+ min-width: 0;
58
+ height: auto;
59
+ background: transparent;
60
+ padding: 0;
61
+ margin: 0;
62
+ border: 0;
63
+ }
64
+
65
+ .reader-page--content h3[data-section] {
66
+ display: flex;
67
+ align-items: baseline;
68
+ gap: 0.55em;
69
+ }
70
+
71
+ .reader-page--content h3[data-section]::before {
72
+ content: attr(data-section);
73
+ flex-shrink: 0;
74
+ font-family: var(--openpress-font-serif);
75
+ font-size: 0.95em;
76
+ font-weight: 300;
77
+ color: var(--openpress-color-muted);
78
+ letter-spacing: 0.08em;
79
+ line-height: inherit;
80
+ }
81
+
82
+ h2 + p,
83
+ h2 + h3 {
84
+ margin-top: var(--openpress-space-3);
85
+ }
86
+
87
+ h3 {
88
+ margin: var(--openpress-space-3) 0 var(--openpress-space-2);
89
+ font-family: var(--openpress-font-serif);
90
+ font-size: clamp(4.8pt, 2.4cqw, 13pt);
91
+ line-height: 1.55;
92
+ font-weight: 400;
93
+ color: var(--openpress-color-ink);
94
+ letter-spacing: 0.03em;
95
+ }
96
+
97
+ .reader-page--content .page-body > h3:first-child {
98
+ margin-top: 0;
99
+ }
100
+
101
+ h4 {
102
+ margin: var(--openpress-space-3) 0 var(--openpress-space-1);
103
+ font-family: var(--openpress-font-body);
104
+ font-size: clamp(4.4pt, 1.9cqw, 11pt);
105
+ font-weight: 500;
106
+ color: var(--openpress-color-muted);
107
+ letter-spacing: 0.04em;
108
+ }
109
+
110
+ p {
111
+ margin: 0 0 var(--openpress-space-2);
112
+ font-size: clamp(4.2pt, 1.85cqw, 10.5pt);
113
+ line-height: 1.85;
114
+ }
115
+
116
+ .reader-page--content p,
117
+ .reader-page--content li,
118
+ .reader-page--content td {
119
+ hanging-punctuation: first allow-end;
120
+ }
121
+
122
+ .reader-page--content.is-chapter-end .page-body::after {
123
+ content: "―";
124
+ display: block;
125
+ text-align: center;
126
+ margin-top: var(--openpress-space-1);
127
+ color: var(--openpress-color-muted);
128
+ font-size: 1em;
129
+ letter-spacing: 0.4em;
130
+ opacity: 0.45;
131
+ }
132
+
133
+ strong {
134
+ font-weight: 600;
135
+ color: var(--openpress-color-ink);
136
+ }
137
+
138
+ em {
139
+ font-style: italic;
140
+ font-family: var(--openpress-font-serif);
141
+ color: var(--openpress-color-ink);
142
+ }
143
+
144
+ del,
145
+ s {
146
+ color: var(--openpress-color-muted);
147
+ text-decoration-thickness: 1px;
148
+ text-decoration-color: var(--openpress-color-muted);
149
+ }
150
+
151
+ mark {
152
+ background: var(--openpress-chart-gold-bg);
153
+ color: var(--openpress-color-ink);
154
+ padding: 0 0.15em;
155
+ border-radius: 1px;
156
+ }
157
+
158
+ a {
159
+ color: var(--openpress-color-ink);
160
+ text-decoration-line: underline;
161
+ text-decoration-style: dotted;
162
+ text-decoration-color: var(--openpress-color-muted);
163
+ text-underline-offset: 2px;
164
+ }
165
+
166
+ /* Inline 語意強調 — 受控 status 色票
167
+ * Markdown 內用 <span class="status-warn|status-success|status-info">。
168
+ * 不提供 .accent-<color>(按色相命名)以避免破壞語意系統。
169
+ */
170
+ .status-warn {
171
+ color: var(--openpress-status-warn);
172
+ font-weight: 600;
173
+ }
174
+
175
+ .status-success {
176
+ color: var(--openpress-status-success);
177
+ font-weight: 600;
178
+ }
179
+
180
+ .status-info {
181
+ color: var(--openpress-status-info);
182
+ font-weight: 600;
183
+ }
184
+
185
+ .text-muted {
186
+ color: var(--openpress-color-muted);
187
+ }
188
+
189
+ figcaption,
190
+ caption {
191
+ margin-top: 2mm;
192
+ color: var(--openpress-color-muted);
193
+ font-size: clamp(3.8pt, 1.45cqw, 8.5pt);
194
+ line-height: 1.5;
195
+ letter-spacing: 0.02em;
196
+ text-align: center;
197
+ }
198
+
199
+ caption {
200
+ caption-side: bottom;
201
+ margin: var(--openpress-space-1) 0 0;
202
+ text-align: center;
203
+ }
204
+
205
+ ol,
206
+ ul {
207
+ margin: 0 0 var(--openpress-space-3);
208
+ padding-left: 7mm;
209
+ font-size: clamp(4.2pt, 1.85cqw, 10.5pt);
210
+ line-height: 1.85;
211
+ }
212
+
213
+ ol {
214
+ list-style: decimal outside;
215
+ }
216
+
217
+ ul {
218
+ list-style: disc outside;
219
+ }
220
+
221
+ li {
222
+ margin: 0 0 1.4mm;
223
+ padding-left: 1mm;
224
+ }
225
+
226
+ figure {
227
+ break-inside: avoid;
228
+ margin: var(--openpress-space-4) 0 var(--openpress-space-2);
229
+ }
230
+
231
+ figure img {
232
+ display: block;
233
+ max-width: 100%;
234
+ max-height: 135mm;
235
+ margin: 0 auto;
236
+ padding: 6px;
237
+ border: 1px solid var(--openpress-color-line);
238
+ background: #ffffff;
239
+ box-sizing: border-box;
240
+ }
241
+
242
+ .reader-page--content .page-body > figure {
243
+ width: min(86%, 150mm);
244
+ margin-left: auto;
245
+ margin-right: auto;
246
+ }
247
+
248
+ .reader-page--content .page-body > figure img {
249
+ width: 100%;
250
+ max-height: 92mm;
251
+ object-fit: contain;
252
+ }
253
+
254
+ table {
255
+ width: 100%;
256
+ margin: var(--openpress-space-3) 0 var(--openpress-space-4);
257
+ border-collapse: collapse;
258
+ border: 0;
259
+ border-top: 1px solid var(--openpress-color-ink);
260
+ background: transparent;
261
+ font-size: clamp(3.5pt, 1.55cqw, 9pt);
262
+ line-height: var(--openpress-leading-table);
263
+ break-inside: avoid;
264
+ }
265
+
266
+ thead {
267
+ display: table-header-group;
268
+ }
269
+
270
+ th,
271
+ td {
272
+ padding: 3.4mm 2.4mm;
273
+ border: 0;
274
+ border-bottom: 1px solid var(--openpress-color-line);
275
+ vertical-align: top;
276
+ min-width: 0;
277
+ overflow-wrap: anywhere;
278
+ word-break: normal;
279
+ }
280
+
281
+ th {
282
+ color: var(--openpress-color-ink);
283
+ background: transparent;
284
+ border-bottom: 1px solid var(--openpress-color-ink);
285
+ text-align: left;
286
+ font-weight: 500;
287
+ letter-spacing: 0.02em;
288
+ white-space: nowrap;
289
+ }
290
+
291
+ .reader-page--content tbody tr:nth-child(even) td {
292
+ background: #fafafa;
293
+ }
294
+
295
+ .reader-page--content table:not(.figure-grid) tbody tr:last-child td {
296
+ border-bottom: 1px solid var(--openpress-color-ink);
297
+ }
298
+
299
+ code {
300
+ font-family: var(--openpress-font-mono);
301
+ font-size: 0.92em;
302
+ padding: 0.05em 0.25em;
303
+ background: rgba(0, 0, 0, 0.04);
304
+ border-radius: 2px;
305
+ overflow-wrap: anywhere;
306
+ word-break: normal;
307
+ }
308
+
309
+ pre {
310
+ max-width: 100%;
311
+ margin: var(--openpress-space-2) 0 var(--openpress-space-3);
312
+ padding: 2.6mm 3.2mm;
313
+ white-space: pre-wrap;
314
+ overflow-wrap: anywhere;
315
+ word-break: normal;
316
+ background: #f7f7f4;
317
+ border: 0;
318
+ border-top: 1px solid var(--openpress-color-line);
319
+ border-bottom: 1px solid var(--openpress-color-line);
320
+ }
321
+
322
+ pre code {
323
+ display: block;
324
+ padding: 0;
325
+ background: transparent;
326
+ border-radius: 0;
327
+ font-size: clamp(4pt, 1.65cqw, 9.2pt);
328
+ line-height: 1.65;
329
+ color: #262626;
330
+ }
331
+
332
+ hr {
333
+ margin: var(--openpress-space-4) 0;
334
+ border: 0;
335
+ border-top: 1px solid var(--openpress-color-line);
336
+ }
@@ -0,0 +1,3 @@
1
+ /* open-press copies this file to /openpress/fonts.css during export. */
2
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@300;400;600&display=swap");
3
+
@@ -0,0 +1,43 @@
1
+ /* page-surfaces / back-cover
2
+ * Refinements on top of cover.css: back-cover centers its main column and
3
+ * uses a kicker + statement + summary instead of title + tagline + summary.
4
+ */
5
+
6
+ .back-cover-main {
7
+ justify-content: center;
8
+ }
9
+
10
+ .back-cover-kicker {
11
+ margin: 0;
12
+ font-family: var(--openpress-font-serif);
13
+ font-size: clamp(30px, 6.8cqw, 54px);
14
+ font-weight: 300;
15
+ line-height: 1;
16
+ letter-spacing: 0.01em;
17
+ color: var(--openpress-color-ink);
18
+ }
19
+
20
+ .back-cover-statement {
21
+ margin: 0;
22
+ max-width: 84%;
23
+ font-family: var(--openpress-font-body);
24
+ font-size: clamp(11.5pt, 2.05cqw, 14pt);
25
+ font-weight: 400;
26
+ line-height: 1.6;
27
+ letter-spacing: 0.02em;
28
+ color: var(--openpress-color-ink);
29
+ }
30
+
31
+ .back-cover-summary {
32
+ margin: var(--openpress-space-2) 0 0;
33
+ max-width: 90%;
34
+ font-family: var(--openpress-font-body);
35
+ font-size: clamp(9pt, 1.65cqw, 10pt);
36
+ line-height: 1.8;
37
+ color: var(--openpress-color-muted);
38
+ }
39
+
40
+ .back-cover-visual img {
41
+ max-height: 18cqh;
42
+ opacity: 0.9;
43
+ }
@@ -0,0 +1,205 @@
1
+ /* page-surfaces / chapter-opener
2
+ * Optional H2-level divider for book-like documents. Formal reports can omit
3
+ * the `kind: chapter-opener` source page and this surface will not appear.
4
+ */
5
+
6
+ .reader-page--chapter-opener {
7
+ position: relative;
8
+ overflow: hidden;
9
+ background:
10
+ linear-gradient(90deg, rgba(31, 35, 40, 0.08), transparent 42%),
11
+ var(--openpress-color-document);
12
+ }
13
+
14
+ .reader-page--chapter-opener:has(.chapter-opener-illustration) {
15
+ --chapter-opener-bg: #6f9f8a;
16
+ --chapter-opener-ink: #101211;
17
+ --chapter-opener-title: #101211;
18
+ --chapter-opener-paper: var(--openpress-color-document);
19
+ background: var(--chapter-opener-bg);
20
+ }
21
+
22
+ .reader-page--chapter-opener:has(.chapter-opener-tone--sage) {
23
+ --chapter-opener-bg: #6f9f8a;
24
+ --chapter-opener-title: #101211;
25
+ --chapter-opener-paper: var(--openpress-color-document);
26
+ }
27
+
28
+ .reader-page--chapter-opener:has(.chapter-opener-tone--lavender) {
29
+ --chapter-opener-bg: #8680bf;
30
+ --chapter-opener-title: #101211;
31
+ --chapter-opener-paper: var(--openpress-color-document);
32
+ }
33
+
34
+ .reader-page--chapter-opener:has(.chapter-opener-tone--mint) {
35
+ --chapter-opener-bg: #bfd4cd;
36
+ --chapter-opener-title: #101211;
37
+ --chapter-opener-paper: var(--openpress-color-document);
38
+ }
39
+
40
+ .reader-page--chapter-opener:has(.chapter-opener-tone--amber) {
41
+ --chapter-opener-bg: #d7b56d;
42
+ --chapter-opener-title: #101211;
43
+ --chapter-opener-paper: var(--openpress-color-document);
44
+ }
45
+
46
+ .reader-page--chapter-opener::before {
47
+ content: "";
48
+ position: absolute;
49
+ inset: 0 auto 0 0;
50
+ width: 5mm;
51
+ background: color-mix(in srgb, var(--openpress-color-soft-line), transparent 28%);
52
+ border-right: 1px solid var(--openpress-color-line);
53
+ }
54
+
55
+ .reader-page--chapter-opener:has(.chapter-opener-illustration)::before {
56
+ content: none;
57
+ }
58
+
59
+ .reader-page--chapter-opener .page-frame {
60
+ background: transparent;
61
+ }
62
+
63
+ .reader-page--chapter-opener .page-body {
64
+ position: relative;
65
+ display: flex;
66
+ flex-direction: column;
67
+ justify-content: center;
68
+ gap: clamp(20px, 3.4cqw, 40px);
69
+ width: min(138mm, 84%);
70
+ max-width: none;
71
+ min-height: 0;
72
+ margin-inline: auto;
73
+ padding-bottom: 4mm;
74
+ z-index: 1;
75
+ }
76
+
77
+ .reader-page--chapter-opener:has(.chapter-opener-illustration) .page-body {
78
+ justify-content: flex-end;
79
+ align-items: flex-start;
80
+ width: min(168mm, 86%);
81
+ padding-bottom: 28mm;
82
+ gap: clamp(10px, 1.8cqw, 20px);
83
+ z-index: 2;
84
+ }
85
+
86
+ .reader-page--chapter-opener .page-body::before {
87
+ content: none;
88
+ }
89
+
90
+ .reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-body {
91
+ display: contents;
92
+ }
93
+
94
+ .chapter-opener-illustration {
95
+ position: absolute;
96
+ top: 22mm;
97
+ right: 14mm;
98
+ width: min(112mm, 54%);
99
+ margin: 0;
100
+ color: var(--chapter-opener-ink, #101211);
101
+ z-index: 1;
102
+ }
103
+
104
+ .chapter-opener-illustration svg {
105
+ display: block;
106
+ width: 100%;
107
+ height: auto;
108
+ overflow: visible;
109
+ }
110
+
111
+ .chapter-opener-illustration__paper {
112
+ fill: var(--chapter-opener-paper, var(--openpress-color-document));
113
+ }
114
+
115
+ .chapter-opener-illustration__stroke,
116
+ .chapter-opener-illustration__arrow,
117
+ .chapter-opener-illustration__thin {
118
+ fill: none;
119
+ stroke: currentColor;
120
+ stroke-linecap: round;
121
+ stroke-linejoin: round;
122
+ }
123
+
124
+ .chapter-opener-illustration__stroke,
125
+ .chapter-opener-illustration__arrow {
126
+ stroke-width: 14;
127
+ }
128
+
129
+ .chapter-opener-illustration__thin {
130
+ stroke-width: 8;
131
+ }
132
+
133
+ .chapter-opener-illustration__node,
134
+ .chapter-opener-illustration__dot {
135
+ fill: currentColor;
136
+ }
137
+
138
+ .chapter-opener-kicker {
139
+ display: none;
140
+ }
141
+
142
+ .reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-kicker {
143
+ display: inline-flex;
144
+ align-items: center;
145
+ width: fit-content;
146
+ min-height: 8mm;
147
+ margin: 0 0 clamp(4px, 1cqw, 10px);
148
+ padding: 0 7mm;
149
+ border: 1px solid currentColor;
150
+ border-radius: 999px;
151
+ color: var(--chapter-opener-ink, #101211);
152
+ font-size: clamp(10pt, 1.8cqw, 14pt);
153
+ font-weight: 700;
154
+ line-height: 1;
155
+ }
156
+
157
+ .chapter-opener-title {
158
+ max-width: 100%;
159
+ margin: 0;
160
+ color: var(--openpress-color-ink);
161
+ font-family: var(--openpress-font-serif);
162
+ font-size: clamp(36pt, 8.4cqw, 64pt);
163
+ font-weight: 600;
164
+ line-height: 0.98;
165
+ }
166
+
167
+ .reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-title {
168
+ max-width: 118mm;
169
+ color: var(--chapter-opener-title, var(--openpress-color-ink));
170
+ font-size: clamp(52px, 12.4cqw, 112px);
171
+ line-height: 0.92;
172
+ }
173
+
174
+ .chapter-opener-title::before {
175
+ content: none;
176
+ }
177
+
178
+ .chapter-opener-subtitle {
179
+ max-width: 112mm;
180
+ margin: 0;
181
+ color: var(--openpress-color-ink);
182
+ font-size: clamp(18pt, 3.7cqw, 28pt);
183
+ line-height: 1.35;
184
+ }
185
+
186
+ .reader-page--chapter-opener:has(.chapter-opener-illustration) .chapter-opener-subtitle {
187
+ max-width: 100mm;
188
+ color: var(--chapter-opener-title, var(--openpress-color-ink));
189
+ }
190
+
191
+ .chapter-opener-summary {
192
+ max-width: 108mm;
193
+ margin: 0;
194
+ color: var(--openpress-color-muted);
195
+ font-size: clamp(10pt, 1.6cqw, 12pt);
196
+ line-height: 1.7;
197
+ }
198
+
199
+ .chapter-opener-body > :first-child {
200
+ margin-top: 0;
201
+ }
202
+
203
+ .chapter-opener-body > :last-child {
204
+ margin-bottom: 0;
205
+ }