@rathnasgala/theme 0.0.20 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/payload/.gala/managed-files.json +22 -19
- package/payload/eleventy.config.js +15 -1
- package/payload/lib/site-config.js +13 -5
- package/payload/package-lock.json +487 -2
- package/payload/package.json +7 -6
- package/payload/scripts/build-reader.js +24 -0
- package/payload/scripts/lint.js +21 -0
- package/payload/src/_includes/components/ui.njk +26 -17
- package/payload/src/_includes/layouts/base.njk +10 -11
- package/payload/src/_includes/layouts/post.njk +5 -6
- package/payload/src/accent.11ty.js +10 -0
- package/payload/src/assets/engagement-comments.js +115 -234
- package/payload/src/assets/engagement-transport.js +10 -4
- package/payload/src/assets/interactions.js +51 -1
- package/payload/src/assets/reader.js +2 -0
- package/payload/src/assets/theme.css +1 -676
- package/payload/src/client/reader.js +5 -0
- package/payload/src/styles/theme.css +811 -0
- package/payload/src/assets/vendor/hooks.js +0 -2
- package/payload/src/assets/vendor/htm.js +0 -2
- package/payload/src/assets/vendor/preact.js +0 -2
- package/payload/src/assets/vendor/signals-core.js +0 -2
- package/payload/src/assets/vendor/signals.js +0 -2
|
@@ -1,676 +1 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* A publication should read like a well-set page, not like a product.
|
|
3
|
-
*
|
|
4
|
-
* The chrome is quiet, the type carries the hierarchy, and depth comes from surface and space
|
|
5
|
-
* rather than from an outline around everything. Every value here is a token so that the ten
|
|
6
|
-
* `design:` choices in site.config.yml can move the whole page by moving a handful of variables,
|
|
7
|
-
* instead of each component inventing its own spacing and its own grey.
|
|
8
|
-
*/
|
|
9
|
-
:root {
|
|
10
|
-
color-scheme: light dark;
|
|
11
|
-
|
|
12
|
-
/* Neutrals carry a slight warmth. A pure grey reads as unconsidered; these were picked. */
|
|
13
|
-
--gala-color-background: light-dark(#fdfcfb, #131211);
|
|
14
|
-
--gala-color-surface: light-dark(#f6f4f1, #1c1a18);
|
|
15
|
-
--gala-color-raised: light-dark(#fffffe, #24211f);
|
|
16
|
-
--gala-color-text: light-dark(#1a1817, #f2efec);
|
|
17
|
-
--gala-color-muted: light-dark(#6b645e, #a8a099);
|
|
18
|
-
--gala-color-border: light-dark(#968e86, #6b645e);
|
|
19
|
-
--gala-color-hairline: light-dark(#e8e3dd, #2a2724);
|
|
20
|
-
--gala-color-border-strong: light-dark(#c9c2ba, #46413d);
|
|
21
|
-
--gala-color-accent: light-dark(
|
|
22
|
-
var(--gala-accent-light, #8a4b2a),
|
|
23
|
-
var(--gala-accent-dark, #e8a87c));
|
|
24
|
-
|
|
25
|
-
/* Type. One scale, used everywhere, fluid between a phone and a desk. */
|
|
26
|
-
--gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
27
|
-
--gala-font-display: var(--gala-font-body);
|
|
28
|
-
--gala-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
|
|
29
|
-
--gala-text-xs: 0.78rem;
|
|
30
|
-
--gala-text-sm: 0.875rem;
|
|
31
|
-
--gala-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
|
|
32
|
-
--gala-text-lg: clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
|
|
33
|
-
--gala-text-xl: clamp(1.4rem, 1.28rem + 0.6vw, 1.75rem);
|
|
34
|
-
--gala-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
|
|
35
|
-
--gala-text-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
|
|
36
|
-
--gala-leading-tight: 1.15;
|
|
37
|
-
--gala-leading-body: 1.65;
|
|
38
|
-
--gala-tracking-tight: -0.018em;
|
|
39
|
-
--gala-tracking-wide: 0.08em;
|
|
40
|
-
--gala-weight-display: 640;
|
|
41
|
-
|
|
42
|
-
/* Space, radius, depth, motion. */
|
|
43
|
-
--gala-step: 1rem;
|
|
44
|
-
--gala-space-2xs: calc(var(--gala-step) * 0.25);
|
|
45
|
-
--gala-space-xs: calc(var(--gala-step) * 0.5);
|
|
46
|
-
--gala-space-sm: calc(var(--gala-step) * 0.75);
|
|
47
|
-
--gala-space-md: var(--gala-step);
|
|
48
|
-
--gala-space-lg: calc(var(--gala-step) * 1.75);
|
|
49
|
-
--gala-space-xl: calc(var(--gala-step) * 3);
|
|
50
|
-
--gala-space-page: clamp(1.25rem, 5vw, 4.5rem);
|
|
51
|
-
--gala-radius-control: 0.625rem;
|
|
52
|
-
--gala-radius-surface: 1rem;
|
|
53
|
-
--gala-shadow-high:
|
|
54
|
-
0 1px 2px light-dark(rgb(26 24 23 / 5%), rgb(0 0 0 / 35%)),
|
|
55
|
-
0 12px 28px -12px light-dark(rgb(26 24 23 / 18%), rgb(0 0 0 / 60%));
|
|
56
|
-
--gala-motion-fast: 120ms;
|
|
57
|
-
--gala-motion-base: 220ms;
|
|
58
|
-
--gala-ease: cubic-bezier(0.2, 0, 0, 1);
|
|
59
|
-
|
|
60
|
-
--gala-content-width: 72rem;
|
|
61
|
-
--gala-measure: 68ch;
|
|
62
|
-
--gala-widget-min-block-size: 8rem;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
/* An explicit choice must beat the operating system in both directions, so every colour is
|
|
66
|
-
restated rather than left to `light-dark()`. */
|
|
67
|
-
:root[data-mode='light'] {
|
|
68
|
-
color-scheme: light;
|
|
69
|
-
--gala-color-background: #fdfcfb;
|
|
70
|
-
--gala-color-surface: #f6f4f1;
|
|
71
|
-
--gala-color-raised: #fffffe;
|
|
72
|
-
--gala-color-text: #1a1817;
|
|
73
|
-
--gala-color-muted: #6b645e;
|
|
74
|
-
--gala-color-border: #968e86;
|
|
75
|
-
--gala-color-hairline: #e8e3dd;
|
|
76
|
-
--gala-color-border-strong: #c9c2ba;
|
|
77
|
-
--gala-color-accent: var(--gala-accent-light, #8a4b2a);
|
|
78
|
-
}
|
|
79
|
-
:root[data-mode='dark'] {
|
|
80
|
-
color-scheme: dark;
|
|
81
|
-
--gala-color-background: #131211;
|
|
82
|
-
--gala-color-surface: #1c1a18;
|
|
83
|
-
--gala-color-raised: #24211f;
|
|
84
|
-
--gala-color-text: #f2efec;
|
|
85
|
-
--gala-color-muted: #a8a099;
|
|
86
|
-
--gala-color-border: #6b645e;
|
|
87
|
-
--gala-color-hairline: #2a2724;
|
|
88
|
-
--gala-color-border-strong: #46413d;
|
|
89
|
-
--gala-color-accent: var(--gala-accent-dark, #e8a87c);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/* ---------------------------------------------------------------- palettes */
|
|
93
|
-
:root[data-palette='ocean'] {
|
|
94
|
-
--gala-color-background: light-dark(#f8fbfd, #0b1a24);
|
|
95
|
-
--gala-color-surface: light-dark(#eef4f9, #12252f);
|
|
96
|
-
--gala-color-raised: light-dark(#ffffff, #172d39);
|
|
97
|
-
--gala-color-text: light-dark(#12242f, #eaf3f8);
|
|
98
|
-
--gala-color-muted: light-dark(#5a6f7d, #98aebb);
|
|
99
|
-
--gala-color-border: light-dark(#7d8d99, #5f7d8c);
|
|
100
|
-
--gala-color-hairline: light-dark(#dde7ee, #1d3644);
|
|
101
|
-
--gala-color-border-strong: light-dark(#bdccd7, #33505f);
|
|
102
|
-
--gala-color-accent: light-dark(#0f5f7a, #7fd0e8);
|
|
103
|
-
}
|
|
104
|
-
:root[data-palette='ocean'][data-mode='light'] {
|
|
105
|
-
color-scheme: light;
|
|
106
|
-
--gala-color-background: #f8fbfd;
|
|
107
|
-
--gala-color-surface: #eef4f9;
|
|
108
|
-
--gala-color-raised: #ffffff;
|
|
109
|
-
--gala-color-text: #12242f;
|
|
110
|
-
--gala-color-muted: #5a6f7d;
|
|
111
|
-
--gala-color-border: #7d8d99;
|
|
112
|
-
--gala-color-hairline: #dde7ee;
|
|
113
|
-
--gala-color-border-strong: #bdccd7;
|
|
114
|
-
--gala-color-accent: var(--gala-accent-light, #0f5f7a);
|
|
115
|
-
}
|
|
116
|
-
:root[data-palette='ocean'][data-mode='dark'] {
|
|
117
|
-
color-scheme: dark;
|
|
118
|
-
--gala-color-background: #0b1a24;
|
|
119
|
-
--gala-color-surface: #12252f;
|
|
120
|
-
--gala-color-raised: #172d39;
|
|
121
|
-
--gala-color-text: #eaf3f8;
|
|
122
|
-
--gala-color-muted: #98aebb;
|
|
123
|
-
--gala-color-border: #5f7d8c;
|
|
124
|
-
--gala-color-hairline: #1d3644;
|
|
125
|
-
--gala-color-border-strong: #33505f;
|
|
126
|
-
--gala-color-accent: var(--gala-accent-dark, #7fd0e8);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
/* Two more, because colour is the choice a writer actually wants to make — and the one that is
|
|
131
|
-
safe to offer, since a palette only swaps values every rule already reads and each is checked
|
|
132
|
-
for contrast in both modes. */
|
|
133
|
-
:root[data-palette='forest'] {
|
|
134
|
-
--gala-color-background: light-dark(#fbfcfa, #101410);
|
|
135
|
-
--gala-color-surface: light-dark(#f0f4ee, #182018);
|
|
136
|
-
--gala-color-raised: light-dark(#ffffff, #1f271f);
|
|
137
|
-
--gala-color-text: light-dark(#18201a, #eef3ec);
|
|
138
|
-
--gala-color-muted: light-dark(#5b665d, #9aa89b);
|
|
139
|
-
--gala-color-border: light-dark(#849084, #5e685f);
|
|
140
|
-
--gala-color-hairline: light-dark(#e2e9df, #232b23);
|
|
141
|
-
--gala-color-border-strong: light-dark(#5b665d, #7d897e);
|
|
142
|
-
--gala-color-accent: light-dark(#2f6b3f, #8fd3a1);
|
|
143
|
-
}
|
|
144
|
-
:root[data-palette='forest'][data-mode='light'] {
|
|
145
|
-
color-scheme: light;
|
|
146
|
-
--gala-color-background: #fbfcfa;
|
|
147
|
-
--gala-color-surface: #f0f4ee;
|
|
148
|
-
--gala-color-raised: #ffffff;
|
|
149
|
-
--gala-color-text: #18201a;
|
|
150
|
-
--gala-color-muted: #5b665d;
|
|
151
|
-
--gala-color-border: #849084;
|
|
152
|
-
--gala-color-hairline: #e2e9df;
|
|
153
|
-
--gala-color-border-strong: #5b665d;
|
|
154
|
-
--gala-color-accent: var(--gala-accent-light, #2f6b3f);
|
|
155
|
-
}
|
|
156
|
-
:root[data-palette='forest'][data-mode='dark'] {
|
|
157
|
-
color-scheme: dark;
|
|
158
|
-
--gala-color-background: #101410;
|
|
159
|
-
--gala-color-surface: #182018;
|
|
160
|
-
--gala-color-raised: #1f271f;
|
|
161
|
-
--gala-color-text: #eef3ec;
|
|
162
|
-
--gala-color-muted: #9aa89b;
|
|
163
|
-
--gala-color-border: #5e685f;
|
|
164
|
-
--gala-color-hairline: #232b23;
|
|
165
|
-
--gala-color-border-strong: #7d897e;
|
|
166
|
-
--gala-color-accent: var(--gala-accent-dark, #8fd3a1);
|
|
167
|
-
}
|
|
168
|
-
:root[data-palette='plum'] {
|
|
169
|
-
--gala-color-background: light-dark(#fdfbfd, #141016);
|
|
170
|
-
--gala-color-surface: light-dark(#f5eff5, #1d1720);
|
|
171
|
-
--gala-color-raised: light-dark(#ffffff, #241d28);
|
|
172
|
-
--gala-color-text: light-dark(#1f1820, #f2ecf3);
|
|
173
|
-
--gala-color-muted: light-dark(#665c69, #a99dac);
|
|
174
|
-
--gala-color-border: light-dark(#948a95, #6b606d);
|
|
175
|
-
--gala-color-hairline: light-dark(#ebe2ec, #281f2b);
|
|
176
|
-
--gala-color-border-strong: light-dark(#665c69, #8b7f8d);
|
|
177
|
-
--gala-color-accent: light-dark(#7a3d76, #dda6d8);
|
|
178
|
-
}
|
|
179
|
-
:root[data-palette='plum'][data-mode='light'] {
|
|
180
|
-
color-scheme: light;
|
|
181
|
-
--gala-color-background: #fdfbfd;
|
|
182
|
-
--gala-color-surface: #f5eff5;
|
|
183
|
-
--gala-color-raised: #ffffff;
|
|
184
|
-
--gala-color-text: #1f1820;
|
|
185
|
-
--gala-color-muted: #665c69;
|
|
186
|
-
--gala-color-border: #948a95;
|
|
187
|
-
--gala-color-hairline: #ebe2ec;
|
|
188
|
-
--gala-color-border-strong: #665c69;
|
|
189
|
-
--gala-color-accent: var(--gala-accent-light, #7a3d76);
|
|
190
|
-
}
|
|
191
|
-
:root[data-palette='plum'][data-mode='dark'] {
|
|
192
|
-
color-scheme: dark;
|
|
193
|
-
--gala-color-background: #141016;
|
|
194
|
-
--gala-color-surface: #1d1720;
|
|
195
|
-
--gala-color-raised: #241d28;
|
|
196
|
-
--gala-color-text: #f2ecf3;
|
|
197
|
-
--gala-color-muted: #a99dac;
|
|
198
|
-
--gala-color-border: #6b606d;
|
|
199
|
-
--gala-color-hairline: #281f2b;
|
|
200
|
-
--gala-color-border-strong: #8b7f8d;
|
|
201
|
-
--gala-color-accent: var(--gala-accent-dark, #dda6d8);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/* ---------------------------------------------------------------- the looks
|
|
205
|
-
*
|
|
206
|
-
* Three, each designed whole.
|
|
207
|
-
*
|
|
208
|
-
* This replaced nine independent knobs — typeface, spacing, density, radius, motion, surfaces,
|
|
209
|
-
* palette — which a writer set one at a time, blind, and only saw combined after a deploy. Nine
|
|
210
|
-
* knobs is several hundred looks, and nobody had seen most of them: `mono` + `round` + `spacious`
|
|
211
|
-
* + `raised` produced monospace headings inside page-wide pills, and it was reachable in four
|
|
212
|
-
* clicks. A look is a set of decisions that agree with each other, so it is chosen as a set.
|
|
213
|
-
*/
|
|
214
|
-
|
|
215
|
-
/* Calm, serif, generous. For essays and long reading. */
|
|
216
|
-
:root[data-theme='editorial'] {
|
|
217
|
-
--gala-font-body: ui-serif, "Iowan Old Style", Charter, "Source Serif 4", Georgia, serif;
|
|
218
|
-
--gala-font-display: var(--gala-font-body);
|
|
219
|
-
--gala-weight-display: 600;
|
|
220
|
-
--gala-step: 1.1rem;
|
|
221
|
-
--gala-leading-body: 1.7;
|
|
222
|
-
--gala-radius-control: 0.5rem;
|
|
223
|
-
--gala-radius-surface: 0.75rem;
|
|
224
|
-
--gala-measure: 66ch;
|
|
225
|
-
--gala-surface-border: var(--gala-color-hairline);
|
|
226
|
-
--gala-surface-shadow: none;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
/* Crisp, sans, a little tighter. The default, and the safe one. */
|
|
230
|
-
:root[data-theme='modern'] {
|
|
231
|
-
--gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
232
|
-
--gala-font-display: var(--gala-font-body);
|
|
233
|
-
--gala-weight-display: 640;
|
|
234
|
-
--gala-step: 1rem;
|
|
235
|
-
--gala-leading-body: 1.65;
|
|
236
|
-
--gala-radius-control: 0.625rem;
|
|
237
|
-
--gala-radius-surface: 1rem;
|
|
238
|
-
--gala-measure: 70ch;
|
|
239
|
-
--gala-surface-border: transparent;
|
|
240
|
-
--gala-surface-shadow: var(--gala-shadow-high);
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
/* For writing about code: mono for the furniture, never for the prose or the headings. */
|
|
244
|
-
:root[data-theme='technical'] {
|
|
245
|
-
--gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
246
|
-
--gala-font-display: var(--gala-font-body);
|
|
247
|
-
--gala-weight-display: 660;
|
|
248
|
-
--gala-tracking-tight: -0.022em;
|
|
249
|
-
--gala-step: 0.9rem;
|
|
250
|
-
--gala-leading-body: 1.6;
|
|
251
|
-
--gala-radius-control: 0.375rem;
|
|
252
|
-
--gala-radius-surface: 0.5rem;
|
|
253
|
-
--gala-measure: 74ch;
|
|
254
|
-
--gala-surface-border: var(--gala-color-border-strong);
|
|
255
|
-
--gala-surface-shadow: none;
|
|
256
|
-
}
|
|
257
|
-
/* Mono is an accent here — labels, counts, metadata — not a face to set a page in. */
|
|
258
|
-
:root[data-theme='technical'] .gala-eyebrow,
|
|
259
|
-
:root[data-theme='technical'] .gala-engagement dt,
|
|
260
|
-
:root[data-theme='technical'] .gala-comment__meta time {
|
|
261
|
-
font-family: var(--gala-font-mono);
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
/* Motion is not a choice a writer has to make; it is a property of a considered page. */
|
|
265
|
-
@media (prefers-reduced-motion: reduce) {
|
|
266
|
-
:root { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; }
|
|
267
|
-
*, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
:root[data-layout='portfolio'] { --gala-content-width: 82rem; }
|
|
271
|
-
|
|
272
|
-
body {
|
|
273
|
-
margin: 0;
|
|
274
|
-
padding: var(--gala-space-page);
|
|
275
|
-
color: var(--gala-color-text);
|
|
276
|
-
background: var(--gala-color-background);
|
|
277
|
-
font-family: var(--gala-font-body);
|
|
278
|
-
font-size: var(--gala-text-base);
|
|
279
|
-
line-height: var(--gala-leading-body);
|
|
280
|
-
-webkit-font-smoothing: antialiased;
|
|
281
|
-
text-rendering: optimizeLegibility;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
/* Headings carry the hierarchy, so they get the display face, a tighter measure and tighter
|
|
285
|
-
tracking — large type set at body tracking is the single clearest sign of an unconsidered page. */
|
|
286
|
-
:where(h1, h2, h3, h4) {
|
|
287
|
-
font-family: var(--gala-font-display);
|
|
288
|
-
font-weight: var(--gala-weight-display);
|
|
289
|
-
line-height: var(--gala-leading-tight);
|
|
290
|
-
letter-spacing: var(--gala-tracking-tight);
|
|
291
|
-
text-wrap: balance;
|
|
292
|
-
margin-block: 0 var(--gala-space-sm);
|
|
293
|
-
}
|
|
294
|
-
:where(h1) { font-size: var(--gala-text-3xl); }
|
|
295
|
-
:where(h2) { font-size: var(--gala-text-2xl); }
|
|
296
|
-
:where(h3) { font-size: var(--gala-text-xl); }
|
|
297
|
-
:where(h4) { font-size: var(--gala-text-lg); }
|
|
298
|
-
:where(p, ul, ol, blockquote) { margin-block: 0 var(--gala-space-md); }
|
|
299
|
-
:where(p) { text-wrap: pretty; }
|
|
300
|
-
|
|
301
|
-
blockquote {
|
|
302
|
-
margin-inline: 0;
|
|
303
|
-
padding-inline-start: var(--gala-space-md);
|
|
304
|
-
border-inline-start: 2px solid var(--gala-color-accent);
|
|
305
|
-
color: var(--gala-color-muted);
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
:where(code, kbd, samp) { font-family: var(--gala-font-mono); font-size: 0.9em; }
|
|
309
|
-
:where(pre) {
|
|
310
|
-
padding: var(--gala-space-md);
|
|
311
|
-
overflow-x: auto;
|
|
312
|
-
background: var(--gala-color-surface);
|
|
313
|
-
border-radius: var(--gala-radius-control);
|
|
314
|
-
}
|
|
315
|
-
:where(hr) { border: 0; border-block-start: 1px solid var(--gala-color-hairline); margin-block: var(--gala-space-xl); }
|
|
316
|
-
:where(table) { border-collapse: collapse; inline-size: 100%; }
|
|
317
|
-
:where(th, td) { padding: var(--gala-space-xs) var(--gala-space-sm); border-block-end: 1px solid var(--gala-color-hairline); text-align: start; }
|
|
318
|
-
|
|
319
|
-
/* An uppercase label needs air between the letters or it sets as a solid block. */
|
|
320
|
-
.gala-eyebrow, .gala-comment__meta time, .gala-comment__edited {
|
|
321
|
-
font-size: var(--gala-text-xs);
|
|
322
|
-
letter-spacing: var(--gala-tracking-wide);
|
|
323
|
-
text-transform: uppercase;
|
|
324
|
-
color: var(--gala-color-muted);
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
/*
|
|
328
|
-
* Stays with the reader. It used to scroll away, so on a long post the only way back to the site
|
|
329
|
-
* — or to sign in — was to scroll to the top. The negative inline margin lets the bar's background
|
|
330
|
-
* reach the edge of the viewport while its contents stay on the page's own measure.
|
|
331
|
-
*/
|
|
332
|
-
.gala-site-header {
|
|
333
|
-
position: sticky;
|
|
334
|
-
inset-block-start: 0;
|
|
335
|
-
z-index: 10;
|
|
336
|
-
display: flex;
|
|
337
|
-
align-items: center;
|
|
338
|
-
justify-content: space-between;
|
|
339
|
-
gap: var(--gala-space-md);
|
|
340
|
-
max-inline-size: var(--gala-content-width);
|
|
341
|
-
margin-inline: auto;
|
|
342
|
-
margin-block-end: var(--gala-space-xl);
|
|
343
|
-
padding-block: var(--gala-space-xs);
|
|
344
|
-
background: color-mix(in srgb, var(--gala-color-background) 88%, transparent);
|
|
345
|
-
backdrop-filter: blur(8px);
|
|
346
|
-
border-block-end: 1px solid var(--gala-color-hairline);
|
|
347
|
-
}
|
|
348
|
-
@supports not (backdrop-filter: blur(8px)) {
|
|
349
|
-
.gala-site-header { background: var(--gala-color-background); }
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.gala-site-header__actions { display: flex; gap: 0.5rem; }
|
|
353
|
-
.gala-icon-control {
|
|
354
|
-
display: inline-grid;
|
|
355
|
-
inline-size: 2.75rem;
|
|
356
|
-
block-size: 2.75rem;
|
|
357
|
-
box-sizing: border-box;
|
|
358
|
-
padding: 0.6rem;
|
|
359
|
-
place-items: center;
|
|
360
|
-
color: inherit;
|
|
361
|
-
border: 0.125rem solid transparent;
|
|
362
|
-
border-radius: 50%;
|
|
363
|
-
}
|
|
364
|
-
.gala-icon-control {
|
|
365
|
-
transition: background var(--gala-motion-fast) var(--gala-ease),
|
|
366
|
-
color var(--gala-motion-fast) var(--gala-ease);
|
|
367
|
-
color: var(--gala-color-muted);
|
|
368
|
-
}
|
|
369
|
-
.gala-icon-control:hover { background: var(--gala-color-surface); color: var(--gala-color-text); }
|
|
370
|
-
.gala-icon-control:focus-visible { outline: 0.1875rem solid currentcolor; outline-offset: 0.1875rem; }
|
|
371
|
-
/* Stroked, not filled: the icons are drawn on one 24px grid at a single weight, so they read as
|
|
372
|
-
a set rather than as six unrelated silhouettes. */
|
|
373
|
-
.gala-icon-control svg { inline-size: 100%; block-size: 100%; fill: none; stroke: currentcolor; }
|
|
374
|
-
|
|
375
|
-
.gala-dialog {
|
|
376
|
-
inline-size: min(42rem, calc(100% - 2rem));
|
|
377
|
-
max-block-size: calc(100% - 2rem);
|
|
378
|
-
box-sizing: border-box;
|
|
379
|
-
padding: 1.5rem;
|
|
380
|
-
color: var(--gala-color-text);
|
|
381
|
-
background: var(--gala-color-background);
|
|
382
|
-
border: 1px solid var(--gala-surface-border);
|
|
383
|
-
border-radius: var(--gala-radius-surface);
|
|
384
|
-
box-shadow: var(--gala-shadow-high);
|
|
385
|
-
}
|
|
386
|
-
.gala-dialog::backdrop { background: rgb(0 0 0 / 65%); }
|
|
387
|
-
/* Sized to what it holds. 22rem was a box for a name and one button, and it showed. */
|
|
388
|
-
.gala-account-dialog { inline-size: min(26rem, calc(100% - 2rem)); }
|
|
389
|
-
.gala-account-dialog iframe {
|
|
390
|
-
display: block;
|
|
391
|
-
inline-size: 100%;
|
|
392
|
-
/* Height is set from the frame's own report; this is only what it shows before that arrives. */
|
|
393
|
-
block-size: 7rem;
|
|
394
|
-
border: 0;
|
|
395
|
-
/* The frame owns its layout and reports its size, so it never needs to scroll inside the box. */
|
|
396
|
-
overflow: hidden;
|
|
397
|
-
}
|
|
398
|
-
/* The close control belongs on the same line as the title, not floated above it. */
|
|
399
|
-
.gala-dialog { display: grid; gap: var(--gala-space-sm); }
|
|
400
|
-
.gala-dialog__close { justify-self: end; margin: 0; }
|
|
401
|
-
.gala-dialog > h2 { margin-block: 0; }
|
|
402
|
-
|
|
403
|
-
main,
|
|
404
|
-
.gala-page-footer {
|
|
405
|
-
max-inline-size: var(--gala-content-width);
|
|
406
|
-
margin-inline: auto;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
a { color: var(--gala-color-accent); }
|
|
410
|
-
|
|
411
|
-
button {
|
|
412
|
-
min-block-size: 2.75rem;
|
|
413
|
-
padding-inline: var(--gala-space-md);
|
|
414
|
-
color: inherit;
|
|
415
|
-
background: var(--gala-color-surface);
|
|
416
|
-
border: 1px solid var(--gala-color-border);
|
|
417
|
-
border-radius: var(--gala-radius-control);
|
|
418
|
-
font: inherit;
|
|
419
|
-
font-size: var(--gala-text-sm);
|
|
420
|
-
cursor: pointer;
|
|
421
|
-
transition: background var(--gala-motion-fast) var(--gala-ease),
|
|
422
|
-
border-color var(--gala-motion-fast) var(--gala-ease);
|
|
423
|
-
}
|
|
424
|
-
button:hover { border-color: var(--gala-color-border-strong); background: var(--gala-color-raised); }
|
|
425
|
-
button[disabled] { opacity: 0.55; cursor: not-allowed; }
|
|
426
|
-
|
|
427
|
-
button:focus-visible {
|
|
428
|
-
outline: 0.1875rem solid currentcolor;
|
|
429
|
-
outline-offset: 0.1875rem;
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
.gala-button,
|
|
433
|
-
.gala-badge,
|
|
434
|
-
.gala-tag-chip {
|
|
435
|
-
display: inline-flex;
|
|
436
|
-
align-items: center;
|
|
437
|
-
min-block-size: 2.75rem;
|
|
438
|
-
border: 1px solid var(--gala-color-border);
|
|
439
|
-
border-radius: var(--gala-radius-control);
|
|
440
|
-
font-size: var(--gala-text-sm);
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
.gala-badge,
|
|
444
|
-
.gala-tag-chip { padding-inline: 0.75rem; }
|
|
445
|
-
.gala-tag-chip { text-decoration: none; }
|
|
446
|
-
.gala-section-heading { margin-block: 3rem 1rem; }
|
|
447
|
-
.gala-section-heading > :where(h2, p) { margin-block: 0 0.5rem; }
|
|
448
|
-
.gala-hero { display: grid; gap: 1.5rem; align-items: center; }
|
|
449
|
-
.gala-hero__image { inline-size: 100%; block-size: auto; border-radius: var(--gala-radius-control); }
|
|
450
|
-
.gala-page-content { max-inline-size: var(--gala-measure); }
|
|
451
|
-
.gala-page-content :where(img, video) { max-inline-size: 100%; block-size: auto; }
|
|
452
|
-
.gala-author-profile { display: flex; gap: 1rem; padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
|
|
453
|
-
.gala-author-profile img { border-radius: 50%; object-fit: cover; }
|
|
454
|
-
.gala-social-links,
|
|
455
|
-
.gala-page-footer ul,
|
|
456
|
-
.gala-share ul { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; }
|
|
457
|
-
.gala-card-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
|
|
458
|
-
[data-layout='portfolio'] .gala-card-index { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
|
|
459
|
-
[data-layout='portfolio'] .gala-card { padding: clamp(1.25rem, 3vw, 2rem); }
|
|
460
|
-
/* The surfaces are where `componentStyle` becomes visible: quiet sits on the page, outlined draws
|
|
461
|
-
its edge, raised lifts. One variable decides, so cards and dialogs cannot drift apart. */
|
|
462
|
-
.gala-card {
|
|
463
|
-
block-size: 100%;
|
|
464
|
-
box-sizing: border-box;
|
|
465
|
-
padding: var(--gala-space-lg);
|
|
466
|
-
background: var(--gala-color-surface);
|
|
467
|
-
border: 1px solid var(--gala-surface-border);
|
|
468
|
-
border-radius: var(--gala-radius-surface);
|
|
469
|
-
box-shadow: var(--gala-surface-shadow);
|
|
470
|
-
}
|
|
471
|
-
/* The one place the page moves of its own accord, and so the one place `motion` is legible:
|
|
472
|
-
`subtle` is a short settle, `expressive` a longer one, `none` no movement at all. */
|
|
473
|
-
.gala-card { transition: transform var(--gala-motion-base) var(--gala-ease),
|
|
474
|
-
box-shadow var(--gala-motion-base) var(--gala-ease); }
|
|
475
|
-
.gala-card-index li:hover .gala-card { transform: translateY(-2px); box-shadow: var(--gala-shadow-high); }
|
|
476
|
-
.gala-stats-graph { min-block-size: var(--gala-widget-min-block-size); margin-inline: 0; }
|
|
477
|
-
.gala-stats-graph svg { inline-size: 100%; block-size: 8rem; }
|
|
478
|
-
.gala-stats-graph polyline { fill: none; stroke: var(--gala-color-accent); stroke-width: 2; }
|
|
479
|
-
.gala-loading { display: grid; min-block-size: var(--gala-widget-min-block-size); place-items: center; }
|
|
480
|
-
.gala-loading__indicator { inline-size: 2rem; block-size: 2rem; border: 0.25rem solid var(--gala-color-border); border-block-start-color: var(--gala-color-accent); border-radius: 50%; animation: gala-spin 0.8s linear infinite; }
|
|
481
|
-
.gala-pagination { display: flex; justify-content: space-between; gap: 1rem; }
|
|
482
|
-
.gala-search { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
|
|
483
|
-
.gala-search label { grid-column: 1 / -1; }
|
|
484
|
-
.gala-search input { min-block-size: 2.75rem; font: inherit; }
|
|
485
|
-
.gala-search-results { display: grid; gap: 1rem; padding: 0; list-style: none; }
|
|
486
|
-
.gala-search-results article { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
|
|
487
|
-
.gala-search-results h2 { margin-block-start: 0; }
|
|
488
|
-
.gala-toc { padding: 1rem; background: var(--gala-color-surface); }
|
|
489
|
-
.gala-share__fallback { inline-size: min(100%, 36rem); }
|
|
490
|
-
.gala-engagement__placeholder { display: grid; min-block-size: var(--gala-widget-min-block-size); align-content: center; margin: 0; }
|
|
491
|
-
.gala-engagement-profile > * { margin-block: 0 0.5rem; }
|
|
492
|
-
.gala-engagement-actions { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
|
|
493
|
-
.gala-engagement-actions[hidden] { display: none; }
|
|
494
|
-
/* Shown only when signing in interrupted something the reader had already decided to do, so it
|
|
495
|
-
reassures rather than sells. Hidden for anyone who opened the account dialog deliberately. */
|
|
496
|
-
.gala-account-dialog__invite { margin-block: 0 1rem; max-inline-size: 34rem; }
|
|
497
|
-
.gala-account-dialog__invite[hidden] { display: none; }
|
|
498
|
-
.gala-engagement-actions form,
|
|
499
|
-
[data-comment-editor] { display: grid; gap: 0.5rem; max-inline-size: 42rem; }
|
|
500
|
-
.gala-engagement-actions label { display: grid; gap: 0.5rem; }
|
|
501
|
-
.gala-engagement-actions textarea,
|
|
502
|
-
[data-comment-editor] textarea { min-block-size: 7rem; padding: 0.75rem; font: inherit; }
|
|
503
|
-
.gala-page-footer { margin-block-start: 4rem; padding-block-start: 1rem; border-block-start: 0.125rem solid var(--gala-color-border); }
|
|
504
|
-
.gala-error-page { min-block-size: 60vh; display: grid; align-content: center; justify-items: start; }
|
|
505
|
-
.gala-code-block { position: relative; }
|
|
506
|
-
.gala-code-block > button { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; background: var(--gala-color-background); }
|
|
507
|
-
.gala-code-block pre { overflow: auto; padding: 3.5rem 1rem 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
|
|
508
|
-
.gala-embed {
|
|
509
|
-
display: grid;
|
|
510
|
-
place-items: center;
|
|
511
|
-
gap: 0.75rem;
|
|
512
|
-
box-sizing: border-box;
|
|
513
|
-
inline-size: 100%;
|
|
514
|
-
margin-inline: 0;
|
|
515
|
-
padding: 1rem;
|
|
516
|
-
overflow: hidden;
|
|
517
|
-
background: var(--gala-color-surface);
|
|
518
|
-
border: 0.125rem solid var(--gala-color-border);
|
|
519
|
-
border-radius: var(--gala-radius-control);
|
|
520
|
-
}
|
|
521
|
-
.gala-embed--youtube { aspect-ratio: 16 / 9; }
|
|
522
|
-
.gala-embed--codepen { min-block-size: 25rem; }
|
|
523
|
-
.gala-embed--gist,
|
|
524
|
-
.gala-embed--x { min-block-size: 8rem; }
|
|
525
|
-
.gala-embed iframe { inline-size: 100%; block-size: 100%; border: 0; }
|
|
526
|
-
.gala-embed__icon {
|
|
527
|
-
inline-size: 2rem;
|
|
528
|
-
block-size: 2rem;
|
|
529
|
-
background: center / contain no-repeat;
|
|
530
|
-
}
|
|
531
|
-
.gala-embed--youtube .gala-embed__icon { background-image: url('./embed-youtube.svg'); }
|
|
532
|
-
.gala-embed--codepen .gala-embed__icon { background-image: url('./embed-codepen.svg'); }
|
|
533
|
-
.gala-embed--gist .gala-embed__icon { background-image: url('./embed-gist.svg'); }
|
|
534
|
-
.gala-embed--x .gala-embed__icon { background-image: url('./embed-x.svg'); }
|
|
535
|
-
.shiki,
|
|
536
|
-
.shiki span { color: var(--shiki-light); background-color: var(--shiki-light-bg); }
|
|
537
|
-
:root[data-mode='dark'] .shiki,
|
|
538
|
-
:root[data-mode='dark'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
|
|
539
|
-
@media (prefers-color-scheme: dark) {
|
|
540
|
-
:root[data-mode='system'] .shiki,
|
|
541
|
-
:root[data-mode='system'] .shiki span { color: var(--shiki-dark); background-color: var(--shiki-dark-bg); }
|
|
542
|
-
}
|
|
543
|
-
.gala-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
544
|
-
.gala-contact form { display: grid; gap: 1rem; max-inline-size: 42rem; }
|
|
545
|
-
.gala-contact label { display: grid; gap: .35rem; }
|
|
546
|
-
.gala-contact input,
|
|
547
|
-
.gala-contact textarea { font: inherit; padding: .65rem; }
|
|
548
|
-
.gala-contact textarea { min-block-size: 12rem; resize: vertical; }
|
|
549
|
-
|
|
550
|
-
@keyframes gala-spin { to { transform: rotate(1turn); } }
|
|
551
|
-
|
|
552
|
-
@media (min-width: 48rem) {
|
|
553
|
-
.gala-hero { grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr); }
|
|
554
|
-
}
|
|
555
|
-
|
|
556
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
557
|
-
@view-transition { navigation: auto; }
|
|
558
|
-
}
|
|
559
|
-
|
|
560
|
-
/* ---------------------------------------------------------------- the conversation
|
|
561
|
-
A thread is a hierarchy, and the indent is the only thing that says so. It is drawn with a
|
|
562
|
-
rule rather than padding alone, so five levels deep still reads as five levels and not as an
|
|
563
|
-
accident of margin. */
|
|
564
|
-
.gala-comments-island { margin-block-start: var(--gala-space-xl); }
|
|
565
|
-
.gala-comments__heading {
|
|
566
|
-
font-size: var(--gala-text-lg);
|
|
567
|
-
margin-block-end: var(--gala-space-md);
|
|
568
|
-
}
|
|
569
|
-
.gala-comments, .gala-comment-replies { list-style: none; margin: 0; padding: 0; }
|
|
570
|
-
.gala-comment-replies {
|
|
571
|
-
margin-block-start: var(--gala-space-sm);
|
|
572
|
-
margin-inline-start: var(--gala-space-xs);
|
|
573
|
-
padding-inline-start: var(--gala-space-md);
|
|
574
|
-
border-inline-start: 1px solid var(--gala-color-hairline);
|
|
575
|
-
}
|
|
576
|
-
.gala-comment { padding-block: var(--gala-space-sm); }
|
|
577
|
-
.gala-comment + .gala-comment { border-block-start: 1px solid var(--gala-color-hairline); }
|
|
578
|
-
.gala-comment-replies .gala-comment + .gala-comment { border-block-start: 0; }
|
|
579
|
-
.gala-comment__meta {
|
|
580
|
-
display: flex;
|
|
581
|
-
align-items: baseline;
|
|
582
|
-
gap: var(--gala-space-xs);
|
|
583
|
-
margin-block-end: var(--gala-space-2xs);
|
|
584
|
-
font-size: var(--gala-text-sm);
|
|
585
|
-
}
|
|
586
|
-
.gala-comment__meta strong { font-weight: 600; }
|
|
587
|
-
.gala-comment__pending { font-size: var(--gala-text-xs); color: var(--gala-color-muted); }
|
|
588
|
-
.gala-comment__body { margin-block: 0; overflow-wrap: anywhere; }
|
|
589
|
-
|
|
590
|
-
/* The controls stay out of the way until the comment is worth acting on. */
|
|
591
|
-
.gala-comment-actions {
|
|
592
|
-
display: flex;
|
|
593
|
-
gap: var(--gala-space-2xs);
|
|
594
|
-
margin-block-start: var(--gala-space-2xs);
|
|
595
|
-
opacity: 0.72;
|
|
596
|
-
transition: opacity var(--gala-motion-fast) var(--gala-ease);
|
|
597
|
-
}
|
|
598
|
-
.gala-comment:hover > .gala-comment-actions,
|
|
599
|
-
.gala-comment:focus-within > .gala-comment-actions { opacity: 1; }
|
|
600
|
-
.gala-comment-actions button {
|
|
601
|
-
min-block-size: 2rem;
|
|
602
|
-
padding-inline: var(--gala-space-xs);
|
|
603
|
-
font-size: var(--gala-text-xs);
|
|
604
|
-
background: transparent;
|
|
605
|
-
border-color: transparent;
|
|
606
|
-
color: var(--gala-color-muted);
|
|
607
|
-
}
|
|
608
|
-
.gala-comment-actions button:hover { color: var(--gala-color-text); background: var(--gala-color-surface); }
|
|
609
|
-
|
|
610
|
-
.gala-comment__form { display: grid; gap: var(--gala-space-xs); margin-block: var(--gala-space-sm); }
|
|
611
|
-
.gala-comment__form textarea {
|
|
612
|
-
inline-size: 100%;
|
|
613
|
-
box-sizing: border-box;
|
|
614
|
-
padding: var(--gala-space-sm);
|
|
615
|
-
color: inherit;
|
|
616
|
-
background: var(--gala-color-raised);
|
|
617
|
-
border: 1px solid var(--gala-color-border);
|
|
618
|
-
border-radius: var(--gala-radius-control);
|
|
619
|
-
font: inherit;
|
|
620
|
-
font-size: var(--gala-text-sm);
|
|
621
|
-
line-height: var(--gala-leading-body);
|
|
622
|
-
resize: vertical;
|
|
623
|
-
}
|
|
624
|
-
.gala-comment__form textarea:focus-visible { outline: 2px solid var(--gala-color-accent); outline-offset: 1px; }
|
|
625
|
-
.gala-comment__controls { display: flex; gap: var(--gala-space-xs); }
|
|
626
|
-
.gala-comments__status, .gala-comments__empty, .gala-comments__prompt {
|
|
627
|
-
color: var(--gala-color-muted);
|
|
628
|
-
font-size: var(--gala-text-sm);
|
|
629
|
-
}
|
|
630
|
-
.gala-comments__more { margin-block-start: var(--gala-space-md); }
|
|
631
|
-
|
|
632
|
-
/* ---------------------------------------------------------------- where the article ends
|
|
633
|
-
The writing and the conversation about it are different things, and the page has to say so.
|
|
634
|
-
A footnote used to run straight into the author card with nothing between them. */
|
|
635
|
-
.gala-engagement {
|
|
636
|
-
/* Space is reserved before the counts arrive, so the page does not jump under the reader. */
|
|
637
|
-
min-block-size: var(--gala-widget-min-block-size);
|
|
638
|
-
max-inline-size: var(--gala-content-width);
|
|
639
|
-
margin-block-start: var(--gala-space-xl);
|
|
640
|
-
padding-block-start: var(--gala-space-lg);
|
|
641
|
-
border-block-start: 1px solid var(--gala-color-border);
|
|
642
|
-
}
|
|
643
|
-
.gala-engagement-profile {
|
|
644
|
-
display: flex;
|
|
645
|
-
align-items: baseline;
|
|
646
|
-
gap: var(--gala-space-sm);
|
|
647
|
-
padding: 0;
|
|
648
|
-
background: none;
|
|
649
|
-
}
|
|
650
|
-
.gala-engagement-profile h2 { font-size: var(--gala-text-lg); margin: 0; }
|
|
651
|
-
.gala-engagement-profile p { margin: 0; color: var(--gala-color-muted); font-size: var(--gala-text-sm); }
|
|
652
|
-
|
|
653
|
-
/* Counts read as data, not as three stacked paragraphs. */
|
|
654
|
-
.gala-engagement dl {
|
|
655
|
-
display: flex;
|
|
656
|
-
flex-wrap: wrap;
|
|
657
|
-
gap: var(--gala-space-lg);
|
|
658
|
-
margin-block: var(--gala-space-md);
|
|
659
|
-
}
|
|
660
|
-
.gala-engagement dl > div { display: flex; flex-direction: column-reverse; gap: 0.1rem; }
|
|
661
|
-
.gala-engagement dt {
|
|
662
|
-
font-size: var(--gala-text-xs);
|
|
663
|
-
letter-spacing: var(--gala-tracking-wide);
|
|
664
|
-
text-transform: uppercase;
|
|
665
|
-
color: var(--gala-color-muted);
|
|
666
|
-
}
|
|
667
|
-
.gala-engagement dd {
|
|
668
|
-
margin: 0;
|
|
669
|
-
font-size: var(--gala-text-lg);
|
|
670
|
-
font-variant-numeric: tabular-nums;
|
|
671
|
-
}
|
|
672
|
-
|
|
673
|
-
.gala-reaction-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
|
|
674
|
-
.gala-engagement-actions { display: grid; gap: var(--gala-space-sm); justify-items: start; }
|
|
675
|
-
.gala-engagement-actions > [data-follow-article] { inline-size: auto; }
|
|
676
|
-
.gala-share { margin-block-start: var(--gala-space-lg); }
|
|
1
|
+
:root{color-scheme:light dark;--gala-color-background: light-dark(#fdfcfb, #131211);--gala-color-surface: light-dark(#f6f4f1, #1c1a18);--gala-color-raised: light-dark(#fffffe, #24211f);--gala-color-text: light-dark(#1a1817, #f2efec);--gala-color-muted: light-dark(#6b645e, #a8a099);--gala-color-border: light-dark(#968e86, #6b645e);--gala-color-hairline: light-dark(#e8e3dd, #2a2724);--gala-color-border-strong: light-dark(#c9c2ba, #46413d);--gala-color-accent: light-dark( var(--gala-accent-light, #8a4b2a), var(--gala-accent-dark, #e8a87c));--gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--gala-font-display: var(--gala-font-body);--gala-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;--gala-text-xs: .78rem;--gala-text-sm: .875rem;--gala-text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);--gala-text-lg: clamp(1.15rem, 1.09rem + .3vw, 1.3rem);--gala-text-xl: clamp(1.4rem, 1.28rem + .6vw, 1.75rem);--gala-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);--gala-text-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);--gala-leading-tight: 1.15;--gala-leading-body: 1.65;--gala-tracking-tight: -.018em;--gala-tracking-wide: .08em;--gala-weight-display: 640;--gala-step: 1rem;--gala-space-2xs: calc(var(--gala-step) * .25);--gala-space-xs: calc(var(--gala-step) * .5);--gala-space-sm: calc(var(--gala-step) * .75);--gala-space-md: var(--gala-step);--gala-space-lg: calc(var(--gala-step) * 1.75);--gala-space-xl: calc(var(--gala-step) * 3);--gala-space-page: clamp(1.25rem, 5vw, 4.5rem);--gala-radius-control: .625rem;--gala-radius-surface: 1rem;--gala-shadow-high: 0 1px 2px light-dark(rgb(26 24 23 / 5%), rgb(0 0 0 / 35%)), 0 12px 28px -12px light-dark(rgb(26 24 23 / 18%), rgb(0 0 0 / 60%));--gala-motion-fast: .12s;--gala-motion-base: .22s;--gala-ease: cubic-bezier(.2, 0, 0, 1);--gala-content-width: 72rem;--gala-measure: 68ch;--gala-widget-min-block-size: 8rem}:root[data-mode=light]{color-scheme:light;--gala-color-background: #fdfcfb;--gala-color-surface: #f6f4f1;--gala-color-raised: #fffffe;--gala-color-text: #1a1817;--gala-color-muted: #6b645e;--gala-color-border: #968e86;--gala-color-hairline: #e8e3dd;--gala-color-border-strong: #c9c2ba;--gala-color-accent: var(--gala-accent-light, #8a4b2a)}:root[data-mode=dark]{color-scheme:dark;--gala-color-background: #131211;--gala-color-surface: #1c1a18;--gala-color-raised: #24211f;--gala-color-text: #f2efec;--gala-color-muted: #a8a099;--gala-color-border: #6b645e;--gala-color-hairline: #2a2724;--gala-color-border-strong: #46413d;--gala-color-accent: var(--gala-accent-dark, #e8a87c)}:root[data-palette=ocean]{--gala-color-background: light-dark(#f8fbfd, #0b1a24);--gala-color-surface: light-dark(#eef4f9, #12252f);--gala-color-raised: light-dark(#ffffff, #172d39);--gala-color-text: light-dark(#12242f, #eaf3f8);--gala-color-muted: light-dark(#5a6f7d, #98aebb);--gala-color-border: light-dark(#7d8d99, #5f7d8c);--gala-color-hairline: light-dark(#dde7ee, #1d3644);--gala-color-border-strong: light-dark(#bdccd7, #33505f);--gala-color-accent: light-dark(#0f5f7a, #7fd0e8)}:root[data-palette=ocean][data-mode=light]{color-scheme:light;--gala-color-background: #f8fbfd;--gala-color-surface: #eef4f9;--gala-color-raised: #ffffff;--gala-color-text: #12242f;--gala-color-muted: #5a6f7d;--gala-color-border: #7d8d99;--gala-color-hairline: #dde7ee;--gala-color-border-strong: #bdccd7;--gala-color-accent: var(--gala-accent-light, #0f5f7a)}:root[data-palette=ocean][data-mode=dark]{color-scheme:dark;--gala-color-background: #0b1a24;--gala-color-surface: #12252f;--gala-color-raised: #172d39;--gala-color-text: #eaf3f8;--gala-color-muted: #98aebb;--gala-color-border: #5f7d8c;--gala-color-hairline: #1d3644;--gala-color-border-strong: #33505f;--gala-color-accent: var(--gala-accent-dark, #7fd0e8)}:root[data-palette=forest]{--gala-color-background: light-dark(#fbfcfa, #101410);--gala-color-surface: light-dark(#f0f4ee, #182018);--gala-color-raised: light-dark(#ffffff, #1f271f);--gala-color-text: light-dark(#18201a, #eef3ec);--gala-color-muted: light-dark(#5b665d, #9aa89b);--gala-color-border: light-dark(#849084, #5e685f);--gala-color-hairline: light-dark(#e2e9df, #232b23);--gala-color-border-strong: light-dark(#5b665d, #7d897e);--gala-color-accent: light-dark(#2f6b3f, #8fd3a1)}:root[data-palette=forest][data-mode=light]{color-scheme:light;--gala-color-background: #fbfcfa;--gala-color-surface: #f0f4ee;--gala-color-raised: #ffffff;--gala-color-text: #18201a;--gala-color-muted: #5b665d;--gala-color-border: #849084;--gala-color-hairline: #e2e9df;--gala-color-border-strong: #5b665d;--gala-color-accent: var(--gala-accent-light, #2f6b3f)}:root[data-palette=forest][data-mode=dark]{color-scheme:dark;--gala-color-background: #101410;--gala-color-surface: #182018;--gala-color-raised: #1f271f;--gala-color-text: #eef3ec;--gala-color-muted: #9aa89b;--gala-color-border: #5e685f;--gala-color-hairline: #232b23;--gala-color-border-strong: #7d897e;--gala-color-accent: var(--gala-accent-dark, #8fd3a1)}:root[data-palette=plum]{--gala-color-background: light-dark(#fdfbfd, #141016);--gala-color-surface: light-dark(#f5eff5, #1d1720);--gala-color-raised: light-dark(#ffffff, #241d28);--gala-color-text: light-dark(#1f1820, #f2ecf3);--gala-color-muted: light-dark(#665c69, #a99dac);--gala-color-border: light-dark(#948a95, #6b606d);--gala-color-hairline: light-dark(#ebe2ec, #281f2b);--gala-color-border-strong: light-dark(#665c69, #8b7f8d);--gala-color-accent: light-dark(#7a3d76, #dda6d8)}:root[data-palette=plum][data-mode=light]{color-scheme:light;--gala-color-background: #fdfbfd;--gala-color-surface: #f5eff5;--gala-color-raised: #ffffff;--gala-color-text: #1f1820;--gala-color-muted: #665c69;--gala-color-border: #948a95;--gala-color-hairline: #ebe2ec;--gala-color-border-strong: #665c69;--gala-color-accent: var(--gala-accent-light, #7a3d76)}:root[data-palette=plum][data-mode=dark]{color-scheme:dark;--gala-color-background: #141016;--gala-color-surface: #1d1720;--gala-color-raised: #241d28;--gala-color-text: #f2ecf3;--gala-color-muted: #a99dac;--gala-color-border: #6b606d;--gala-color-hairline: #281f2b;--gala-color-border-strong: #8b7f8d;--gala-color-accent: var(--gala-accent-dark, #dda6d8)}:root[data-theme=editorial]{--gala-font-body: ui-serif, "Iowan Old Style", Charter, "Source Serif 4", Georgia, serif;--gala-font-display: var(--gala-font-body);--gala-weight-display: 600;--gala-step: 1.1rem;--gala-leading-body: 1.7;--gala-radius-control: .5rem;--gala-radius-surface: .75rem;--gala-measure: 66ch;--gala-surface-border: var(--gala-color-hairline);--gala-surface-shadow: none}:root[data-theme=modern]{--gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--gala-font-display: var(--gala-font-body);--gala-weight-display: 640;--gala-step: 1rem;--gala-leading-body: 1.65;--gala-radius-control: .625rem;--gala-radius-surface: 1rem;--gala-measure: 70ch;--gala-surface-border: transparent;--gala-surface-shadow: var(--gala-shadow-high)}:root[data-theme=technical]{--gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;--gala-font-display: var(--gala-font-body);--gala-weight-display: 660;--gala-tracking-tight: -.022em;--gala-step: .9rem;--gala-leading-body: 1.6;--gala-radius-control: .375rem;--gala-radius-surface: .5rem;--gala-measure: 74ch;--gala-surface-border: var(--gala-color-border-strong);--gala-surface-shadow: none}:root[data-theme=technical] .gala-eyebrow,:root[data-theme=technical] .gala-engagement dt,:root[data-theme=technical] .gala-comment__meta time{font-family:var(--gala-font-mono)}@media(prefers-reduced-motion:reduce){:root{--gala-motion-fast: 0ms;--gala-motion-base: 0ms}*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}:root[data-layout=portfolio]{--gala-content-width: 82rem}body{margin:0;padding:var(--gala-space-page);color:var(--gala-color-text);background:var(--gala-color-background);font-family:var(--gala-font-body);font-size:var(--gala-text-base);line-height:var(--gala-leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.gala-skip-link{position:fixed;inset-block-start:1rem;inset-inline-start:1rem;z-index:100;padding:.75rem 1rem;color:#fff;background:var(--gala-color-accent);border-radius:999px;transform:translateY(-200%)}.gala-skip-link:focus{transform:translateY(0)}.gala-site-name{color:var(--gala-color-text);font-family:var(--gala-font-display);font-size:var(--gala-text-lg);font-weight:var(--gala-weight-display);letter-spacing:var(--gala-tracking-tight);text-decoration:none}.gala-header-link{color:var(--gala-color-text);font-size:var(--gala-text-sm);text-decoration:none}.gala-account-control{display:inline-flex;align-items:center;gap:.5rem;min-block-size:2.75rem;padding-inline:.9rem;border-radius:999px}.gala-account-control svg{inline-size:1rem;block-size:1rem}.gala-article{max-inline-size:76rem;margin-inline:auto}.gala-article-header{padding-block:clamp(3rem,9vw,8rem)}.gala-article-header h1{max-inline-size:12ch;font-size:clamp(3.25rem,9vw,7.5rem);line-height:.92;letter-spacing:-.055em}.gala-byline{color:var(--gala-color-muted);font-size:var(--gala-text-sm)}.gala-markdown{max-inline-size:42rem;margin-inline:auto;font-size:clamp(1.1rem,1rem + .35vw,1.3rem)}.gala-markdown :where(h2){margin-block-start:clamp(3rem,7vw,5rem);font-size:clamp(2.2rem,5vw,3.8rem)}.gala-markdown :where(img,video){max-inline-size:100%;block-size:auto}@media(max-width:47.99rem){.gala-header-link{display:none}.gala-site-header__actions{gap:.25rem}}:where(h1,h2,h3,h4){font-family:var(--gala-font-display);font-weight:var(--gala-weight-display);line-height:var(--gala-leading-tight);letter-spacing:var(--gala-tracking-tight);text-wrap:balance;margin-block:0 var(--gala-space-sm)}:where(h1){font-size:var(--gala-text-3xl)}:where(h2){font-size:var(--gala-text-2xl)}:where(h3){font-size:var(--gala-text-xl)}:where(h4){font-size:var(--gala-text-lg)}:where(p,ul,ol,blockquote){margin-block:0 var(--gala-space-md)}:where(p){text-wrap:pretty}blockquote{margin-inline:0;padding-inline-start:var(--gala-space-md);border-inline-start:2px solid var(--gala-color-accent);color:var(--gala-color-muted)}:where(code,kbd,samp){font-family:var(--gala-font-mono);font-size:.9em}:where(pre){padding:var(--gala-space-md);overflow-x:auto;background:var(--gala-color-surface);border-radius:var(--gala-radius-control)}:where(hr){border:0;border-block-start:1px solid var(--gala-color-hairline);margin-block:var(--gala-space-xl)}:where(table){border-collapse:collapse;inline-size:100%}:where(th,td){padding:var(--gala-space-xs) var(--gala-space-sm);border-block-end:1px solid var(--gala-color-hairline);text-align:start}.gala-eyebrow,.gala-comment__meta time,.gala-comment__edited{font-size:var(--gala-text-xs);letter-spacing:var(--gala-tracking-wide);text-transform:uppercase;color:var(--gala-color-muted)}.gala-site-header{position:sticky;inset-block-start:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--gala-space-md);max-inline-size:var(--gala-content-width);margin-inline:auto;margin-block-end:var(--gala-space-xl);padding-block:var(--gala-space-xs);background:color-mix(in srgb,var(--gala-color-background) 88%,transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--gala-color-hairline)}@supports not (backdrop-filter: blur(8px)){.gala-site-header{background:var(--gala-color-background)}}.gala-site-header__actions{display:flex;gap:.5rem}.gala-icon-control{display:inline-grid;inline-size:2.75rem;block-size:2.75rem;box-sizing:border-box;padding:.6rem;place-items:center;color:inherit;border:.125rem solid transparent;border-radius:50%}.gala-icon-control{transition:background var(--gala-motion-fast) var(--gala-ease),color var(--gala-motion-fast) var(--gala-ease);color:var(--gala-color-muted)}.gala-icon-control:hover{background:var(--gala-color-surface);color:var(--gala-color-text)}.gala-icon-control:focus-visible{outline:.1875rem solid currentcolor;outline-offset:.1875rem}.gala-icon-control svg{inline-size:100%;block-size:100%;fill:none;stroke:currentcolor}.gala-dialog{inline-size:min(42rem,calc(100% - 2rem));max-block-size:calc(100% - 2rem);box-sizing:border-box;padding:1.5rem;color:var(--gala-color-text);background:var(--gala-color-background);border:1px solid var(--gala-surface-border);border-radius:var(--gala-radius-surface);box-shadow:var(--gala-shadow-high)}.gala-dialog::backdrop{background:#000000a6}.gala-account-dialog{inline-size:min(26rem,calc(100% - 2rem))}.gala-account-dialog iframe{display:block;inline-size:100%;block-size:7rem;border:0;overflow:hidden}.gala-dialog{display:grid;gap:var(--gala-space-sm)}.gala-dialog__close{justify-self:end;margin:0}.gala-dialog>h2{margin-block:0}main,.gala-page-footer{max-inline-size:var(--gala-content-width);margin-inline:auto}a{color:var(--gala-color-accent)}button{min-block-size:2.75rem;padding-inline:var(--gala-space-md);color:inherit;background:var(--gala-color-surface);border:1px solid var(--gala-color-border);border-radius:var(--gala-radius-control);font:inherit;font-size:var(--gala-text-sm);cursor:pointer;transition:background var(--gala-motion-fast) var(--gala-ease),border-color var(--gala-motion-fast) var(--gala-ease)}button:hover{border-color:var(--gala-color-border-strong);background:var(--gala-color-raised)}button[disabled]{opacity:.55;cursor:not-allowed}button:focus-visible{outline:.1875rem solid currentcolor;outline-offset:.1875rem}.gala-button,.gala-badge,.gala-tag-chip{display:inline-flex;align-items:center;min-block-size:2.75rem;border:1px solid var(--gala-color-border);border-radius:var(--gala-radius-control);font-size:var(--gala-text-sm)}.gala-badge,.gala-tag-chip{padding-inline:.75rem}.gala-tag-chip{text-decoration:none}.gala-section-heading{margin-block:3rem 1rem}.gala-section-heading>:where(h2,p){margin-block:0 .5rem}.gala-hero{display:grid;gap:1.5rem;align-items:center}.gala-hero__image{inline-size:100%;block-size:auto;border-radius:var(--gala-radius-control)}.gala-page-content{max-inline-size:var(--gala-measure)}.gala-page-content :where(img,video){max-inline-size:100%;block-size:auto}.gala-author-profile{display:flex;gap:1rem;padding:1rem;background:var(--gala-color-surface);border-radius:var(--gala-radius-control)}.gala-author-profile img{border-radius:50%;object-fit:cover}.gala-social-links,.gala-page-footer ul,.gala-share ul{display:flex;flex-wrap:wrap;gap:1rem;padding:0;list-style:none}.gala-card-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;padding:0;list-style:none}[data-layout=portfolio] .gala-card-index{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.5rem}[data-layout=portfolio] .gala-card{padding:clamp(1.25rem,3vw,2rem)}.gala-card{block-size:100%;box-sizing:border-box;padding:var(--gala-space-lg);background:var(--gala-color-surface);border:1px solid var(--gala-surface-border);border-radius:var(--gala-radius-surface);box-shadow:var(--gala-surface-shadow)}.gala-card{transition:transform var(--gala-motion-base) var(--gala-ease),box-shadow var(--gala-motion-base) var(--gala-ease)}.gala-card-index li:hover .gala-card{transform:translateY(-2px);box-shadow:var(--gala-shadow-high)}.gala-stats-graph{min-block-size:var(--gala-widget-min-block-size);margin-inline:0}.gala-stats-graph svg{inline-size:100%;block-size:8rem}.gala-stats-graph polyline{fill:none;stroke:var(--gala-color-accent);stroke-width:2}.gala-loading{display:grid;min-block-size:var(--gala-widget-min-block-size);place-items:center}.gala-loading__indicator{inline-size:2rem;block-size:2rem;border:.25rem solid var(--gala-color-border);border-block-start-color:var(--gala-color-accent);border-radius:50%;animation:gala-spin .8s linear infinite}.gala-pagination{display:flex;justify-content:space-between;gap:1rem}.gala-search{display:grid;grid-template-columns:1fr auto;gap:.5rem}.gala-search label{grid-column:1 / -1}.gala-search input{min-block-size:2.75rem;font:inherit}.gala-search-results{display:grid;gap:1rem;padding:0;list-style:none}.gala-search-results article{padding:1rem;background:var(--gala-color-surface);border-radius:var(--gala-radius-control)}.gala-search-results h2{margin-block-start:0}.gala-toc{padding:1rem;background:var(--gala-color-surface)}.gala-share__fallback{inline-size:min(100%,36rem)}.gala-engagement__placeholder{display:grid;min-block-size:var(--gala-widget-min-block-size);align-content:center;margin:0}.gala-engagement-profile>*{margin-block:0 .5rem}.gala-engagement-actions{display:grid;gap:1rem;margin-block-start:1.5rem}.gala-engagement-actions[hidden]{display:none}.gala-account-dialog__invite{margin-block:0 1rem;max-inline-size:34rem}.gala-account-dialog__invite[hidden]{display:none}.gala-engagement-actions form,[data-comment-editor]{display:grid;gap:.5rem;max-inline-size:42rem}.gala-engagement-actions label{display:grid;gap:.5rem}.gala-engagement-actions textarea,[data-comment-editor] textarea{min-block-size:7rem;padding:.75rem;font:inherit}.gala-page-footer{margin-block-start:4rem;padding-block-start:1rem;border-block-start:.125rem solid var(--gala-color-border)}.gala-error-page{min-block-size:60vh;display:grid;align-content:center;justify-items:start}.gala-code-block{position:relative}.gala-code-block>button{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;background:var(--gala-color-background)}.gala-code-block pre{overflow:auto;padding:3.5rem 1rem 1rem;background:var(--gala-color-surface);border-radius:var(--gala-radius-control)}.gala-embed{display:grid;place-items:center;gap:.75rem;box-sizing:border-box;inline-size:100%;margin-inline:0;padding:1rem;overflow:hidden;background:var(--gala-color-surface);border:.125rem solid var(--gala-color-border);border-radius:var(--gala-radius-control)}.gala-embed--youtube{aspect-ratio:16 / 9}.gala-embed--codepen{min-block-size:25rem}.gala-embed--gist,.gala-embed--x{min-block-size:8rem}.gala-embed iframe{inline-size:100%;block-size:100%;border:0}.gala-embed__icon{inline-size:2rem;block-size:2rem;background:center / contain no-repeat}.gala-embed--youtube .gala-embed__icon{background-image:url(../assets/embed-youtube.svg)}.gala-embed--codepen .gala-embed__icon{background-image:url(../assets/embed-codepen.svg)}.gala-embed--gist .gala-embed__icon{background-image:url(../assets/embed-gist.svg)}.gala-embed--x .gala-embed__icon{background-image:url(../assets/embed-x.svg)}.shiki,.shiki span{color:var(--shiki-light);background-color:var(--shiki-light-bg)}:root[data-mode=dark] .shiki,:root[data-mode=dark] .shiki span{color:var(--shiki-dark);background-color:var(--shiki-dark-bg)}@media(prefers-color-scheme:dark){:root[data-mode=system] .shiki,:root[data-mode=system] .shiki span{color:var(--shiki-dark);background-color:var(--shiki-dark-bg)}}.gala-visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.gala-contact form{display:grid;gap:1rem;max-inline-size:42rem}.gala-contact label{display:grid;gap:.35rem}.gala-contact input,.gala-contact textarea{font:inherit;padding:.65rem}.gala-contact textarea{min-block-size:12rem;resize:vertical}@keyframes gala-spin{to{transform:rotate(1turn)}}@media(min-width:48rem){.gala-hero{grid-template-columns:minmax(0,1fr) minmax(18rem,1fr)}}@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}.gala-comments-island{margin-block-start:var(--gala-space-xl)}.gala-comments__heading{font-size:var(--gala-text-lg);margin-block-end:var(--gala-space-md)}.gala-comments,.gala-comment-replies{list-style:none;margin:0;padding:0}.gala-comment-replies{margin-block-start:var(--gala-space-sm);margin-inline-start:var(--gala-space-xs);padding-inline-start:var(--gala-space-md);border-inline-start:1px solid var(--gala-color-hairline)}.gala-comment{padding-block:var(--gala-space-sm)}.gala-comment+.gala-comment{border-block-start:1px solid var(--gala-color-hairline)}.gala-comment-replies .gala-comment+.gala-comment{border-block-start:0}.gala-comment__meta{display:flex;align-items:baseline;gap:var(--gala-space-xs);margin-block-end:var(--gala-space-2xs);font-size:var(--gala-text-sm)}.gala-comment__meta strong{font-weight:600}.gala-comment__pending{font-size:var(--gala-text-xs);color:var(--gala-color-muted)}.gala-comment__body{margin-block:0;overflow-wrap:anywhere}.gala-comment-actions{display:flex;gap:var(--gala-space-2xs);margin-block-start:var(--gala-space-2xs);opacity:.72;transition:opacity var(--gala-motion-fast) var(--gala-ease)}.gala-comment:hover>.gala-comment-actions,.gala-comment:focus-within>.gala-comment-actions{opacity:1}.gala-comment-actions button{min-block-size:2rem;padding-inline:var(--gala-space-xs);font-size:var(--gala-text-xs);background:transparent;border-color:transparent;color:var(--gala-color-muted)}.gala-comment-actions button:hover{color:var(--gala-color-text);background:var(--gala-color-surface)}.gala-comment__form{display:grid;gap:var(--gala-space-xs);margin-block:var(--gala-space-sm)}.gala-comment__form textarea{inline-size:100%;box-sizing:border-box;padding:var(--gala-space-sm);color:inherit;background:var(--gala-color-raised);border:1px solid var(--gala-color-border);border-radius:var(--gala-radius-control);font:inherit;font-size:var(--gala-text-sm);line-height:var(--gala-leading-body);resize:vertical}.gala-comment__form textarea:focus-visible{outline:2px solid var(--gala-color-accent);outline-offset:1px}.gala-comment__controls{display:flex;gap:var(--gala-space-xs)}.gala-comments__status,.gala-comments__empty,.gala-comments__prompt{color:var(--gala-color-muted);font-size:var(--gala-text-sm)}.gala-comments__more{margin-block-start:var(--gala-space-md)}.gala-engagement{min-block-size:var(--gala-widget-min-block-size);max-inline-size:var(--gala-content-width);margin-block-start:var(--gala-space-xl);padding-block-start:var(--gala-space-lg);border-block-start:1px solid var(--gala-color-border)}.gala-engagement-profile{display:flex;align-items:baseline;gap:var(--gala-space-sm);padding:0;background:none}.gala-engagement-profile h2{font-size:var(--gala-text-lg);margin:0}.gala-engagement-profile p{margin:0;color:var(--gala-color-muted);font-size:var(--gala-text-sm)}.gala-engagement dl{display:flex;flex-wrap:wrap;gap:var(--gala-space-lg);margin-block:var(--gala-space-md)}.gala-engagement dl>div{display:flex;flex-direction:column-reverse;gap:.1rem}.gala-engagement dt{font-size:var(--gala-text-xs);letter-spacing:var(--gala-tracking-wide);text-transform:uppercase;color:var(--gala-color-muted)}.gala-engagement dd{margin:0;font-size:var(--gala-text-lg);font-variant-numeric:tabular-nums}.gala-reaction-actions{display:flex;flex-wrap:wrap;gap:var(--gala-space-2xs)}.gala-engagement-actions{display:grid;gap:var(--gala-space-sm);justify-items:start}.gala-engagement-actions>[data-follow-article]{inline-size:auto}.gala-share{margin-block-start:var(--gala-space-lg)}.gala-engagement{position:relative;margin-block-start:clamp(4rem,9vw,8rem)}.gala-conversation{max-width:var(--gala-measure);margin-inline:auto;padding-block:clamp(3rem,7vw,6rem)}.gala-conversation__header{margin-block-end:var(--gala-space-xl)}.gala-conversation__header h2{margin:0;font:var(--gala-weight-display) var(--gala-text-2xl)/var(--gala-leading-tight) var(--gala-font-display);letter-spacing:var(--gala-tracking-tight)}.gala-action-rail{position:sticky;z-index:4;inset-block-start:6rem;float:left;width:3.25rem;margin-inline-start:max(-5rem,calc((var(--gala-measure) - 100%) / 2 - 4rem));display:grid;gap:.5rem;padding:.5rem;border:1px solid var(--gala-color-hairline);border-radius:999px;background:color-mix(in srgb,var(--gala-color-background) 88%,transparent);box-shadow:var(--gala-shadow-high);backdrop-filter:blur(16px)}.gala-action-rail button,.gala-action-rail a{inline-size:2.25rem;min-block-size:2.25rem;display:grid;place-items:center;padding:0;border:0;border-radius:50%;color:var(--gala-color-muted);background:transparent;font:600 var(--gala-text-xs)/1 var(--gala-font-body);text-decoration:none;cursor:pointer}.gala-action-rail button:hover,.gala-action-rail a:hover,.gala-action-rail button[aria-pressed=true]{color:var(--gala-color-background);background:var(--gala-color-accent)}.gala-action-rail .gala-reaction-actions,.gala-action-rail .gala-share{display:contents}.gala-action-rail .gala-share__fallback{position:fixed;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}.gala-action-rail .gala-share__fallback--visible{z-index:10;inset:auto 1rem 1rem;inline-size:min(32rem,calc(100vw - 2rem));block-size:auto;padding:.75rem;overflow:visible;clip-path:none}@media(max-width:54rem){.gala-action-rail{inset-block-start:auto;inset-block-end:1rem;float:none;box-sizing:border-box;width:calc(100% - 2rem);max-width:calc(100% - 2rem);margin:0 auto;grid-auto-flow:column;overflow-x:auto}.gala-conversation{padding-block-start:var(--gala-space-xl)}}
|