1:root {
  2    --light: #f4f4f4;
  3    --cyan: #509c93;
  4    --light-gray: #eee;
  5    --medium-gray: #ddd;
  6    --gray: #6a6a6a;
  7    --dark: #444;
  8    --darker: #222;
  9    --white: #fff;
 10}
 11
 12html {
 13    background: var(--white);
 14    -webkit-text-size-adjust: none;
 15}
 16
 17::selection {
 18    background: var(--medium-gray);
 19    opacity: 0.3;
 20}
 21
 22del {
 23    text-decoration: line-through !important;
 24}
 25
 26* {
 27    box-sizing: border-box;
 28    padding: 0;
 29    margin: 0;
 30}
 31
 32main,
 33footer {
 34    font-family:
 35        "Geist",
 36        -apple-system,
 37        BlinkMacSystemFont,
 38        "Roboto",
 39        "Segoe UI",
 40        sans-serif;
 41    font-size: 1.05rem;
 42    padding: 0;
 43    line-height: 160%;
 44    font-weight: 400;
 45    font-feature-settings: "ss03" 1, "ss04" 1, "ss0h" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1;
 46    font-variant-ligatures: discretionary-ligatures
 47    font-variant-ligatures: common-ligatures;
 48}
 49
 50main article,
 51table {
 52    min-width: 0;
 53}
 54
 55h1,
 56h2,
 57h3 {
 58    font-family: "Instrument Serif", serif;
 59    font-weight: 400 !important;
 60}
 61
 62strong {
 63    font-weight: 500;
 64}
 65
 66main h1 {
 67    font-size: 30px;
 68    padding: 10px 0 20px 0;
 69}
 70
 71main h2 {
 72    font-size: 25px;
 73    color: var(--dark);
 74}
 75
 76main h2,
 77h3 {
 78    margin: 40px 0 20px 0;
 79}
 80
 81.logo img {
 82    max-height: 2.5rem;
 83    max-width: 2.5rem;
 84    vertical-align: middle;
 85    transform: translateY(-5%);
 86}
 87
 88.logo {
 89    text-decoration: none;
 90    border-bottom: unset;
 91    background: unset !important;
 92}
 93
 94.logo:hover {
 95    border-bottom: unset;
 96}
 97
 98.footimgs a {
 99    all: unset !important;
100}
101
102.footimgs img {
103    max-height: 2.5rem;
104    max-width: 2.5rem;
105    display: inline-block;
106    vertical-align: middle;
107    image-orientation: from-image;
108    padding: 0 0 5px 5px;
109    cursor: pointer;
110}
111
112a {
113    margin: 0;
114    padding: 0;
115    box-sizing: border-box;
116    text-decoration: none;
117    word-wrap: break-word;
118}
119
120main a {
121    color: var(--darker);
122    border-bottom: 1.5px solid var(--medium-gray);
123}
124
125a:hover {
126    border-bottom: 1.5px solid var(--gray);
127}
128
129.footer {
130    column-count: 2;
131    column-gap: 12px;
132}
133
134body {
135    max-width: 655px;
136    padding: 0 13px;
137    margin: 40px auto;
138}
139
140main article img {
141    max-width: 100%;
142    width: 100%;
143    display: block;
144    margin: 10px auto 4px auto;
145}
146
147main ul,
148main ol {
149    margin: 0 30px 7px 30px;
150}
151
152main ul ul {
153    margin-bottom: 0;
154}
155
156.row {
157    display: flex;
158    flex-wrap: wrap;
159    padding: 0 0.5rem 0.5rem 0;
160}
161
162.image-grid {
163    column-count: 2;
164}
165
166.image-grid img {
167    all: unset;
168    object-fit: cover;
169    position: relative;
170    width: 100%;
171    margin-bottom: 12px;
172}
173
174.image-grid a {
175    border-bottom: unset;
176}
177
178.subtitle {
179    padding: 2px 0 20px 0;
180    margin-top: 3px !important;
181    margin-bottom: 5px;
182    color: var(--gray);
183    font-style: italic;
184}
185
186.muted {
187    color: var(--gray);
188}
189.muted a {
190    color: var(--cyan);
191    border-bottom: 1.5px solid var(--cyan);
192}
193
194article p {
195    padding: 7px 0 7px 0;
196}
197
198article a {
199    color: var(--dark);
200}
201
202.tagline {
203    padding: 50px 0 50px 0;
204}
205
206pre {
207    overflow-x: auto;
208    overflow-y: hidden;
209    padding: 10px;
210    min-width: 0;
211    background-color: var(--light-gray) !important;
212    margin-bottom: 10px;
213}
214
215code {
216    font-size: 0.9rem;
217    background-color: var(--light-gray);
218}
219
220.post-date {
221    color: var(--gray);
222    text-transform: lowercase;
223}
224
225table {
226    table-layout: fixed;
227    width: 100%;
228}
229
230table a {
231    text-decoration: none;
232}
233
234td {
235    padding: 7px 11px 7px 11px;
236}
237
238td p#subtitle {
239    color: var(--gray);
240}
241
242td:first-child {
243    padding-left: 0;
244}
245
246td:last-child {
247    padding-right: 0;
248}
249
250.index-date {
251    white-space: nowrap;
252    vertical-align: baseline;
253    color: var(--gray);
254    text-transform: lowercase;
255}
256
257header {
258    padding-bottom: 20px;
259}
260
261hr {
262    max-width: 100%;
263    text-align: left;
264    margin: 20px 0 20px 0;
265}
266
267footer {
268    padding-top: 30px;
269}
270
271blockquote {
272    margin: 7px 0 7px 0;
273}
274
275blockquote p {
276    font-style: italic;
277    color: var(--darker);
278    padding-left: 20px;
279    border-left: 1.5px solid var(--medium-gray);
280}
281
282nav ul {
283    padding: 0;
284    margin: 0;
285    list-style: none;
286    padding-bottom: 20px;
287}
288
289nav ul li {
290    padding-right: 10px;
291    display: inline-block;
292}
293
294ol {
295    list-style: none;
296    counter-reset: counter;
297}
298ol li {
299    counter-increment: counter;
300}
301ol li:not(.footnotes)::before {
302    content: counter(counter);
303    border-radius: 50%;
304    text-align: center;
305    line-height: 1.2rem;
306    color: var(--darker);
307    background: var(--medium-gray);
308    width: 18px;
309    height: 18px;
310    font-size: 11px;
311    margin-right: 0.5rem;
312    box-sizing: content-box;
313    display: inline-block;
314    transform: translate(-1.9rem, 0.7rem);
315    position: absolute;
316}
317
318.footnote-ref a {
319    text-decoration: none;
320    color: var(--light);
321    border-radius: 50%;
322    text-align: center;
323    line-height: 0.8rem;
324    background: var(--cyan);
325    width: 0.8rem;
326    height: 0.8rem;
327    font-size: 0.6rem;
328    display: inline-block;
329}
330
331.footnotes > ol li::before {
332    content: counter(counter);
333    border-radius: 50%;
334    text-align: center;
335    line-height: 1.2rem;
336    color: var(--light);
337    background: var(--cyan);
338    width: 18px;
339    height: 18px;
340    font-size: 11px;
341    margin-right: 0.5rem;
342    box-sizing: content-box;
343    display: inline-block;
344    position: relative;
345    transform: unset;
346}
347
348.footnotes ol li:not(:last-child) {
349    padding-bottom: 2rem;
350}
351
352.draft {
353    color: red;
354    font-weight: bold;
355    font-family: sans;
356    font-size: 1rem;
357}
358
359@media (max-width: 400px) {
360    .footer {
361        column-count: 1;
362    }
363
364    .image-grid {
365        column-count: 1;
366    }
367
368    table,
369    thead,
370    tbody,
371    th,
372    td,
373    tr {
374        display: block;
375    }
376    td {
377        padding: 0;
378        text-align: left;
379    }
380    tr {
381        padding: 10px 0 10px 0;
382    }
383}