kaschber 0.3.2 → 0.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. checksums.yaml +4 -4
  2. data/assets/built/screen.css +2 -2278
  3. metadata +1 -1
@@ -1,2278 +1,2 @@
1
- /* Table of Contents
2
- /* ------------------------------------------------------------
3
-
4
- This is a development CSS file which is built to a minified
5
- production stylesheet in assets/built/screen.css
6
-
7
- 1. Global Styles
8
- 2. Layout
9
- 3. Special Templates
10
- 4. Site Header
11
- 5. Site Navigation
12
- 6. Post Feed
13
- 7. Single Post
14
- 7.1. Post Byline
15
- 7.2. Members Subscribe Form
16
- 7.4. Related Posts
17
- 7.5. Koenig Styles
18
- 7.6 Comments
19
- 8. Author Template
20
- 9. Error Template
21
- 11. Site Footer
22
- 12. Dark Mode
23
-
24
- */
25
-
26
- /* 1. Global - Set up the things
27
- /* ---------------------------------------------------------- */
28
-
29
- /* Import CSS reset and base styles */
30
- @import "global.css";
31
-
32
- :root {
33
-
34
- /* Colours */
35
- --color-green: #a4d037;
36
- --color-yellow: #fecd35;
37
- --color-red: #f05230;
38
- --color-darkgrey: #15171A;
39
- --color-midgrey: #738a94;
40
- --color-lightgrey: #f1f1f1;
41
- --color-secondary-text: #979797;
42
- --color-border: #e1e1e1;
43
- --color-wash: #e5eff5;
44
- --color-darkmode: #151719;
45
-
46
- /*
47
- An accent color is also set by Ghost itself in
48
- Ghost Admin > Settings > Brand
49
-
50
- --ghost-accent-color: {value};
51
-
52
- You can use this variable throughout your styles
53
- */
54
-
55
- /* Fonts */
56
- --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
57
- --font-serif: Georgia, Times, serif;
58
- --font-mono: Menlo, Courier, monospace;
59
-
60
- }
61
-
62
-
63
- /* 2. Layout - Page building blocks
64
- /* ---------------------------------------------------------- */
65
-
66
- .viewport {
67
- display: flex;
68
- flex-direction: column;
69
- min-height: 100vh;
70
- }
71
-
72
- .site-content {
73
- flex-grow: 1;
74
- }
75
-
76
- /* Full width page blocks */
77
- .outer {
78
- position: relative;
79
- padding: 0 max(4vmin, 20px);
80
- }
81
-
82
- /* Centered content container blocks */
83
- .inner {
84
- margin: 0 auto;
85
- max-width: 1200px;
86
- width: 100%;
87
- }
88
-
89
-
90
- /* 4. Site Header
91
- /* ---------------------------------------------------------- */
92
-
93
- .site-header {
94
- position: relative;
95
- color: #fff;
96
- background: var(--ghost-accent-color);
97
- }
98
-
99
- .site-header-cover {
100
- position: absolute;
101
- top: 0;
102
- right: 0;
103
- bottom: 0;
104
- left: 0;
105
- width: 100%;
106
- height: 100%;
107
- object-fit: cover;
108
- }
109
-
110
- .site-header-content {
111
- position: relative;
112
- z-index: 100;
113
- display: flex;
114
- align-items: center;
115
- padding-top: 6.4vmin;
116
- padding-bottom: 6.4vmin;
117
- text-align: center;
118
- color: var(--color-darkgrey);
119
- }
120
-
121
- .has-cover .site-header-content {
122
- min-height: 560px;
123
- background-color: var(--ghost-accent-color);
124
- color: #fff;
125
- }
126
-
127
- body:not(.has-cover) .site-header-content:not(.left-aligned) {
128
- padding-bottom: max(4.8vmin, 24px);
129
- }
130
-
131
- .site-header-content.left-aligned {
132
- padding-bottom: 0;
133
- text-align: left;
134
- }
135
-
136
- .has-cover .site-header-content.left-aligned {
137
- align-items: flex-end;
138
- padding-bottom: 6.4vmin;
139
- }
140
-
141
- .site-header-content.no-content {
142
- padding-top: 0;
143
- }
144
-
145
- .site-header-inner {
146
- position: relative;
147
- }
148
-
149
- .site-header-content.left-aligned .site-header-inner {
150
- align-items: flex-start;
151
- }
152
-
153
- .site-logo {
154
- flex-shrink: 0;
155
- margin: 0 auto;
156
- max-height: 120px;
157
- }
158
-
159
- .site-header-content.left-aligned .site-logo {
160
- margin-right: auto;
161
- margin-left: 0;
162
- max-height: 96px;
163
- }
164
-
165
- .site-title {
166
- z-index: 10;
167
- margin: 0;
168
- padding: 0;
169
- font-size: 5rem;
170
- font-weight: 800;
171
- }
172
-
173
- .has-serif-title .site-title {
174
- font-family: var(--font-serif);
175
- }
176
-
177
- .has-cover .site-title {
178
- font-size: 6rem;
179
- }
180
-
181
- .site-header-content.left-aligned .site-title {
182
- font-size: 4.4rem;
183
- }
184
-
185
- .has-cover .site-header-content.left-aligned .site-title {
186
- font-size: 4.6rem;
187
- }
188
-
189
- .site-description {
190
- display: inline-block;
191
- z-index: 10;
192
- max-width: 560px;
193
- font-size: 2.4rem;
194
- font-weight: 500;
195
- line-height: 1.4;
196
- }
197
-
198
- :is(.site-logo, .site-title) + .site-description {
199
- margin-top: 8px;
200
- font-size: 2.1rem;
201
- font-weight: 400;
202
- }
203
-
204
- .site-logo + .site-description {
205
- margin-top: 20px;
206
- }
207
-
208
- .site-title + .site-description {
209
- color: var(--color-secondary-text);
210
- }
211
-
212
- .has-cover .site-description {
213
- font-size: 3.2rem;
214
- letter-spacing: -0.005em;
215
- color: #fff;
216
- }
217
-
218
- .has-cover :is(.site-logo, .site-title) + .site-description {
219
- font-size: 2.4rem;
220
- }
221
-
222
- .has-cover .site-header-content.left-aligned :is(.site-logo, .site-title) + .site-description {
223
- font-size: 2.2rem;
224
- }
225
-
226
- @media (max-width: 767px) {
227
- .has-cover .site-header-content {
228
- min-height: 240px;
229
- }
230
- .site-header-inner {
231
- gap: 16px;
232
- }
233
- .site-logo {
234
- max-width: 60%;
235
- }
236
- .site-title {
237
- font-size: 3.4rem !important;
238
- }
239
- .site-description {
240
- font-size: 1.9rem !important;
241
- }
242
- .site-logo + .site-description {
243
- margin-top: 12px !important;
244
- }
245
- .site-title + .site-description {
246
- margin-top: 4px !important;
247
- }
248
- }
249
-
250
-
251
- /* 5. Site Navigation
252
- /* ---------------------------------------------------------- */
253
-
254
- .gh-head {
255
- padding-top: min(24px, 3.6vmin);
256
- padding-bottom: min(24px, 3.6vmin);
257
- font-size: 1.6rem;
258
- line-height: 1.3em;
259
- background-color: #fff;
260
- }
261
-
262
- .has-cover:not(.home-template) .gh-head {
263
- background-color: var(--ghost-accent-color);
264
- color: #fff;
265
- }
266
-
267
- .home-template.has-cover .gh-head {
268
- position: absolute;
269
- top: 0;
270
- right: 0;
271
- left: 0;
272
- z-index: 2000;
273
- background-color: transparent;
274
- color: #fff;
275
- }
276
-
277
- .gh-head a {
278
- text-decoration: none;
279
- }
280
-
281
- .gh-head-inner {
282
- display: grid;
283
- grid-gap: 40px;
284
- grid-template-columns: auto auto 1fr;
285
- grid-auto-flow: row dense;
286
- }
287
-
288
-
289
- /* Brand
290
- /* ---------------------------------------------------------- */
291
-
292
- .gh-head-brand {
293
- display: flex;
294
- align-items: center;
295
- height: 40px;
296
- max-width: 400px;
297
- word-break: break-all;
298
- }
299
-
300
- .gh-head-logo {
301
- display: block;
302
- font-weight: 800;
303
- font-size: 2.6rem;
304
- letter-spacing: -0.02em;
305
- color: inherit;
306
- }
307
-
308
- .gh-head-logo.no-image {
309
- margin-top: -2px;
310
- }
311
-
312
- .has-cover .gh-head-logo {
313
- color: #fff;
314
- }
315
-
316
- .no-logo .gh-head-logo {
317
- display: none;
318
- }
319
-
320
- .gh-head-logo img {
321
- max-height: 26px;
322
- }
323
-
324
- .gh-head-brand-wrapper {
325
- display: flex;
326
- align-items: center;
327
- }
328
-
329
-
330
- /* Primary Navigation
331
- /* ---------------------------------------------------------- */
332
-
333
- .gh-head-menu {
334
- display: flex;
335
- align-items: center;
336
- margin-top: 1px;
337
- font-weight: 500;
338
- }
339
-
340
- .no-logo .gh-head-menu {
341
- margin-left: -40px;
342
- }
343
-
344
- .gh-head-menu .nav {
345
- display: inline-flex;
346
- flex-wrap: wrap;
347
- align-items: center;
348
- gap: 32px;
349
- list-style: none;
350
- margin: 0;
351
- padding: 0;
352
- }
353
-
354
- .gh-head-menu .nav li {
355
- margin: 0;
356
- padding: 0;
357
- }
358
-
359
- .gh-head-menu .nav a {
360
- display: inline-block;
361
- line-height: 1.7;
362
- color: inherit;
363
- }
364
-
365
- .gh-head-menu .nav a:hover {
366
- opacity: 0.9;
367
- }
368
-
369
-
370
- /* Secondary Navigation
371
- /* ---------------------------------------------------------- */
372
-
373
- .gh-social {
374
- display: flex;
375
- align-items: center;
376
- gap: 20px;
377
- }
378
-
379
- .gh-social-link {
380
- line-height: 0;
381
- color: inherit;
382
- }
383
-
384
- .gh-social-link:hover {
385
- opacity: 0.9;
386
- }
387
-
388
- .gh-social-link svg {
389
- width: 18px;
390
- height: 18px;
391
- }
392
-
393
- .gh-head-actions {
394
- display: flex;
395
- justify-content: flex-end;
396
- align-items: center;
397
- gap: 24px;
398
- list-style: none;
399
- text-align: right;
400
- }
401
-
402
- .gh-head-button {
403
- display: inline-flex;
404
- align-items: center;
405
- padding: 8px 16px;
406
- height: 40px;
407
- font-weight: 600;
408
- letter-spacing: -0.005em;
409
- font-size: 1.5rem;
410
- border-radius: 6px;
411
- color: #fff;
412
- background: var(--ghost-accent-color);
413
- }
414
-
415
- .has-cover .gh-head-button {
416
- color: var(--color-darkgrey);
417
- background: #fff;
418
- }
419
-
420
- /* Search
421
- /* ---------------------------------------------------------- */
422
-
423
- .gh-search {
424
- display: inline-flex;
425
- align-items: center;
426
- justify-content: center;
427
- width: 32px;
428
- height: 32px;
429
- padding: 0;
430
- cursor: pointer;
431
- background-color: transparent;
432
- border: 0;
433
- outline: none;
434
- }
435
-
436
- .gh-search:hover {
437
- opacity: 0.9;
438
- }
439
-
440
- @media (max-width: 991px) {
441
- .gh-head-actions .gh-search {
442
- display: none;
443
- }
444
- }
445
-
446
- @media (min-width: 992px) {
447
- .gh-head-brand .gh-search {
448
- display: none;
449
- }
450
- }
451
-
452
-
453
- /* Search
454
- /* ---------------------------------------------------------- */
455
-
456
- .gh-search {
457
- display: inline-flex;
458
- align-items: center;
459
- justify-content: center;
460
- width: 32px;
461
- height: 32px;
462
- padding: 0;
463
- cursor: pointer;
464
- background-color: transparent;
465
- border: 0;
466
- outline: none;
467
- }
468
-
469
- .gh-search:hover {
470
- opacity: 0.9;
471
- }
472
-
473
- .gh-head-brand .gh-search {
474
- margin-right: 8px;
475
- }
476
-
477
- .gh-head-actions .gh-search {
478
- margin-right: -10px;
479
- }
480
-
481
- @media (max-width: 991px) {
482
- .gh-head-actions .gh-search {
483
- display: none;
484
- }
485
- }
486
-
487
- @media (min-width: 992px) {
488
- .gh-head-brand .gh-search {
489
- display: none;
490
- }
491
- }
492
-
493
-
494
- /* Mobile Menu Trigger
495
- /* ---------------------------------------------------------- */
496
-
497
- .gh-burger {
498
- position: relative;
499
- display: none;
500
- cursor: pointer;
501
- }
502
-
503
- .gh-burger-box {
504
- position: relative;
505
- display: flex;
506
- align-items: center;
507
- justify-content: center;
508
- width: 33px;
509
- height: 33px;
510
- }
511
-
512
- .has-cover .gh-burger-box {
513
- color: #fff;
514
- }
515
-
516
- .gh-burger-inner {
517
- width: 100%;
518
- height: 100%;
519
- }
520
-
521
- .gh-burger-box::before {
522
- position: absolute;
523
- display: block;
524
- top: 0;
525
- left: 0;
526
- bottom: 0;
527
- margin: auto;
528
- content: '';
529
- width: 100%;
530
- height: 1px;
531
- background: currentcolor;
532
- transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
533
- will-change: transform, width;
534
- }
535
-
536
- .gh-burger-inner::before,
537
- .gh-burger-inner::after {
538
- position: absolute;
539
- display: block;
540
- top: 0;
541
- left: 0;
542
- bottom: 0;
543
- margin: auto;
544
- content: '';
545
- width: 100%;
546
- height: 1px;
547
- background: currentcolor;
548
- transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
549
- will-change: transform, width;
550
- }
551
-
552
- .gh-burger-inner::before {
553
- transform: translatey(-6px);
554
- }
555
- .gh-burger-inner::after {
556
- transform: translatey(6px);
557
- }
558
-
559
- body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
560
- transform: translatey(-8px);
561
- }
562
- body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
563
- transform: translatey(8px);
564
- }
565
-
566
- .gh-head-open .gh-burger-box::before {
567
- width: 0;
568
- transform: translatex(19px);
569
- transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
570
- }
571
-
572
- .gh-head-open .gh-burger-inner::before {
573
- width: 26px;
574
- transform: translatex(6px) rotate(135deg);
575
- }
576
-
577
- .gh-head-open .gh-burger-inner::after {
578
- width: 26px;
579
- transform: translatex(6px) rotate(-135deg);
580
- }
581
-
582
-
583
- /* Mobile Menu
584
- /* ---------------------------------------------------------- */
585
- /* IDs needed to ensure sufficient specificity */
586
-
587
- @media (max-width: 991px) {
588
- .gh-burger {
589
- display: inline-block;
590
- }
591
- #gh-head {
592
- overflow: hidden;
593
- }
594
- #gh-head .gh-head-inner {
595
- height: 100%;
596
- grid-template-columns: 1fr;
597
- }
598
- #gh-head .gh-head-brand {
599
- position: relative;
600
- z-index: 10;
601
- grid-column-start: auto;
602
- max-width: none;
603
- display: flex;
604
- align-items: center;
605
- justify-content: space-between;
606
- user-select: none;
607
- }
608
- .no-logo #gh-head .gh-head-brand {
609
- justify-content: flex-end;
610
- }
611
- #gh-head .gh-head-menu {
612
- align-self: center;
613
- display: flex;
614
- flex-direction: column;
615
- align-items: center;
616
- text-align: center;
617
- margin: 0 0 10vh 0;
618
- font-weight: 300;
619
- font-size: 3.6rem;
620
- line-height: 1.1em;
621
- }
622
- #gh-head .gh-head-menu .nav {
623
- display: flex;
624
- flex-direction: column;
625
- align-items: center;
626
- gap: 16px;
627
- font-weight: 500;
628
- }
629
- #gh-head .gh-head-actions {
630
- flex-direction: column-reverse;
631
- justify-content: center;
632
- padding: 20px 0 32px;
633
- text-align: left;
634
- }
635
- /* Hide collapsed content */
636
- #gh-head .gh-head-actions,
637
- #gh-head .gh-head-menu {
638
- display: none;
639
- }
640
- /* Open the menu */
641
- .gh-head-open {
642
- overflow: hidden;
643
- height: 100vh;
644
- }
645
- .gh-head-open #gh-head {
646
- position: fixed;
647
- top: 0;
648
- right: 0;
649
- bottom: 0;
650
- left: 0;
651
- z-index: 3999999;
652
- overflow-y: scroll;
653
- }
654
- .gh-head-open #gh-head .gh-head-inner {
655
- grid-template-rows: auto 1fr auto;
656
- }
657
- .gh-head-open #gh-head .gh-head-actions,
658
- .gh-head-open #gh-head .gh-head-menu {
659
- display: flex;
660
- }
661
- }
662
-
663
- @media (max-width: 600px) {
664
- #gh-head .gh-head-menu {
665
- font-size: 6vmin;
666
- }
667
- }
668
-
669
- .has-cover.gh-head-open .gh-head {
670
- background: var(--ghost-accent-color);
671
- }
672
-
673
-
674
- /* 6. Post Feed
675
- /* ---------------------------------------------------------- */
676
-
677
- .post-feed {
678
- position: relative;
679
- display: grid;
680
- gap: 4.8vmin 4vmin;
681
- grid-template-columns: repeat(6, 1fr);
682
- padding: max(4.8vmin, 36px) 0 0;
683
- }
684
-
685
- :is(.tag-template, .author-template) .post-feed {
686
- margin-top: 4vmin;
687
- }
688
-
689
- @media (max-width: 991px) {
690
- .post-feed {
691
- grid-template-columns: 1fr 1fr;
692
- }
693
- }
694
-
695
- @media (max-width: 767px) {
696
- .post-feed {
697
- grid-template-columns: 1fr;
698
- grid-gap: 40px;
699
- }
700
- }
701
-
702
- .post-card {
703
- position: relative;
704
- grid-column: span 2;
705
- display: flex;
706
- flex-direction: column;
707
- background-size: cover;
708
- word-break: break-word;
709
- }
710
-
711
- .post-card-image-link {
712
- position: relative;
713
- overflow: hidden;
714
- display: block;
715
- margin-bottom: 32px;
716
- }
717
-
718
- .post-card-image-link::after {
719
- content: "";
720
- display: block;
721
- padding-bottom: 55%;
722
- }
723
-
724
- .post-card[class*="post-access-"] .post-card-image-link::after {
725
- background-color: rgba(0, 0, 0, 0.5);
726
- backdrop-filter: blur(3px);
727
- }
728
-
729
- .post-card.keep-ratio[class*="post-access-"] .post-card-image-link::after {
730
- position: absolute;
731
- inset: 0;
732
- padding-bottom: 0;
733
- }
734
-
735
- .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
736
- padding-bottom: 0;
737
- }
738
-
739
- .post-card-image {
740
- position: absolute;
741
- inset: 0;
742
- width: 100%;
743
- height: 100%;
744
- background: var(--color-lightgrey) no-repeat center center;
745
- object-fit: cover;
746
- }
747
-
748
- .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image {
749
- position: static;
750
- }
751
-
752
- .post-card-access {
753
- position: absolute;
754
- inset: 0;
755
- z-index: 10;
756
- display: flex;
757
- align-items: center;
758
- justify-content: center;
759
- gap: 4px;
760
- font-size: 1.5rem;
761
- font-weight: 600;
762
- color: #fff;
763
- }
764
-
765
- .post-card-content-link {
766
- position: relative;
767
- display: block;
768
- color: var(--color-darkgrey);
769
- }
770
-
771
- .post-card-content-link:hover {
772
- text-decoration: none;
773
- }
774
-
775
- .post-feed .no-image .post-card-content-link {
776
- padding: 0;
777
- }
778
-
779
- .no-image .post-card-header {
780
- margin-top: 0;
781
- }
782
-
783
- .post-card-tags {
784
- display: flex;
785
- align-items: center;
786
- gap: 12px;
787
- margin: 0 0 10px;
788
- color: var(--color-secondary-text);
789
- font-size: 1.4rem;
790
- font-weight: 600;
791
- letter-spacing: -0.005em;
792
- line-height: 1;
793
- }
794
-
795
- .post-card-featured {
796
- position: relative;
797
- display: flex;
798
- align-items: center;
799
- gap: 3px;
800
- padding-left: 18px;
801
- color: var(--ghost-accent-color);
802
- }
803
-
804
- .post-card-featured svg {
805
- position: absolute;
806
- left: 0;
807
- }
808
-
809
- .post-card-title {
810
- margin: 0;
811
- font-size: 2.6rem;
812
- font-weight: 800;
813
- }
814
-
815
- .post-card-content-link:hover .post-card-title {
816
- opacity: 0.9;
817
- }
818
-
819
- .no-image .post-card-title {
820
- margin-top: 0;
821
- }
822
-
823
- .has-serif-title .post-card-title {
824
- font-family: var(--font-serif);
825
- letter-spacing: -0.005em;
826
- }
827
-
828
- .post-card-title svg {
829
- margin-top: -3px;
830
- margin-left: -1px;
831
- }
832
-
833
- .post-card-content {
834
- flex-grow: 1;
835
- display: flex;
836
- flex-direction: column;
837
- }
838
-
839
- .post-card-excerpt {
840
- display: -webkit-box;
841
- overflow-y: hidden;
842
- margin-top: 12px;
843
- max-width: 720px;
844
- font-size: 1.6rem;
845
- line-height: 1.5;
846
- -webkit-line-clamp: 3;
847
- -webkit-box-orient: vertical;
848
- word-break: break-word;
849
- }
850
-
851
- .has-sans-body .post-card-excerpt {
852
- font-family: var(--font-sans);
853
- }
854
-
855
- .post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt {
856
- -webkit-line-clamp: 2;
857
- }
858
-
859
- :is(.tag-template, .author-template) .post-card-excerpt {
860
- margin-top: 6px;
861
- }
862
-
863
- .post-card-meta {
864
- display: flex;
865
- align-items: center;
866
- gap: 6px;
867
- margin-top: 12px;
868
- padding: 0;
869
- font-size: 1.3rem;
870
- color: var(--color-secondary-text);
871
- }
872
-
873
- .post-card-meta > * {
874
- display: flex;
875
- align-items: center;
876
- gap: 6px;
877
- }
878
-
879
- .post-card-meta > * + *:not(script)::before {
880
- width: 2px;
881
- height: 2px;
882
- content: "";
883
- background-color: var(--color-secondary-text);
884
- border-radius: 50%;
885
- }
886
-
887
- .post-card-meta .sep {
888
- margin: 0 4px;
889
- }
890
-
891
- .author-profile-image {
892
- display: block;
893
- width: 100%;
894
- height: 100%;
895
- background: color-mod(var(--color-lightgrey) l(+10%));
896
- border-radius: 100%;
897
-
898
- object-fit: cover;
899
- }
900
-
901
- .author-list {
902
- display: flex;
903
- flex-wrap: wrap;
904
- margin: 0 0 0 4px;
905
- padding: 0;
906
- list-style: none;
907
- }
908
-
909
- .author-list-item {
910
- position: relative;
911
- flex-shrink: 0;
912
- margin: 0;
913
- padding: 0;
914
- }
915
-
916
-
917
- /* Special Styling for home page grid (below):
918
-
919
- The first post in the list is styled to be bigger than the others and take over
920
- the full width of the grid to give it more emphasis. Wrapped in a media query to
921
- make sure this only happens on large viewports / desktop-ish devices.
922
-
923
- */
924
-
925
- @media (min-width: 1001px) {
926
- .post-card-large {
927
- grid-column: span 6;
928
- display: grid;
929
- grid-gap: 4vmin;
930
- grid-template-columns: repeat(3, 1fr);
931
- border-top: 0;
932
- }
933
-
934
- .post-card-large:not(.no-image) .post-card-header {
935
- margin-top: 0;
936
- }
937
-
938
- .post-card-large .post-card-image-link {
939
- position: relative;
940
- grid-column: span 2;
941
- margin-bottom: 0;
942
- }
943
-
944
- .post-card-large .post-card-content {
945
- grid-column: span 1;
946
- }
947
-
948
- .post-card-large.no-image .post-card-content {
949
- grid-column: span 2;
950
- }
951
-
952
- .post-card-large .post-card-image {
953
- position: absolute;
954
- width: 100%;
955
- height: 100%;
956
- }
957
-
958
- .post-card-large .post-card-tags {
959
- margin-bottom: 12px;
960
- }
961
-
962
- .post-card-large .post-card-title {
963
- margin-top: 0;
964
- font-size: 4.4rem;
965
- line-height: 1;
966
- }
967
-
968
- .post-card-large .post-card-excerpt {
969
- margin-top: 16px;
970
- }
971
-
972
- .post-card-full {
973
- grid-column: span 6;
974
- }
975
-
976
- .post-card-full .post-card-image-link {
977
- margin-bottom: 40px;
978
- }
979
-
980
- .post-card-full .post-card-tags {
981
- margin-bottom: 14px;
982
- }
983
-
984
- .post-card-full .post-card-title {
985
- font-size: 6.4rem;
986
- line-height: 0.95;
987
- }
988
-
989
- .post-card-full .post-card-excerpt {
990
- margin-top: 20px;
991
- font-size: 1.8rem;
992
- }
993
-
994
- .post-card-large + .post-card-large:nth-child(even) {
995
- margin: 32px 0;
996
- }
997
-
998
- .post-card-large + .post-card-large:nth-child(even) .post-card-content {
999
- order: -1;
1000
- }
1001
-
1002
- .post-card.dynamic {
1003
- grid-column: span 3;
1004
- }
1005
-
1006
- .post-card.dynamic .post-card-title {
1007
- font-size: 3rem;
1008
- }
1009
- }
1010
-
1011
-
1012
- /* 7. Single Post
1013
- /* ---------------------------------------------------------- */
1014
-
1015
- .article {
1016
- padding: max(8vmin, 40px) 0 max(8vmin, 64px);
1017
- word-break: break-word;
1018
- }
1019
-
1020
- .page-template .article {
1021
- padding-top: max(12vmin, 64px);
1022
- }
1023
-
1024
- .article-header {
1025
- padding: 0 0 max(6.4vmin, 40px) 0;
1026
- }
1027
-
1028
- .page-template .article-header {
1029
- padding-bottom: max(3.2vmin, 28px);
1030
- }
1031
-
1032
- .article-tag {
1033
- margin-bottom: 16px;
1034
- font-size: 1.6rem;
1035
- }
1036
-
1037
- .article-tag a {
1038
- color: var(--color-secondary-text);
1039
- }
1040
-
1041
- .article-title {
1042
- margin-bottom: 0;
1043
- font-size: clamp(3.2rem, 5vw, 5.2rem);
1044
- font-weight: 800;
1045
- line-height: 1;
1046
- color: var(--color-darkgrey);
1047
- }
1048
-
1049
- .has-serif-title .article-title {
1050
- font-family: var(--font-serif);
1051
- }
1052
-
1053
- .article-excerpt {
1054
- margin-top: 20px;
1055
- max-width: 720px;
1056
- font-size: 2rem;
1057
- line-height: 1.45;
1058
- color: var(--color-darkgrey);
1059
- }
1060
-
1061
- .gh-canvas .article-image {
1062
- grid-column: wide-start / wide-end;
1063
- width: 100%;
1064
- margin: max(6.4vmin, 40px) 0 0;
1065
- }
1066
-
1067
- .image-full .article-image {
1068
- grid-column: full-start / full-end;
1069
- }
1070
-
1071
- .image-small .article-image {
1072
- grid-column: main-start / main-end;
1073
- }
1074
-
1075
- .gh-canvas .article-image img {
1076
- display: block;
1077
- margin-left: auto;
1078
- margin-right: auto;
1079
- width: 100%;
1080
- }
1081
-
1082
- @media (max-width: 767px) {
1083
- .article-excerpt {
1084
- margin-top: 14px;
1085
- font-size: 1.7rem;
1086
- }
1087
- }
1088
-
1089
- /* -------- */
1090
-
1091
- /* Content grid
1092
- /* ---------------------------------------------------------- */
1093
-
1094
- /* Canvas creates a multi-column, centered grid which the post
1095
- is laid out on top of. Canvas just defines the grid, we don't
1096
- use it for applying any other styles. */
1097
-
1098
- .gh-canvas {
1099
- display: grid;
1100
- grid-template-columns:
1101
- [full-start]
1102
- minmax(max(4vmin, 20px), auto)
1103
- [wide-start]
1104
- minmax(auto, 240px)
1105
- [main-start]
1106
- min(720px, calc(100% - max(8vmin, 40px)))
1107
- [main-end]
1108
- minmax(auto, 240px)
1109
- [wide-end]
1110
- minmax(max(4vmin, 20px), auto)
1111
- [full-end]
1112
- ;
1113
- }
1114
-
1115
- .gh-canvas > * {
1116
- grid-column: main-start / main-end;
1117
- }
1118
-
1119
- .kg-width-wide {
1120
- grid-column: wide-start / wide-end;
1121
- }
1122
-
1123
- .kg-width-full {
1124
- grid-column: full-start / full-end;
1125
- }
1126
-
1127
- .kg-width-full img {
1128
- width: 100%;
1129
- }
1130
-
1131
-
1132
- /* Content
1133
- /* ---------------------------------------------------------- */
1134
-
1135
- /* Content refers to styling all page and post content that is
1136
- created within the Ghost editor. The main content handles
1137
- headings, text, images and lists. We deal with cards lower down. */
1138
-
1139
- /* Default vertical spacing */
1140
- .gh-content > * + * {
1141
- margin-top: max(3.2vmin, 24px);
1142
- margin-bottom: 0;
1143
- }
1144
-
1145
- /* [id] represents all headings h1-h6, reset all margins */
1146
- .gh-content > [id] {
1147
- margin: 0;
1148
- color: var(--color-darkgrey);
1149
- }
1150
-
1151
- .has-serif-title .gh-content > [id] {
1152
- font-family: var(--font-serif);
1153
- }
1154
-
1155
- /* Add back a top margin to all headings, unless a heading
1156
- is the very first element in the post content */
1157
- .gh-content > [id]:not(:first-child) {
1158
- margin: 2em 0 0;
1159
- }
1160
-
1161
- /* Add a small margin between a heading and anything after it */
1162
- .gh-content > [id] + * {
1163
- margin-top: 1.5rem !important;
1164
- }
1165
-
1166
- /* A larger margin before/after HRs and blockquotes */
1167
- .gh-content > hr,
1168
- .gh-content > blockquote {
1169
- position: relative;
1170
- margin-top: max(4.8vmin, 32px);
1171
- }
1172
- .gh-content > hr + *,
1173
- .gh-content > blockquote + * {
1174
- margin-top: max(4.8vmin, 32px) !important;
1175
- }
1176
-
1177
- /* Now the content typography styles */
1178
- .gh-content a {
1179
- color: var(--ghost-accent-color);
1180
- text-decoration: underline;
1181
- word-break: break-word;
1182
- }
1183
-
1184
- .gh-content > blockquote:not([class]),
1185
- .gh-content > ol,
1186
- .gh-content > ul,
1187
- .gh-content > dl,
1188
- .gh-content > p {
1189
- font-family: var(--font-serif);
1190
- font-weight: 400;
1191
- font-size: 2rem;
1192
- line-height: 1.6em;
1193
- }
1194
-
1195
- .gh-content .kg-callout-card .kg-callout-text,
1196
- .gh-content .kg-toggle-card .kg-toggle-content > ol,
1197
- .gh-content .kg-toggle-card .kg-toggle-content > ul,
1198
- .gh-content .kg-toggle-card .kg-toggle-content > p {
1199
- font-family: var(--font-serif);
1200
- font-weight: 400;
1201
- font-size: 1.9rem;
1202
- line-height: 1.6em;
1203
- }
1204
-
1205
- .gh-content .kg-product-card .kg-product-card-description > p,
1206
- .gh-content .kg-product-card .kg-product-card-description > ol,
1207
- .gh-content .kg-product-card .kg-product-card-description > ul {
1208
- font-size: 1.7rem;
1209
- line-height: 1.6em;
1210
- }
1211
-
1212
- .gh-content .kg-callout-card .kg-callout-emoji {
1213
- font-size: 2.1rem;
1214
- line-height: 1.4em;
1215
- }
1216
-
1217
- .gh-content .kg-toggle-card .kg-toggle-heading-text {
1218
- font-size: 2.0rem;
1219
- }
1220
-
1221
- .has-sans-body .gh-content > blockquote,
1222
- .has-sans-body .gh-content > ol,
1223
- .has-sans-body .gh-content > ul,
1224
- .has-sans-body .gh-content > dl,
1225
- .has-sans-body .gh-content > p,
1226
- .has-sans-body .gh-content .kg-callout-card .kg-callout-text,
1227
- .has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ol,
1228
- .has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ul,
1229
- .has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > p {
1230
- font-family: var(--font-sans);
1231
- }
1232
-
1233
- .gh-content > ul,
1234
- .gh-content > ol,
1235
- .gh-content > dl,
1236
- .gh-content .kg-toggle-card .kg-toggle-content > ol,
1237
- .gh-content .kg-toggle-card .kg-toggle-content > ul,
1238
- .gh-content .kg-product-card .kg-product-card-description > ol,
1239
- .gh-content .kg-product-card .kg-product-card-description > ul {
1240
- padding-left: 1.9em;
1241
- }
1242
-
1243
- .gh-content > blockquote:not([class]) {
1244
- position: relative;
1245
- font-style: italic;
1246
- padding: 0;
1247
- }
1248
-
1249
- .gh-content > blockquote:not([class])::before {
1250
- content: "";
1251
- position: absolute;
1252
- left: -1.5em;
1253
- top: 0;
1254
- bottom: 0;
1255
- width: 0.3rem;
1256
- background: var(--ghost-accent-color);
1257
- }
1258
-
1259
- .gh-content :not(pre) > code {
1260
- vertical-align: middle;
1261
- padding: 0.15em 0.4em 0.15em;
1262
- border: #e1eaef 1px solid;
1263
- font-weight: 400 !important;
1264
- font-size: 0.9em;
1265
- line-height: 1em;
1266
- color: #15171A;
1267
- background: #f0f6f9;
1268
- border-radius: 0.25em;
1269
- }
1270
-
1271
- .gh-content pre {
1272
- overflow: auto;
1273
- padding: 16px 20px;
1274
- color: var(--color-wash);
1275
- font-size: 1.4rem;
1276
- line-height: 1.5em;
1277
- background: var(--color-darkgrey);
1278
- border-radius: 5px;
1279
- box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
1280
- }
1281
-
1282
- @media (max-width: 650px) {
1283
- .gh-content > blockquote:not([class]),
1284
- .gh-content > ol,
1285
- .gh-content > ul,
1286
- .gh-content > dl,
1287
- .gh-content > p,
1288
- .gh-content .kg-callout-card .kg-callout-text,
1289
- .gh-content .kg-toggle-card .kg-toggle-content > ol,
1290
- .gh-content .kg-toggle-card .kg-toggle-content > ul,
1291
- .gh-content .kg-toggle-card .kg-toggle-content > p {
1292
- font-size: 1.8rem;
1293
- }
1294
-
1295
- .gh-content .kg-product-card .kg-product-card-description > p,
1296
- .gh-content .kg-product-card .kg-product-card-description > ol,
1297
- .gh-content .kg-product-card .kg-product-card-description > ul {
1298
- font-size: 1.6rem;
1299
- }
1300
-
1301
- .gh-content blockquote:not([class])::before {
1302
- left: min(-4vmin, -20px);
1303
- }
1304
- }
1305
-
1306
-
1307
- /* Cards
1308
- /* ---------------------------------------------------------- */
1309
-
1310
- /* Cards are dynamic blocks of content which appear within Ghost
1311
- posts, for example: embedded videos, tweets, galleries, or
1312
- specially styled bookmark links. We add extra styling here to
1313
- make sure they look good, and are given a bit of extra spacing. */
1314
-
1315
- /* Add extra margin before/after any cards,
1316
- except for when immediately preceeded by a heading */
1317
- .gh-content :not(.kg-card):not([id]) + .kg-card {
1318
- margin-top: 6vmin;
1319
- margin-bottom: 0;
1320
- }
1321
- .gh-content .kg-card + :not(.kg-card) {
1322
- margin-top: 6vmin;
1323
- margin-bottom: 0;
1324
- }
1325
-
1326
- /* This keeps small embeds centered */
1327
- .kg-embed-card {
1328
- display: flex;
1329
- flex-direction: column;
1330
- align-items: center;
1331
- width: 100%;
1332
- }
1333
-
1334
- /* This keeps small iamges centered */
1335
- .kg-image-card img {
1336
- margin: auto;
1337
- }
1338
-
1339
- .has-serif-title .kg-toggle-card .kg-toggle-heading-text {
1340
- font-family: var(--font-serif);
1341
- }
1342
-
1343
- .gh-content .kg-callout-card-accent a {
1344
- text-decoration: underline;
1345
- }
1346
-
1347
- .kg-blockquote-alt {
1348
- font-family: var(--font-serif);
1349
- color: var(--color-midgrey);
1350
- }
1351
-
1352
- .has-sans-body .kg-blockquote-alt {
1353
- font-family: var(--font-sans);
1354
- }
1355
-
1356
- .kg-card.kg-header-card.kg-style-dark {
1357
- background: var(--color-darkgrey);
1358
- }
1359
-
1360
- .kg-header-card.kg-style-light h2.kg-header-card-header {
1361
- color: color-mod(var(--color-darkgrey) l(-5%));
1362
- }
1363
-
1364
- .has-serif-title .kg-header-card h2.kg-header-card-header {
1365
- font-family: var(--font-serif);
1366
- }
1367
-
1368
-
1369
- /* Captions */
1370
- figcaption {
1371
- padding: 1.5rem 1.5rem 0;
1372
- text-align: center;
1373
- color: rgba(0,0,0,0.5);
1374
- font-size: 1.3rem;
1375
- line-height: 1.4em;
1376
- }
1377
- figcaption strong {
1378
- color: rgba(0,0,0,0.8);
1379
- }
1380
- figcaption a {
1381
- text-decoration: underline;
1382
- }
1383
-
1384
-
1385
- /* Highly specific styles for traditional Instagram embeds */
1386
- iframe.instagram-media {
1387
- margin-top: 6vmin !important;
1388
- margin-left: auto !important;
1389
- margin-right: auto !important;
1390
- margin-bottom: 0 !important;
1391
- }
1392
-
1393
- iframe.instagram-media + script + :not([id]) {
1394
- margin-top: 6vmin;
1395
- }
1396
-
1397
-
1398
- /* Card captions
1399
- /* ---------------------------------------------------------- */
1400
-
1401
- .kg-width-full.kg-card-hascaption {
1402
- display: grid;
1403
- grid-template-columns: inherit;
1404
- }
1405
-
1406
- .kg-width-wide.kg-card-hascaption img {
1407
- grid-column: wide-start / wide-end;
1408
- }
1409
- .kg-width-full.kg-card-hascaption img {
1410
- grid-column: 1 / -1;
1411
- }
1412
-
1413
- .kg-width-full.kg-card-hascaption figcaption {
1414
- grid-column: main-start / main-end;
1415
- }
1416
-
1417
- .article-comments {
1418
- margin: 6vmin 0 0 0;
1419
- }
1420
-
1421
- /* -----old------ */
1422
-
1423
- .footnotes-sep {
1424
- margin-bottom: 30px;
1425
- }
1426
-
1427
- .footnotes {
1428
- font-size: 1.5rem;
1429
- }
1430
-
1431
- .footnotes p {
1432
- margin: 0;
1433
- }
1434
-
1435
- .footnote-backref {
1436
- font-size: 1.2rem;
1437
- font-weight: bold;
1438
- text-decoration: none !important;
1439
- box-shadow: none !important;
1440
- }
1441
-
1442
- /* Tables */
1443
- .gh-content table:not(.gist table) {
1444
- display: inline-block;
1445
- overflow-x: auto;
1446
- max-width: 100%;
1447
- width: auto;
1448
- border-spacing: 0;
1449
- border-collapse: collapse;
1450
- font-family: var(--font-sans);
1451
- font-size: 1.6rem;
1452
- white-space: nowrap;
1453
- vertical-align: top;
1454
- -webkit-overflow-scrolling: touch;
1455
- background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
1456
- background-attachment: scroll, scroll;
1457
- background-size: 10px 100%, 10px 100%;
1458
- background-repeat: no-repeat;
1459
- }
1460
-
1461
- .gh-content table:not(.gist table) td:first-child {
1462
- background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
1463
- background-size: 20px 100%;
1464
- background-repeat: no-repeat;
1465
- }
1466
-
1467
- .gh-content table:not(.gist table) td:last-child {
1468
- background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
1469
- background-position: 100% 0;
1470
- background-size: 20px 100%;
1471
- background-repeat: no-repeat;
1472
- }
1473
-
1474
- .gh-content table:not(.gist table) th {
1475
- color: var(--color-darkgrey);
1476
- font-size: 1.2rem;
1477
- font-weight: 700;
1478
- letter-spacing: 0.2px;
1479
- text-align: left;
1480
- text-transform: uppercase;
1481
- background-color: color-mod(var(--color-wash) l(+4%));
1482
- }
1483
-
1484
- .gh-content table:not(.gist table) th,
1485
- .gh-content table:not(.gist table) td {
1486
- padding: 6px 12px;
1487
- border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
1488
- }
1489
-
1490
-
1491
- /* 7.1. Post Byline
1492
- /* ---------------------------------------------------------- */
1493
-
1494
- .article-byline {
1495
- display: flex;
1496
- justify-content: space-between;
1497
- margin: min(24px, 5.6vmin) 0 0;
1498
- }
1499
-
1500
- .article-byline-content {
1501
- flex-grow: 1;
1502
- display: flex;
1503
- align-items: center;
1504
- }
1505
-
1506
- .article-byline-content .author-list {
1507
- justify-content: flex-start;
1508
- padding: 0 14px 0 0;
1509
- }
1510
-
1511
- .article-byline-meta {
1512
- color: var(--color-secondary-text);
1513
- font-size: 1.4rem;
1514
- line-height: 1.2em;
1515
- }
1516
-
1517
- .article-byline-meta .author-name {
1518
- margin: 0 0 6px;
1519
- font-size: 1.7rem;
1520
- font-weight: 700;
1521
- letter-spacing: 0;
1522
- }
1523
-
1524
- .article-byline-meta .bull {
1525
- display: inline-block;
1526
- margin: 0 2px;
1527
- }
1528
-
1529
- .author-avatar {
1530
- display: block;
1531
- overflow: hidden;
1532
- margin: 0 -4px;
1533
- width: min(56px, 13.6vmin);
1534
- height: min(56px, 13.6vmin);
1535
- border: #fff 2px solid;
1536
- border-radius: 50%;
1537
- background-color: var(--color-border);
1538
- }
1539
-
1540
- .page-template .article-title {
1541
- margin-bottom: 0;
1542
- }
1543
-
1544
- @media (max-width: 767px) {
1545
- .article-byline-content .author-list {
1546
- padding-right: 12px;
1547
- }
1548
- .article-byline-meta .author-name {
1549
- margin-bottom: 4px;
1550
- }
1551
- }
1552
-
1553
-
1554
- /* 7.3. Subscribe
1555
- /* ---------------------------------------------------------- */
1556
-
1557
- .footer-cta {
1558
- position: relative;
1559
- text-align: center;
1560
- }
1561
-
1562
- .footer-cta-title {
1563
- margin: 0 0 min(24px, 6.4vmin);
1564
- font-size: clamp(2.6rem, 5vw, 3.8rem);
1565
- font-weight: 800;
1566
- }
1567
-
1568
- .has-serif-title .footer-cta-title {
1569
- font-family: var(--font-serif);
1570
- }
1571
-
1572
- .footer-cta-button {
1573
- position: relative;
1574
- display: inline-flex;
1575
- align-items: center;
1576
- justify-content: space-between;
1577
- width: 100%;
1578
- max-width: 500px;
1579
- padding: 5px 5px 5px 15px;
1580
- font-size: 1.7rem;
1581
- color: var(--color-secondary-text);
1582
- background: #fff;
1583
- border: 1px solid var(--color-border);
1584
- border-radius: 8px;
1585
- transition: border-color 0.2s;
1586
- }
1587
-
1588
- .footer-cta-button:hover {
1589
- border-color: color-mod(var(--color-border) l(-12%));
1590
- }
1591
-
1592
- .footer-cta-button span {
1593
- display: inline-block;
1594
- padding: 9px 15px;
1595
- color: #fff;
1596
- font-size: 1.6rem;
1597
- font-weight: 600;
1598
- letter-spacing: -0.005em;
1599
- background: var(--ghost-accent-color);
1600
- border-radius: 6px;
1601
- }
1602
-
1603
-
1604
- /* 7.4. Read more
1605
- /* ---------------------------------------------------------- */
1606
-
1607
- .read-more-wrap {
1608
- margin-top: 2.4vmin;
1609
- }
1610
-
1611
- .footer-cta + .read-more-wrap {
1612
- margin-top: max(12vmin, 72px);
1613
- }
1614
-
1615
- .read-more {
1616
- display: grid;
1617
- grid-template-columns: repeat(6, 1fr);
1618
- grid-gap: 4vmin;
1619
- }
1620
-
1621
- .read-more .post-card-tags {
1622
- display: none;
1623
- }
1624
-
1625
- @media (max-width: 1000px) {
1626
- .read-more {
1627
- grid-template-columns: repeat(4, 1fr);
1628
- }
1629
- .read-more .post-card:nth-child(3) {
1630
- display: none;
1631
- }
1632
- }
1633
-
1634
- @media (max-width: 700px) {
1635
- .read-more {
1636
- grid-template-columns: repeat(2, 1fr);
1637
- }
1638
- .read-more .post-card:nth-child(2) {
1639
- display: none;
1640
- }
1641
- }
1642
-
1643
- /* 7.6. Comments
1644
- /* ---------------------------------------------------------- */
1645
- .comments {
1646
- display: flex;
1647
- flex-direction: column;
1648
- align-items: center;
1649
- margin: 60px 0 44px;
1650
- }
1651
-
1652
-
1653
- .comments-head {
1654
- display: flex;
1655
- align-items: baseline;
1656
- justify-content: space-between;
1657
- margin-bottom: 32px;
1658
- width: 100%;
1659
- max-width: 720px;
1660
- }
1661
-
1662
- .comments h2 {
1663
- width: 100%;
1664
- max-width: 720px;
1665
- font-weight: 800;
1666
- font-size: 3.4rem;
1667
- }
1668
-
1669
- .comments .comment-count {
1670
- color: var(--color-midgrey);
1671
- font-weight: 600;
1672
- white-space: nowrap;
1673
- }
1674
-
1675
- .comments #ghost-comments-root {
1676
- width: 100%;
1677
- max-width: 720px;
1678
- }
1679
-
1680
-
1681
- /* 8. Author Template
1682
- /* ---------------------------------------------------------- */
1683
-
1684
- .author-profile-pic {
1685
- display: block;
1686
- width: 80px;
1687
- height: 80px;
1688
- object-fit: cover;
1689
- margin: 0 0 2rem;
1690
- background: color-mod(var(--color-lightgrey) l(+10%));
1691
- border-radius: 50%;
1692
- }
1693
-
1694
- .author-profile-footer {
1695
- margin-top: 16px;
1696
- }
1697
-
1698
- .author-profile-location {
1699
- font-weight: 700;
1700
- }
1701
-
1702
- .author-profile-meta {
1703
- display: flex;
1704
- gap: 10px;
1705
- }
1706
-
1707
- .author-profile-social-link {
1708
- font-size: 1.3rem;
1709
- color: var(--color-secondary-text);
1710
- }
1711
-
1712
- .author-profile-social-link:hover {
1713
- color: var(--color-darkgrey);
1714
- }
1715
-
1716
- .author-profile-social-link svg {
1717
- width: 16px;
1718
- height: 16px;
1719
- }
1720
-
1721
- @media (min-width: 1001px) {
1722
- .author-template .post-card-large .post-card-content {
1723
- grid-column: span 2;
1724
- max-width: 640px;
1725
- }
1726
- }
1727
-
1728
-
1729
- /* 8. Tag Template
1730
- /* ---------------------------------------------------------- */
1731
-
1732
- .tag-template .post-card-large .post-card-image-link {
1733
- grid-column: 2 / span 2;
1734
- order: 2;
1735
- }
1736
-
1737
- .tag-template .post-card-large .post-card-content {
1738
- order: 1;
1739
- }
1740
-
1741
- @media (min-width: 1001px) {
1742
- .tag-template .post-card-large .post-card-content {
1743
- grid-column: span 2;
1744
- max-width: 640px;
1745
- }
1746
- }
1747
-
1748
- /* 9. Error Template
1749
- /* ---------------------------------------------------------- */
1750
-
1751
- .error-content {
1752
- padding: 14vw 4vw 2vw;
1753
- }
1754
-
1755
- .error-message {
1756
- padding-bottom: 10vw;
1757
- text-align: center;
1758
- }
1759
-
1760
- .error-code {
1761
- margin: 0;
1762
- font-size: 12vw;
1763
- line-height: 1em;
1764
- letter-spacing: -5px;
1765
- }
1766
-
1767
- .error-description {
1768
- margin: 0;
1769
- color: var(--color-secondary-text);
1770
- font-size: 3.2rem;
1771
- line-height: 1.3em;
1772
- letter-spacing: -0.005em;
1773
- font-weight: 400;
1774
- }
1775
-
1776
- .error-link {
1777
- display: inline-block;
1778
- margin-top: 5px;
1779
- }
1780
-
1781
- @media (min-width: 940px) {
1782
- .error-content .post-card {
1783
- margin-bottom: 0;
1784
- padding-bottom: 0;
1785
- border-bottom: none;
1786
- }
1787
- }
1788
-
1789
- @media (max-width: 800px) {
1790
- .error-content {
1791
- padding-top: 24vw;
1792
- }
1793
- .error-code {
1794
- font-size: 11.2rem;
1795
- }
1796
- .error-message {
1797
- padding-bottom: 16vw;
1798
- }
1799
- .error-description {
1800
- margin: 5px 0 0 0;
1801
- font-size: 1.8rem;
1802
- }
1803
- }
1804
-
1805
- @media (max-width: 500px) {
1806
- .error-content {
1807
- padding-top: 28vw;
1808
- }
1809
- .error-message {
1810
- padding-bottom: 14vw;
1811
- }
1812
- }
1813
-
1814
-
1815
- /* 11. Site Footer
1816
- /* ---------------------------------------------------------- */
1817
-
1818
- .site-footer {
1819
- position: relative;
1820
- margin: max(12vmin, 64px) 0 0 0;
1821
- padding-top: 48px;
1822
- padding-bottom: 140px;
1823
- color: #fff;
1824
- background: color-mod(var(--color-darkgrey) l(-5%));
1825
- }
1826
-
1827
- .site-footer .inner {
1828
- display: grid;
1829
- grid-gap: 40px;
1830
- grid-template-columns: auto 1fr auto;
1831
- color: rgba(255,255,255,0.7);
1832
- font-size: 1.3rem;
1833
- }
1834
-
1835
- .site-footer .copyright a {
1836
- color: #fff;
1837
- letter-spacing: -0.015em;
1838
- font-weight: 500;
1839
- }
1840
-
1841
- .site-footer a {
1842
- color: rgba(255,255,255,0.7);
1843
- }
1844
-
1845
- .site-footer a:hover {
1846
- color: rgba(255,255,255,1);
1847
- text-decoration: none;
1848
- }
1849
-
1850
- .site-footer-nav ul {
1851
- display: flex;
1852
- justify-content: center;
1853
- flex-wrap: wrap;
1854
- margin: 0 0 20px;
1855
- padding: 0;
1856
- list-style: none;
1857
- }
1858
-
1859
- .site-footer-nav li {
1860
- display: inline-flex;
1861
- align-items: center;
1862
- padding: 0;
1863
- margin: 0;
1864
- line-height: 2em;
1865
- }
1866
-
1867
- .site-footer-nav a {
1868
- position: relative;
1869
- display: inline-flex;
1870
- align-items: center;
1871
- margin-left: 10px;
1872
- }
1873
-
1874
- .site-footer-nav li:not(:first-child) a:before {
1875
- content: "";
1876
- display: block;
1877
- width: 2px;
1878
- height: 2px;
1879
- margin: 0 10px 0 0;
1880
- background: #fff;
1881
- border-radius: 100%;
1882
- }
1883
-
1884
- @media (max-width: 767px) {
1885
- .site-footer .inner {
1886
- max-width: 500px;
1887
- grid-template-columns: 1fr;
1888
- grid-gap: 0;
1889
- text-align: center;
1890
- }
1891
- .site-footer .copyright,
1892
- .site-footer .copyright a {
1893
- color: #fff;
1894
- font-size: 1.5rem;
1895
- }
1896
- .site-footer .copyright {
1897
- margin-bottom: 16px;
1898
- }
1899
- }
1900
-
1901
-
1902
- /* 12. Dark Mode
1903
- /* ---------------------------------------------------------- */
1904
-
1905
- html.dark-mode body {
1906
- color: rgba(255, 255, 255, 0.75);
1907
- background: var(--color-darkmode);
1908
- }
1909
-
1910
- html.dark-mode img {
1911
- opacity: 0.9;
1912
- }
1913
-
1914
- html.dark-mode kbd {
1915
- background: color-mod(var(--color-darkmode) l(+5%));
1916
- }
1917
-
1918
- html.dark-mode figcaption a {
1919
- color: #fff;
1920
- }
1921
-
1922
- html.dark-mode .gh-head {
1923
- background: var(--color-darkmode);
1924
- color: #fff;
1925
- }
1926
-
1927
- html.dark-mode .gh-burger-box {
1928
- color: #fff;
1929
- }
1930
-
1931
- html.dark-mode .site-header-content {
1932
- color: #fff;
1933
- }
1934
-
1935
- html.dark-mode .post-card-image {
1936
- background: var(--color-darkmode);
1937
- }
1938
-
1939
- html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
1940
- color: color-mod(var(--color-secondary-text) l(-22%));
1941
- }
1942
-
1943
- html.dark-mode .post-card-featured {
1944
- color: #fff;
1945
- }
1946
-
1947
- html.dark-mode .post-card-title {
1948
- color: #fff;
1949
- }
1950
-
1951
- html.dark-mode .post-card-excerpt {
1952
- color: var(--color-secondary-text);
1953
- }
1954
-
1955
- html.dark-mode .author-profile-location {
1956
- color: #fff;
1957
- }
1958
-
1959
- html.dark-mode .author-profile-social-link:hover {
1960
- color: #fff;
1961
- }
1962
-
1963
- html.dark-mode .article-title {
1964
- color: #fff;
1965
- }
1966
-
1967
- html.dark-mode .article-excerpt {
1968
- color: var(--color-secondary-text);
1969
- }
1970
-
1971
- html.dark-mode .post-full-image {
1972
- background-color: color-mod(var(--color-darkmode) l(+8%));
1973
- }
1974
-
1975
- html.dark-mode .author-avatar {
1976
- border-color: var(--color-darkmode);
1977
- background-color: color-mod(var(--color-darkmode) l(+8%));
1978
- }
1979
-
1980
- html.dark-mode .author-profile-image {
1981
- opacity: 1;
1982
- }
1983
-
1984
- html.dark-mode .author-profile-image path {
1985
- fill: var(--color-darkmode);
1986
- }
1987
-
1988
- html.dark-mode .article-byline-meta .author-name a {
1989
- color: #fff;
1990
- }
1991
-
1992
- html.dark-mode .no-image .author-social-link a {
1993
- color: rgba(255, 255, 255, 0.75);
1994
- }
1995
-
1996
- html.dark-mode .gh-content > [id] {
1997
- color: rgba(255, 255, 255, 0.9);
1998
- }
1999
-
2000
- html.dark-mode .gh-content pre {
2001
- background: color-mod(var(--color-darkgrey) l(-8%));
2002
- }
2003
-
2004
- html.dark-mode .gh-content :not(pre) > code {
2005
- background: color-mod(var(--color-darkgrey) l(+6%));
2006
- border-color: color-mod(var(--color-darkmode) l(+8%));
2007
- color: var(--color-wash);
2008
- }
2009
-
2010
- :where(html.dark-mode) .gh-content a {
2011
- color: #fff;
2012
- }
2013
-
2014
- html.dark-mode .gh-content strong {
2015
- color: #fff;
2016
- }
2017
-
2018
- html.dark-mode .gh-content em {
2019
- color: #fff;
2020
- }
2021
-
2022
- html.dark-mode .gh-content code {
2023
- color: #fff;
2024
- background: #000;
2025
- }
2026
-
2027
- html.dark-mode hr {
2028
- border-top-color: color-mod(var(--color-darkmode) l(+8%));
2029
- }
2030
-
2031
- html.dark-mode .gh-content hr:after {
2032
- background: color-mod(var(--color-darkmode) l(+8%));
2033
- box-shadow: var(--color-darkmode) 0 0 0 5px;
2034
- }
2035
-
2036
- html.dark-mode figcaption {
2037
- color: rgba(255, 255, 255, 0.6);
2038
- }
2039
-
2040
- html.dark-mode .gh-content table:not(.gist table) td:first-child {
2041
- background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
2042
- }
2043
-
2044
- html.dark-mode .gh-content table:not(.gist table) td:last-child {
2045
- background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
2046
- }
2047
-
2048
- html.dark-mode .gh-content table:not(.gist table) th {
2049
- color: rgba(255, 255, 255, 0.85);
2050
- background-color: color-mod(var(--color-darkmode) l(+8%));
2051
- }
2052
-
2053
- html.dark-mode .gh-content table:not(.gist table) th,
2054
- html.dark-mode .gh-content table:not(.gist table) td {
2055
- border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
2056
- }
2057
-
2058
- html.dark-mode .gh-content input {
2059
- color: color-mod(var(--color-midgrey) l(-30%));
2060
- }
2061
-
2062
- html.dark-mode .site-archive-header .no-image {
2063
- color: rgba(255, 255, 255, 0.9);
2064
- background: var(--color-darkmode);
2065
- }
2066
-
2067
- html.dark-mode .kg-header-card.kg-style-dark {
2068
- background: color-mod(var(--color-darkgrey) l(-5%));
2069
- }
2070
-
2071
- html.dark-mode .kg-header-card.kg-style-light {
2072
- background: color-mod(var(--color-darkgrey) l(+5%));
2073
- }
2074
-
2075
- html.dark-mode .kg-header-card h2.kg-header-card-header,
2076
- html.dark-mode .kg-header-card h3.kg-header-card-subheader {
2077
- color: #fff;
2078
- }
2079
-
2080
- html.dark-mode .footer-cta-title {
2081
- color: #fff;
2082
- }
2083
-
2084
- @media (prefers-color-scheme: dark) {
2085
- html.auto-color body {
2086
- color: rgba(255, 255, 255, 0.75);
2087
- background: var(--color-darkmode);
2088
- }
2089
-
2090
- html.auto-color img {
2091
- opacity: 0.9;
2092
- }
2093
-
2094
- html.auto-color kbd {
2095
- background: color-mod(var(--color-darkmode) l(+5%));
2096
- }
2097
-
2098
- html.auto-color figcaption a {
2099
- color: #fff;
2100
- }
2101
-
2102
- html.auto-color .gh-head {
2103
- background: var(--color-darkmode);
2104
- color: #fff;
2105
- }
2106
-
2107
- html.auto-color .gh-burger-box {
2108
- color: #fff;
2109
- }
2110
-
2111
- html.auto-color .site-header-content {
2112
- color: #fff;
2113
- }
2114
-
2115
- html.auto-color .post-card-image {
2116
- background: var(--color-darkmode);
2117
- }
2118
-
2119
- html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
2120
- color: color-mod(var(--color-secondary-text) l(-22%));
2121
- }
2122
-
2123
- html.auto-color .post-card-featured {
2124
- color: #fff;
2125
- }
2126
-
2127
- html.auto-color .post-card-title {
2128
- color: #fff;
2129
- }
2130
-
2131
- html.auto-color .post-card-excerpt {
2132
- color: var(--color-secondary-text);
2133
- }
2134
-
2135
- html.auto-color .author-profile-location {
2136
- color: #fff;
2137
- }
2138
-
2139
- html.auto-color .author-profile-social-link:hover {
2140
- color: #fff;
2141
- }
2142
-
2143
- html.auto-color .article-title {
2144
- color: #fff;
2145
- }
2146
-
2147
- html.auto-color .article-excerpt {
2148
- color: var(--color-secondary-text);
2149
- }
2150
-
2151
- html.auto-color .post-full-image {
2152
- background-color: color-mod(var(--color-darkmode) l(+8%));
2153
- }
2154
-
2155
- html.auto-color .author-avatar {
2156
- border-color: var(--color-darkmode);
2157
- background-color: color-mod(var(--color-darkmode) l(+8%));
2158
- }
2159
-
2160
- html.auto-color .author-profile-image {
2161
- opacity: 1;
2162
- }
2163
-
2164
- html.auto-color .author-profile-image path {
2165
- fill: var(--color-darkmode);
2166
- }
2167
-
2168
- html.auto-color .article-byline-meta .author-name a {
2169
- color: #fff;
2170
- }
2171
-
2172
- html.auto-color .no-image .author-social-link a {
2173
- color: rgba(255, 255, 255, 0.75);
2174
- }
2175
-
2176
- html.auto-color .gh-content > [id] {
2177
- color: rgba(255, 255, 255, 0.9);
2178
- }
2179
-
2180
- html.auto-color .gh-content pre {
2181
- background: color-mod(var(--color-darkgrey) l(-8%));
2182
- }
2183
-
2184
- html.auto-color .gh-content :not(pre) > code {
2185
- background: color-mod(var(--color-darkgrey) l(+6%));
2186
- border-color: color-mod(var(--color-darkmode) l(+8%));
2187
- color: var(--color-wash);
2188
- }
2189
-
2190
- :where(html.auto-color) .gh-content a {
2191
- color: #fff;
2192
- }
2193
-
2194
- html.auto-color .gh-content strong {
2195
- color: #fff;
2196
- }
2197
-
2198
- html.auto-color .gh-content em {
2199
- color: #fff;
2200
- }
2201
-
2202
- html.auto-color .gh-content code {
2203
- color: #fff;
2204
- background: #000;
2205
- }
2206
-
2207
- html.auto-color hr {
2208
- border-top-color: color-mod(var(--color-darkmode) l(+8%));
2209
- }
2210
-
2211
- html.auto-color .gh-content hr:after {
2212
- background: color-mod(var(--color-darkmode) l(+8%));
2213
- box-shadow: var(--color-darkmode) 0 0 0 5px;
2214
- }
2215
-
2216
- html.auto-color figcaption {
2217
- color: rgba(255, 255, 255, 0.6);
2218
- }
2219
-
2220
- html.auto-color .gh-content table:not(.gist table) td:first-child {
2221
- background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
2222
- }
2223
-
2224
- html.auto-color .gh-content table:not(.gist table) td:last-child {
2225
- background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
2226
- }
2227
-
2228
- html.auto-color .gh-content table:not(.gist table) th {
2229
- color: rgba(255, 255, 255, 0.85);
2230
- background-color: color-mod(var(--color-darkmode) l(+8%));
2231
- }
2232
-
2233
- html.auto-color .gh-content table:not(.gist table) th,
2234
- html.auto-color .gh-content table:not(.gist table) td {
2235
- border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
2236
- }
2237
-
2238
- html.auto-color .gh-content input {
2239
- color: color-mod(var(--color-midgrey) l(-30%));
2240
- }
2241
-
2242
- html.auto-color .site-archive-header .no-image {
2243
- color: rgba(255, 255, 255, 0.9);
2244
- background: var(--color-darkmode);
2245
- }
2246
-
2247
- html.auto-color .kg-header-card.kg-style-dark {
2248
- background: color-mod(var(--color-darkgrey) l(-5%));
2249
- }
2250
-
2251
- html.auto-color .kg-header-card.kg-style-light {
2252
- background: color-mod(var(--color-darkgrey) l(+5%));
2253
- }
2254
-
2255
- html.auto-color .kg-header-card h2.kg-header-card-header,
2256
- html.auto-color .kg-header-card h3.kg-header-card-subheader {
2257
- color: #fff;
2258
- }
2259
-
2260
- html.auto-color .footer-cta-title {
2261
- color: #fff;
2262
- }
2263
- }
2264
-
2265
- /*
2266
-
2267
- Hey! You reached the end.
2268
-
2269
- Hope you enjoyed this CSS file, if you have any suggestions
2270
- for improvements that might be useful for everyone who uses
2271
- this theme, you can find the open source repository for it
2272
- here: https://github.com/tryghost/casper
2273
-
2274
- Or, if you've just scrolled all the way to the bottom of the
2275
- file to add some of your own styles. Well, you've come to
2276
- the right place. Onward!
2277
-
2278
- */
1
+ a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;height:auto;max-width:100%}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box;font-family:sans-serif}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{font-size:2em;margin:.67em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25);font-family:var(--font-mono);font-size:1.5rem;padding:3px 5px}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{border:none;overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:62.5%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;background:#fff;color:var(--color-darkgrey);font-family:var(--font-sans);font-size:1.6rem;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.6em;text-rendering:optimizeLegibility}::-moz-selection{background:#daf2fd;text-shadow:none}::selection{background:#daf2fd;text-shadow:none}hr{border:0;border-top:1px solid #f0f0f0;display:block;height:1px;margin:2.5em 0 3.5em;padding:0;position:relative;width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{line-height:1.6em;padding-left:.3em}li+li{margin-top:.5em}dt{color:#daf2fd;float:left;font-weight:500;margin:0 20px 0 0;text-align:right;width:120px}dd{margin:0 0 5px;text-align:left}blockquote{border-left:#daf2fd;margin:1.5em 0;padding:0 1.6em}blockquote small{display:inline-block;font-size:.9em;margin:.8em 0 .8em 1.5em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.01em;line-height:1.15;margin-top:0;text-rendering:optimizeLegibility}h1{font-size:4.8rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .5em}@media (max-width:600px){h1{font-size:2.8rem}}h2{font-size:2.8rem;font-weight:700;margin:1.5em 0 .5em}@media (max-width:600px){h2{font-size:2.3rem}}h3{font-size:2.4rem;font-weight:600;margin:1.5em 0 .5em}@media (max-width:600px){h3{font-size:1.7rem}}h4{font-size:2rem;margin:1.5em 0 .5em}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}:root{--color-green:#a4d037;--color-yellow:#fecd35;--color-red:#f05230;--color-darkgrey:#15171a;--color-midgrey:#738a94;--color-lightgrey:#f1f1f1;--color-secondary-text:#979797;--color-border:#e1e1e1;--color-wash:#e5eff5;--color-darkmode:#151719;--ghost-accent-color:#ff0095;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-serif:Georgia,Times,serif;--font-mono:Menlo,Courier,monospace}.viewport{display:flex;flex-direction:column;min-height:100vh}.site-content{flex-grow:1}.outer{padding:0 max(4vmin,20px);position:relative}.inner{margin:0 auto;max-width:1200px;width:100%}.site-header{background:var(--ghost-accent-color);color:#fff;position:relative}.site-header-cover{bottom:0;height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:0;width:100%}.site-header-content{align-items:center;color:var(--color-darkgrey);display:flex;padding-bottom:19vmin;padding-top:calc(19vmin + 44px);position:relative;text-align:center;z-index:100}.has-cover .site-header-content{background-color:var(--ghost-accent-color);color:#fff;min-height:560px}.site-header-content.left-aligned{padding-bottom:0;text-align:left}.has-cover .site-header-content.left-aligned{align-items:flex-end;padding-bottom:max(4vmin,32px)}.site-header-content.no-content{padding-bottom:2vmin;padding-top:0}.site-header-inner{position:relative}.site-header-content.left-aligned .site-header-inner{align-items:flex-start}.site-logo{flex-shrink:0;margin:0 auto;max-height:120px}.site-header-content.left-aligned .site-logo{margin-left:0;margin-right:auto;max-height:96px}.site-title{font-size:5rem;font-weight:800;margin:0;padding:0;z-index:10}.has-serif-title .site-title{font-family:var(--font-serif)}.has-cover .site-title{font-size:6rem}.site-header-content.left-aligned .site-title{font-size:4.4rem}.has-cover .site-header-content.left-aligned .site-title{font-size:4.6rem}.site-description{display:inline-block;font-size:6rem;font-weight:700;line-height:1.1;max-width:960px;z-index:10}:is(.site-logo,.site-title)+.site-description{font-size:2.4rem;font-weight:400;line-height:1.4;margin-top:16px;max-width:640px}.site-logo+.site-description{margin-top:20px}.site-title+.site-description{color:var(--color-secondary-text)}.has-cover .site-description{color:#fff;letter-spacing:-.005em}.has-cover :is(.site-logo,.site-title)+.site-description{font-size:2.4rem}.has-cover .site-header-content.left-aligned :is(.site-logo,.site-title)+.site-description{font-size:2.2rem}@media (min-width:992px){.is-head-stacked.has-cover .site-header-content{padding-top:calc(19vmin + 120px)}}@media (max-width:991px){.site-header-content{padding-top:calc(19vmin + 32px)}}@media (max-width:767px){.has-cover .site-header-content{min-height:240px}.site-header-inner{gap:16px}.site-logo{max-width:60%}.site-title{font-size:3.4rem!important}.site-description{font-size:2.8rem!important}.site-logo+.site-description{margin-top:12px!important}.site-title+.site-description{margin-top:4px!important}}.gh-head{background-color:#fff;font-size:1.6rem;height:88px;line-height:1.3em}.has-cover:not(.home-template) .gh-head{background-color:var(--ghost-accent-color);color:#fff}:is(.home-template,.paged:not(.tag-template):not(.author-template)).has-cover .gh-head{background-color:transparent;color:#fff;left:0;position:absolute;right:0;top:0;z-index:2000}.gh-head a{text-decoration:none}.gh-head-inner{align-items:center;-moz-column-gap:40px;column-gap:40px;display:grid;grid-auto-flow:row dense;height:100%}.gh-head-inner,.is-head-left-logo .gh-head-inner{grid-template-columns:auto 1fr auto}.is-head-left-logo.home-template .gh-head-logo{display:none}.is-head-left-logo.home-template .gh-head-menu{margin-left:-40px}@media (min-width:992px){.is-head-left-logo .gh-head-menu{margin-left:16px;margin-right:32px}}.is-head-middle-logo .gh-head-inner{grid-template-columns:1fr auto 1fr}.is-head-middle-logo .gh-head-brand{grid-column-start:2}@media (min-width:992px){.is-head-middle-logo .gh-head-menu{margin-right:64px}}.is-head-stacked .gh-head{height:auto}.is-head-stacked .gh-head-inner{grid-template-columns:1fr auto 1fr}.is-head-stacked .gh-head-brand{grid-column-start:2;grid-row-start:1}@media (min-width:992px){.is-head-stacked .gh-head-inner{padding:0}.is-head-stacked .gh-head-brand{align-items:center;display:flex;height:80px;position:relative}.is-head-stacked .gh-head-menu{grid-column:1/4;grid-row-start:2;height:56px;justify-content:center;margin:0 48px}.is-head-stacked .gh-head-menu:after,.is-head-stacked .gh-head-menu:before{background-color:var(--color-lightgrey);content:"";height:1px;left:0;position:absolute;top:80px;width:100%}.is-head-stacked.has-cover .gh-head-menu:after,.is-head-stacked.has-cover .gh-head-menu:before{background-color:hsla(0,0%,100%,.2)}.is-head-stacked .gh-head-menu:after{top:136px}.is-head-stacked .gh-head-actions{grid-column:1/4;grid-row-start:1;justify-content:space-between}}.gh-head-brand{align-items:center;display:flex;height:40px;word-break:break-all}.gh-head-logo{color:inherit;display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}.gh-head-logo.no-image{margin-top:-2px}.has-cover .gh-head-logo{color:#fff}.gh-head-logo img{max-height:40px}.gh-head-menu{align-items:center;display:flex;font-weight:500;margin-top:1px}.gh-head-menu .nav{align-items:center;display:inline-flex;flex-wrap:wrap;gap:32px;list-style:none;margin:0;padding:0}.gh-head-menu .nav li{margin:0;padding:0}.gh-head-menu .nav a{color:inherit;display:inline-block;line-height:1.7}.gh-head-menu .nav a:hover{opacity:.9}.gh-head-menu .nav-more-toggle{background-color:transparent;font-size:inherit;height:30px;margin:0 -6px;padding:0;position:relative;text-transform:inherit;width:30px}.gh-head-menu .nav-more-toggle svg{height:24px;width:24px}@media (min-width:992px){body:not(.is-dropdown-loaded) .gh-head-menu .nav>li{opacity:0}}.gh-dropdown{background-color:#fff;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 7px 20px -5px rgba(0,0,0,.15);margin-top:24px;opacity:0;padding:12px 0;position:absolute;right:-16px;text-align:left;top:100%;transform:translate3d(0,6px,0);transition:opacity .3s,transform .2s;visibility:hidden;width:200px;z-index:90}.is-head-middle-logo .gh-dropdown{left:-24px;right:auto}.is-dropdown-mega .gh-dropdown{-moz-column-gap:40px;column-gap:40px;display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;min-width:320px;padding:20px 32px}.is-dropdown-open .gh-dropdown{opacity:1;transform:translateY(0);visibility:visible}.gh-head-menu .gh-dropdown li a{color:#15171a;display:block;padding:6px 20px}.is-dropdown-mega .gh-dropdown li a{padding:8px 0}.gh-social{align-items:center;display:flex;gap:20px}.gh-social-link{color:inherit;line-height:0}.gh-social-link:hover{opacity:.9}.gh-social-link svg{height:18px;width:18px}.gh-head-actions{align-items:center;display:flex;gap:24px;justify-content:flex-end;list-style:none;text-align:right}.gh-head-button{align-items:center;background:var(--ghost-accent-color);border-radius:48px;color:#fff;display:inline-flex;font-size:1.6rem;font-weight:600;height:44px;justify-content:center;letter-spacing:-.005em;padding:8px 20px}.has-cover .gh-head-button{background:#fff;color:var(--color-darkgrey)}.gh-search{align-items:center;background-color:transparent;border:0;cursor:pointer;display:inline-flex;height:32px;justify-content:center;outline:none;padding:0;width:32px}.gh-search:hover{opacity:.9}.gh-head-brand .gh-search{margin-right:8px}.gh-head-actions .gh-search{margin-right:-4px}@media (max-width:991px){.gh-head-actions .gh-search{display:none}}@media (min-width:992px){.gh-head-brand .gh-search{display:none}}.gh-burger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;cursor:pointer;display:none;height:30px;margin-right:-3px;padding:0;position:relative;width:30px}.gh-burger:after,.gh-burger:before{background-color:var(--color-darkgrey);content:"";height:1px;left:3px;position:absolute;transition:all .2s cubic-bezier(.04,.04,.12,.96) .1008s;width:24px}.has-cover .gh-burger:after,.has-cover .gh-burger:before{background-color:#fff}.gh-burger:before{top:11px}.gh-burger:after{bottom:11px}.gh-head-open .gh-burger:before{top:15px;transform:rotate(45deg)}.gh-head-open .gh-burger:after{bottom:14px;transform:rotate(-45deg)}@media (max-width:991px){#gh-head{height:64px}#gh-head .gh-head-inner{gap:48px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto}#gh-head .gh-head-brand{align-items:center;display:grid;grid-column-start:1;grid-template-columns:1fr auto auto;height:64px}#gh-head .gh-head-logo{font-size:2.2rem}#gh-head .gh-head-brand .gh-search{margin-left:-6px}#gh-head .gh-burger{display:block}#gh-head .gh-head-actions,#gh-head .gh-head-menu{justify-content:center;opacity:0;position:fixed;visibility:hidden}#gh-head .gh-head-menu{margin:0;transform:translateY(0);transition:none}#gh-head .nav{align-items:center;gap:16px;line-height:1.4}#gh-head .nav a{font-size:2.6rem;font-weight:600;text-transform:none}#gh-head .nav li{opacity:0;transform:translateY(-4px)}#gh-head .gh-head-button{font-size:1.8rem;opacity:0;text-transform:none;transform:translateY(8px);width:100%}.gh-head-open #gh-head{-webkit-overflow-scrolling:touch;height:100vh;left:0;overflow-y:scroll;position:fixed;right:0;z-index:3999999}.gh-head-open.has-cover #gh-head,.gh-head-open.has-cover #gh-head .gh-head-actions{background-color:var(--ghost-accent-color)}.gh-head-open #gh-head .gh-head-actions,.gh-head-open #gh-head .gh-head-menu{opacity:1;position:static;visibility:visible}.gh-head-open #gh-head .nav{display:flex;flex-direction:column}.gh-head-open #gh-head .nav li{opacity:1;transform:translateY(0);transition:transform .2s,opacity .2s}.gh-head-open #gh-head .gh-head-actions{align-items:center;background-color:#fff;bottom:0;display:inline-flex;flex-direction:column;gap:12px;left:0;padding:max(4vmin,20px) 0;position:sticky;right:0}.gh-head-open #gh-head .gh-head-button{opacity:1;transform:translateY(0);transition:transform .4s,opacity .4s;transition-delay:.2s}}.post-feed{display:grid;gap:4.8vmin 4vmin;grid-template-columns:repeat(6,1fr);padding:max(4.8vmin,36px) 0 0;position:relative}:is(.tag-template,.author-template) .post-feed{margin-top:4vmin}@media (max-width:991px){.post-feed{grid-template-columns:1fr 1fr}}@media (max-width:767px){.post-feed{grid-gap:40px;grid-template-columns:1fr}}.post-card{background-size:cover;display:flex;flex-direction:column;grid-column:span 2;position:relative;word-break:break-word}.post-card-image-link{display:block;margin-bottom:32px;overflow:hidden;position:relative}.post-card-image-link:after{content:"";display:block;padding-bottom:55%}.post-card[class*=post-access-] .post-card-image-link:after{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:rgba(0,0,0,.5)}.post-card.keep-ratio[class*=post-access-] .post-card-image-link:after{inset:0;padding-bottom:0;position:absolute}.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link:after{padding-bottom:0}.post-card-image{background:var(--color-lightgrey) no-repeat center center;height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image{position:static}.post-card-access{align-items:center;color:#fff;display:flex;font-size:1.5rem;font-weight:600;gap:4px;inset:0;justify-content:center;position:absolute;z-index:10}.post-card-content-link{color:var(--color-darkgrey);display:block;position:relative}.post-card-content-link:hover{text-decoration:none}.post-feed .no-image .post-card-content-link{padding:0}.no-image .post-card-header{margin-top:0}.post-card-tags{align-items:center;color:var(--color-secondary-text);display:flex;font-size:1.4rem;font-weight:600;gap:12px;letter-spacing:-.005em;line-height:1;margin:0 0 10px}.post-card-featured{align-items:center;color:var(--ghost-accent-color);display:flex;gap:3px;padding-left:18px;position:relative}.post-card-featured svg{left:0;position:absolute}.post-card-title{font-size:2.6rem;font-weight:800;line-height:1.2;margin:0}.post-card-content-link:hover .post-card-title{opacity:.9}.no-image .post-card-title{margin-top:0}.has-serif-title .post-card-title{font-family:var(--font-serif);letter-spacing:-.005em}.post-card-title svg{margin-left:-1px;margin-top:-3px}.post-card-content{display:flex;flex-direction:column;flex-grow:1}.post-card-excerpt{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-size:1.6rem;line-height:1.5;margin-top:12px;max-width:720px;overflow-y:hidden;word-break:break-word}.has-sans-body .post-card-excerpt{font-family:var(--font-sans)}.post-card:not(.post-card-large):not(.post-card-full):not(.dynamic):not(.no-image) .post-card-excerpt{-webkit-line-clamp:2}:is(.tag-template,.author-template) .post-card-excerpt{margin-top:6px}.post-card-meta{color:var(--color-secondary-text);font-size:1.3rem;margin-top:12px;padding:0}.post-card-meta,.post-card-meta>*{align-items:center;display:flex;gap:6px}.post-card-meta>*+:not(script):before{background-color:var(--color-secondary-text);border-radius:50%;content:"";height:2px;width:2px}.post-card-meta .sep{margin:0 4px}.author-profile-image{background:#fff;border-radius:100%;display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.author-list{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 0 4px;padding:0}.author-list-item{flex-shrink:0;margin:0;padding:0;position:relative}@media (min-width:1001px){.post-card-large{grid-gap:4vmin;border-top:0;display:grid;grid-column:span 6;grid-template-columns:repeat(3,1fr)}.post-card-large:not(.no-image) .post-card-header{margin-top:0}.post-card-large .post-card-image-link{grid-column:span 2;margin-bottom:0;position:relative}.post-card-large .post-card-content{grid-column:span 1}.post-card-large.no-image .post-card-content{grid-column:span 2}.post-card-large .post-card-image{height:100%;position:absolute;width:100%}.post-card-large .post-card-tags{margin-bottom:12px}.post-card-large .post-card-title{font-size:4.4rem;line-height:1.05;margin-top:0}.post-card-large .post-card-excerpt{margin-top:16px}.post-card-full{grid-column:span 6}.post-card-full .post-card-image-link{margin-bottom:40px}.post-card-full .post-card-tags{margin-bottom:14px}.post-card-full .post-card-title{font-size:6.4rem;line-height:.95}.post-card-full .post-card-excerpt{font-size:1.8rem;margin-top:20px}.post-card-large+.post-card-large:nth-child(2n){margin:32px 0}.post-card-large+.post-card-large:nth-child(2n) .post-card-content{order:-1}.post-card.dynamic{grid-column:span 3}.post-card.dynamic .post-card-title{font-size:3rem}}.pagination{align-items:center;display:none;grid-template-columns:1fr auto 1fr;margin-top:8vmin}html.no-infinite-scroll .pagination{display:grid}.pagination a{font-size:1.7rem;font-weight:600}.pagination .page-number{color:var(--color-secondary-text);grid-column-start:2}.pagination .older-posts{grid-column-start:3;text-align:right}@media (max-width:767px){.pagination .page-number{display:none}}.article{padding:max(8vmin,40px) 0 max(8vmin,64px);word-break:break-word}.page-template .article{padding-top:max(12vmin,64px)}.article-header{padding:0 0 max(6.4vmin,40px)}.page-template .article-header{padding-bottom:max(3.2vmin,28px)}.article-tag{font-size:1.6rem;margin-bottom:16px}.article-tag a{color:var(--color-secondary-text)}.article-title{color:var(--color-darkgrey);font-size:clamp(3.2rem,5vw,5.2rem);font-weight:800;line-height:1.05;margin-bottom:0}.has-serif-title .article-title{font-family:var(--font-serif)}.article-excerpt{color:var(--color-darkgrey);font-size:2rem;line-height:1.45;margin-top:20px;max-width:720px}.gh-canvas .article-image{grid-column:wide-start/wide-end;margin:max(6.4vmin,40px) 0 0;width:100%}.image-full .article-image{grid-column:full-start/full-end}.image-small .article-image{grid-column:main-start/main-end}.gh-canvas .article-image img{display:block;margin-left:auto;margin-right:auto;width:100%}@media (max-width:767px){.article-excerpt{font-size:1.7rem;margin-top:14px}}.gh-canvas{display:grid;grid-template-columns:[full-start] minmax(max(4vmin,20px),auto) [wide-start] minmax(auto,240px) [main-start] min(720px,calc(100% - max(8vmin, 40px))) [main-end] minmax(auto,240px) [wide-end] minmax(max(4vmin,20px),auto) [full-end]}.gh-canvas>*{grid-column:main-start/main-end}.kg-width-wide{grid-column:wide-start/wide-end}.kg-width-full{grid-column:full-start/full-end}.kg-width-full img{width:100%}.gh-content>*+*{margin-bottom:0;margin-top:max(3.2vmin,24px)}.gh-content>[id]{color:var(--color-darkgrey);margin:0}.has-serif-title .gh-content>[id]{font-family:var(--font-serif)}.gh-content>[id]:not(:first-child){margin:2em 0 0}.gh-content>[id]+*{margin-top:1.5rem!important}.gh-content>blockquote,.gh-content>hr{margin-top:max(4.8vmin,32px);position:relative}.gh-content>blockquote+*,.gh-content>hr+*{margin-top:max(4.8vmin,32px)!important}.gh-content a{color:var(--ghost-accent-color);text-decoration:underline;word-break:break-word}.gh-content>blockquote:not([class]),.gh-content>dl,.gh-content>ol,.gh-content>p,.gh-content>ul{font-family:var(--font-serif);font-size:2rem;font-weight:400;line-height:1.6em}.gh-content .kg-callout-card .kg-callout-text,.gh-content .kg-toggle-card .kg-toggle-content>ol,.gh-content .kg-toggle-card .kg-toggle-content>p,.gh-content .kg-toggle-card .kg-toggle-content>ul{font-family:var(--font-serif);font-size:1.9rem;font-weight:400;line-height:1.6em}.gh-content .kg-product-card .kg-product-card-description>ol,.gh-content .kg-product-card .kg-product-card-description>p,.gh-content .kg-product-card .kg-product-card-description>ul{font-size:1.7rem;line-height:1.6em}.gh-content .kg-callout-card .kg-callout-emoji{font-size:2.1rem;line-height:1.4em}.gh-content .kg-toggle-card .kg-toggle-heading-text{font-size:2rem}.has-sans-body .gh-content .kg-callout-card .kg-callout-text,.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content>ol,.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content>p,.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content>ul,.has-sans-body .gh-content>blockquote,.has-sans-body .gh-content>dl,.has-sans-body .gh-content>ol,.has-sans-body .gh-content>p,.has-sans-body .gh-content>ul{font-family:var(--font-sans)}.gh-content .kg-product-card .kg-product-card-description>ol,.gh-content .kg-product-card .kg-product-card-description>ul,.gh-content .kg-toggle-card .kg-toggle-content>ol,.gh-content .kg-toggle-card .kg-toggle-content>ul,.gh-content>dl,.gh-content>ol,.gh-content>ul{padding-left:1.9em}.gh-content>blockquote:not([class]){font-style:italic;padding:0;position:relative}.gh-content>blockquote:not([class]):before{background:var(--ghost-accent-color);bottom:0;content:"";left:-1.5em;position:absolute;top:0;width:.3rem}.gh-content :not(pre)>code{background:#f0f6f9;border:1px solid #e1eaef;border-radius:.25em;color:#15171a;font-size:.9em;font-weight:400!important;line-height:1em;padding:.15em .4em;vertical-align:middle}.gh-content pre{background:var(--color-darkgrey);border-radius:5px;box-shadow:0 2px 6px -2px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.4);color:var(--color-wash);font-size:1.4rem;line-height:1.5em;overflow:auto;padding:16px 20px}@media (max-width:650px){.gh-content .kg-callout-card .kg-callout-text,.gh-content .kg-toggle-card .kg-toggle-content>ol,.gh-content .kg-toggle-card .kg-toggle-content>p,.gh-content .kg-toggle-card .kg-toggle-content>ul,.gh-content>blockquote:not([class]),.gh-content>dl,.gh-content>ol,.gh-content>p,.gh-content>ul{font-size:1.8rem}.gh-content .kg-product-card .kg-product-card-description>ol,.gh-content .kg-product-card .kg-product-card-description>p,.gh-content .kg-product-card .kg-product-card-description>ul{font-size:1.6rem}.gh-content blockquote:not([class]):before{left:min(-4vmin,-20px)}}.gh-content .kg-card+:not(.kg-card),.gh-content :not(.kg-card):not([id])+.kg-card{margin-bottom:0;margin-top:6vmin}.kg-embed-card{align-items:center;display:flex;flex-direction:column;width:100%}.kg-image-card img{margin:auto}.has-serif-title .kg-toggle-card .kg-toggle-heading-text{font-family:var(--font-serif)}.gh-content .kg-callout-card-accent a{text-decoration:underline}.kg-blockquote-alt{color:var(--color-midgrey);font-family:var(--font-serif)}.has-sans-body .kg-blockquote-alt{font-family:var(--font-sans)}.kg-card.kg-header-card.kg-style-dark{background:var(--color-darkgrey)}.kg-header-card.kg-style-light h2.kg-header-card-header{color:#0a0b0c}.has-serif-title .kg-header-card h2.kg-header-card-header{font-family:var(--font-serif)}figcaption{color:rgba(0,0,0,.5);font-size:1.3rem;line-height:1.4em;padding:1.5rem 1.5rem 0;text-align:center}figcaption strong{color:rgba(0,0,0,.8)}figcaption a{text-decoration:underline}iframe.instagram-media{margin:6vmin auto 0!important}iframe.instagram-media+script+:not([id]){margin-top:6vmin}.kg-width-full.kg-card-hascaption{display:grid;grid-template-columns:inherit}.kg-width-wide.kg-card-hascaption img{grid-column:wide-start/wide-end}.kg-width-full.kg-card-hascaption img{grid-column:1/-1}.kg-width-full.kg-card-hascaption figcaption{grid-column:main-start/main-end}.article-comments{margin:6vmin 0 0}.footnotes-sep{margin-bottom:30px}.footnotes{font-size:1.5rem}.footnotes p{margin:0}.footnote-backref{box-shadow:none!important;font-size:1.2rem;font-weight:700;text-decoration:none!important}.gh-content table:not(.gist table){-webkit-overflow-scrolling:touch;background:radial-gradient(ellipse at left,rgba(0,0,0,.2) 0,transparent 75%) 0,radial-gradient(ellipse at right,rgba(0,0,0,.2) 0,transparent 75%) 100%;background-attachment:scroll,scroll;background-repeat:no-repeat;background-size:10px 100%,10px 100%;border-collapse:collapse;border-spacing:0;display:inline-block;font-family:var(--font-sans);font-size:1.6rem;max-width:100%;overflow-x:auto;vertical-align:top;white-space:nowrap;width:auto}.gh-content table:not(.gist table) td:first-child{background-image:linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0));background-repeat:no-repeat;background-size:20px 100%}.gh-content table:not(.gist table) td:last-child{background-image:linear-gradient(270deg,#fff 50%,hsla(0,0%,100%,0));background-position:100% 0;background-repeat:no-repeat;background-size:20px 100%}.gh-content table:not(.gist table) th{background-color:#f4f8fb;color:var(--color-darkgrey);font-size:1.2rem;font-weight:700;letter-spacing:.2px;text-align:left;text-transform:uppercase}.gh-content table:not(.gist table) td,.gh-content table:not(.gist table) th{border:1px solid #e2ecf3;padding:6px 12px}.article-byline{display:flex;justify-content:space-between;margin:min(24px,5.6vmin) 0 0}.article-byline-content{align-items:center;display:flex;flex-grow:1}.article-byline-content .author-list{justify-content:flex-start;padding:0 14px 0 0}.article-byline-meta{color:var(--color-secondary-text);font-size:1.4rem;line-height:1.2em}.article-byline-meta .author-name{font-size:1.7rem;font-weight:700;letter-spacing:0;margin:0 0 6px}.article-byline-meta .bull{display:inline-block;margin:0 2px}.author-avatar{background-color:var(--color-border);border:2px solid #fff;border-radius:50%;display:block;height:min(56px,13.6vmin);margin:0 -4px;overflow:hidden;width:min(56px,13.6vmin)}.page-template .article-title{margin-bottom:0}@media (max-width:767px){.article-byline-content .author-list{padding-right:12px}.article-byline-meta .author-name{margin-bottom:4px}}.footer-cta{position:relative;text-align:center}.footer-cta-title{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;margin:0 0 min(24px,6.4vmin)}.has-serif-title .footer-cta-title{font-family:var(--font-serif)}.footer-cta-button{align-items:center;background:#fff;border:1px solid var(--color-border);border-radius:8px;color:var(--color-secondary-text);display:inline-flex;font-size:1.7rem;justify-content:space-between;max-width:500px;padding:5px 5px 5px 15px;position:relative;transition:border-color .2s;width:100%}.footer-cta-button:hover{border-color:#c2c2c2}.footer-cta-button span{background:var(--ghost-accent-color);border-radius:6px;color:#fff;display:inline-block;font-size:1.6rem;font-weight:600;letter-spacing:-.005em;padding:9px 15px}.read-more-wrap{margin-top:2.4vmin}.footer-cta+.read-more-wrap{margin-top:max(12vmin,72px)}.read-more{grid-gap:4vmin;display:grid;grid-template-columns:repeat(6,1fr)}.read-more .post-card-tags{display:none}@media (max-width:1000px){.read-more{grid-template-columns:repeat(4,1fr)}.read-more .post-card:nth-child(3){display:none}}@media (max-width:700px){.read-more{grid-template-columns:repeat(2,1fr)}.read-more .post-card:nth-child(2){display:none}}.comments{align-items:center;display:flex;flex-direction:column;margin:60px 0 44px}.comments-head{align-items:baseline;display:flex;justify-content:space-between;margin-bottom:32px;max-width:720px;width:100%}.comments h2{font-size:3.4rem;font-weight:800;max-width:720px;width:100%}.comments .comment-count{color:var(--color-midgrey);font-weight:600;white-space:nowrap}.comments #ghost-comments-root{max-width:720px;width:100%}.author-profile-pic{background:#fff;border-radius:50%;display:block;height:80px;margin:0 0 2rem;-o-object-fit:cover;object-fit:cover;width:80px}.author-profile-footer{margin-top:16px}.author-profile-location{font-weight:700}.author-profile-meta{display:flex;gap:10px}.author-profile-social-link{color:var(--color-secondary-text);font-size:1.3rem}.author-profile-social-link:hover{color:var(--color-darkgrey)}.author-profile-social-link svg{height:16px;width:16px}@media (min-width:1001px){.author-template .post-card-large .post-card-content:only-child{grid-column:span 2;max-width:640px}}.tag-template .post-card-large .post-card-image-link{grid-column:2/span 2;order:2}.tag-template .post-card-large .post-card-content{order:1}@media (min-width:1001px){.tag-template .post-card-large .post-card-content:only-child{grid-column:span 2;max-width:640px}}.error-content{padding:14vw 4vw 2vw}.error-message{padding-bottom:10vw;text-align:center}.error-code{font-size:12vw;letter-spacing:-5px;line-height:1em;margin:0}.error-description{color:var(--color-secondary-text);font-size:3.2rem;font-weight:400;letter-spacing:-.005em;line-height:1.3em;margin:0}.error-link{display:inline-block;margin-top:5px}@media (min-width:940px){.error-content .post-card{border-bottom:none;margin-bottom:0;padding-bottom:0}}@media (max-width:800px){.error-content{padding-top:24vw}.error-code{font-size:11.2rem}.error-message{padding-bottom:16vw}.error-description{font-size:1.8rem;margin:5px 0 0}}@media (max-width:500px){.error-content{padding-top:28vw}.error-message{padding-bottom:14vw}}.site-footer{background:#0a0b0c;color:#fff;margin:max(12vmin,64px) 0 0;padding-bottom:140px;padding-top:48px;position:relative}.site-footer .inner{grid-gap:40px;color:hsla(0,0%,100%,.7);display:grid;font-size:1.3rem;grid-template-columns:auto 1fr auto}.site-footer .copyright a{color:#fff;font-weight:500;letter-spacing:-.015em}.site-footer a{color:hsla(0,0%,100%,.7)}.site-footer a:hover{color:#fff;text-decoration:none}.site-footer-nav ul{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:0 0 20px;padding:0}.site-footer-nav li{align-items:center;display:inline-flex;line-height:2em;margin:0;padding:0}.site-footer-nav a{align-items:center;display:inline-flex;margin-left:10px;position:relative}.site-footer-nav li:not(:first-child) a:before{background:#fff;border-radius:100%;content:"";display:block;height:2px;margin:0 10px 0 0;width:2px}@media (max-width:767px){.site-footer .inner{grid-gap:0;grid-template-columns:1fr;max-width:500px;text-align:center}.site-footer .copyright,.site-footer .copyright a{color:#fff;font-size:1.5rem}.site-footer .copyright{margin-bottom:16px}}html.dark-mode body{background:var(--color-darkmode);color:hsla(0,0%,100%,.75)}html.dark-mode img{opacity:.9}html.dark-mode kbd{background:#212427}html.dark-mode figcaption a{color:#fff}html.dark-mode .gh-head{background:var(--color-darkmode);color:#fff}html.dark-mode .gh-burger-box,html.dark-mode .site-header-content{color:#fff}html.dark-mode .post-card-image{background:var(--color-darkmode)}html.dark-mode :is(.post-card-tags,.post-card-meta,.article-tag a,.byline-meta-content){color:#5f5f5f}html.dark-mode .post-card-featured,html.dark-mode .post-card-title{color:#fff}html.dark-mode .post-card-excerpt{color:var(--color-secondary-text)}html.dark-mode .article-title,html.dark-mode .author-profile-location,html.dark-mode .author-profile-social-link:hover{color:#fff}html.dark-mode .article-excerpt{color:var(--color-secondary-text)}html.dark-mode .post-full-image{background-color:#282b2f}html.dark-mode .author-avatar{background-color:#282b2f;border-color:var(--color-darkmode)}html.dark-mode .author-profile-image{opacity:1}html.dark-mode .author-profile-image path{fill:var(--color-darkmode)}html.dark-mode .article-byline-meta .author-name a{color:#fff}html.dark-mode .no-image .author-social-link a{color:hsla(0,0%,100%,.75)}html.dark-mode .gh-content>[id]{color:hsla(0,0%,100%,.9)}html.dark-mode .gh-content pre{background:#030303}html.dark-mode .gh-content :not(pre)>code{background:#23262b;border-color:#282b2f;color:var(--color-wash)}:where(html.dark-mode) .gh-content a{color:#fff}html.dark-mode .gh-content em,html.dark-mode .gh-content strong{color:#fff}html.dark-mode .gh-content code{background:#000;color:#fff}html.dark-mode hr{border-top-color:#282b2f}html.dark-mode .gh-content hr:after{background:#282b2f;box-shadow:var(--color-darkmode) 0 0 0 5px}html.dark-mode figcaption{color:hsla(0,0%,100%,.6)}html.dark-mode .gh-content table:not(.gist table) td:first-child{background-image:linear-gradient(to right,var(--color-darkmode) 50%,rgba(21,23,25,0) 100%)}html.dark-mode .gh-content table:not(.gist table) td:last-child{background-image:linear-gradient(to left,var(--color-darkmode) 50%,rgba(21,23,25,0) 100%)}html.dark-mode .gh-content table:not(.gist table) th{background-color:#282b2f;color:hsla(0,0%,100%,.85)}html.dark-mode .gh-content table:not(.gist table) td,html.dark-mode .gh-content table:not(.gist table) th{border:1px solid #282b2f}html.dark-mode .gh-content input{color:#303a3e}html.dark-mode .site-archive-header .no-image{background:var(--color-darkmode);color:hsla(0,0%,100%,.9)}html.dark-mode .kg-header-card.kg-style-dark{background:#0a0b0c}html.dark-mode .kg-header-card.kg-style-light{background:#202328}html.dark-mode .footer-cta-title,html.dark-mode .kg-header-card h2.kg-header-card-header,html.dark-mode .kg-header-card h3.kg-header-card-subheader{color:#fff}@media (prefers-color-scheme:dark){html.auto-color body{background:var(--color-darkmode);color:hsla(0,0%,100%,.75)}html.auto-color img{opacity:.9}html.auto-color kbd{background:#212427}html.auto-color figcaption a{color:#fff}html.auto-color .gh-head{background:var(--color-darkmode);color:#fff}html.auto-color .gh-burger-box,html.auto-color .site-header-content{color:#fff}html.auto-color .post-card-image{background:var(--color-darkmode)}html.auto-color :is(.post-card-tags,.post-card-meta,.article-tag a,.byline-meta-content){color:#5f5f5f}html.auto-color .post-card-featured,html.auto-color .post-card-title{color:#fff}html.auto-color .post-card-excerpt{color:var(--color-secondary-text)}html.auto-color .article-title,html.auto-color .author-profile-location,html.auto-color .author-profile-social-link:hover{color:#fff}html.auto-color .article-excerpt{color:var(--color-secondary-text)}html.auto-color .post-full-image{background-color:#282b2f}html.auto-color .author-avatar{background-color:#282b2f;border-color:var(--color-darkmode)}html.auto-color .author-profile-image{opacity:1}html.auto-color .author-profile-image path{fill:var(--color-darkmode)}html.auto-color .article-byline-meta .author-name a{color:#fff}html.auto-color .no-image .author-social-link a{color:hsla(0,0%,100%,.75)}html.auto-color .gh-content>[id]{color:hsla(0,0%,100%,.9)}html.auto-color .gh-content pre{background:#030303}html.auto-color .gh-content :not(pre)>code{background:#23262b;border-color:#282b2f;color:var(--color-wash)}:where(html.auto-color) .gh-content a{color:#fff}html.auto-color .gh-content em,html.auto-color .gh-content strong{color:#fff}html.auto-color .gh-content code{background:#000;color:#fff}html.auto-color hr{border-top-color:#282b2f}html.auto-color .gh-content hr:after{background:#282b2f;box-shadow:var(--color-darkmode) 0 0 0 5px}html.auto-color figcaption{color:hsla(0,0%,100%,.6)}html.auto-color .gh-content table:not(.gist table) td:first-child{background-image:linear-gradient(to right,var(--color-darkmode) 50%,rgba(21,23,25,0) 100%)}html.auto-color .gh-content table:not(.gist table) td:last-child{background-image:linear-gradient(to left,var(--color-darkmode) 50%,rgba(21,23,25,0) 100%)}html.auto-color .gh-content table:not(.gist table) th{background-color:#282b2f;color:hsla(0,0%,100%,.85)}html.auto-color .gh-content table:not(.gist table) td,html.auto-color .gh-content table:not(.gist table) th{border:1px solid #282b2f}html.auto-color .gh-content input{color:#303a3e}html.auto-color .site-archive-header .no-image{background:var(--color-darkmode);color:hsla(0,0%,100%,.9)}html.auto-color .kg-header-card.kg-style-dark{background:#0a0b0c}html.auto-color .kg-header-card.kg-style-light{background:#202328}html.auto-color .footer-cta-title,html.auto-color .kg-header-card h2.kg-header-card-header,html.auto-color .kg-header-card h3.kg-header-card-subheader{color:#fff}}
2
+ /*# sourceMappingURL=screen.css.map */