@lemonppt/themes 0.2.0 → 0.2.2

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.
@@ -0,0 +1,3950 @@
1
+ /* lemonPPT - AI-powered presentation generation
2
+ * Copyright (c) 2026 lemonforme
3
+ * SPDX-License-Identifier: AGPL-3.0-or-later
4
+ *
5
+ * theme09「墨韵专色 · 杂志印刷风」样式。
6
+ *
7
+ * 设计契约:
8
+ * 1. 双基底 —— .lp-theme09-sub-paper / .lp-theme09-sub-ink,令牌由 tokens.ts 注入
9
+ * 2. 直角为主 —— 印刷品几乎不用圆角,圆角是本主题的禁忌形态
10
+ * 3. 装饰全部纯 CSS —— 不引入任何外部图片资产(版权安全)
11
+ * 4. 禁止 07/08 骨架语汇 —— 无 kicker / glow-line / eyebrow / section-header
12
+ */
13
+
14
+ /* ════════════════════════════════════════════════════════════════
15
+ * 一、版面容器与基底
16
+ * ════════════════════════════════════════════════════════════════ */
17
+
18
+ .lp-theme09 {
19
+ position: relative;
20
+ width: 1280px;
21
+ height: 720px;
22
+ overflow: hidden;
23
+ box-sizing: border-box;
24
+ background: var(--lp-bg);
25
+ color: var(--lp-ink);
26
+ font-family: var(--lp-font);
27
+ font-size: var(--lp-font-size-body);
28
+ line-height: 1.62;
29
+ -webkit-font-smoothing: antialiased;
30
+ }
31
+
32
+ .lp-theme09 *,
33
+ .lp-theme09 *::before,
34
+ .lp-theme09 *::after {
35
+ box-sizing: border-box;
36
+ }
37
+
38
+ /* 纸底:极淡纤维噪点 + 边缘微暗(模拟纸张翻拍) */
39
+ .lp-theme09-sub-paper {
40
+ background:
41
+ radial-gradient(120% 90% at 50% 0%, var(--lp-bg-gradient-start) 0%, var(--lp-bg) 62%),
42
+ var(--lp-bg);
43
+ }
44
+
45
+ /* 墨底:中心微亮的印墨面 */
46
+ .lp-theme09-sub-ink {
47
+ background:
48
+ radial-gradient(130% 100% at 30% 12%, var(--lp-bg-gradient-start) 0%, var(--lp-bg-gradient-end) 68%),
49
+ var(--lp-bg);
50
+ }
51
+
52
+ /* 纸纤维 / 墨面颗粒 —— 用极细网点叠加,纯 CSS */
53
+ .lp-theme09-grain {
54
+ position: absolute;
55
+ inset: 0;
56
+ pointer-events: none;
57
+ z-index: 0;
58
+ opacity: 0.5;
59
+ background-image: radial-gradient(var(--lp-t9-grain) 0.5px, transparent 0.6px);
60
+ background-size: 3px 3px;
61
+ }
62
+
63
+ /* 版面内容默认层级高于底纹 */
64
+ .lp-theme09 > *:not(.lp-theme09-grain) {
65
+ position: relative;
66
+ z-index: 1;
67
+ }
68
+
69
+ /* 整页强调:专色规线加粗 */
70
+ .lp-theme09-accented .lp-theme09-masthead-bar {
71
+ width: 34px;
72
+ }
73
+
74
+ .lp-theme09-accented .lp-theme09-masthead {
75
+ border-bottom-color: var(--lp-accent);
76
+ }
77
+
78
+ /* ════════════════════════════════════════════════════════════════
79
+ * 二、印刷质感语汇(原创装饰系统,9 种)
80
+ * ════════════════════════════════════════════════════════════════ */
81
+
82
+ /* 1) 网点半调 halftone —— 密度可由 --t9-dot 覆盖 */
83
+ .lp-theme09-halftone {
84
+ background-image: radial-gradient(var(--lp-t9-halftone) 1.6px, transparent 1.7px);
85
+ background-size: var(--lp-t9-dot-size) var(--lp-t9-dot-size);
86
+ }
87
+
88
+ .lp-theme09-halftone-dense {
89
+ background-image: radial-gradient(var(--lp-t9-halftone) 2.1px, transparent 2.2px);
90
+ background-size: 5px 5px;
91
+ }
92
+
93
+ .lp-theme09-halftone-sparse {
94
+ background-image: radial-gradient(var(--lp-t9-halftone) 1.3px, transparent 1.4px);
95
+ background-size: 12px 12px;
96
+ }
97
+
98
+ /* 2) 出血 bleed —— 顶到版面边缘 */
99
+ .lp-theme09-bleed-r { margin-right: calc(-1 * var(--lp-page-pad, 60px)); }
100
+ .lp-theme09-bleed-l { margin-left: calc(-1 * var(--lp-page-pad, 60px)); }
101
+ .lp-theme09-bleed-t { margin-top: calc(-1 * var(--lp-page-pad, 60px)); }
102
+ .lp-theme09-bleed-b { margin-bottom: calc(-1 * var(--lp-page-pad, 60px)); }
103
+
104
+ /* 3) 折页角 dogear —— clip-path 切角 + 内侧折痕 */
105
+ .lp-theme09-dogear {
106
+ position: relative;
107
+ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
108
+ }
109
+
110
+ .lp-theme09-dogear::after {
111
+ content: '';
112
+ position: absolute;
113
+ right: 0;
114
+ bottom: 0;
115
+ width: 22px;
116
+ height: 22px;
117
+ background: linear-gradient(135deg, transparent 50%, var(--lp-t9-rule) 50%);
118
+ pointer-events: none;
119
+ }
120
+
121
+ /* 4) 装订线 gutter —— 中缝双细线 */
122
+ .lp-theme09-gutter {
123
+ position: absolute;
124
+ top: 68px;
125
+ bottom: 62px;
126
+ left: 50%;
127
+ width: 7px;
128
+ transform: translateX(-50%);
129
+ pointer-events: none;
130
+ border-left: 1px solid var(--lp-t9-rule);
131
+ border-right: 1px solid var(--lp-t9-rule);
132
+ background: color-mix(in srgb, var(--lp-ink) 3%, transparent);
133
+ }
134
+
135
+ /* 5) 裁切线 crop mark —— 四角十字 */
136
+ .lp-theme09-cropmarks {
137
+ /* !important 防御:同 masthead/folio,避免被全局规则强制 relative 错位移位 */
138
+ position: absolute !important;
139
+ inset: 0;
140
+ pointer-events: none;
141
+ z-index: 3;
142
+ }
143
+
144
+ .lp-theme09-cropmarks i {
145
+ position: absolute;
146
+ width: 26px;
147
+ height: 26px;
148
+ }
149
+
150
+ .lp-theme09-cropmarks i::before,
151
+ .lp-theme09-cropmarks i::after {
152
+ content: '';
153
+ position: absolute;
154
+ background: var(--lp-t9-crop);
155
+ }
156
+
157
+ .lp-theme09-cropmarks i::before { width: 100%; height: 1px; top: 50%; }
158
+ .lp-theme09-cropmarks i::after { height: 100%; width: 1px; left: 50%; }
159
+ .lp-theme09-cropmarks i:nth-child(1) { top: 16px; left: 16px; }
160
+ .lp-theme09-cropmarks i:nth-child(2) { top: 16px; right: 16px; }
161
+ .lp-theme09-cropmarks i:nth-child(3) { bottom: 16px; left: 16px; }
162
+ .lp-theme09-cropmarks i:nth-child(4) { bottom: 16px; right: 16px; }
163
+
164
+ /* 6) 专色叠印 overprint */
165
+ .lp-theme09-overprint {
166
+ mix-blend-mode: multiply;
167
+ }
168
+
169
+ .lp-theme09-sub-ink .lp-theme09-overprint {
170
+ mix-blend-mode: screen;
171
+ }
172
+
173
+ /* 7) 胶片齿孔 sprocket */
174
+ .lp-theme09-photo.sprockets::before,
175
+ .lp-theme09-photo.sprockets::after {
176
+ content: '';
177
+ position: absolute;
178
+ left: 0;
179
+ right: 0;
180
+ height: 13px;
181
+ z-index: 2;
182
+ background-image: repeating-linear-gradient(
183
+ 90deg,
184
+ var(--lp-ink) 0 7px,
185
+ transparent 7px 17px
186
+ );
187
+ opacity: 0.62;
188
+ pointer-events: none;
189
+ }
190
+
191
+ .lp-theme09-photo.sprockets::before { top: 0; }
192
+ .lp-theme09-photo.sprockets::after { bottom: 0; }
193
+
194
+ /* 8) 胶带 tape */
195
+ .lp-theme09-tape {
196
+ position: absolute;
197
+ top: -11px;
198
+ left: 50%;
199
+ width: 86px;
200
+ height: 24px;
201
+ transform: translateX(-50%) rotate(-2.4deg);
202
+ background: var(--lp-t9-tape);
203
+ border-left: 1px dashed color-mix(in srgb, var(--lp-ink) 18%, transparent);
204
+ border-right: 1px dashed color-mix(in srgb, var(--lp-ink) 18%, transparent);
205
+ z-index: 4;
206
+ pointer-events: none;
207
+ }
208
+
209
+ /* 9) 骑缝章(印章式圆形专色标记) */
210
+ .lp-theme09-chop {
211
+ display: inline-flex;
212
+ align-items: center;
213
+ justify-content: center;
214
+ width: 62px;
215
+ height: 62px;
216
+ border: 2px solid var(--lp-accent);
217
+ color: var(--lp-accent);
218
+ font-family: var(--lp-font-heading);
219
+ font-size: 13px;
220
+ line-height: 1.15;
221
+ text-align: center;
222
+ letter-spacing: 0.06em;
223
+ transform: rotate(-8deg);
224
+ opacity: 0.88;
225
+ }
226
+
227
+ /* 规线 */
228
+ .lp-theme09-rule {
229
+ display: block;
230
+ height: 1px;
231
+ width: 100%;
232
+ background: var(--lp-t9-rule);
233
+ }
234
+
235
+ .lp-theme09-rule.strong {
236
+ height: 2px;
237
+ background: var(--lp-t9-rule-strong);
238
+ }
239
+
240
+ /* ════════════════════════════════════════════════════════════════
241
+ * 三、原语:Masthead 刊头
242
+ * ════════════════════════════════════════════════════════════════ */
243
+
244
+ .lp-theme09-masthead {
245
+ /* !important 防御:全局规则 .lp-theme09 > * 会以更高优先级强制 position:relative,
246
+ 把刊头推离顶部并向右错位;此处必须保持 absolute。 */
247
+ position: absolute !important;
248
+ top: 34px;
249
+ left: 60px;
250
+ right: 60px;
251
+ display: flex;
252
+ align-items: center;
253
+ justify-content: space-between;
254
+ gap: 16px;
255
+ padding-bottom: 10px;
256
+ border-bottom: 1px solid var(--lp-t9-rule);
257
+ z-index: 2;
258
+ }
259
+
260
+ .lp-theme09-masthead.bare {
261
+ border-bottom: none;
262
+ padding-bottom: 0;
263
+ }
264
+
265
+ .lp-theme09-masthead-left {
266
+ display: flex;
267
+ align-items: baseline;
268
+ gap: 12px;
269
+ min-width: 0;
270
+ }
271
+
272
+ .lp-theme09-masthead-bar {
273
+ align-self: center;
274
+ display: block;
275
+ width: 22px;
276
+ height: 4px;
277
+ background: var(--lp-accent);
278
+ flex: none;
279
+ }
280
+
281
+ .lp-theme09-masthead-name {
282
+ font-family: var(--lp-font-heading);
283
+ font-size: 15px;
284
+ font-weight: 600;
285
+ letter-spacing: 0.14em;
286
+ color: var(--lp-ink);
287
+ white-space: nowrap;
288
+ }
289
+
290
+ .lp-theme09-masthead-en {
291
+ font-family: var(--lp-t9-en);
292
+ font-size: 12px;
293
+ font-style: italic;
294
+ letter-spacing: 0.1em;
295
+ color: var(--lp-ink3);
296
+ white-space: nowrap;
297
+ overflow: hidden;
298
+ text-overflow: ellipsis;
299
+ }
300
+
301
+ .lp-theme09-masthead-mark {
302
+ font-family: var(--lp-font-mono);
303
+ font-size: 11px;
304
+ letter-spacing: 0.18em;
305
+ color: var(--lp-ink3);
306
+ white-space: nowrap;
307
+ flex: none;
308
+ }
309
+
310
+ /* ════════════════════════════════════════════════════════════════
311
+ * 四、原语:Folio 骑缝页脚
312
+ * ════════════════════════════════════════════════════════════════ */
313
+
314
+ .lp-theme09-folio {
315
+ /* !important 防御:全局规则 .lp-theme09 > * 会以更高优先级强制 position:relative,
316
+ 使页脚/大数字错位出血;此处必须保持 absolute。 */
317
+ position: absolute !important;
318
+ left: 60px;
319
+ right: 60px;
320
+ bottom: 26px;
321
+ display: flex;
322
+ align-items: center;
323
+ gap: 14px;
324
+ font-family: var(--lp-font-mono);
325
+ font-size: 11px;
326
+ letter-spacing: 0.16em;
327
+ color: var(--lp-ink3);
328
+ z-index: 2;
329
+ }
330
+
331
+ .lp-theme09-folio-left,
332
+ .lp-theme09-folio-right {
333
+ white-space: nowrap;
334
+ overflow: hidden;
335
+ text-overflow: ellipsis;
336
+ max-width: 340px;
337
+ }
338
+
339
+ .lp-theme09-folio-right {
340
+ text-align: right;
341
+ }
342
+
343
+ .lp-theme09-folio-left { flex: 0 1 auto; }
344
+ .lp-theme09-folio-right { flex: 0 1 auto; margin-left: auto; }
345
+
346
+ .lp-theme09-folio-rule {
347
+ flex: 1 1 auto;
348
+ height: 1px;
349
+ min-width: 20px;
350
+ background: var(--lp-t9-rule);
351
+ }
352
+
353
+ .lp-theme09-folio-page {
354
+ flex: none;
355
+ display: inline-flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ min-width: 30px;
359
+ height: 20px;
360
+ padding: 0 7px;
361
+ background: var(--lp-accent);
362
+ color: var(--lp-on-accent);
363
+ font-weight: 700;
364
+ letter-spacing: 0.08em;
365
+ }
366
+
367
+ .lp-theme09-folio.inverse {
368
+ color: color-mix(in srgb, #ffffff 82%, transparent);
369
+ }
370
+
371
+ .lp-theme09-folio.inverse .lp-theme09-folio-rule {
372
+ background: color-mix(in srgb, #ffffff 34%, transparent);
373
+ }
374
+
375
+ /* ════════════════════════════════════════════════════════════════
376
+ * 五、原语:Standfirst 导语
377
+ * ════════════════════════════════════════════════════════════════ */
378
+
379
+ .lp-theme09-standfirst {
380
+ font-family: var(--lp-t9-en);
381
+ font-size: 17px;
382
+ line-height: 1.78;
383
+ color: var(--lp-ink2);
384
+ margin: 0;
385
+ }
386
+
387
+ .lp-theme09-standfirst.dropcap::first-letter {
388
+ float: left;
389
+ font-family: var(--lp-font-heading);
390
+ font-size: 58px;
391
+ line-height: 0.86;
392
+ font-weight: 700;
393
+ color: var(--lp-accent);
394
+ margin: 4px 10px 0 0;
395
+ }
396
+
397
+ .lp-theme09-standfirst.cols-2 {
398
+ column-count: 2;
399
+ column-gap: 30px;
400
+ column-rule: 1px solid var(--lp-t9-rule);
401
+ }
402
+
403
+ .lp-theme09-standfirst.cols-3 {
404
+ column-count: 3;
405
+ column-gap: 26px;
406
+ column-rule: 1px solid var(--lp-t9-rule);
407
+ }
408
+
409
+ /* ════════════════════════════════════════════════════════════════
410
+ * 六、原语:Headline 双语标题
411
+ * ════════════════════════════════════════════════════════════════ */
412
+
413
+ .lp-theme09-headline {
414
+ display: flex;
415
+ flex-direction: column;
416
+ gap: 8px;
417
+ min-width: 0;
418
+ }
419
+
420
+ .lp-theme09-headline-en {
421
+ font-family: var(--lp-t9-en);
422
+ font-size: 13px;
423
+ font-style: italic;
424
+ letter-spacing: 0.2em;
425
+ text-transform: uppercase;
426
+ color: var(--lp-accent);
427
+ }
428
+
429
+ .lp-theme09-headline-cn {
430
+ font-family: var(--lp-font-heading);
431
+ font-weight: 700;
432
+ letter-spacing: 0.01em;
433
+ line-height: 1.16;
434
+ color: var(--lp-ink);
435
+ margin: 0;
436
+ }
437
+
438
+ .lp-theme09-headline.size-display .lp-theme09-headline-cn { font-size: 78px; line-height: 1.06; }
439
+ .lp-theme09-headline.size-large .lp-theme09-headline-cn { font-size: var(--lp-font-size-h1); }
440
+ .lp-theme09-headline.size-medium .lp-theme09-headline-cn { font-size: var(--lp-font-size-h2); }
441
+
442
+ .lp-theme09-headline.vertical {
443
+ flex-direction: row-reverse;
444
+ align-items: flex-start;
445
+ gap: 18px;
446
+ }
447
+
448
+ .lp-theme09-headline.vertical .lp-theme09-headline-cn {
449
+ writing-mode: vertical-rl;
450
+ letter-spacing: 0.16em;
451
+ line-height: 1.1;
452
+ }
453
+
454
+ .lp-theme09-headline.vertical .lp-theme09-headline-en {
455
+ writing-mode: vertical-rl;
456
+ letter-spacing: 0.24em;
457
+ }
458
+
459
+ /* ════════════════════════════════════════════════════════════════
460
+ * 七、原语:ColorBar 印刷色标条
461
+ * ════════════════════════════════════════════════════════════════ */
462
+
463
+ .lp-theme09-colorbar {
464
+ display: flex;
465
+ gap: 3px;
466
+ align-items: stretch;
467
+ }
468
+
469
+ .lp-theme09-colorbar.vertical {
470
+ flex-direction: column;
471
+ width: 18px;
472
+ }
473
+
474
+ .lp-theme09-colorbar-chip {
475
+ position: relative;
476
+ flex: 1 1 0;
477
+ min-width: 18px;
478
+ height: 18px;
479
+ display: block;
480
+ }
481
+
482
+ .lp-theme09-colorbar.vertical .lp-theme09-colorbar-chip {
483
+ width: 100%;
484
+ min-width: 0;
485
+ }
486
+
487
+ .lp-theme09-colorbar-code {
488
+ position: absolute;
489
+ left: 50%;
490
+ bottom: -14px;
491
+ transform: translateX(-50%);
492
+ font-family: var(--lp-font-mono);
493
+ font-size: 8px;
494
+ font-style: normal;
495
+ letter-spacing: 0.04em;
496
+ color: var(--lp-ink3);
497
+ }
498
+
499
+ /* ════════════════════════════════════════════════════════════════
500
+ * 八、原语:InkPhoto 影像位
501
+ * ════════════════════════════════════════════════════════════════ */
502
+
503
+ .lp-theme09-photo {
504
+ position: relative;
505
+ display: block;
506
+ margin: 0;
507
+ overflow: hidden;
508
+ background: color-mix(in srgb, var(--lp-ink) 5%, transparent);
509
+ min-width: 0;
510
+ min-height: 0;
511
+ }
512
+
513
+ .lp-theme09-photo-img {
514
+ display: block;
515
+ width: 100%;
516
+ height: 100%;
517
+ object-fit: cover;
518
+ }
519
+
520
+ .lp-theme09-photo.fit-contain .lp-theme09-photo-img {
521
+ object-fit: contain;
522
+ }
523
+
524
+ /* 空态:印刷占位符 —— 网点底 + 中央十字定位线 + 尺寸标注 */
525
+ .lp-theme09-photo-slot {
526
+ position: absolute;
527
+ inset: 0;
528
+ display: flex;
529
+ flex-direction: column;
530
+ align-items: center;
531
+ justify-content: center;
532
+ gap: 8px;
533
+ cursor: pointer;
534
+ border: 1px solid var(--lp-t9-rule);
535
+ background-color: color-mix(in srgb, var(--lp-ink) 3%, transparent);
536
+ background-image: radial-gradient(var(--lp-t9-halftone) 1.5px, transparent 1.6px);
537
+ background-size: var(--lp-t9-dot-size) var(--lp-t9-dot-size);
538
+ transition: background-color 0.18s ease, border-color 0.18s ease;
539
+ }
540
+
541
+ .lp-theme09-photo-slot:hover {
542
+ border-color: var(--lp-accent);
543
+ background-color: color-mix(in srgb, var(--lp-accent) 7%, transparent);
544
+ }
545
+
546
+ /* 中央十字定位线(印刷套准标记) */
547
+ .lp-theme09-photo-reg {
548
+ position: relative;
549
+ width: 30px;
550
+ height: 30px;
551
+ border: 1px solid color-mix(in srgb, var(--lp-ink) 34%, transparent);
552
+ border-radius: 50%;
553
+ flex: none;
554
+ }
555
+
556
+ .lp-theme09-photo-reg::before,
557
+ .lp-theme09-photo-reg::after {
558
+ content: '';
559
+ position: absolute;
560
+ background: color-mix(in srgb, var(--lp-ink) 40%, transparent);
561
+ }
562
+
563
+ .lp-theme09-photo-reg::before {
564
+ left: 50%;
565
+ top: -8px;
566
+ bottom: -8px;
567
+ width: 1px;
568
+ transform: translateX(-50%);
569
+ }
570
+
571
+ .lp-theme09-photo-reg::after {
572
+ top: 50%;
573
+ left: -8px;
574
+ right: -8px;
575
+ height: 1px;
576
+ transform: translateY(-50%);
577
+ }
578
+
579
+ .lp-theme09-photo-hint {
580
+ font-family: var(--lp-font);
581
+ font-size: 12px;
582
+ letter-spacing: 0.08em;
583
+ color: var(--lp-ink2);
584
+ text-align: center;
585
+ padding: 0 10px;
586
+ }
587
+
588
+ .lp-theme09-photo-spec {
589
+ font-family: var(--lp-font-mono);
590
+ font-size: 9.5px;
591
+ letter-spacing: 0.16em;
592
+ color: var(--lp-ink3);
593
+ }
594
+
595
+ /* 小尺寸图位:隐藏次要空态元素,避免溢出 */
596
+ .lp-theme09-photo.compact .lp-theme09-photo-spec { display: none; }
597
+ .lp-theme09-photo.compact .lp-theme09-photo-reg { width: 20px; height: 20px; }
598
+ .lp-theme09-photo.compact .lp-theme09-photo-hint { font-size: 10.5px; }
599
+
600
+ /* 圆窗 */
601
+ .lp-theme09-photo.aperture {
602
+ border-radius: 50%;
603
+ }
604
+
605
+ .lp-theme09-photo.aperture .lp-theme09-photo-slot {
606
+ border-radius: 50%;
607
+ }
608
+
609
+ /* 网点半调处理(人像) */
610
+ .lp-theme09-photo.halftone .lp-theme09-photo-img {
611
+ filter: grayscale(0.72) contrast(1.14);
612
+ }
613
+
614
+ .lp-theme09-photo.halftone::after {
615
+ content: '';
616
+ position: absolute;
617
+ inset: 0;
618
+ pointer-events: none;
619
+ background-image: radial-gradient(var(--lp-t9-halftone) 1.4px, transparent 1.5px);
620
+ background-size: 5px 5px;
621
+ mix-blend-mode: multiply;
622
+ }
623
+
624
+ /* 压暗蒙版(图上压字) */
625
+ .lp-theme09-photo.scrim-bottom::before,
626
+ .lp-theme09-photo.scrim-full::before {
627
+ content: '';
628
+ position: absolute;
629
+ inset: 0;
630
+ z-index: 1;
631
+ pointer-events: none;
632
+ }
633
+
634
+ .lp-theme09-photo.scrim-bottom::before {
635
+ background: linear-gradient(180deg, rgba(13, 15, 20, 0) 34%, rgba(13, 15, 20, 0.84) 100%);
636
+ }
637
+
638
+ .lp-theme09-photo.scrim-full::before {
639
+ background: rgba(13, 15, 20, 0.62);
640
+ }
641
+
642
+ /* 图上叠加内容 */
643
+ .lp-theme09-photo-overlay {
644
+ position: absolute;
645
+ left: 0;
646
+ right: 0;
647
+ bottom: 0;
648
+ z-index: 2;
649
+ padding: 16px 18px;
650
+ color: var(--lp-ink);
651
+ font-size: 13px;
652
+ line-height: 1.5;
653
+ background: var(--lp-image-overlay);
654
+ }
655
+
656
+ .lp-theme09-photo-overlay .cap-num {
657
+ display: inline-block;
658
+ font-family: var(--lp-font-mono);
659
+ font-size: 10px;
660
+ letter-spacing: 0.16em;
661
+ color: color-mix(in srgb, var(--lp-ink) 80%, transparent);
662
+ margin-bottom: 3px;
663
+ }
664
+
665
+ .lp-theme09-photo-overlay .cap-title {
666
+ display: block;
667
+ font-family: var(--lp-font-heading);
668
+ font-size: 16px;
669
+ font-weight: 600;
670
+ color: var(--lp-ink);
671
+ }
672
+
673
+ /* 图说(图下方,非叠加) */
674
+ .lp-theme09-caption {
675
+ display: flex;
676
+ align-items: baseline;
677
+ gap: 8px;
678
+ margin-top: 7px;
679
+ font-size: 12px;
680
+ line-height: 1.5;
681
+ color: var(--lp-ink3);
682
+ }
683
+
684
+ .lp-theme09-caption-num {
685
+ font-family: var(--lp-font-mono);
686
+ font-size: 10px;
687
+ letter-spacing: 0.12em;
688
+ color: var(--lp-accent);
689
+ flex: none;
690
+ }
691
+
692
+ .lp-theme09-caption-text {
693
+ min-width: 0;
694
+ overflow: hidden;
695
+ text-overflow: ellipsis;
696
+ display: -webkit-box;
697
+ -webkit-line-clamp: 2;
698
+ line-clamp: 2;
699
+ -webkit-box-orient: vertical;
700
+ }
701
+
702
+ /* ════════════════════════════════════════════════════════════════
703
+ * 九、通用文本与内容块
704
+ * ════════════════════════════════════════════════════════════════ */
705
+
706
+ .lp-theme09-body {
707
+ font-size: var(--lp-font-size-body);
708
+ line-height: 1.76;
709
+ color: var(--lp-ink2);
710
+ margin: 0;
711
+ }
712
+
713
+ .lp-theme09-lede {
714
+ font-family: var(--lp-t9-en);
715
+ font-size: 19px;
716
+ line-height: 1.68;
717
+ color: var(--lp-ink);
718
+ margin: 0;
719
+ }
720
+
721
+ .lp-theme09-note {
722
+ font-size: 13px;
723
+ line-height: 1.62;
724
+ color: var(--lp-ink3);
725
+ margin: 0;
726
+ }
727
+
728
+ .lp-theme09-hand {
729
+ font-family: var(--lp-t9-hand);
730
+ font-size: 19px;
731
+ line-height: 1.4;
732
+ color: var(--lp-accent);
733
+ }
734
+
735
+ /* 挂栏(asideTag)—— 主栏右侧的窄栏 */
736
+ .lp-theme09-aside {
737
+ padding-left: 16px;
738
+ border-left: 2px solid var(--lp-accent);
739
+ min-width: 0;
740
+ }
741
+
742
+ .lp-theme09-aside-tag {
743
+ display: inline-block;
744
+ font-family: var(--lp-font-mono);
745
+ font-size: 10px;
746
+ letter-spacing: 0.18em;
747
+ text-transform: uppercase;
748
+ color: var(--lp-accent);
749
+ margin-bottom: 6px;
750
+ }
751
+
752
+ /* 专色徽标(编号 / 序号) */
753
+ .lp-theme09-numeral {
754
+ font-family: var(--lp-t9-en);
755
+ font-size: 12px;
756
+ font-weight: 600;
757
+ letter-spacing: 0.14em;
758
+ color: var(--lp-accent);
759
+ }
760
+
761
+ /* 关键数字 */
762
+ .lp-theme09-figure {
763
+ font-family: var(--lp-font-heading);
764
+ font-weight: 700;
765
+ line-height: 1;
766
+ color: var(--lp-ink);
767
+ font-variant-numeric: tabular-nums;
768
+ }
769
+
770
+ .lp-theme09-figure .unit {
771
+ font-size: 0.42em;
772
+ font-weight: 600;
773
+ margin-left: 3px;
774
+ color: var(--lp-ink3);
775
+ }
776
+
777
+ .lp-theme09-figure.spot { color: var(--lp-accent); }
778
+
779
+ /* 入场动效(与其它主题一致的 lp-rise 约定) */
780
+ .lp-theme09 .lp-rise {
781
+ animation: lp-theme09-rise var(--lp-rise-duration, 0.46s) cubic-bezier(0.22, 0.68, 0.32, 1) both;
782
+ }
783
+
784
+ @keyframes lp-theme09-rise {
785
+ from { opacity: 0; transform: translateY(12px); }
786
+ to { opacity: 1; transform: translateY(0); }
787
+ }
788
+
789
+ @media (prefers-reduced-motion: reduce) {
790
+ .lp-theme09 .lp-rise { animation: none; }
791
+ }
792
+
793
+ /* ════════════════════════════════════════════════════════════════
794
+ * 十、P0 版式
795
+ * ════════════════════════════════════════════════════════════════ */
796
+
797
+ /* ── 1. cover_masthead 刊头封面 ───────────────────────────────── */
798
+
799
+ .lp-theme09-covermast {
800
+ display: flex;
801
+ flex-direction: column;
802
+ padding: 46px 60px 26px;
803
+ }
804
+
805
+ .lp-theme09-covermast-head {
806
+ display: flex;
807
+ align-items: flex-end;
808
+ justify-content: space-between;
809
+ gap: 24px;
810
+ padding-bottom: 14px;
811
+ border-bottom: 3px solid var(--lp-ink);
812
+ }
813
+
814
+ .lp-theme09-covermast-title {
815
+ font-family: var(--lp-font-heading);
816
+ font-size: 66px;
817
+ font-weight: 700;
818
+ line-height: 1;
819
+ letter-spacing: 0.06em;
820
+ color: var(--lp-ink);
821
+ margin: 0;
822
+ min-width: 0;
823
+ }
824
+
825
+ .lp-theme09-covermast-issue {
826
+ font-family: var(--lp-font-mono);
827
+ font-size: 11px;
828
+ letter-spacing: 0.2em;
829
+ color: var(--lp-ink3);
830
+ text-align: right;
831
+ white-space: nowrap;
832
+ padding-bottom: 6px;
833
+ }
834
+
835
+ .lp-theme09-covermast-issue b,
836
+ .lp-theme09-covermast-issue strong {
837
+ display: block;
838
+ font-family: var(--lp-t9-en);
839
+ font-size: 15px;
840
+ font-weight: 600;
841
+ letter-spacing: 0.1em;
842
+ color: var(--lp-accent);
843
+ margin-bottom: 3px;
844
+ }
845
+
846
+ .lp-theme09-covermast-strap {
847
+ display: flex;
848
+ align-items: center;
849
+ gap: 14px;
850
+ padding: 9px 0;
851
+ border-bottom: 1px solid var(--lp-t9-rule);
852
+ font-family: var(--lp-t9-en);
853
+ font-size: 12px;
854
+ font-style: italic;
855
+ letter-spacing: 0.16em;
856
+ color: var(--lp-ink3);
857
+ }
858
+
859
+ .lp-theme09-covermast-body {
860
+ flex: 1;
861
+ display: grid;
862
+ grid-template-columns: 1.35fr 1fr;
863
+ gap: 40px;
864
+ padding-top: 30px;
865
+ min-height: 0;
866
+ }
867
+
868
+ .lp-theme09-covermast-lead {
869
+ display: flex;
870
+ flex-direction: column;
871
+ gap: 18px;
872
+ min-width: 0;
873
+ }
874
+
875
+ .lp-theme09-covermast-kick {
876
+ font-family: var(--lp-font-heading);
877
+ font-size: 40px;
878
+ font-weight: 700;
879
+ line-height: 1.22;
880
+ color: var(--lp-ink);
881
+ margin: 0;
882
+ }
883
+
884
+ .lp-theme09-covermast-kick em {
885
+ font-style: normal;
886
+ color: var(--lp-accent);
887
+ }
888
+
889
+ .lp-theme09-covermast-side {
890
+ display: flex;
891
+ flex-direction: column;
892
+ gap: 14px;
893
+ padding-left: 26px;
894
+ border-left: 1px solid var(--lp-t9-rule);
895
+ min-width: 0;
896
+ }
897
+
898
+ .lp-theme09-covermast-item {
899
+ display: flex;
900
+ gap: 12px;
901
+ align-items: baseline;
902
+ padding-bottom: 11px;
903
+ border-bottom: 1px solid var(--lp-t9-rule);
904
+ }
905
+
906
+ .lp-theme09-covermast-item:last-child { border-bottom: none; }
907
+
908
+ .lp-theme09-covermast-item-no {
909
+ font-family: var(--lp-font-mono);
910
+ font-size: 11px;
911
+ letter-spacing: 0.1em;
912
+ color: var(--lp-accent);
913
+ flex: none;
914
+ }
915
+
916
+ .lp-theme09-covermast-item-txt {
917
+ font-size: 14px;
918
+ line-height: 1.55;
919
+ color: var(--lp-ink2);
920
+ min-width: 0;
921
+ }
922
+
923
+ .lp-theme09-covermast-foot {
924
+ display: flex;
925
+ align-items: center;
926
+ justify-content: space-between;
927
+ gap: 20px;
928
+ padding-top: 14px;
929
+ margin-top: 14px;
930
+ border-top: 1px solid var(--lp-t9-rule);
931
+ }
932
+
933
+ .lp-theme09-covermast-foot .lp-theme09-colorbar { max-width: 260px; }
934
+
935
+ .lp-theme09-covermast-sign {
936
+ font-family: var(--lp-font-mono);
937
+ font-size: 11px;
938
+ letter-spacing: 0.18em;
939
+ color: var(--lp-ink3);
940
+ white-space: nowrap;
941
+ }
942
+
943
+ /* ── 2. cover_bleed 出血斜切封面 ─────────────────────────────── */
944
+
945
+ .lp-theme09-coverbleed {
946
+ padding: 0;
947
+ }
948
+
949
+ .lp-theme09-coverbleed-wedge {
950
+ position: absolute;
951
+ inset: 0;
952
+ background: var(--lp-accent);
953
+ clip-path: polygon(0 0, 46% 0, 26% 100%, 0 100%);
954
+ z-index: 0;
955
+ }
956
+
957
+ .lp-theme09-coverbleed-wedge::after {
958
+ content: '';
959
+ position: absolute;
960
+ inset: 0;
961
+ background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.6px, transparent 1.7px);
962
+ background-size: 9px 9px;
963
+ }
964
+
965
+ .lp-theme09-coverbleed-inner {
966
+ position: relative;
967
+ z-index: 2;
968
+ height: 100%;
969
+ display: grid;
970
+ grid-template-columns: 300px 1fr;
971
+ gap: 44px;
972
+ padding: 56px 62px 30px 56px;
973
+ }
974
+
975
+ .lp-theme09-coverbleed-rail {
976
+ display: flex;
977
+ flex-direction: column;
978
+ justify-content: space-between;
979
+ /* 侧栏实际压在墨底(非专色楔块)上,故用浅墨色保证 WCAG AA 可读,
980
+ 不能用 --lp-on-accent(那是压在专色上的近黑文字)。 */
981
+ color: var(--lp-ink2);
982
+ min-width: 0;
983
+ }
984
+
985
+ .lp-theme09-coverbleed-rail-top {
986
+ font-family: var(--lp-font-mono);
987
+ font-size: 11px;
988
+ letter-spacing: 0.22em;
989
+ color: var(--lp-ink2);
990
+ opacity: 0.92;
991
+ }
992
+
993
+ .lp-theme09-coverbleed-vert {
994
+ writing-mode: vertical-rl;
995
+ font-family: var(--lp-font-heading);
996
+ font-size: 26px;
997
+ font-weight: 700;
998
+ letter-spacing: 0.28em;
999
+ color: var(--lp-ink2);
1000
+ margin: 26px 0;
1001
+ }
1002
+
1003
+ .lp-theme09-coverbleed-rail-foot {
1004
+ font-family: var(--lp-t9-en);
1005
+ font-size: 12px;
1006
+ font-style: italic;
1007
+ letter-spacing: 0.14em;
1008
+ color: var(--lp-ink2);
1009
+ opacity: 0.9;
1010
+ }
1011
+
1012
+ .lp-theme09-coverbleed-main {
1013
+ display: flex;
1014
+ flex-direction: column;
1015
+ justify-content: center;
1016
+ gap: 22px;
1017
+ min-width: 0;
1018
+ padding-right: 10px;
1019
+ }
1020
+
1021
+ .lp-theme09-coverbleed-title {
1022
+ font-family: var(--lp-font-heading);
1023
+ font-size: 74px;
1024
+ font-weight: 700;
1025
+ line-height: 1.08;
1026
+ letter-spacing: 0.02em;
1027
+ color: var(--lp-ink);
1028
+ margin: 0;
1029
+ }
1030
+
1031
+ .lp-theme09-coverbleed-sub {
1032
+ font-family: var(--lp-t9-en);
1033
+ font-size: 18px;
1034
+ line-height: 1.7;
1035
+ color: var(--lp-ink2);
1036
+ max-width: 620px;
1037
+ margin: 0;
1038
+ }
1039
+
1040
+ .lp-theme09-coverbleed-meta {
1041
+ display: flex;
1042
+ gap: 26px;
1043
+ padding-top: 18px;
1044
+ border-top: 1px solid var(--lp-t9-rule);
1045
+ }
1046
+
1047
+ .lp-theme09-coverbleed-meta-item {
1048
+ min-width: 0;
1049
+ }
1050
+
1051
+ .lp-theme09-coverbleed-meta-k {
1052
+ display: block;
1053
+ font-family: var(--lp-font-mono);
1054
+ font-size: 10px;
1055
+ letter-spacing: 0.18em;
1056
+ text-transform: uppercase;
1057
+ color: var(--lp-ink3);
1058
+ margin-bottom: 4px;
1059
+ }
1060
+
1061
+ .lp-theme09-coverbleed-meta-v {
1062
+ display: block;
1063
+ font-family: var(--lp-font-heading);
1064
+ font-size: 17px;
1065
+ font-weight: 600;
1066
+ color: var(--lp-ink);
1067
+ }
1068
+
1069
+ /* ── 3. cover_dossier 卷宗封面 ───────────────────────────────── */
1070
+
1071
+ .lp-theme09-dossier {
1072
+ display: grid;
1073
+ grid-template-columns: 54px 1fr 250px;
1074
+ gap: 0;
1075
+ padding: 0;
1076
+ }
1077
+
1078
+ /* 装订孔列 */
1079
+ .lp-theme09-dossier-punch {
1080
+ position: relative;
1081
+ border-right: 1px solid var(--lp-t9-rule);
1082
+ background: color-mix(in srgb, var(--lp-ink) 3%, transparent);
1083
+ display: flex;
1084
+ flex-direction: column;
1085
+ align-items: center;
1086
+ justify-content: space-around;
1087
+ padding: 74px 0;
1088
+ }
1089
+
1090
+ .lp-theme09-dossier-punch i {
1091
+ display: block;
1092
+ width: 15px;
1093
+ height: 15px;
1094
+ border-radius: 50%;
1095
+ background: var(--lp-bg-gradient-end);
1096
+ box-shadow: inset 0 1px 3px rgba(20, 22, 28, 0.28);
1097
+ border: 1px solid var(--lp-t9-rule);
1098
+ }
1099
+
1100
+ .lp-theme09-dossier-main {
1101
+ display: flex;
1102
+ flex-direction: column;
1103
+ gap: 20px;
1104
+ padding: 62px 40px 34px 44px;
1105
+ min-width: 0;
1106
+ }
1107
+
1108
+ .lp-theme09-dossier-stamp {
1109
+ display: flex;
1110
+ align-items: center;
1111
+ gap: 12px;
1112
+ }
1113
+
1114
+ .lp-theme09-dossier-classif {
1115
+ display: inline-block;
1116
+ padding: 4px 12px;
1117
+ border: 1.5px solid var(--lp-accent);
1118
+ font-family: var(--lp-font-mono);
1119
+ font-size: 11px;
1120
+ font-weight: 700;
1121
+ letter-spacing: 0.24em;
1122
+ color: var(--lp-accent);
1123
+ text-transform: uppercase;
1124
+ }
1125
+
1126
+ .lp-theme09-dossier-title {
1127
+ font-family: var(--lp-font-heading);
1128
+ font-size: 56px;
1129
+ font-weight: 700;
1130
+ line-height: 1.12;
1131
+ color: var(--lp-ink);
1132
+ margin: 0;
1133
+ }
1134
+
1135
+ .lp-theme09-dossier-sub {
1136
+ font-family: var(--lp-t9-en);
1137
+ font-size: 17px;
1138
+ line-height: 1.7;
1139
+ color: var(--lp-ink2);
1140
+ margin: 0;
1141
+ max-width: 560px;
1142
+ }
1143
+
1144
+ .lp-theme09-dossier-fields {
1145
+ display: grid;
1146
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1147
+ gap: 12px 30px;
1148
+ margin-top: auto;
1149
+ padding-top: 20px;
1150
+ border-top: 2px solid var(--lp-ink);
1151
+ }
1152
+
1153
+ .lp-theme09-dossier-field {
1154
+ display: flex;
1155
+ align-items: baseline;
1156
+ gap: 10px;
1157
+ min-width: 0;
1158
+ padding-bottom: 7px;
1159
+ border-bottom: 1px dotted var(--lp-t9-rule);
1160
+ }
1161
+
1162
+ .lp-theme09-dossier-field-k {
1163
+ font-family: var(--lp-font-mono);
1164
+ font-size: 10px;
1165
+ letter-spacing: 0.16em;
1166
+ text-transform: uppercase;
1167
+ color: var(--lp-ink3);
1168
+ flex: none;
1169
+ min-width: 74px;
1170
+ }
1171
+
1172
+ .lp-theme09-dossier-field-v {
1173
+ font-size: 14px;
1174
+ color: var(--lp-ink);
1175
+ min-width: 0;
1176
+ overflow: hidden;
1177
+ text-overflow: ellipsis;
1178
+ white-space: nowrap;
1179
+ }
1180
+
1181
+ .lp-theme09-dossier-side {
1182
+ position: relative;
1183
+ display: flex;
1184
+ flex-direction: column;
1185
+ align-items: flex-start;
1186
+ gap: 22px;
1187
+ padding: 62px 34px 34px 30px;
1188
+ border-left: 1px solid var(--lp-t9-rule);
1189
+ background: color-mix(in srgb, var(--lp-ink) 2%, transparent);
1190
+ min-width: 0;
1191
+ }
1192
+
1193
+ .lp-theme09-dossier-memo {
1194
+ font-family: var(--lp-t9-hand);
1195
+ font-size: 21px;
1196
+ line-height: 1.38;
1197
+ color: var(--lp-accent);
1198
+ transform: rotate(-1.6deg);
1199
+ }
1200
+
1201
+ .lp-theme09-dossier-meta {
1202
+ margin-top: auto;
1203
+ font-family: var(--lp-font-mono);
1204
+ font-size: 10px;
1205
+ letter-spacing: 0.14em;
1206
+ line-height: 2;
1207
+ color: var(--lp-ink3);
1208
+ }
1209
+
1210
+ /* ── 4. cover_colorbar 色标封面 ──────────────────────────────── */
1211
+
1212
+ .lp-theme09-covercb {
1213
+ display: flex;
1214
+ flex-direction: column;
1215
+ padding: 54px 60px 28px;
1216
+ }
1217
+
1218
+ .lp-theme09-covercb-grid {
1219
+ display: grid;
1220
+ grid-template-columns: repeat(8, 1fr);
1221
+ gap: 5px;
1222
+ margin-bottom: 34px;
1223
+ }
1224
+
1225
+ .lp-theme09-covercb-cell {
1226
+ height: 46px;
1227
+ position: relative;
1228
+ }
1229
+
1230
+ .lp-theme09-covercb-cell span {
1231
+ position: absolute;
1232
+ left: 3px;
1233
+ bottom: 3px;
1234
+ font-family: var(--lp-font-mono);
1235
+ font-size: 8px;
1236
+ letter-spacing: 0.04em;
1237
+ color: rgba(255, 255, 255, 0.82);
1238
+ }
1239
+
1240
+ .lp-theme09-covercb-main {
1241
+ flex: 1;
1242
+ display: grid;
1243
+ grid-template-columns: 1fr 300px;
1244
+ gap: 46px;
1245
+ align-content: center;
1246
+ min-height: 0;
1247
+ }
1248
+
1249
+ .lp-theme09-covercb-title {
1250
+ font-family: var(--lp-font-heading);
1251
+ font-size: 82px;
1252
+ font-weight: 700;
1253
+ line-height: 1.06;
1254
+ letter-spacing: 0.02em;
1255
+ color: var(--lp-ink);
1256
+ margin: 0 0 20px;
1257
+ }
1258
+
1259
+ .lp-theme09-covercb-sub {
1260
+ font-family: var(--lp-t9-en);
1261
+ font-size: 18px;
1262
+ line-height: 1.72;
1263
+ color: var(--lp-ink2);
1264
+ margin: 0;
1265
+ max-width: 600px;
1266
+ }
1267
+
1268
+ .lp-theme09-covercb-specs {
1269
+ display: flex;
1270
+ flex-direction: column;
1271
+ gap: 0;
1272
+ align-self: center;
1273
+ border-top: 2px solid var(--lp-ink);
1274
+ min-width: 0;
1275
+ }
1276
+
1277
+ .lp-theme09-covercb-spec {
1278
+ display: flex;
1279
+ align-items: baseline;
1280
+ justify-content: space-between;
1281
+ gap: 14px;
1282
+ padding: 11px 0;
1283
+ border-bottom: 1px solid var(--lp-t9-rule);
1284
+ }
1285
+
1286
+ .lp-theme09-covercb-spec-k {
1287
+ font-family: var(--lp-font-mono);
1288
+ font-size: 10px;
1289
+ letter-spacing: 0.16em;
1290
+ text-transform: uppercase;
1291
+ color: var(--lp-ink3);
1292
+ }
1293
+
1294
+ .lp-theme09-covercb-spec-v {
1295
+ font-family: var(--lp-font-heading);
1296
+ font-size: 16px;
1297
+ font-weight: 600;
1298
+ color: var(--lp-ink);
1299
+ text-align: right;
1300
+ min-width: 0;
1301
+ }
1302
+
1303
+ .lp-theme09-covercb-foot {
1304
+ display: flex;
1305
+ align-items: center;
1306
+ justify-content: space-between;
1307
+ gap: 20px;
1308
+ padding-top: 16px;
1309
+ border-top: 1px solid var(--lp-t9-rule);
1310
+ font-family: var(--lp-font-mono);
1311
+ font-size: 11px;
1312
+ letter-spacing: 0.18em;
1313
+ color: var(--lp-ink3);
1314
+ }
1315
+
1316
+ /* ── 5. cover_aperture 圆窗封面 ──────────────────────────────── */
1317
+
1318
+ .lp-theme09-coverap {
1319
+ display: grid;
1320
+ grid-template-columns: 1fr 460px;
1321
+ gap: 40px;
1322
+ padding: 62px 60px 30px;
1323
+ align-items: center;
1324
+ }
1325
+
1326
+ .lp-theme09-coverap-text {
1327
+ display: flex;
1328
+ flex-direction: column;
1329
+ gap: 20px;
1330
+ min-width: 0;
1331
+ }
1332
+
1333
+ .lp-theme09-coverap-tag {
1334
+ display: inline-flex;
1335
+ align-items: center;
1336
+ gap: 10px;
1337
+ font-family: var(--lp-font-mono);
1338
+ font-size: 11px;
1339
+ letter-spacing: 0.22em;
1340
+ text-transform: uppercase;
1341
+ color: var(--lp-accent);
1342
+ }
1343
+
1344
+ .lp-theme09-coverap-tag::before {
1345
+ content: '';
1346
+ width: 26px;
1347
+ height: 2px;
1348
+ background: var(--lp-accent);
1349
+ }
1350
+
1351
+ .lp-theme09-coverap-title {
1352
+ font-family: var(--lp-font-heading);
1353
+ font-size: 68px;
1354
+ font-weight: 700;
1355
+ line-height: 1.1;
1356
+ color: var(--lp-ink);
1357
+ margin: 0;
1358
+ }
1359
+
1360
+ .lp-theme09-coverap-sub {
1361
+ font-family: var(--lp-t9-en);
1362
+ font-size: 17px;
1363
+ line-height: 1.74;
1364
+ color: var(--lp-ink2);
1365
+ margin: 0;
1366
+ max-width: 540px;
1367
+ }
1368
+
1369
+ .lp-theme09-coverap-tags {
1370
+ display: flex;
1371
+ flex-wrap: wrap;
1372
+ gap: 8px;
1373
+ margin-top: 4px;
1374
+ }
1375
+
1376
+ .lp-theme09-coverap-tags span {
1377
+ padding: 4px 12px;
1378
+ border: 1px solid var(--lp-border-strong);
1379
+ font-size: 12px;
1380
+ letter-spacing: 0.08em;
1381
+ color: var(--lp-ink2);
1382
+ }
1383
+
1384
+ .lp-theme09-coverap-window {
1385
+ position: relative;
1386
+ width: 420px;
1387
+ height: 420px;
1388
+ justify-self: center;
1389
+ }
1390
+
1391
+ /* 窗外网点渐变 */
1392
+ .lp-theme09-coverap-window::before {
1393
+ content: '';
1394
+ position: absolute;
1395
+ inset: -34px;
1396
+ background-image: radial-gradient(var(--lp-t9-halftone) 2px, transparent 2.1px);
1397
+ background-size: 11px 11px;
1398
+ -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 46%, #000 70%);
1399
+ mask-image: radial-gradient(circle at 50% 50%, transparent 46%, #000 70%);
1400
+ pointer-events: none;
1401
+ }
1402
+
1403
+ .lp-theme09-coverap-window .lp-theme09-photo {
1404
+ width: 100%;
1405
+ height: 100%;
1406
+ }
1407
+
1408
+ .lp-theme09-coverap-ring {
1409
+ position: absolute;
1410
+ inset: -14px;
1411
+ border: 1px solid var(--lp-accent);
1412
+ border-radius: 50%;
1413
+ pointer-events: none;
1414
+ }
1415
+
1416
+ /* ── 6. cover_colophon 版本页封面 ────────────────────────────── */
1417
+
1418
+ .lp-theme09-colophon {
1419
+ display: flex;
1420
+ flex-direction: column;
1421
+ padding: 58px 60px 28px;
1422
+ }
1423
+
1424
+ .lp-theme09-colophon-top {
1425
+ display: flex;
1426
+ align-items: flex-start;
1427
+ justify-content: space-between;
1428
+ gap: 30px;
1429
+ padding-bottom: 22px;
1430
+ border-bottom: 3px double var(--lp-ink);
1431
+ }
1432
+
1433
+ .lp-theme09-colophon-title {
1434
+ font-family: var(--lp-font-heading);
1435
+ font-size: 52px;
1436
+ font-weight: 700;
1437
+ line-height: 1.14;
1438
+ color: var(--lp-ink);
1439
+ margin: 0;
1440
+ min-width: 0;
1441
+ }
1442
+
1443
+ .lp-theme09-colophon-en {
1444
+ font-family: var(--lp-t9-en);
1445
+ font-size: 13px;
1446
+ font-style: italic;
1447
+ letter-spacing: 0.14em;
1448
+ color: var(--lp-ink3);
1449
+ text-align: right;
1450
+ white-space: nowrap;
1451
+ padding-top: 8px;
1452
+ }
1453
+
1454
+ .lp-theme09-colophon-cols {
1455
+ flex: 1;
1456
+ display: grid;
1457
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1458
+ gap: 0;
1459
+ padding-top: 24px;
1460
+ min-height: 0;
1461
+ }
1462
+
1463
+ .lp-theme09-colophon-col {
1464
+ padding: 0 20px;
1465
+ border-right: 1px solid var(--lp-t9-rule);
1466
+ min-width: 0;
1467
+ }
1468
+
1469
+ .lp-theme09-colophon-col:first-child { padding-left: 0; }
1470
+ .lp-theme09-colophon-col:last-child { border-right: none; padding-right: 0; }
1471
+
1472
+ .lp-theme09-colophon-h {
1473
+ font-family: var(--lp-font-mono);
1474
+ font-size: 10px;
1475
+ letter-spacing: 0.2em;
1476
+ text-transform: uppercase;
1477
+ color: var(--lp-accent);
1478
+ padding-bottom: 8px;
1479
+ margin-bottom: 12px;
1480
+ border-bottom: 1px solid var(--lp-t9-rule);
1481
+ }
1482
+
1483
+ .lp-theme09-colophon-line {
1484
+ display: block;
1485
+ font-size: 13px;
1486
+ line-height: 1.85;
1487
+ color: var(--lp-ink2);
1488
+ overflow: hidden;
1489
+ text-overflow: ellipsis;
1490
+ }
1491
+
1492
+ .lp-theme09-colophon-line b,
1493
+ .lp-theme09-colophon-line strong {
1494
+ color: var(--lp-ink);
1495
+ font-weight: 600;
1496
+ }
1497
+
1498
+ .lp-theme09-colophon-foot {
1499
+ display: flex;
1500
+ align-items: center;
1501
+ justify-content: space-between;
1502
+ gap: 22px;
1503
+ padding-top: 16px;
1504
+ margin-top: 18px;
1505
+ border-top: 1px solid var(--lp-t9-rule);
1506
+ }
1507
+
1508
+ /* ── 7. cover_photo 影像封面 ─────────────────────────────────── */
1509
+
1510
+ .lp-theme09-coverphoto {
1511
+ padding: 0;
1512
+ }
1513
+
1514
+ .lp-theme09-coverphoto .lp-theme09-photo {
1515
+ position: absolute;
1516
+ inset: 0;
1517
+ width: 100%;
1518
+ height: 100%;
1519
+ z-index: 0;
1520
+ }
1521
+
1522
+ .lp-theme09-coverphoto-inner {
1523
+ position: relative;
1524
+ z-index: 2;
1525
+ height: 100%;
1526
+ display: flex;
1527
+ flex-direction: column;
1528
+ justify-content: flex-end;
1529
+ padding: 56px 60px 30px;
1530
+ /* 让空区域点击穿透到下方满版影像(上传图位);文字本身仍可编辑 */
1531
+ pointer-events: none;
1532
+ }
1533
+
1534
+ .lp-theme09-coverphoto-strip,
1535
+ .lp-theme09-coverphoto-title,
1536
+ .lp-theme09-coverphoto-sub,
1537
+ .lp-theme09-coverphoto-meta {
1538
+ pointer-events: auto;
1539
+ }
1540
+
1541
+ .lp-theme09-coverphoto-strip {
1542
+ align-self: flex-start;
1543
+ display: inline-flex;
1544
+ align-items: center;
1545
+ gap: 12px;
1546
+ padding: 7px 16px;
1547
+ background: var(--lp-accent);
1548
+ color: var(--lp-on-accent);
1549
+ font-family: var(--lp-font-mono);
1550
+ font-size: 11px;
1551
+ letter-spacing: 0.22em;
1552
+ text-transform: uppercase;
1553
+ margin-bottom: 20px;
1554
+ }
1555
+
1556
+ .lp-theme09-coverphoto-title {
1557
+ font-family: var(--lp-font-heading);
1558
+ font-size: 76px;
1559
+ font-weight: 700;
1560
+ line-height: 1.08;
1561
+ color: #ffffff;
1562
+ margin: 0 0 16px;
1563
+ max-width: 900px;
1564
+ text-shadow: 0 2px 26px rgba(0, 0, 0, 0.42);
1565
+ }
1566
+
1567
+ .lp-theme09-coverphoto-sub {
1568
+ font-family: var(--lp-t9-en);
1569
+ font-size: 18px;
1570
+ line-height: 1.68;
1571
+ color: rgba(255, 255, 255, 0.9);
1572
+ margin: 0 0 26px;
1573
+ max-width: 700px;
1574
+ text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
1575
+ }
1576
+
1577
+ .lp-theme09-coverphoto-meta {
1578
+ display: flex;
1579
+ align-items: center;
1580
+ gap: 22px;
1581
+ padding-top: 16px;
1582
+ border-top: 1px solid rgba(255, 255, 255, 0.28);
1583
+ font-family: var(--lp-font-mono);
1584
+ font-size: 11px;
1585
+ letter-spacing: 0.18em;
1586
+ color: rgba(255, 255, 255, 0.86);
1587
+ }
1588
+
1589
+ .lp-theme09-coverphoto-meta i {
1590
+ font-style: normal;
1591
+ color: rgba(255, 255, 255, 0.55);
1592
+ }
1593
+
1594
+ /* ── 8. abstract 卷首摘要 ────────────────────────────────────── */
1595
+
1596
+ .lp-theme09-abstract {
1597
+ display: flex;
1598
+ flex-direction: column;
1599
+ padding: 88px 60px 62px;
1600
+ }
1601
+
1602
+ .lp-theme09-abstract-body {
1603
+ flex: 1;
1604
+ display: grid;
1605
+ grid-template-columns: 1fr 268px;
1606
+ gap: 38px;
1607
+ min-height: 0;
1608
+ padding-top: 8px;
1609
+ }
1610
+
1611
+ .lp-theme09-abstract-main {
1612
+ display: flex;
1613
+ flex-direction: column;
1614
+ gap: 16px;
1615
+ min-width: 0;
1616
+ min-height: 0;
1617
+ }
1618
+
1619
+ .lp-theme09-abstract-title {
1620
+ font-family: var(--lp-font-heading);
1621
+ font-size: 38px;
1622
+ font-weight: 700;
1623
+ line-height: 1.2;
1624
+ color: var(--lp-ink);
1625
+ margin: 0;
1626
+ }
1627
+
1628
+ .lp-theme09-abstract-cols {
1629
+ flex: 1;
1630
+ min-height: 0;
1631
+ overflow: hidden;
1632
+ }
1633
+
1634
+ .lp-theme09-abstract-figures {
1635
+ display: flex;
1636
+ flex-direction: column;
1637
+ gap: 0;
1638
+ padding-left: 26px;
1639
+ border-left: 2px solid var(--lp-accent);
1640
+ min-width: 0;
1641
+ }
1642
+
1643
+ .lp-theme09-abstract-fig {
1644
+ padding: 13px 0;
1645
+ border-bottom: 1px solid var(--lp-t9-rule);
1646
+ }
1647
+
1648
+ .lp-theme09-abstract-fig:last-child { border-bottom: none; }
1649
+
1650
+ .lp-theme09-abstract-fig-v {
1651
+ display: block;
1652
+ font-family: var(--lp-font-heading);
1653
+ font-size: 38px;
1654
+ font-weight: 700;
1655
+ line-height: 1;
1656
+ color: var(--lp-ink);
1657
+ font-variant-numeric: tabular-nums;
1658
+ }
1659
+
1660
+ .lp-theme09-abstract-fig-v .unit {
1661
+ font-size: 0.42em;
1662
+ color: var(--lp-accent);
1663
+ margin-left: 3px;
1664
+ }
1665
+
1666
+ .lp-theme09-abstract-fig-k {
1667
+ display: block;
1668
+ font-size: 12px;
1669
+ letter-spacing: 0.06em;
1670
+ color: var(--lp-ink3);
1671
+ margin-top: 5px;
1672
+ }
1673
+
1674
+ /* ── 9. contents 目录 ────────────────────────────────────────── */
1675
+
1676
+ .lp-theme09-contents {
1677
+ display: flex;
1678
+ flex-direction: column;
1679
+ padding: 88px 60px 62px;
1680
+ }
1681
+
1682
+ .lp-theme09-contents-head {
1683
+ display: flex;
1684
+ align-items: baseline;
1685
+ justify-content: space-between;
1686
+ gap: 20px;
1687
+ padding-bottom: 14px;
1688
+ border-bottom: 2px solid var(--lp-ink);
1689
+ margin-bottom: 20px;
1690
+ }
1691
+
1692
+ .lp-theme09-contents-title {
1693
+ font-family: var(--lp-font-heading);
1694
+ font-size: 40px;
1695
+ font-weight: 700;
1696
+ line-height: 1;
1697
+ color: var(--lp-ink);
1698
+ margin: 0;
1699
+ }
1700
+
1701
+ .lp-theme09-contents-en {
1702
+ font-family: var(--lp-t9-en);
1703
+ font-size: 14px;
1704
+ font-style: italic;
1705
+ letter-spacing: 0.2em;
1706
+ color: var(--lp-ink3);
1707
+ }
1708
+
1709
+ .lp-theme09-contents-grid {
1710
+ flex: 1;
1711
+ display: grid;
1712
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1713
+ gap: 0 46px;
1714
+ align-content: start;
1715
+ min-height: 0;
1716
+ overflow: hidden;
1717
+ }
1718
+
1719
+ .lp-theme09-contents-item {
1720
+ display: flex;
1721
+ align-items: baseline;
1722
+ gap: 12px;
1723
+ padding: 11px 0;
1724
+ border-bottom: 1px solid var(--lp-t9-rule);
1725
+ min-width: 0;
1726
+ }
1727
+
1728
+ .lp-theme09-contents-no {
1729
+ font-family: var(--lp-font-mono);
1730
+ font-size: 12px;
1731
+ letter-spacing: 0.08em;
1732
+ color: var(--lp-ink3);
1733
+ flex: none;
1734
+ min-width: 26px;
1735
+ }
1736
+
1737
+ .lp-theme09-contents-name {
1738
+ font-family: var(--lp-font-heading);
1739
+ font-size: 17px;
1740
+ font-weight: 600;
1741
+ color: var(--lp-ink);
1742
+ white-space: nowrap;
1743
+ overflow: hidden;
1744
+ text-overflow: ellipsis;
1745
+ min-width: 0;
1746
+ }
1747
+
1748
+ .lp-theme09-contents-desc {
1749
+ font-size: 12px;
1750
+ color: var(--lp-ink3);
1751
+ white-space: nowrap;
1752
+ overflow: hidden;
1753
+ text-overflow: ellipsis;
1754
+ min-width: 0;
1755
+ flex: 1 1 auto;
1756
+ }
1757
+
1758
+ .lp-theme09-contents-dots {
1759
+ flex: 1 1 12px;
1760
+ min-width: 12px;
1761
+ height: 1px;
1762
+ align-self: center;
1763
+ background-image: linear-gradient(90deg, var(--lp-t9-rule) 0 2px, transparent 2px 6px);
1764
+ background-size: 6px 1px;
1765
+ }
1766
+
1767
+ .lp-theme09-contents-page {
1768
+ font-family: var(--lp-font-mono);
1769
+ font-size: 12px;
1770
+ color: var(--lp-ink2);
1771
+ flex: none;
1772
+ }
1773
+
1774
+ .lp-theme09-contents-item.current .lp-theme09-contents-name { color: var(--lp-accent); }
1775
+ .lp-theme09-contents-item.current .lp-theme09-contents-no { color: var(--lp-accent); }
1776
+ .lp-theme09-contents-item.current { border-bottom-color: var(--lp-accent); }
1777
+
1778
+ /* ── 10. section 篇章扉页 ────────────────────────────────────── */
1779
+
1780
+ .lp-theme09-section {
1781
+ padding: 0;
1782
+ display: flex;
1783
+ flex-direction: column;
1784
+ align-items: stretch;
1785
+ }
1786
+
1787
+ .lp-theme09-section-num {
1788
+ /* !important 同上:防御全局规则强制 position:relative 导致的出血错位 */
1789
+ position: absolute !important;
1790
+ left: -30px;
1791
+ bottom: -84px;
1792
+ font-family: var(--lp-t9-en);
1793
+ font-size: 420px;
1794
+ font-weight: 700;
1795
+ line-height: 0.78;
1796
+ color: var(--lp-accent);
1797
+ opacity: 0.9;
1798
+ z-index: 0;
1799
+ letter-spacing: -0.04em;
1800
+ pointer-events: none;
1801
+ }
1802
+
1803
+ .lp-theme09-section-inner {
1804
+ position: relative;
1805
+ z-index: 2;
1806
+ flex: 1 1 auto;
1807
+ display: grid;
1808
+ grid-template-columns: 1fr auto;
1809
+ gap: 46px;
1810
+ width: 100%;
1811
+ min-width: 0;
1812
+ padding: 70px 62px 34px;
1813
+ align-items: center;
1814
+ }
1815
+
1816
+ .lp-theme09-section-text {
1817
+ display: flex;
1818
+ flex-direction: column;
1819
+ gap: 18px;
1820
+ min-width: 0;
1821
+ padding-left: 300px;
1822
+ }
1823
+
1824
+ .lp-theme09-section-en {
1825
+ font-family: var(--lp-t9-en);
1826
+ font-size: 14px;
1827
+ font-style: italic;
1828
+ letter-spacing: 0.24em;
1829
+ text-transform: uppercase;
1830
+ color: var(--lp-accent);
1831
+ }
1832
+
1833
+ .lp-theme09-section-lede {
1834
+ font-family: var(--lp-t9-en);
1835
+ font-size: 17px;
1836
+ line-height: 1.76;
1837
+ color: var(--lp-ink2);
1838
+ margin: 0;
1839
+ max-width: 520px;
1840
+ }
1841
+
1842
+ .lp-theme09-section-points {
1843
+ display: flex;
1844
+ flex-direction: column;
1845
+ gap: 9px;
1846
+ margin-top: 6px;
1847
+ }
1848
+
1849
+ .lp-theme09-section-point {
1850
+ display: flex;
1851
+ align-items: baseline;
1852
+ gap: 11px;
1853
+ font-size: 14px;
1854
+ color: var(--lp-ink2);
1855
+ min-width: 0;
1856
+ }
1857
+
1858
+ .lp-theme09-section-point::before {
1859
+ content: '';
1860
+ width: 14px;
1861
+ height: 1px;
1862
+ background: var(--lp-accent);
1863
+ flex: none;
1864
+ transform: translateY(-4px);
1865
+ }
1866
+
1867
+ .lp-theme09-section-vert {
1868
+ writing-mode: vertical-rl;
1869
+ font-family: var(--lp-font-heading);
1870
+ font-size: 56px;
1871
+ font-weight: 700;
1872
+ letter-spacing: 0.24em;
1873
+ line-height: 1;
1874
+ color: var(--lp-ink);
1875
+ margin: 0;
1876
+ align-self: center;
1877
+ max-height: 100%;
1878
+ }
1879
+
1880
+ /* ── 11. section_card 篇章卡 ─────────────────────────────────── */
1881
+
1882
+ .lp-theme09-seccard {
1883
+ display: flex;
1884
+ flex-direction: column;
1885
+ padding: 84px 60px 62px;
1886
+ }
1887
+
1888
+ .lp-theme09-seccard-body {
1889
+ flex: 1;
1890
+ display: grid;
1891
+ grid-template-columns: 356px 1fr;
1892
+ gap: 40px;
1893
+ align-items: center;
1894
+ min-height: 0;
1895
+ }
1896
+
1897
+ .lp-theme09-seccard-card {
1898
+ position: relative;
1899
+ padding: 34px 30px 30px;
1900
+ background: var(--lp-surface-solid);
1901
+ border: 1px solid var(--lp-border);
1902
+ box-shadow: var(--lp-shadow-sm);
1903
+ min-width: 0;
1904
+ }
1905
+
1906
+ .lp-theme09-seccard-card::before {
1907
+ content: '';
1908
+ position: absolute;
1909
+ top: 0;
1910
+ left: 0;
1911
+ right: 0;
1912
+ height: 5px;
1913
+ background: var(--lp-accent);
1914
+ }
1915
+
1916
+ .lp-theme09-seccard-no {
1917
+ font-family: var(--lp-t9-en);
1918
+ font-size: 68px;
1919
+ font-weight: 700;
1920
+ line-height: 0.9;
1921
+ color: var(--lp-accent);
1922
+ display: block;
1923
+ margin-bottom: 12px;
1924
+ }
1925
+
1926
+ .lp-theme09-seccard-name {
1927
+ font-family: var(--lp-font-heading);
1928
+ font-size: 28px;
1929
+ font-weight: 700;
1930
+ line-height: 1.26;
1931
+ color: var(--lp-ink);
1932
+ margin: 0 0 10px;
1933
+ }
1934
+
1935
+ .lp-theme09-seccard-en {
1936
+ font-family: var(--lp-t9-en);
1937
+ font-size: 12px;
1938
+ font-style: italic;
1939
+ letter-spacing: 0.16em;
1940
+ text-transform: uppercase;
1941
+ color: var(--lp-ink3);
1942
+ }
1943
+
1944
+ .lp-theme09-seccard-points {
1945
+ display: flex;
1946
+ flex-direction: column;
1947
+ gap: 0;
1948
+ min-width: 0;
1949
+ }
1950
+
1951
+ .lp-theme09-seccard-point {
1952
+ display: grid;
1953
+ grid-template-columns: 44px 1fr;
1954
+ gap: 16px;
1955
+ padding: 18px 0;
1956
+ border-bottom: 1px solid var(--lp-t9-rule);
1957
+ align-items: baseline;
1958
+ min-width: 0;
1959
+ }
1960
+
1961
+ .lp-theme09-seccard-point:first-child { border-top: 2px solid var(--lp-ink); }
1962
+
1963
+ .lp-theme09-seccard-point-no {
1964
+ font-family: var(--lp-font-mono);
1965
+ font-size: 12px;
1966
+ letter-spacing: 0.1em;
1967
+ color: var(--lp-accent);
1968
+ }
1969
+
1970
+ .lp-theme09-seccard-point-body { min-width: 0; }
1971
+
1972
+ .lp-theme09-seccard-point-t {
1973
+ display: block;
1974
+ font-family: var(--lp-font-heading);
1975
+ font-size: 18px;
1976
+ font-weight: 600;
1977
+ color: var(--lp-ink);
1978
+ margin-bottom: 4px;
1979
+ }
1980
+
1981
+ .lp-theme09-seccard-point-d {
1982
+ display: block;
1983
+ font-size: 13.5px;
1984
+ line-height: 1.62;
1985
+ color: var(--lp-ink2);
1986
+ }
1987
+
1988
+ /* ── 12. closing 封底结语 ────────────────────────────────────── */
1989
+
1990
+ .lp-theme09-closing {
1991
+ padding: 0;
1992
+ }
1993
+
1994
+ .lp-theme09-closing .lp-theme09-photo {
1995
+ position: absolute;
1996
+ inset: 0;
1997
+ width: 100%;
1998
+ height: 100%;
1999
+ z-index: 0;
2000
+ }
2001
+
2002
+ .lp-theme09-closing-inner {
2003
+ position: relative;
2004
+ z-index: 2;
2005
+ height: 100%;
2006
+ display: flex;
2007
+ flex-direction: column;
2008
+ justify-content: center;
2009
+ align-items: center;
2010
+ text-align: center;
2011
+ padding: 70px 90px 34px;
2012
+ /* 让空区域点击穿透到下方满版影像(上传图位);文字本身仍可编辑 */
2013
+ pointer-events: none;
2014
+ }
2015
+
2016
+ .lp-theme09-closing-mark,
2017
+ .lp-theme09-closing-word,
2018
+ .lp-theme09-closing-sub,
2019
+ .lp-theme09-closing-colophon {
2020
+ pointer-events: auto;
2021
+ }
2022
+
2023
+ .lp-theme09-closing-mark {
2024
+ font-family: var(--lp-t9-en);
2025
+ font-size: 13px;
2026
+ font-style: italic;
2027
+ letter-spacing: 0.3em;
2028
+ text-transform: uppercase;
2029
+ color: var(--lp-accent);
2030
+ margin-bottom: 22px;
2031
+ }
2032
+
2033
+ .lp-theme09-closing-word {
2034
+ font-family: var(--lp-font-heading);
2035
+ font-size: 62px;
2036
+ font-weight: 700;
2037
+ line-height: 1.24;
2038
+ color: #ffffff;
2039
+ margin: 0;
2040
+ max-width: 880px;
2041
+ text-shadow: 0 2px 24px rgba(0, 0, 0, 0.44);
2042
+ }
2043
+
2044
+ .lp-theme09-closing-sub {
2045
+ font-family: var(--lp-t9-en);
2046
+ font-size: 17px;
2047
+ line-height: 1.72;
2048
+ color: rgba(255, 255, 255, 0.86);
2049
+ margin: 20px 0 0;
2050
+ max-width: 640px;
2051
+ }
2052
+
2053
+ .lp-theme09-closing-colophon {
2054
+ display: flex;
2055
+ align-items: center;
2056
+ justify-content: center;
2057
+ gap: 26px;
2058
+ margin-top: 40px;
2059
+ padding-top: 20px;
2060
+ border-top: 1px solid rgba(255, 255, 255, 0.26);
2061
+ font-family: var(--lp-font-mono);
2062
+ font-size: 11px;
2063
+ letter-spacing: 0.18em;
2064
+ color: rgba(255, 255, 255, 0.82);
2065
+ min-width: 420px;
2066
+ }
2067
+
2068
+ .lp-theme09-closing-colophon i {
2069
+ font-style: normal;
2070
+ color: rgba(255, 255, 255, 0.46);
2071
+ }
2072
+
2073
+ /* ════════════════════════════════════════════════════════════════
2074
+ * 附录:通用编辑器外壳(与 theme07 / theme08 自包含结构保持一致)
2075
+ * 画布切换显隐由 .lp-deck / .lp-slide-wrapper 控制;
2076
+ * 编辑器 chrome(.lp-editor-* / .lp-thumbnail)由 render.tsx 内联 <style> 提供,与主题无关。
2077
+ * ════════════════════════════════════════════════════════════════ */
2078
+
2079
+ .lp-deck {
2080
+ position: relative;
2081
+ width: 100%;
2082
+ height: 100%;
2083
+ display: flex;
2084
+ align-items: center;
2085
+ justify-content: center;
2086
+ }
2087
+
2088
+ .lp-slide-wrapper {
2089
+ position: absolute;
2090
+ top: 0;
2091
+ left: 0;
2092
+ width: 100%;
2093
+ height: 100%;
2094
+ display: flex;
2095
+ align-items: center;
2096
+ justify-content: center;
2097
+ opacity: 0;
2098
+ z-index: 0;
2099
+ }
2100
+
2101
+ .lp-slide-wrapper.enter,
2102
+ .lp-slide-wrapper.leave {
2103
+ pointer-events: none;
2104
+ }
2105
+
2106
+ .lp-deck[data-lp-transition="none"] .lp-slide-wrapper {
2107
+ transition: opacity 80ms ease;
2108
+ transform: none;
2109
+ }
2110
+
2111
+ .lp-deck[data-lp-transition="none"] .lp-slide-wrapper.active {
2112
+ opacity: 1;
2113
+ z-index: 2;
2114
+ }
2115
+
2116
+ .lp-deck:not([data-lp-transition]) .lp-slide-wrapper,
2117
+ .lp-deck[data-lp-transition="slide"] .lp-slide-wrapper {
2118
+ transform: translateX(100%);
2119
+ transition: transform 400ms ease-in-out, opacity 300ms ease;
2120
+ }
2121
+
2122
+ .lp-deck:not([data-lp-transition]) .lp-slide-wrapper.active,
2123
+ .lp-deck[data-lp-transition="slide"] .lp-slide-wrapper.active {
2124
+ opacity: 1;
2125
+ transform: translateX(0);
2126
+ z-index: 2;
2127
+ }
2128
+
2129
+ .lp-deck:not([data-lp-transition]) .lp-slide-wrapper.prev,
2130
+ .lp-deck[data-lp-transition="slide"] .lp-slide-wrapper.prev {
2131
+ opacity: 0;
2132
+ transform: translateX(-100%);
2133
+ }
2134
+
2135
+ /* ════════════════════════════════════════════════════════════════
2136
+ * 十、P1 影像叙事 / 组件页(后续版式批)
2137
+ * ════════════════════════════════════════════════════════════════ */
2138
+
2139
+ /* ── 10.0 设计系统标本页 specimen ─────────────────────────────── */
2140
+ .lp-theme09-specimen {
2141
+ display: flex;
2142
+ flex-direction: column;
2143
+ padding: 88px 60px 62px;
2144
+ }
2145
+ .lp-theme09-specimen-body {
2146
+ flex: 1;
2147
+ display: grid;
2148
+ grid-template-columns: 1.1fr 0.9fr;
2149
+ grid-template-rows: auto auto;
2150
+ gap: 26px 40px;
2151
+ min-height: 0;
2152
+ }
2153
+ .lp-theme09-specimen-block {
2154
+ display: flex;
2155
+ flex-direction: column;
2156
+ gap: 12px;
2157
+ min-width: 0;
2158
+ }
2159
+ .lp-theme09-specimen-h {
2160
+ font-family: var(--lp-font-mono);
2161
+ font-size: 11px;
2162
+ letter-spacing: 0.2em;
2163
+ text-transform: uppercase;
2164
+ color: var(--lp-ink3);
2165
+ margin: 0 0 4px;
2166
+ padding-bottom: 6px;
2167
+ border-bottom: 1px solid var(--lp-t9-rule);
2168
+ }
2169
+ .lp-theme09-specimen-display {
2170
+ font-family: var(--lp-font-heading);
2171
+ font-size: 40px;
2172
+ font-weight: 700;
2173
+ color: var(--lp-ink);
2174
+ margin: 0;
2175
+ line-height: 1.1;
2176
+ }
2177
+ .lp-theme09-specimen-h1 {
2178
+ font-family: var(--lp-font-heading);
2179
+ font-size: 24px;
2180
+ font-weight: 700;
2181
+ color: var(--lp-ink);
2182
+ margin: 0;
2183
+ }
2184
+ .lp-theme09-specimen-h2 {
2185
+ font-family: var(--lp-font-heading);
2186
+ font-size: 17px;
2187
+ font-weight: 600;
2188
+ color: var(--lp-ink2);
2189
+ margin: 0;
2190
+ }
2191
+ .lp-theme09-specimen-para {
2192
+ font-size: 13px;
2193
+ line-height: 1.7;
2194
+ color: var(--lp-ink3);
2195
+ margin: 0;
2196
+ max-width: 320px;
2197
+ }
2198
+ .lp-theme09-specimen-mono {
2199
+ font-family: var(--lp-font-mono);
2200
+ font-size: 12px;
2201
+ letter-spacing: 0.12em;
2202
+ color: var(--lp-ink2);
2203
+ margin: 0;
2204
+ }
2205
+ .lp-theme09-specimen-tags {
2206
+ display: flex;
2207
+ gap: 8px;
2208
+ flex-wrap: wrap;
2209
+ }
2210
+ .lp-theme09-specimen-tag {
2211
+ font-family: var(--lp-font-mono);
2212
+ font-size: 10px;
2213
+ letter-spacing: 0.14em;
2214
+ padding: 4px 10px;
2215
+ border: 1px solid var(--lp-border);
2216
+ border-radius: 2px;
2217
+ color: var(--lp-ink2);
2218
+ }
2219
+ .lp-theme09-specimen-gutter-demo {
2220
+ display: flex;
2221
+ align-items: center;
2222
+ gap: 10px;
2223
+ font-family: var(--lp-font-mono);
2224
+ font-size: 11px;
2225
+ color: var(--lp-ink3);
2226
+ margin-top: 12px;
2227
+ }
2228
+ .lp-theme09-specimen-gutter-demo::before {
2229
+ content: '';
2230
+ width: 2px;
2231
+ height: 22px;
2232
+ background: var(--lp-t9-rule-strong);
2233
+ }
2234
+ .lp-theme09-specimen-photos-row {
2235
+ display: flex;
2236
+ gap: 14px;
2237
+ height: 168px;
2238
+ }
2239
+ .lp-theme09-specimen-photos-row .lp-theme09-photo {
2240
+ flex: 1;
2241
+ min-width: 0;
2242
+ height: 100%;
2243
+ aspect-ratio: auto !important;
2244
+ }
2245
+ .lp-theme09-specimen-dogear-demo {
2246
+ align-self: flex-start;
2247
+ margin-top: 10px;
2248
+ padding: 8px 16px;
2249
+ background: var(--lp-surface-solid);
2250
+ border: 1px solid var(--lp-border);
2251
+ font-family: var(--lp-font-mono);
2252
+ font-size: 11px;
2253
+ color: var(--lp-ink2);
2254
+ }
2255
+
2256
+ /* ── 10.1 影像专题 photo_feature ─────────────────────────────── */
2257
+ .lp-theme09-photofeat {
2258
+ display: flex;
2259
+ flex-direction: row;
2260
+ align-items: stretch;
2261
+ padding: 0;
2262
+ }
2263
+ .lp-theme09-photofeat-panel {
2264
+ flex: 0 0 42%;
2265
+ display: flex;
2266
+ flex-direction: column;
2267
+ gap: 18px;
2268
+ padding: 96px 44px 60px 60px;
2269
+ min-width: 0;
2270
+ border-right: 1px solid var(--lp-t9-rule);
2271
+ }
2272
+ .lp-theme09-photofeat-kicker {
2273
+ font-family: var(--lp-font-mono);
2274
+ font-size: 11px;
2275
+ letter-spacing: 0.22em;
2276
+ text-transform: uppercase;
2277
+ color: var(--lp-accent);
2278
+ }
2279
+ .lp-theme09-photofeat-title {
2280
+ font-family: var(--lp-font-heading);
2281
+ font-size: 40px;
2282
+ font-weight: 700;
2283
+ line-height: 1.18;
2284
+ color: var(--lp-ink);
2285
+ margin: 0;
2286
+ }
2287
+ .lp-theme09-photofeat-panel .lp-theme09-standfirst {
2288
+ flex: 1 1 auto;
2289
+ min-height: 0;
2290
+ }
2291
+ .lp-theme09-photofeat-caption {
2292
+ font-family: var(--lp-t9-en);
2293
+ font-size: 12px;
2294
+ font-style: italic;
2295
+ letter-spacing: 0.08em;
2296
+ color: var(--lp-ink3);
2297
+ margin: 0;
2298
+ }
2299
+ .lp-theme09-photofeat-media {
2300
+ flex: 1;
2301
+ position: relative;
2302
+ min-width: 0;
2303
+ margin: 0 0 56px;
2304
+ }
2305
+ .lp-theme09-photofeat-media .lp-theme09-photo {
2306
+ position: absolute;
2307
+ inset: 0;
2308
+ width: 100%;
2309
+ height: 100%;
2310
+ }
2311
+
2312
+ /* ── 10.2 影像九宫格 photo_grid ──────────────────────────────── */
2313
+ .lp-theme09-photogrid {
2314
+ display: flex;
2315
+ flex-direction: column;
2316
+ padding: 88px 60px 62px;
2317
+ }
2318
+ .lp-theme09-photogrid-head {
2319
+ display: flex;
2320
+ align-items: baseline;
2321
+ justify-content: space-between;
2322
+ gap: 20px;
2323
+ padding-bottom: 12px;
2324
+ border-bottom: 2px solid var(--lp-ink);
2325
+ margin-bottom: 22px;
2326
+ }
2327
+ .lp-theme09-photogrid-title {
2328
+ font-family: var(--lp-font-heading);
2329
+ font-size: 34px;
2330
+ font-weight: 700;
2331
+ color: var(--lp-ink);
2332
+ margin: 0;
2333
+ }
2334
+ .lp-theme09-photogrid-en {
2335
+ font-family: var(--lp-t9-en);
2336
+ font-size: 13px;
2337
+ font-style: italic;
2338
+ letter-spacing: 0.2em;
2339
+ color: var(--lp-ink3);
2340
+ }
2341
+ .lp-theme09-photogrid-grid {
2342
+ flex: 1;
2343
+ display: grid;
2344
+ grid-template-columns: 1fr 1fr;
2345
+ grid-template-rows: 1fr 1fr;
2346
+ gap: 18px;
2347
+ min-height: 0;
2348
+ }
2349
+ .lp-theme09-photogrid-cell {
2350
+ position: relative;
2351
+ display: flex;
2352
+ flex-direction: column;
2353
+ gap: 8px;
2354
+ min-width: 0;
2355
+ margin: 0;
2356
+ }
2357
+ .lp-theme09-photogrid-cell .lp-theme09-photo {
2358
+ position: relative;
2359
+ flex: 1 1 auto;
2360
+ min-height: 0;
2361
+ width: 100%;
2362
+ }
2363
+ .lp-theme09-photogrid-cap {
2364
+ font-family: var(--lp-t9-en);
2365
+ font-size: 12px;
2366
+ color: var(--lp-ink3);
2367
+ letter-spacing: 0.04em;
2368
+ }
2369
+ .lp-theme09-photogrid-cell.focus .lp-theme09-photo {
2370
+ outline: 3px solid var(--lp-accent);
2371
+ outline-offset: -3px;
2372
+ }
2373
+
2374
+ /* ── 10.3 影像金句 photo_quote ───────────────────────────────── */
2375
+ .lp-theme09-photoquote {
2376
+ padding: 0;
2377
+ }
2378
+ .lp-theme09-photoquote .lp-theme09-photo {
2379
+ position: absolute !important;
2380
+ inset: 0;
2381
+ width: 100%;
2382
+ height: 100%;
2383
+ z-index: 0;
2384
+ }
2385
+ .lp-theme09-photoquote-inner {
2386
+ position: relative;
2387
+ z-index: 2;
2388
+ height: 100%;
2389
+ display: flex;
2390
+ flex-direction: column;
2391
+ justify-content: center;
2392
+ padding: 88px 60px 56px;
2393
+ pointer-events: none;
2394
+ }
2395
+ .lp-theme09-photoquote-rule {
2396
+ width: 54px;
2397
+ height: 5px;
2398
+ background: var(--lp-accent);
2399
+ margin-bottom: 26px;
2400
+ }
2401
+ .lp-theme09-photoquote-text {
2402
+ font-family: var(--lp-font-heading);
2403
+ font-size: 46px;
2404
+ font-weight: 700;
2405
+ line-height: 1.3;
2406
+ color: #fff;
2407
+ margin: 0 0 22px;
2408
+ max-width: 880px;
2409
+ text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
2410
+ }
2411
+ .lp-theme09-photoquote-attr {
2412
+ font-family: var(--lp-t9-en);
2413
+ font-style: italic;
2414
+ font-size: 16px;
2415
+ color: rgba(255, 255, 255, 0.9);
2416
+ margin: 0 0 4px;
2417
+ }
2418
+ .lp-theme09-photoquote-attr-en {
2419
+ font-family: var(--lp-font-mono);
2420
+ font-size: 11px;
2421
+ letter-spacing: 0.18em;
2422
+ color: rgba(255, 255, 255, 0.6);
2423
+ }
2424
+ .lp-theme09-photoquote-meta {
2425
+ display: flex;
2426
+ gap: 22px;
2427
+ padding-top: 16px;
2428
+ border-top: 1px solid rgba(255, 255, 255, 0.28);
2429
+ font-family: var(--lp-font-mono);
2430
+ font-size: 11px;
2431
+ letter-spacing: 0.18em;
2432
+ color: rgba(255, 255, 255, 0.86);
2433
+ margin-top: 26px;
2434
+ }
2435
+ .lp-theme09-photoquote-meta i {
2436
+ font-style: normal;
2437
+ color: rgba(255, 255, 255, 0.55);
2438
+ }
2439
+ .lp-theme09-photoquote-text,
2440
+ .lp-theme09-photoquote-attr,
2441
+ .lp-theme09-photoquote-attr-en,
2442
+ .lp-theme09-photoquote-meta {
2443
+ pointer-events: auto;
2444
+ }
2445
+
2446
+ /* ── 10.4 对开双图 photo_duo ─────────────────────────────────── */
2447
+ .lp-theme09-photoduo {
2448
+ display: flex;
2449
+ flex-direction: column;
2450
+ padding: 88px 60px 62px;
2451
+ }
2452
+ .lp-theme09-photoduo-title {
2453
+ font-family: var(--lp-font-heading);
2454
+ font-size: 34px;
2455
+ font-weight: 700;
2456
+ color: var(--lp-ink);
2457
+ margin: 0 0 22px;
2458
+ }
2459
+ .lp-theme09-photoduo-stage {
2460
+ flex: 1;
2461
+ display: grid;
2462
+ grid-template-columns: 1fr 1fr;
2463
+ gap: 0;
2464
+ min-height: 0;
2465
+ position: relative;
2466
+ }
2467
+ .lp-theme09-photoduo-cell {
2468
+ display: flex;
2469
+ flex-direction: column;
2470
+ gap: 10px;
2471
+ min-width: 0;
2472
+ margin: 0;
2473
+ padding: 0 40px;
2474
+ }
2475
+ .lp-theme09-photoduo-cell:first-child {
2476
+ padding-left: 0;
2477
+ }
2478
+ .lp-theme09-photoduo-cell:last-child {
2479
+ padding-right: 0;
2480
+ }
2481
+ .lp-theme09-photoduo-no {
2482
+ font-family: var(--lp-font-mono);
2483
+ font-size: 12px;
2484
+ letter-spacing: 0.18em;
2485
+ color: var(--lp-accent);
2486
+ }
2487
+ .lp-theme09-photoduo-cell .lp-theme09-photo {
2488
+ position: relative;
2489
+ flex: 1 1 auto;
2490
+ min-height: 0;
2491
+ width: 100%;
2492
+ }
2493
+ .lp-theme09-photoduo-cap {
2494
+ font-family: var(--lp-t9-en);
2495
+ font-size: 12px;
2496
+ color: var(--lp-ink3);
2497
+ }
2498
+
2499
+ /* ── 10.5 全幅横影 photo_panorama ─────────────────────────────── */
2500
+ .lp-theme09-panorama .lp-theme09-photo {
2501
+ position: absolute !important;
2502
+ inset: 0;
2503
+ width: 100%;
2504
+ height: 100%;
2505
+ z-index: 0;
2506
+ }
2507
+ .lp-theme09-panorama-inner {
2508
+ position: relative;
2509
+ z-index: 1;
2510
+ height: 100%;
2511
+ display: flex;
2512
+ flex-direction: column;
2513
+ justify-content: flex-end;
2514
+ padding: 0 60px 92px;
2515
+ pointer-events: none;
2516
+ }
2517
+ .lp-theme09-panorama-head {
2518
+ pointer-events: auto;
2519
+ }
2520
+ .lp-theme09-panorama-en {
2521
+ display: block;
2522
+ font-family: var(--lp-t9-en);
2523
+ font-style: italic;
2524
+ font-size: 15px;
2525
+ letter-spacing: 0.16em;
2526
+ color: rgba(255, 255, 255, 0.82);
2527
+ margin-bottom: 10px;
2528
+ }
2529
+ .lp-theme09-panorama-title {
2530
+ font-family: var(--lp-font-heading);
2531
+ font-size: 46px;
2532
+ font-weight: 700;
2533
+ line-height: 1.24;
2534
+ color: #fff;
2535
+ margin: 0 0 14px;
2536
+ max-width: 940px;
2537
+ text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
2538
+ }
2539
+ .lp-theme09-panorama-cap {
2540
+ font-family: var(--lp-t9-en);
2541
+ font-style: italic;
2542
+ font-size: 14px;
2543
+ letter-spacing: 0.06em;
2544
+ color: rgba(255, 255, 255, 0.86);
2545
+ margin: 0;
2546
+ pointer-events: auto;
2547
+ text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
2548
+ }
2549
+ .lp-theme09-panorama .lp-theme09-masthead-name,
2550
+ .lp-theme09-panorama .lp-theme09-masthead-en,
2551
+ .lp-theme09-panorama .lp-theme09-masthead-mark {
2552
+ text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
2553
+ }
2554
+
2555
+ /* ── 10.6 焦点舞台 photo_stage ────────────────────────────────── */
2556
+ .lp-theme09-stage {
2557
+ display: flex;
2558
+ flex-direction: column;
2559
+ padding: 88px 60px 62px;
2560
+ }
2561
+ .lp-theme09-stage-title {
2562
+ font-family: var(--lp-font-heading);
2563
+ font-size: 36px;
2564
+ font-weight: 700;
2565
+ line-height: 1.2;
2566
+ color: var(--lp-ink);
2567
+ margin: 0 0 18px;
2568
+ }
2569
+ .lp-theme09-stage-frame {
2570
+ flex: 1 1 auto;
2571
+ position: relative;
2572
+ min-height: 0;
2573
+ border: 1px solid var(--lp-border-strong);
2574
+ padding: 12px;
2575
+ background: var(--lp-surface-solid);
2576
+ box-shadow: var(--lp-shadow);
2577
+ }
2578
+ .lp-theme09-stage-frame .lp-theme09-photo {
2579
+ position: relative;
2580
+ width: 100%;
2581
+ height: 100%;
2582
+ }
2583
+ .lp-theme09-stage-cap {
2584
+ margin: 14px 0 0;
2585
+ font-family: var(--lp-t9-en);
2586
+ font-style: italic;
2587
+ font-size: 13px;
2588
+ letter-spacing: 0.06em;
2589
+ color: var(--lp-ink3);
2590
+ }
2591
+
2592
+ /* ── 10.7 分镜格 storyboard ───────────────────────────────────── */
2593
+ .lp-theme09-storyboard {
2594
+ display: flex;
2595
+ flex-direction: column;
2596
+ padding: 88px 60px 62px;
2597
+ }
2598
+ .lp-theme09-storyboard-head {
2599
+ display: flex;
2600
+ align-items: baseline;
2601
+ justify-content: space-between;
2602
+ gap: 20px;
2603
+ padding-bottom: 12px;
2604
+ border-bottom: 2px solid var(--lp-ink);
2605
+ margin-bottom: 20px;
2606
+ }
2607
+ .lp-theme09-storyboard-title {
2608
+ font-family: var(--lp-font-heading);
2609
+ font-size: 32px;
2610
+ font-weight: 700;
2611
+ color: var(--lp-ink);
2612
+ margin: 0;
2613
+ }
2614
+ .lp-theme09-storyboard-en {
2615
+ font-family: var(--lp-t9-en);
2616
+ font-style: italic;
2617
+ font-size: 13px;
2618
+ letter-spacing: 0.2em;
2619
+ color: var(--lp-ink3);
2620
+ }
2621
+ .lp-theme09-storyboard-grid {
2622
+ flex: 1;
2623
+ display: grid;
2624
+ grid-template-columns: repeat(3, 1fr);
2625
+ grid-template-rows: repeat(2, 1fr);
2626
+ gap: 16px;
2627
+ min-height: 0;
2628
+ }
2629
+ .lp-theme09-storyboard-cell {
2630
+ position: relative;
2631
+ display: flex;
2632
+ flex-direction: column;
2633
+ gap: 8px;
2634
+ margin: 0;
2635
+ min-width: 0;
2636
+ }
2637
+ .lp-theme09-storyboard-cell .lp-theme09-photo {
2638
+ position: relative;
2639
+ flex: 1 1 auto;
2640
+ min-height: 0;
2641
+ width: 100%;
2642
+ }
2643
+ .lp-theme09-storyboard-no {
2644
+ font-family: var(--lp-font-mono);
2645
+ font-size: 12px;
2646
+ letter-spacing: 0.18em;
2647
+ color: var(--lp-accent);
2648
+ }
2649
+ .lp-theme09-storyboard-cap {
2650
+ font-family: var(--lp-t9-en);
2651
+ font-size: 12px;
2652
+ color: var(--lp-ink3);
2653
+ }
2654
+
2655
+ /* ── 10.8 胶带速写 snapshot_tape ──────────────────────────────── */
2656
+ .lp-theme09-snaptape {
2657
+ display: flex;
2658
+ flex-direction: column;
2659
+ padding: 88px 60px 62px;
2660
+ }
2661
+ .lp-theme09-snaptape-title {
2662
+ font-family: var(--lp-font-heading);
2663
+ font-size: 32px;
2664
+ font-weight: 700;
2665
+ color: var(--lp-ink);
2666
+ margin: 0 0 24px;
2667
+ }
2668
+ .lp-theme09-snaptape-row {
2669
+ flex: 1;
2670
+ display: grid;
2671
+ grid-template-columns: repeat(3, 1fr);
2672
+ gap: 30px;
2673
+ align-items: center;
2674
+ min-height: 0;
2675
+ }
2676
+ .lp-theme09-snaptape-cell {
2677
+ display: flex;
2678
+ flex-direction: column;
2679
+ gap: 12px;
2680
+ margin: 0;
2681
+ min-width: 0;
2682
+ align-items: center;
2683
+ }
2684
+ .lp-theme09-snaptape-cell .lp-theme09-photo {
2685
+ position: relative;
2686
+ width: 100%;
2687
+ }
2688
+ .lp-theme09-snaptape-note {
2689
+ font-family: var(--lp-t9-hand);
2690
+ font-size: 18px;
2691
+ color: var(--lp-ink2);
2692
+ text-align: center;
2693
+ margin: 0;
2694
+ }
2695
+
2696
+ /* ── 10.9 卷首题词 epigraph ───────────────────────────────────── */
2697
+ .lp-theme09-epigraph {
2698
+ display: flex;
2699
+ flex-direction: column;
2700
+ padding: 88px 60px 62px;
2701
+ }
2702
+ .lp-theme09-epigraph-body {
2703
+ flex: 1;
2704
+ display: flex;
2705
+ flex-direction: column;
2706
+ justify-content: center;
2707
+ max-width: 980px;
2708
+ margin: 0 auto;
2709
+ }
2710
+ .lp-theme09-epigraph-mark {
2711
+ font-family: var(--lp-font-heading);
2712
+ font-size: 78px;
2713
+ line-height: 0.7;
2714
+ color: var(--lp-accent);
2715
+ margin-bottom: 6px;
2716
+ }
2717
+ .lp-theme09-epigraph-quote {
2718
+ font-family: var(--lp-font-heading);
2719
+ font-size: 40px;
2720
+ font-weight: 700;
2721
+ line-height: 1.5;
2722
+ color: var(--lp-ink);
2723
+ margin: 6px 0 22px;
2724
+ }
2725
+ .lp-theme09-epigraph-quote::first-letter {
2726
+ float: left;
2727
+ font-size: 66px;
2728
+ line-height: 0.82;
2729
+ color: var(--lp-accent);
2730
+ margin: 4px 12px 0 0;
2731
+ }
2732
+ .lp-theme09-epigraph-rule {
2733
+ width: 64px;
2734
+ height: 3px;
2735
+ background: var(--lp-accent);
2736
+ margin: 6px 0 16px;
2737
+ }
2738
+ .lp-theme09-epigraph-attr {
2739
+ display: flex;
2740
+ flex-direction: column;
2741
+ gap: 4px;
2742
+ }
2743
+ .lp-theme09-epigraph-attr-cn {
2744
+ font-family: var(--lp-font-heading);
2745
+ font-style: normal;
2746
+ font-size: 16px;
2747
+ color: var(--lp-ink2);
2748
+ }
2749
+ .lp-theme09-epigraph-attr-en {
2750
+ font-family: var(--lp-font-mono);
2751
+ font-size: 11px;
2752
+ letter-spacing: 0.18em;
2753
+ color: var(--lp-ink3);
2754
+ }
2755
+
2756
+ /* ── 10.10 影像便当 photo_bento ───────────────────────────────── */
2757
+ .lp-theme09-bento {
2758
+ display: flex;
2759
+ flex-direction: column;
2760
+ padding: 88px 60px 62px;
2761
+ }
2762
+ .lp-theme09-bento-head {
2763
+ display: flex;
2764
+ align-items: baseline;
2765
+ justify-content: space-between;
2766
+ gap: 20px;
2767
+ padding-bottom: 12px;
2768
+ border-bottom: 2px solid var(--lp-ink);
2769
+ margin-bottom: 20px;
2770
+ }
2771
+ .lp-theme09-bento-title {
2772
+ font-family: var(--lp-font-heading);
2773
+ font-size: 32px;
2774
+ font-weight: 700;
2775
+ color: var(--lp-ink);
2776
+ margin: 0;
2777
+ }
2778
+ .lp-theme09-bento-en {
2779
+ font-family: var(--lp-t9-en);
2780
+ font-style: italic;
2781
+ font-size: 13px;
2782
+ letter-spacing: 0.2em;
2783
+ color: var(--lp-ink3);
2784
+ }
2785
+ .lp-theme09-bento-grid {
2786
+ flex: 1;
2787
+ display: grid;
2788
+ grid-template-columns: 1.5fr 1fr 1fr;
2789
+ grid-template-rows: 1fr 1fr;
2790
+ gap: 16px;
2791
+ min-height: 0;
2792
+ }
2793
+ .lp-theme09-bento-cell {
2794
+ position: relative;
2795
+ display: flex;
2796
+ flex-direction: column;
2797
+ gap: 8px;
2798
+ margin: 0;
2799
+ min-width: 0;
2800
+ }
2801
+ .lp-theme09-bento-cell.size-b {
2802
+ grid-row: 1 / span 2;
2803
+ grid-column: 1;
2804
+ }
2805
+ .lp-theme09-bento-cell .lp-theme09-photo {
2806
+ position: relative;
2807
+ flex: 1 1 auto;
2808
+ min-height: 0;
2809
+ width: 100%;
2810
+ }
2811
+ .lp-theme09-bento-cap {
2812
+ font-family: var(--lp-t9-en);
2813
+ font-size: 12px;
2814
+ color: var(--lp-ink3);
2815
+ }
2816
+
2817
+ /* ── 10.11 影像编年 timeline_photo ───────────────────────────── */
2818
+ .lp-theme09-tlphoto {
2819
+ display: flex;
2820
+ flex-direction: column;
2821
+ padding: 88px 60px 62px;
2822
+ }
2823
+ .lp-theme09-tlphoto-title {
2824
+ font-family: var(--lp-font-heading);
2825
+ font-size: 32px;
2826
+ font-weight: 700;
2827
+ color: var(--lp-ink);
2828
+ margin: 0 0 18px;
2829
+ }
2830
+ .lp-theme09-tlphoto-body {
2831
+ flex: 1;
2832
+ position: relative;
2833
+ display: flex;
2834
+ min-height: 0;
2835
+ }
2836
+ .lp-theme09-tlphoto-axis {
2837
+ position: absolute;
2838
+ left: 132px;
2839
+ top: 4px;
2840
+ bottom: 4px;
2841
+ width: 2px;
2842
+ background: var(--lp-t9-rule);
2843
+ pointer-events: none;
2844
+ }
2845
+ .lp-theme09-tlphoto-list {
2846
+ list-style: none;
2847
+ margin: 0;
2848
+ padding: 0;
2849
+ flex: 1;
2850
+ display: flex;
2851
+ flex-direction: column;
2852
+ justify-content: space-between;
2853
+ min-height: 0;
2854
+ }
2855
+ .lp-theme09-tlphoto-item {
2856
+ position: relative;
2857
+ display: grid;
2858
+ grid-template-columns: 124px 1fr;
2859
+ gap: 28px;
2860
+ align-items: center;
2861
+ }
2862
+ .lp-theme09-tlphoto-node {
2863
+ position: absolute;
2864
+ left: 126px;
2865
+ top: 50%;
2866
+ width: 13px;
2867
+ height: 13px;
2868
+ transform: translate(-50%, -50%) rotate(45deg);
2869
+ background: var(--lp-accent);
2870
+ z-index: 1;
2871
+ }
2872
+ .lp-theme09-tlphoto-year {
2873
+ font-family: var(--lp-font-mono);
2874
+ font-size: 22px;
2875
+ font-weight: 700;
2876
+ color: var(--lp-ink);
2877
+ text-align: right;
2878
+ }
2879
+ .lp-theme09-tlphoto-card {
2880
+ display: flex;
2881
+ gap: 16px;
2882
+ align-items: center;
2883
+ margin: 0;
2884
+ min-width: 0;
2885
+ }
2886
+ .lp-theme09-tlphoto-card .lp-theme09-photo {
2887
+ position: relative;
2888
+ flex: none;
2889
+ width: 128px;
2890
+ height: 128px;
2891
+ }
2892
+ .lp-theme09-tlphoto-meta {
2893
+ display: flex;
2894
+ flex-direction: column;
2895
+ gap: 4px;
2896
+ min-width: 0;
2897
+ }
2898
+ .lp-theme09-tlphoto-cardtitle {
2899
+ font-family: var(--lp-font-heading);
2900
+ font-size: 17px;
2901
+ font-weight: 600;
2902
+ color: var(--lp-ink);
2903
+ }
2904
+ .lp-theme09-tlphoto-note {
2905
+ font-size: 14px;
2906
+ line-height: 1.5;
2907
+ color: var(--lp-ink3);
2908
+ }
2909
+
2910
+ /* ── 10.12 影像长卷 filmstrip ─────────────────────────────────── */
2911
+ .lp-theme09-filmstrip {
2912
+ display: flex;
2913
+ flex-direction: column;
2914
+ padding: 84px 48px 56px;
2915
+ }
2916
+ .lp-theme09-filmstrip-inner {
2917
+ flex: 1;
2918
+ display: flex;
2919
+ flex-direction: column;
2920
+ min-height: 0;
2921
+ }
2922
+ .lp-theme09-filmstrip-title {
2923
+ font-family: var(--lp-font-heading);
2924
+ font-size: 30px;
2925
+ font-weight: 700;
2926
+ color: var(--lp-ink);
2927
+ margin: 0 0 18px;
2928
+ }
2929
+ .lp-theme09-filmstrip-reel {
2930
+ flex: 1;
2931
+ display: flex;
2932
+ gap: 12px;
2933
+ align-items: stretch;
2934
+ min-height: 0;
2935
+ padding: 16px 14px;
2936
+ background: var(--lp-bg-gradient-end);
2937
+ border: 1px solid var(--lp-border);
2938
+ }
2939
+ .lp-theme09-filmstrip-frame {
2940
+ flex: 1;
2941
+ display: flex;
2942
+ flex-direction: column;
2943
+ gap: 8px;
2944
+ margin: 0;
2945
+ min-width: 0;
2946
+ }
2947
+ .lp-theme09-filmstrip-frame .lp-theme09-photo {
2948
+ position: relative;
2949
+ flex: 1 1 auto;
2950
+ min-height: 0;
2951
+ width: 100%;
2952
+ }
2953
+ .lp-theme09-filmstrip-cap {
2954
+ display: flex;
2955
+ align-items: center;
2956
+ gap: 8px;
2957
+ font-family: var(--lp-font-mono);
2958
+ font-size: 10px;
2959
+ letter-spacing: 0.12em;
2960
+ color: var(--lp-ink3);
2961
+ white-space: nowrap;
2962
+ overflow: hidden;
2963
+ text-overflow: ellipsis;
2964
+ }
2965
+ .lp-theme09-filmstrip-no {
2966
+ color: var(--lp-accent);
2967
+ flex: none;
2968
+ }
2969
+
2970
+ /* ── 10.13 影像拼贴 mosaic ────────────────────────────────────── */
2971
+ .lp-theme09-mosaic {
2972
+ display: flex;
2973
+ flex-direction: column;
2974
+ padding: 88px 60px 62px;
2975
+ }
2976
+ .lp-theme09-mosaic-head {
2977
+ display: flex;
2978
+ align-items: baseline;
2979
+ justify-content: space-between;
2980
+ gap: 20px;
2981
+ padding-bottom: 12px;
2982
+ border-bottom: 2px solid var(--lp-ink);
2983
+ margin-bottom: 20px;
2984
+ }
2985
+ .lp-theme09-mosaic-title {
2986
+ font-family: var(--lp-font-heading);
2987
+ font-size: 32px;
2988
+ font-weight: 700;
2989
+ color: var(--lp-ink);
2990
+ margin: 0;
2991
+ }
2992
+ .lp-theme09-mosaic-en {
2993
+ font-family: var(--lp-t9-en);
2994
+ font-style: italic;
2995
+ font-size: 13px;
2996
+ letter-spacing: 0.2em;
2997
+ color: var(--lp-ink3);
2998
+ }
2999
+ .lp-theme09-mosaic-grid {
3000
+ flex: 1;
3001
+ display: grid;
3002
+ grid-template-columns: repeat(3, 1fr);
3003
+ grid-template-rows: repeat(3, 1fr);
3004
+ gap: 14px;
3005
+ min-height: 0;
3006
+ }
3007
+ .lp-theme09-mosaic-cell {
3008
+ position: relative;
3009
+ display: flex;
3010
+ flex-direction: column;
3011
+ gap: 6px;
3012
+ margin: 0;
3013
+ min-width: 0;
3014
+ }
3015
+ .lp-theme09-mosaic-cell .lp-theme09-photo {
3016
+ position: relative;
3017
+ flex: 1 1 auto;
3018
+ min-height: 0;
3019
+ width: 100%;
3020
+ }
3021
+ .lp-theme09-mosaic-cap {
3022
+ font-family: var(--lp-t9-en);
3023
+ font-size: 11px;
3024
+ color: var(--lp-ink3);
3025
+ }
3026
+
3027
+ /* ── 10.14 人物证言 testimonial ───────────────────────────────── */
3028
+ .lp-theme09-testi {
3029
+ display: flex;
3030
+ flex-direction: column;
3031
+ padding: 88px 60px 62px;
3032
+ }
3033
+ .lp-theme09-testi-body {
3034
+ flex: 1;
3035
+ display: grid;
3036
+ grid-template-columns: 0.78fr 1.4fr;
3037
+ gap: 38px;
3038
+ align-items: center;
3039
+ min-height: 0;
3040
+ }
3041
+ .lp-theme09-testi-portrait {
3042
+ margin: 0;
3043
+ height: 100%;
3044
+ display: flex;
3045
+ align-items: center;
3046
+ justify-content: center;
3047
+ }
3048
+ .lp-theme09-testi-portrait .lp-theme09-photo {
3049
+ position: relative;
3050
+ width: 100%;
3051
+ max-width: 300px;
3052
+ }
3053
+ .lp-theme09-testi-text {
3054
+ display: flex;
3055
+ flex-direction: column;
3056
+ gap: 18px;
3057
+ }
3058
+ .lp-theme09-testi-mark {
3059
+ font-family: var(--lp-font-heading);
3060
+ font-size: 60px;
3061
+ line-height: 0.5;
3062
+ color: var(--lp-accent);
3063
+ }
3064
+ .lp-theme09-testi-quote {
3065
+ font-family: var(--lp-font-heading);
3066
+ font-size: 30px;
3067
+ font-weight: 700;
3068
+ line-height: 1.5;
3069
+ color: var(--lp-ink);
3070
+ margin: 0;
3071
+ }
3072
+ .lp-theme09-testi-attr {
3073
+ display: flex;
3074
+ flex-direction: column;
3075
+ gap: 2px;
3076
+ padding-top: 14px;
3077
+ border-top: 1px solid var(--lp-t9-rule);
3078
+ }
3079
+ .lp-theme09-testi-name {
3080
+ font-family: var(--lp-font-heading);
3081
+ font-style: normal;
3082
+ font-size: 16px;
3083
+ color: var(--lp-ink);
3084
+ }
3085
+ .lp-theme09-testi-role {
3086
+ font-family: var(--lp-font-mono);
3087
+ font-size: 11px;
3088
+ letter-spacing: 0.12em;
3089
+ color: var(--lp-ink3);
3090
+ }
3091
+
3092
+ /* ── 10.15 研究团队 team ──────────────────────────────────────── */
3093
+ .lp-theme09-team {
3094
+ display: flex;
3095
+ flex-direction: column;
3096
+ padding: 88px 60px 62px;
3097
+ }
3098
+ .lp-theme09-team-head {
3099
+ display: flex;
3100
+ align-items: baseline;
3101
+ justify-content: space-between;
3102
+ gap: 20px;
3103
+ padding-bottom: 12px;
3104
+ border-bottom: 2px solid var(--lp-ink);
3105
+ margin-bottom: 22px;
3106
+ }
3107
+ .lp-theme09-team-title {
3108
+ font-family: var(--lp-font-heading);
3109
+ font-size: 32px;
3110
+ font-weight: 700;
3111
+ color: var(--lp-ink);
3112
+ margin: 0;
3113
+ }
3114
+ .lp-theme09-team-en {
3115
+ font-family: var(--lp-t9-en);
3116
+ font-style: italic;
3117
+ font-size: 13px;
3118
+ letter-spacing: 0.2em;
3119
+ color: var(--lp-ink3);
3120
+ }
3121
+ .lp-theme09-team-grid {
3122
+ flex: 1;
3123
+ display: grid;
3124
+ grid-template-columns: repeat(3, 1fr);
3125
+ grid-template-rows: repeat(2, 1fr);
3126
+ gap: 20px 24px;
3127
+ min-height: 0;
3128
+ }
3129
+ .lp-theme09-team-cell {
3130
+ display: flex;
3131
+ flex-direction: column;
3132
+ align-items: center;
3133
+ text-align: center;
3134
+ gap: 10px;
3135
+ margin: 0;
3136
+ min-width: 0;
3137
+ }
3138
+ .lp-theme09-team-cell .lp-theme09-photo {
3139
+ position: relative;
3140
+ width: 188px;
3141
+ max-width: 100%;
3142
+ }
3143
+ .lp-theme09-team-meta {
3144
+ display: flex;
3145
+ flex-direction: column;
3146
+ gap: 2px;
3147
+ }
3148
+ .lp-theme09-team-name {
3149
+ font-family: var(--lp-font-heading);
3150
+ font-size: 16px;
3151
+ font-weight: 600;
3152
+ color: var(--lp-ink);
3153
+ }
3154
+ .lp-theme09-team-role {
3155
+ font-family: var(--lp-t9-en);
3156
+ font-size: 12px;
3157
+ color: var(--lp-ink3);
3158
+ }
3159
+
3160
+ /* ── 10.16 圆窗影像 photo_ring ────────────────────────────────── */
3161
+ .lp-theme09-ring {
3162
+ display: flex;
3163
+ flex-direction: column;
3164
+ }
3165
+ .lp-theme09-ring-inner {
3166
+ flex: 1;
3167
+ display: flex;
3168
+ flex-direction: column;
3169
+ align-items: center;
3170
+ justify-content: center;
3171
+ gap: 36px;
3172
+ padding: 84px 60px 60px;
3173
+ min-height: 0;
3174
+ }
3175
+ .lp-theme09-ring-head {
3176
+ text-align: center;
3177
+ pointer-events: none;
3178
+ }
3179
+ .lp-theme09-ring-title {
3180
+ font-family: var(--lp-font-heading);
3181
+ font-size: 40px;
3182
+ font-weight: 700;
3183
+ line-height: 1.2;
3184
+ color: var(--lp-ink);
3185
+ margin: 0;
3186
+ pointer-events: auto;
3187
+ }
3188
+ .lp-theme09-ring-en {
3189
+ display: block;
3190
+ font-family: var(--lp-t9-en);
3191
+ font-style: italic;
3192
+ font-size: 14px;
3193
+ letter-spacing: 0.16em;
3194
+ color: var(--lp-ink3);
3195
+ margin-top: 8px;
3196
+ }
3197
+ .lp-theme09-ring-row {
3198
+ display: flex;
3199
+ gap: 46px;
3200
+ align-items: center;
3201
+ }
3202
+ .lp-theme09-ring-cell {
3203
+ display: flex;
3204
+ flex-direction: column;
3205
+ gap: 16px;
3206
+ align-items: center;
3207
+ margin: 0;
3208
+ min-width: 0;
3209
+ }
3210
+ .lp-theme09-ring-cell .lp-theme09-photo {
3211
+ position: relative;
3212
+ width: 208px;
3213
+ height: 208px;
3214
+ box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
3215
+ }
3216
+ .lp-theme09-ring-cap {
3217
+ font-family: var(--lp-t9-en);
3218
+ font-size: 13px;
3219
+ letter-spacing: 0.04em;
3220
+ color: var(--lp-ink3);
3221
+ }
3222
+
3223
+ /* ═══════════════════════════════════════════════════════════════
3224
+ * 影像叙事 · 第二批
3225
+ * divider_photo / coverstory / quote_portrait / manifesto /
3226
+ * annotated / diptych / case_folio / split_diagonal
3227
+ * ═════════════════════════════════════════════════════════════ */
3228
+
3229
+ /* ── divider_photo(满版影像 + 巨型序号) ── */
3230
+ .lp-theme09-dividerphoto { padding: 0; }
3231
+ .lp-theme09-dividerphoto-bg {
3232
+ position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0;
3233
+ }
3234
+ .lp-theme09-dividerphoto-bg .lp-editable-image,
3235
+ .lp-theme09-dividerphoto-bg .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3236
+ .lp-theme09-dividerphoto-inner {
3237
+ position: relative; z-index: 2; height: 100%;
3238
+ display: flex; flex-direction: column; justify-content: space-between;
3239
+ padding: 60px 70px 40px; pointer-events: none;
3240
+ }
3241
+ .lp-theme09-dividerphoto-inner .lp-theme09-masthead,
3242
+ .lp-theme09-dividerphoto-text { pointer-events: auto; }
3243
+ .lp-theme09-dividerphoto-num {
3244
+ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
3245
+ font-family: var(--lp-t9-en); font-weight: 800; font-size: 300px; line-height: 1;
3246
+ color: rgba(255, 255, 255, 0.14); letter-spacing: -0.04em; pointer-events: none;
3247
+ }
3248
+ .lp-theme09-dividerphoto-text { position: relative; max-width: 760px; }
3249
+ .lp-theme09-dividerphoto-title {
3250
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 56px; color: #fff;
3251
+ margin: 0 0 14px; line-height: 1.1;
3252
+ }
3253
+ .lp-theme09-dividerphoto-sub {
3254
+ font-family: var(--lp-font); font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.82);
3255
+ max-width: 560px; margin: 0;
3256
+ }
3257
+
3258
+ /* ── coverstory(封面故事) ── */
3259
+ .lp-theme09-coverstory { padding: 0; }
3260
+ .lp-theme09-coverstory-bg {
3261
+ position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0;
3262
+ }
3263
+ .lp-theme09-coverstory-bg .lp-editable-image,
3264
+ .lp-theme09-coverstory-bg .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3265
+ .lp-theme09-coverstory-inner {
3266
+ position: relative; z-index: 2; height: 100%;
3267
+ display: flex; flex-direction: column; justify-content: flex-end;
3268
+ padding: 64px 70px 40px; pointer-events: none;
3269
+ }
3270
+ .lp-theme09-coverstory-kicker,
3271
+ .lp-theme09-coverstory-text,
3272
+ .lp-theme09-coverstory-inner .lp-theme09-folio { pointer-events: auto; }
3273
+ .lp-theme09-coverstory-kicker {
3274
+ font-family: var(--lp-t9-en); text-transform: uppercase; letter-spacing: 0.2em;
3275
+ color: var(--lp-series-1); font-size: 14px; margin-bottom: 16px;
3276
+ }
3277
+ .lp-theme09-coverstory-text { max-width: 840px; }
3278
+ .lp-theme09-coverstory-title {
3279
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 64px; color: #fff;
3280
+ line-height: 1.08; margin: 0 0 18px;
3281
+ }
3282
+ .lp-theme09-coverstory-lead {
3283
+ font-family: var(--lp-font); font-size: 19px; line-height: 1.7; color: rgba(255, 255, 255, 0.85);
3284
+ max-width: 640px; margin: 0 0 14px;
3285
+ }
3286
+ .lp-theme09-coverstory-meta {
3287
+ font-family: var(--lp-t9-en); font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0;
3288
+ }
3289
+
3290
+ /* ── quote_portrait(人物引述) ── */
3291
+ .lp-theme09-quoteportrait { display: grid; grid-template-columns: 44% 1fr; }
3292
+ .lp-theme09-quoteportrait-photo { position: relative; width: 100%; height: 100%; }
3293
+ .lp-theme09-quoteportrait-photo .lp-editable-image,
3294
+ .lp-theme09-quoteportrait-photo .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3295
+ .lp-theme09-quoteportrait-body {
3296
+ display: flex; flex-direction: column; justify-content: center; gap: 18px;
3297
+ padding: 72px 84px; position: relative; min-width: 0;
3298
+ }
3299
+ .lp-theme09-quoteportrait-mark {
3300
+ font-family: var(--lp-t9-en); text-transform: uppercase; letter-spacing: 0.2em;
3301
+ color: var(--lp-series-1); font-size: 13px;
3302
+ }
3303
+ .lp-theme09-quoteportrait-mark-quote {
3304
+ font-family: var(--lp-font-heading); color: var(--lp-series-1); font-size: 110px; line-height: 0.5;
3305
+ display: block; margin-bottom: 8px;
3306
+ }
3307
+ .lp-theme09-quoteportrait-text {
3308
+ font-family: var(--lp-font-heading); font-weight: 700; font-size: 32px; line-height: 1.4; color: #fff;
3309
+ margin: 0;
3310
+ }
3311
+ .lp-theme09-quoteportrait-attr {
3312
+ font-family: var(--lp-t9-en); font-size: 15px; color: rgba(255, 255, 255, 0.65); margin: 0;
3313
+ }
3314
+
3315
+ /* ── manifesto(金句主张) ── */
3316
+ .lp-theme09-manifesto { position: relative; }
3317
+ .lp-theme09-manifesto-inner {
3318
+ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
3319
+ padding: 96px 120px 52px; gap: 24px;
3320
+ }
3321
+ .lp-theme09-manifesto-kicker {
3322
+ font-family: var(--lp-t9-en); text-transform: uppercase; letter-spacing: 0.24em;
3323
+ color: var(--lp-series-1); font-size: 14px;
3324
+ }
3325
+ .lp-theme09-manifesto-lines { display: flex; flex-direction: column; gap: 4px; }
3326
+ .lp-theme09-manifesto-line {
3327
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 52px; line-height: 1.12; color: #fff; margin: 0;
3328
+ }
3329
+ .lp-theme09-manifesto-line.accent { color: var(--lp-series-1); }
3330
+ .lp-theme09-manifesto-line.offset-1 { margin-left: 64px; }
3331
+ .lp-theme09-manifesto-line.offset-2 { margin-left: 128px; }
3332
+ .lp-theme09-manifesto-foot {
3333
+ font-family: var(--lp-font); font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); max-width: 620px; margin: 0;
3334
+ }
3335
+ .lp-theme09-manifesto-bar { margin-top: 4px; }
3336
+
3337
+ /* ── annotated(批注精读) ── */
3338
+ .lp-theme09-annotated { display: flex; flex-direction: column; padding: 96px 70px 60px; }
3339
+ .lp-theme09-annotated-grid {
3340
+ display: grid; grid-template-columns: 1fr 320px; gap: 40px; flex: 1 1 auto; min-height: 0;
3341
+ }
3342
+ .lp-theme09-annotated-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
3343
+ .lp-theme09-annotated-title { font-family: var(--lp-font-heading); font-weight: 800; font-size: 40px; color: var(--lp-ink); margin: 0; line-height: 1.15; }
3344
+ .lp-theme09-annotated-photo { width: 100%; max-height: 280px; }
3345
+ .lp-theme09-annotated-photo .lp-editable-image,
3346
+ .lp-theme09-annotated-photo .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3347
+ .lp-theme09-annotated-body { font-family: var(--lp-font); font-size: 17px; line-height: 1.8; color: var(--lp-ink2); margin: 0; }
3348
+ .lp-theme09-annotated-rail { position: relative; padding-left: 26px; display: flex; flex-direction: column; gap: 18px; }
3349
+ .lp-theme09-annotated-rail-rule { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--lp-series-1); }
3350
+ .lp-theme09-annotated-note { font-family: var(--lp-t9-hand); font-size: 18px; line-height: 1.6; color: var(--lp-ink); margin: 0; }
3351
+
3352
+ /* ── diptych(双联对照) ── */
3353
+ .lp-theme09-diptych { display: flex; flex-direction: column; padding: 92px 70px 56px; }
3354
+ .lp-theme09-diptych-inner { display: flex; flex-direction: column; gap: 22px; flex: 1 1 auto; min-height: 0; }
3355
+ .lp-theme09-diptych-title { font-family: var(--lp-font-heading); font-weight: 800; font-size: 38px; color: var(--lp-ink); margin: 0; }
3356
+ .lp-theme09-diptych-pair { display: grid; grid-template-columns: 1fr 2px 1fr; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 0; flex: 1 1 auto; min-height: 0; }
3357
+ .lp-theme09-diptych-cell { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; }
3358
+ .lp-theme09-diptych-photo { width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: auto !important; }
3359
+ .lp-theme09-diptych-photo .lp-editable-image,
3360
+ .lp-theme09-diptych-photo .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3361
+ .lp-theme09-diptych-spine { background: var(--lp-ink); }
3362
+ .lp-theme09-diptych-cap { font-family: var(--lp-t9-en); font-size: 13px; color: var(--lp-ink3); }
3363
+ .lp-theme09-diptych-note { font-family: var(--lp-font); font-size: 16px; line-height: 1.7; color: var(--lp-ink2); margin: 0; }
3364
+
3365
+ /* ── case_folio(案例对开) ── */
3366
+ .lp-theme09-casefolio { display: flex; flex-direction: column; padding: 92px 70px 56px; }
3367
+ .lp-theme09-casefolio-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 48px; flex: 1 1 auto; min-height: 0; }
3368
+ .lp-theme09-casefolio-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
3369
+ .lp-theme09-casefolio-title { font-family: var(--lp-font-heading); font-weight: 800; font-size: 38px; color: var(--lp-ink); margin: 0; }
3370
+ .lp-theme09-casefolio-lead { margin: 0 !important; }
3371
+ .lp-theme09-casefolio-list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
3372
+ .lp-theme09-casefolio-item { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 3px solid var(--lp-series-1); }
3373
+ .lp-theme09-casefolio-item-title { font-family: var(--lp-font-heading); font-weight: 700; font-size: 19px; color: var(--lp-ink); margin: 0; }
3374
+ .lp-theme09-casefolio-item-desc { font-family: var(--lp-font); font-size: 15px; line-height: 1.6; color: var(--lp-ink2); margin: 0; }
3375
+ .lp-theme09-casefolio-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
3376
+ .lp-theme09-casefolio-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
3377
+ .lp-theme09-casefolio-photo { width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: auto !important; }
3378
+ .lp-theme09-casefolio-photo .lp-editable-image,
3379
+ .lp-theme09-casefolio-photo .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3380
+ .lp-theme09-casefolio-cap { font-family: var(--lp-t9-en); font-size: 12px; color: var(--lp-ink3); }
3381
+
3382
+ /* ── split_diagonal(斜切分屏) ── */
3383
+ .lp-theme09-splitdiag { padding: 0; position: relative; display: flex; align-items: center; }
3384
+ .lp-theme09-splitdiag-bg {
3385
+ position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0;
3386
+ }
3387
+ .lp-theme09-splitdiag-bg .lp-editable-image,
3388
+ .lp-theme09-splitdiag-bg .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3389
+ .lp-theme09-splitdiag-shape {
3390
+ position: absolute; top: 0; right: 0; width: 56%; height: 100%;
3391
+ background: var(--lp-series-1);
3392
+ clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
3393
+ z-index: 1; display: flex; align-items: center; justify-content: flex-end;
3394
+ pointer-events: none;
3395
+ }
3396
+ .lp-theme09-splitdiag-accent {
3397
+ font-family: var(--lp-t9-en); font-weight: 800; font-size: 120px; color: var(--lp-ink);
3398
+ opacity: 0.18; transform: rotate(-90deg); letter-spacing: 0.1em; padding-right: 40px;
3399
+ }
3400
+ .lp-theme09-splitdiag-inner {
3401
+ position: relative; z-index: 2;
3402
+ display: flex; flex-direction: column; justify-content: center; gap: 16px;
3403
+ padding: 40px 70px; max-width: 620px; pointer-events: none;
3404
+ }
3405
+ .lp-theme09-splitdiag-kicker,
3406
+ .lp-theme09-splitdiag-title,
3407
+ .lp-theme09-splitdiag-body,
3408
+ .lp-theme09-splitdiag-inner .lp-theme09-folio { pointer-events: auto; }
3409
+ .lp-theme09-splitdiag-kicker {
3410
+ font-family: var(--lp-t9-en); text-transform: uppercase; letter-spacing: 0.2em;
3411
+ color: var(--lp-series-1); font-size: 14px;
3412
+ }
3413
+ .lp-theme09-splitdiag-title {
3414
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 52px; color: #fff; margin: 0; line-height: 1.1;
3415
+ }
3416
+ .lp-theme09-splitdiag-body {
3417
+ font-family: var(--lp-font); font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); margin: 0;
3418
+ }
3419
+
3420
+ /* ═══════════════════════════════════════════════════════════════
3421
+ * 影像叙事 · 收官批(10 个)
3422
+ * typeriver / exhibit_wall / masonry / journey /
3423
+ * photo_cards / zine_spread / photo_scene / spotlight /
3424
+ * profile / gallery_wall
3425
+ * ═════════════════════════════════════════════════════════════ */
3426
+
3427
+ /* ── typeriver(字流版面) ── */
3428
+ .lp-theme09-typeriver { position: relative; }
3429
+ .lp-theme09-typeriver-inner {
3430
+ position: absolute; inset: 0; display: flex; align-items: flex-start; gap: 48px;
3431
+ padding: 80px 70px 60px; pointer-events: none;
3432
+ }
3433
+ .lp-theme09-typeriver-kicker,
3434
+ .lp-theme09-typeriver-river,
3435
+ .lp-theme09-typeriver .lp-theme09-colorbar,
3436
+ .lp-theme09-typeriver .lp-theme09-folio { pointer-events: auto; }
3437
+ .lp-theme09-typeriver-kicker {
3438
+ flex: 0 0 auto; max-width: 360px; font-family: var(--lp-font);
3439
+ font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.75); margin: 4px 0 0;
3440
+ }
3441
+ .lp-theme09-typeriver-river { display: flex; flex-direction: column; gap: 2px; }
3442
+ .lp-theme09-typeriver-line {
3443
+ display: flex; align-items: baseline; gap: 16px;
3444
+ padding: 2px 0;
3445
+ }
3446
+ .lp-theme09-typeriver-word {
3447
+ font-family: var(--lp-font-heading); font-weight: 800;
3448
+ font-size: calc(64px - var(--t9-river-i, 1) * 6px); line-height: 1.05;
3449
+ color: #fff; transition: color .2s;
3450
+ }
3451
+ .lp-theme09-typeriver-line.highlight .lp-theme09-typeriver-word { color: var(--lp-series-1); }
3452
+ .lp-theme09-typeriver-en {
3453
+ font-family: var(--lp-t9-en); font-size: 11px; letter-spacing: 0.16em;
3454
+ text-transform: uppercase; color: rgba(255,255,255,0.3); white-space: nowrap;
3455
+ }
3456
+
3457
+ /* ── exhibit_wall(陈列墙) ── */
3458
+ .lp-theme09-exhibitwall { display: flex; flex-direction: column; padding: 72px 70px 52px; }
3459
+ .lp-theme09-exhibitwall-title {
3460
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 38px;
3461
+ color: var(--lp-ink); margin: 0 0 36px;
3462
+ }
3463
+ .lp-theme09-exhibitwall-grid {
3464
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
3465
+ flex: 1 1 auto; min-height: 0;
3466
+ }
3467
+ .lp-theme09-exhibitwall-item { display: flex; flex-direction: column; gap: 10px; margin: 0; }
3468
+ .lp-theme09-exhibitwall-item.featured .lp-theme09-photo { outline: 3px solid var(--lp-series-1); outline-offset: -3px; border-radius: 4px; }
3469
+ .lp-theme09-exhibitwall-num {
3470
+ position: absolute; top: 12px; left: 14px; z-index: 2;
3471
+ background: rgba(0,0,0,.55); color: #fff; font-family: var(--lp-t9-en);
3472
+ font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 3px;
3473
+ }
3474
+ .lp-theme09-exhibitwall-label { display: flex; align-items: center; gap: 10px; }
3475
+ .lp-theme09-exhibitwall-label-num {
3476
+ font-family: var(--lp-t9-en); font-weight: 800; font-size: 15px;
3477
+ color: var(--lp-series-1); background: rgba(var(--lp-series-1-rgb, 0 212 184), .1);
3478
+ padding: 2px 8px; border-radius: 3px;
3479
+ }
3480
+ .lp-theme09-exhibitwall-label-title {
3481
+ font-family: var(--lp-font-heading); font-weight: 700; font-size: 17px; color: var(--lp-ink);
3482
+ }
3483
+ .lp-theme09-exhibitwall-label-sub {
3484
+ font-family: var(--lp-t9-en); font-size: 12px; color: var(--lp-ink3); letter-spacing: 0.04em;
3485
+ }
3486
+
3487
+ /* ── masonry(瀑布影像) ── */
3488
+ .lp-theme09-masonry { display: flex; flex-direction: column; padding: 72px 70px 52px; }
3489
+ .lp-theme09-masonry-title {
3490
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 38px;
3491
+ color: var(--lp-ink); margin: 0 0 28px;
3492
+ }
3493
+ .lp-theme09-masonry-wall {
3494
+ display: grid; grid-template-columns: repeat(3, 1fr);
3495
+ grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px;
3496
+ flex: 1 1 auto; min-height: 0;
3497
+ }
3498
+ .lp-theme09-masonry-card { display: flex; flex-direction: column; gap: 8px; margin: 0; overflow: hidden; }
3499
+ /* 瀑布不等高:tall 跨两行,medium 正常,short 缩短 */
3500
+ .lp-theme09-masonry-card.tall { grid-row: span 2; }
3501
+ .lp-theme09-masonry-card.short { max-height: 58%; }
3502
+ .lp-theme09-masonry-card.featured .lp-theme09-photo { outline: 2px solid var(--lp-series-1); outline-offset: -2px; border-radius: 4px; }
3503
+ .lp-theme09-masonry-num {
3504
+ position: absolute; top: 10px; left: 12px; z-index: 2;
3505
+ background: rgba(0,0,0,.5); color: #fff; font-family: var(--lp-t9-en);
3506
+ font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
3507
+ }
3508
+ .lp-theme09-masonry-caption { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
3509
+ .lp-theme09-masonry-title {
3510
+ font-family: var(--lp-font-heading); font-weight: 700; font-size: 16px; color: var(--lp-ink);
3511
+ }
3512
+ .lp-theme09-masonry-sub {
3513
+ font-family: var(--lp-t9-en); font-size: 11px; color: var(--lp-ink3); letter-spacing: 0.04em;
3514
+ }
3515
+
3516
+ /* ── journey(影像纪程) ── */
3517
+ .lp-theme09-journey { display: flex; flex-direction: column; padding: 72px 70px 56px; }
3518
+ .lp-theme09-journey-title {
3519
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 36px;
3520
+ color: #fff; margin: 0 0 28px;
3521
+ }
3522
+ .lp-theme09-journey-track {
3523
+ position: relative; display: flex; gap: 20px; flex: 1 1 auto; min-height: 0;
3524
+ padding-bottom: 40px;
3525
+ }
3526
+ .lp-theme09-journey-node { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; margin: 0; }
3527
+ .lp-theme09-journey-node.featured .lp-theme09-photo { outline: 2px solid var(--lp-series-1); outline-offset: -2px; border-radius: 5px; }
3528
+ .lp-theme09-journey-node-num {
3529
+ position: absolute; top: 10px; left: 12px; z-index: 2;
3530
+ background: var(--lp-series-1); color: var(--lp-inverse-panel-ink); font-family: var(--lp-t9-en);
3531
+ font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 50%;
3532
+ }
3533
+ .lp-theme09-journey-node-info { padding: 4px 6px; }
3534
+ .lp-theme09-journey-date {
3535
+ font-family: var(--lp-t9-en); font-weight: 700; font-size: 15px;
3536
+ color: var(--lp-series-1); display: block; margin-bottom: 2px;
3537
+ }
3538
+ .lp-theme09-journey-node-title {
3539
+ font-family: var(--lp-font); font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.82);
3540
+ }
3541
+ /* 时间轴 */
3542
+ .lp-theme09-journey-axis {
3543
+ position: absolute; bottom: 0; left: 0; right: 0;
3544
+ display: flex; align-items: flex-end; justify-content: space-around;
3545
+ padding: 0 10px;
3546
+ }
3547
+ .lp-theme09-journey-line {
3548
+ position: absolute; bottom: 7px; left: 5%; right: 5%;
3549
+ height: 2px; background: rgba(255,255,255,.25);
3550
+ }
3551
+ .lp-theme09-journey-dot-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; z-index: 1; }
3552
+ .lp-theme09-journey-dot {
3553
+ width: 10px; height: 10px; border-radius: 50%; background: var(--lp-series-1);
3554
+ box-shadow: 0 0 0 4px rgba(var(--lp-series-1-rgb, 0 212 184), .25);
3555
+ }
3556
+ .lp-theme09-journey-axis-date {
3557
+ font-family: var(--lp-t9-en); font-size: 10px; color: rgba(255,255,255,.5); white-space: nowrap;
3558
+ }
3559
+
3560
+ /* ── photo_cards(影像卡集) ── */
3561
+ .lp-theme09-photocards { display: flex; flex-direction: column; padding: 72px 70px 52px; }
3562
+ .lp-theme09-photocards-title {
3563
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 36px;
3564
+ color: var(--lp-ink); margin: 0 0 28px;
3565
+ }
3566
+ .lp-theme09-photocards-deck {
3567
+ display: flex; gap: 24px; flex: 1 1 auto; min-height: 0;
3568
+ }
3569
+ .lp-theme09-photocards-card {
3570
+ flex: 1; display: flex; flex-direction: column; gap: 0;
3571
+ background: var(--lp-paper); border: 1px solid var(--lp-rule);
3572
+ border-radius: 6px; overflow: hidden; position: relative;
3573
+ min-width: 0;
3574
+ }
3575
+ .lp-theme09-photocards-card.featured { border-color: var(--lp-series-1); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
3576
+ /* 折页角 */
3577
+ .lp-theme09-photocards-fold {
3578
+ position: absolute; top: 0; right: 0;
3579
+ width: 28px; height: 28px;
3580
+ background: linear-gradient(135deg, transparent 50%, var(--lp-rule) 50%);
3581
+ z-index: 3; pointer-events: none;
3582
+ }
3583
+ .lp-theme09-photocards-cardnum {
3584
+ position: absolute; top: 10px; left: 12px; z-index: 2;
3585
+ background: rgba(0,0,0,.5); color: #fff; font-family: var(--lp-t9-en);
3586
+ font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
3587
+ }
3588
+ .lp-theme09-photocards-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
3589
+ .lp-theme09-photocards-card-title {
3590
+ font-family: var(--lp-font-heading); font-weight: 700; font-size: 22px;
3591
+ color: var(--lp-ink); margin: 0; line-height: 1.2;
3592
+ }
3593
+ .lp-theme09-photocards-card-desc {
3594
+ font-family: var(--lp-font); font-size: 14px; line-height: 1.6; color: var(--lp-ink2); margin: 0;
3595
+ }
3596
+
3597
+ /* ── zine_spread(杂志跨页) ── */
3598
+ .lp-theme09-zinespread { display: grid; grid-template-columns: 1fr 380px; gap: 0; padding: 68px 60px 48px; }
3599
+ .lp-theme09-zinespread-text { display: flex; flex-direction: column; gap: 16px; padding-right: 32px; min-width: 0; }
3600
+ .lp-theme09-zinespread-head { display: flex; align-items: flex-start; gap: 16px; }
3601
+ .lp-theme09-zinespread-num {
3602
+ font-family: var(--lp-t9-en); font-weight: 900; font-size: 42px;
3603
+ color: var(--lp-series-1); line-height: 1;
3604
+ }
3605
+ .lp-theme09-zinespread-title {
3606
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 34px;
3607
+ color: var(--lp-ink); margin: 0; line-height: 1.15;
3608
+ }
3609
+ .lp-theme09-zinespread-titleen {
3610
+ font-family: var(--lp-t9-en); font-size: 14px; letter-spacing: 0.06em;
3611
+ color: var(--lp-ink3); display: block; margin-top: 4px;
3612
+ }
3613
+ .lp-theme09-zinespread-sf { font-style: italic; }
3614
+ .lp-theme09-zinespread-body {
3615
+ font-family: var(--lp-font); font-size: 16px; line-height: 1.78; color: var(--lp-ink2); margin: 0;
3616
+ }
3617
+ .lp-theme09-zinespread-pq {
3618
+ border-left: 3px solid var(--lp-series-1); padding-left: 18px;
3619
+ font-family: var(--lp-font-heading); font-size: 19px; font-weight: 600;
3620
+ font-style: italic; color: var(--lp-ink); line-height: 1.55;
3621
+ }
3622
+ .lp-theme09-zinespread-subphotos { display: flex; gap: 12px; margin-top: auto; }
3623
+ .lp-theme09-zinespread-subphotos .lp-theme09-photo { flex: 1; }
3624
+ .lp-theme09-zinespread-figlabel {
3625
+ font-family: var(--lp-t9-en); font-size: 11px; letter-spacing: 0.08em;
3626
+ color: var(--lp-ink3); display: block; margin-top: 6px;
3627
+ }
3628
+ /* 右侧出血大图 */
3629
+ .lp-theme09-zinespread-hero { margin: 0; min-width: 0; overflow: hidden; }
3630
+ .lp-theme09-zinespread-hero .lp-theme09-photo { height: 100%; }
3631
+
3632
+ /* ── photo_scene(场景通栏) ── */
3633
+ .lp-theme09-photoscene { padding: 0; }
3634
+ .lp-theme09-photoscene-bg {
3635
+ position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0;
3636
+ }
3637
+ .lp-theme09-photoscene-bg .lp-editable-image,
3638
+ .lp-theme09-photoscene-bg .lp-theme09-photo-img { width: 100%; height: 100%; object-fit: cover; }
3639
+ .lp-theme09-photoscene-inner {
3640
+ position: relative; z-index: 2; height: 100%;
3641
+ display: flex; flex-direction: column; justify-content: center;
3642
+ padding: 80px 90px; pointer-events: none; max-width: 720px;
3643
+ }
3644
+ .lp-theme09-photoscene-head,
3645
+ .lp-theme09-photoscene-tags,
3646
+ .lp-theme09-photoscene-cap,
3647
+ .lp-theme09-photoscene-inner .lp-theme09-folio { pointer-events: auto; }
3648
+ .lp-theme09-photoscene-head { margin-bottom: 24px; }
3649
+ .lp-theme09-photoscene-en {
3650
+ font-family: var(--lp-t9-en); font-size: 15px; letter-spacing: 0.1em;
3651
+ color: var(--lp-series-1); display: block; margin-bottom: 8px;
3652
+ }
3653
+ .lp-theme09-photoscene-title {
3654
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 54px;
3655
+ color: #fff; line-height: 1.1; margin: 0;
3656
+ }
3657
+ .lp-theme09-photoscene-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
3658
+ .lp-theme09-photoscene-tag {
3659
+ font-family: var(--lp-font); font-size: 14px; color: rgba(255,255,255,.85);
3660
+ background: rgba(255,255,255,.1); padding: 5px 14px; border-radius: 20px;
3661
+ border: 1px solid rgba(255,255,255,.18);
3662
+ }
3663
+ .lp-theme09-photoscene-cap {
3664
+ font-family: var(--lp-font); font-size: 17px; line-height: 1.7;
3665
+ color: rgba(255,255,255,.78); max-width: 560px; margin: 0;
3666
+ }
3667
+
3668
+ /* ── spotlight(专题洞察) ── */
3669
+ .lp-theme09-spotlight { display: flex; flex-direction: column; padding: 72px 70px 52px; }
3670
+ .lp-theme09-spotlight-title {
3671
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 36px;
3672
+ color: var(--lp-ink); margin: 0 0 28px;
3673
+ }
3674
+ .lp-theme09-spotlight-grid {
3675
+ display: grid; grid-template-columns: 280px 1fr; gap: 36px;
3676
+ flex: 1 1 auto; min-height: 0;
3677
+ }
3678
+ .lp-theme09-spotlight-photos { display: flex; flex-direction: column; gap: 14px; }
3679
+ .lp-theme09-spotlight-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
3680
+ .lp-theme09-spotlight-kicker {
3681
+ font-family: var(--lp-t9-en); font-size: 12px; letter-spacing: 0.12em;
3682
+ text-transform: uppercase; color: var(--lp-series-1);
3683
+ }
3684
+ .lp-theme09-spotlight-headline {
3685
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 28px;
3686
+ color: var(--lp-ink); line-height: 1.25; margin: 0;
3687
+ }
3688
+ .lp-theme09-spotlight-subtitle {
3689
+ font-family: var(--lp-t9-en); font-size: 14px; color: var(--lp-ink3); font-style: italic;
3690
+ }
3691
+ .lp-theme09-spotlight-para {
3692
+ font-family: var(--lp-font); font-size: 16px; line-height: 1.72; color: var(--lp-ink2); margin: 0;
3693
+ }
3694
+ /* 指标条 */
3695
+ .lp-theme09-spotlight-metrics {
3696
+ display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap;
3697
+ }
3698
+ .lp-theme09-spotlight-metric {
3699
+ background: var(--lp-accent); color: #fff; padding: 12px 20px; border-radius: 6px;
3700
+ display: flex; flex-direction: column; gap: 2px; min-width: 160px;
3701
+ }
3702
+ .lp-theme09-spotlight-metric-val {
3703
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 26px;
3704
+ color: var(--lp-on-accent);
3705
+ }
3706
+ .lp-theme09-spotlight-metric-lbl {
3707
+ font-family: var(--lp-font); font-size: 13px; color: var(--lp-on-accent);
3708
+ }
3709
+
3710
+ /* ── profile(关于我们) ── */
3711
+ .lp-theme09-profile { display: flex; flex-direction: column; padding: 52px 54px 40px; }
3712
+ .lp-theme09-profile-brand {
3713
+ display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
3714
+ }
3715
+ .lp-theme09-profile-org {
3716
+ font-family: var(--lp-font-heading); font-weight: 900; font-size: 32px;
3717
+ color: var(--lp-ink); margin: 0;
3718
+ }
3719
+ .lp-theme09-profile-org-en {
3720
+ font-family: var(--lp-t9-en); font-size: 15px; letter-spacing: 0.04em;
3721
+ color: var(--lp-ink3); background: var(--lp-paper); padding: 3px 12px;
3722
+ border: 1px solid var(--lp-rule); border-radius: 20px;
3723
+ }
3724
+ .lp-theme09-profile-tagline {
3725
+ font-family: var(--lp-font); font-size: 14px; color: var(--lp-ink3);
3726
+ }
3727
+ .lp-theme09-profile-grid {
3728
+ display: grid; grid-template-columns: 1fr 360px; gap: 28px;
3729
+ flex: 1 1 auto; min-height: 0; overflow: hidden;
3730
+ }
3731
+ .lp-theme09-profile-projects { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
3732
+ .lp-theme09-profile-proj {
3733
+ background: var(--lp-surface-solid); border: 1px solid var(--lp-border); border-radius: 8px; padding: 18px 20px;
3734
+ display: flex; flex-direction: column; gap: 6px;
3735
+ }
3736
+ .lp-theme09-profile-proj-bullet {
3737
+ display: inline-block; width: 8px; height: 8px; border-radius: 50%;
3738
+ background: var(--lp-series-1); margin-bottom: 2px;
3739
+ }
3740
+ .lp-theme09-profile-proj-head { display: flex; align-items: center; gap: 10px; }
3741
+ .lp-theme09-profile-proj-title {
3742
+ font-family: var(--lp-font-heading); font-weight: 700; font-size: 18px;
3743
+ color: var(--lp-ink); margin: 0;
3744
+ }
3745
+ .lp-theme09-profile-proj-tag {
3746
+ font-family: var(--lp-t9-en); font-size: 11px; letter-spacing: 0.04em;
3747
+ color: var(--lp-ink); background: rgba(var(--lp-series-1-rgb, 0 212 184), .15);
3748
+ padding: 2px 8px; border-radius: 10px;
3749
+ }
3750
+ .lp-theme09-profile-proj-period {
3751
+ font-family: var(--lp-t9-en); font-size: 12px; color: var(--lp-ink3);
3752
+ }
3753
+ .lp-theme09-profile-proj-desc {
3754
+ font-family: var(--lp-font); font-size: 14px; line-height: 1.65; color: var(--lp-ink2); margin: 0;
3755
+ }
3756
+ /* 指标摘要 */
3757
+ .lp-theme09-profile-stats {
3758
+ display: flex; gap: 20px; margin-top: 8px; flex-wrap: wrap;
3759
+ }
3760
+ .lp-theme09-profile-stat b {
3761
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 28px;
3762
+ color: var(--lp-ink); display: block; line-height: 1;
3763
+ }
3764
+ .lp-theme09-profile-stat small {
3765
+ font-family: var(--lp-font); font-size: 12px; color: var(--lp-ink3);
3766
+ }
3767
+ .lp-theme09-profile-stat small.t9-ac { color: var(--lp-series-1); }
3768
+ /* 右侧卡片网格 */
3769
+ .lp-theme09-profile-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
3770
+ .lp-theme09-profile-side .lp-theme09-photo { flex: 1; min-height: 200px; }
3771
+ .lp-theme09-profile-photo-meta {
3772
+ position: absolute; bottom: 14px; left: 14px; z-index: 2;
3773
+ background: rgba(13,15,20,.72); backdrop-filter: blur(6px);
3774
+ color: #F4F1EA; font-family: var(--lp-font); font-size: 13px; line-height: 1.7;
3775
+ padding: 10px 14px; border-radius: 6px;
3776
+ }
3777
+ .lp-theme09-profile-photo-meta span { color: #F4F1EA; font-weight: 700; }
3778
+ .lp-theme09-profile-cards {
3779
+ display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
3780
+ }
3781
+ .lp-theme09-profile-card {
3782
+ background: rgba(0,0,0,.25); border-radius: 6px; padding: 12px 14px;
3783
+ display: flex; flex-direction: column; gap: 4px;
3784
+ }
3785
+ .lp-theme09-profile-card-abbr {
3786
+ font-family: var(--lp-t9-en); font-weight: 800; font-size: 18px;
3787
+ color: var(--lp-text-inverse); background: var(--lp-ink);
3788
+ width: 32px; height: 32px; border-radius: 6px;
3789
+ display: inline-flex; align-items: center; justify-content: center;
3790
+ }
3791
+ .lp-theme09-profile-card-title {
3792
+ font-family: var(--lp-font); font-size: 13px; color: var(--lp-ink);
3793
+ }
3794
+ .lp-theme09-profile-card-dots {
3795
+ display: flex; gap: 3px; margin-top: 4px;
3796
+ }
3797
+ .lp-theme09-profile-card-dots::before {
3798
+ content: ''; display: flex; gap: 3px;
3799
+ background: repeating-linear-gradient(90deg, var(--lp-series-1) 0 3px, transparent 0 6px);
3800
+ width: calc(var(--dots, 3) * 6px); height: 4px; border-radius: 2px;
3801
+ }
3802
+ /* 标签行 + 条形码 */
3803
+ .lp-theme09-profile-tagrow {
3804
+ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px;
3805
+ }
3806
+ .lp-theme09-profile-chip {
3807
+ font-family: var(--lp-font); font-size: 12px; color: var(--lp-ink);
3808
+ background: rgba(255,255,255,.08); padding: 4px 12px; border-radius: 14px;
3809
+ border: 1px solid rgba(255,255,255,.12);
3810
+ }
3811
+ .lp-theme09-profile-barcode {
3812
+ grid-column: 1 / -1; height: 28px;
3813
+ background: repeating-linear-gradient(
3814
+ 90deg, #fff 0 2px, transparent 0 4px
3815
+ );
3816
+ opacity: .35; border-radius: 2px; margin-top: 4px;
3817
+ }
3818
+
3819
+ /* ── gallery_wall(企业掠影) ── */
3820
+ .lp-theme09-gallerywall { padding: 0; display: flex; flex-direction: column; }
3821
+ .lp-theme09-gallerywall-header {
3822
+ display: flex; align-items: baseline; gap: 16px;
3823
+ padding: 56px 70px 0; position: relative; z-index: 2; pointer-events: none;
3824
+ }
3825
+ .lp-theme09-gallerywall-header > * { pointer-events: auto; }
3826
+ .lp-theme09-gallerywall-section {
3827
+ font-family: var(--lp-t9-en); text-transform: uppercase; letter-spacing: 0.16em;
3828
+ color: var(--lp-series-1); font-size: 13px;
3829
+ }
3830
+ .lp-theme09-gallerywall-title {
3831
+ font-family: var(--lp-font-heading); font-weight: 800; font-size: 38px;
3832
+ color: #fff; margin: 0;
3833
+ }
3834
+ .lp-theme09-gallerywall-titleen {
3835
+ margin-left: auto; font-family: var(--lp-t9-en); font-size: 20px;
3836
+ color: var(--lp-ink3); font-weight: 300;
3837
+ }
3838
+ .lp-theme09-gallerywall-wall {
3839
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
3840
+ padding: 20px 70px 0; flex: 1 1 auto; min-height: 0; overflow: hidden;
3841
+ }
3842
+ .lp-theme09-gallerywall-cell { margin: 0; }
3843
+ .lp-theme09-gallerywall-footer {
3844
+ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
3845
+ padding: 20px 70px 44px; position: relative; z-index: 2;
3846
+ }
3847
+ .lp-theme09-gallerywall-caption {
3848
+ font-family: var(--lp-font); font-size: 15px; line-height: 1.65;
3849
+ color: rgba(255,255,255,.7); max-width: 580px; margin: 0;
3850
+ }
3851
+ .lp-theme09-gallerywall-tags { display: flex; flex-wrap: wrap; gap: 8px; }
3852
+ .lp-theme09-gallerywall-tag {
3853
+ font-family: var(--lp-font); font-size: 13px; color: rgba(255,255,255,.7);
3854
+ padding: 5px 14px; border-radius: 20px;
3855
+ border: 1px solid rgba(255,255,255,.2);
3856
+ }
3857
+ .lp-theme09-gallerywall-tag.active {
3858
+ background: var(--lp-series-1); color: var(--lp-inverse-panel-ink);
3859
+ border-color: var(--lp-series-1); font-weight: 600;
3860
+ }
3861
+
3862
+ /* ═══════════════════════════════════════════════════════════════
3863
+ * 图表框架(P2 数据图表共用)
3864
+ * ════════════════════════════════════════════════════════════════ */
3865
+ .lp-theme09-accent-text { color: var(--lp-accent); font-style: normal; }
3866
+ .lp-t9-serif { font-family: var(--lp-font-heading); }
3867
+
3868
+ .lp-theme09-frame-chart-canvas {
3869
+ display: flex;
3870
+ flex-direction: column;
3871
+ padding: 54px 70px 40px;
3872
+ }
3873
+ .lp-theme09-chart { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 14px; }
3874
+ .lp-theme09-chart-head { display: flex; flex-direction: column; gap: 6px; }
3875
+ .lp-theme09-chart-kicker {
3876
+ font-family: var(--lp-t9-en); font-size: 12px; letter-spacing: .14em;
3877
+ text-transform: uppercase; color: var(--lp-accent); font-weight: 600;
3878
+ }
3879
+ .lp-theme09-chart-title {
3880
+ font-family: var(--lp-font-heading); font-weight: 700; font-size: 30px; line-height: 1.2;
3881
+ color: var(--lp-ink); margin: 0;
3882
+ }
3883
+ .lp-theme09-chart-subtitle,
3884
+ .lp-theme09-dotmatrix-sub,
3885
+ .lp-theme09-marketoverview-sub,
3886
+ .lp-theme09-streamgraph-sub,
3887
+ .lp-theme09-chord-sub,
3888
+ .lp-theme09-sunburst-sub,
3889
+ .lp-theme09-ribbon-sub,
3890
+ .lp-theme09-rounds-sub,
3891
+ .lp-theme09-ranking-sub {
3892
+ font-family: var(--lp-font); font-size: 15px; line-height: 1.6; color: var(--lp-ink3); margin: 0; max-width: 780px;
3893
+ }
3894
+ .lp-theme09-chart-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
3895
+ .lp-theme09-chart-foot {
3896
+ display: flex; align-items: center; justify-content: space-between; gap: 24px;
3897
+ border-top: 1px solid var(--lp-rule); padding-top: 10px; margin-top: 2px;
3898
+ }
3899
+ .lp-theme09-chart-foot-l, .lp-theme09-chart-foot-r {
3900
+ font-family: var(--lp-font); font-size: 12px; color: var(--lp-ink3);
3901
+ }
3902
+ .lp-theme09-chart-body-inner { width: 100%; height: 100%; min-height: 0; }
3903
+ /* 共享图表绘制区:所有 P2 图表组件统一用它承载 echarts/SVG/HTML,自动撑满 */
3904
+ .lp-theme09-chart-area { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; position: relative; }
3905
+ .lp-theme09-chart-area > div,
3906
+ .lp-theme09-chart-area > svg { width: 100% !important; height: 100% !important; flex: 1 1 auto; min-height: 0; }
3907
+ .lp-theme09-chart-area .lp-theme09-chart-svg { width: 100%; height: 100%; }
3908
+
3909
+ /* ── dotmatrix 百点阵 ── */
3910
+ .lp-theme09-dotmatrix-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; justify-content: center; }
3911
+ .lp-theme09-dotmatrix-grid {
3912
+ display: grid; grid-template-columns: repeat(10, 1fr); gap: 9px;
3913
+ width: min(460px, 62%); margin: 6px 0; flex: 0 0 auto;
3914
+ }
3915
+ .lp-theme09-dotmatrix-dot { aspect-ratio: 1 / 1; border-radius: 50%; }
3916
+ .lp-theme09-dotmatrix-legend { display: flex; align-items: center; gap: 10px; font-family: var(--lp-font); font-size: 14px; color: var(--lp-ink2); }
3917
+ .lp-theme09-dotmatrix-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
3918
+ .lp-theme09-dotmatrix-pct { margin-left: auto; font-family: var(--lp-font-mono); font-weight: 700; font-size: 20px; }
3919
+
3920
+ /* ── market_overview 四象限 ── */
3921
+ .lp-theme09-marketoverview-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
3922
+ .lp-theme09-marketoverview-chart { position: relative; flex: 1 1 auto; min-height: 0; display: block; }
3923
+ .lp-theme09-marketoverview-echart { width: 100%; height: 100%; min-height: 0; }
3924
+ .lp-theme09-marketoverview-quads {
3925
+ position: absolute; inset: 26px 30px 40px 44px; display: grid;
3926
+ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; pointer-events: none;
3927
+ }
3928
+ .lp-theme09-marketoverview-quads span { font-family: var(--lp-font); font-size: 12px; color: var(--lp-ink3); padding: 8px; }
3929
+ .lp-theme09-marketoverview-quads span:nth-child(1) { align-self: start; justify-self: start; }
3930
+ .lp-theme09-marketoverview-quads span:nth-child(2) { align-self: start; justify-self: end; text-align: right; }
3931
+ .lp-theme09-marketoverview-quads span:nth-child(3) { align-self: end; justify-self: start; }
3932
+ .lp-theme09-marketoverview-quads span:nth-child(4) { align-self: end; justify-self: end; text-align: right; }
3933
+ .lp-theme09-marketoverview-trend { display: flex; gap: 6px; height: 26px; flex: 0 0 auto; }
3934
+ .lp-theme09-marketoverview-seg { display: flex; align-items: center; gap: 6px; }
3935
+ .lp-theme09-marketoverview-seg span { height: 10px; border-radius: 1px; flex: 0 0 auto; }
3936
+ .lp-theme09-marketoverview-seg b { font-family: var(--lp-font-mono); font-size: 12px; color: var(--lp-ink2); }
3937
+
3938
+ /* ── streamgraph / chord / sunburst / ribbon / rounds / ranking 图表容器 ── */
3939
+ .lp-theme09-streamgraph-chart,
3940
+ .lp-theme09-chord-chart,
3941
+ .lp-theme09-sunburst-chart,
3942
+ .lp-theme09-ribbon-chart,
3943
+ .lp-theme09-rounds-chart,
3944
+ .lp-theme09-ranking-chart { flex: 1 1 auto; min-height: 0; }
3945
+ .lp-theme09-streamgraph-echart,
3946
+ .lp-theme09-chord-echart,
3947
+ .lp-theme09-sunburst-echart,
3948
+ .lp-theme09-ribbon-echart,
3949
+ .lp-theme09-rounds-echart,
3950
+ .lp-theme09-ranking-echart { width: 100%; height: 100%; min-height: 0; }