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: 380;
 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    padding: 20px 0 5px 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}
184
185.muted {
186    color: var(--gray);
187}
188.muted a {
189    color: var(--cyan);
190    border-bottom: 1.5px solid var(--cyan);
191}
192
193article p {
194    padding: 7px 0 7px 0;
195}
196
197article a {
198    color: var(--dark);
199}
200
201.tagline {
202    padding: 50px 0 50px 0;
203}
204
205pre {
206    overflow-x: auto;
207    overflow-y: hidden;
208    padding: 10px;
209    min-width: 0;
210    background-color: var(--light-gray) !important;
211    margin-bottom: 10px;
212}
213
214code {
215    font-size: 0.9rem;
216    background-color: var(--light-gray);
217}
218
219.post-date {
220    color: var(--gray);
221    text-transform: lowercase;
222}
223
224table {
225    table-layout: fixed;
226    width: 100%;
227}
228
229table a {
230    text-decoration: none;
231}
232
233td {
234    padding: 7px 11px 7px 11px;
235}
236
237td p#subtitle {
238    color: var(--gray);
239}
240
241td:first-child {
242    padding-left: 0;
243}
244
245td:last-child {
246    padding-right: 0;
247}
248
249.index-date {
250    white-space: nowrap;
251    vertical-align: baseline;
252    color: var(--gray);
253    text-transform: lowercase;
254}
255
256header {
257    padding-bottom: 20px;
258}
259
260hr {
261    max-width: 100%;
262    text-align: left;
263    margin: 20px 0 20px 0;
264}
265
266footer {
267    padding-top: 30px;
268}
269
270blockquote {
271    margin: 7px 0 7px 0;
272}
273
274blockquote p {
275    font-style: italic;
276    color: var(--darker);
277    padding-left: 20px;
278    border-left: 1.5px solid var(--medium-gray);
279}
280
281nav ul {
282    padding: 0;
283    margin: 0;
284    list-style: none;
285    padding-bottom: 20px;
286}
287
288nav ul li {
289    padding-right: 10px;
290    display: inline-block;
291}
292
293ol {
294    list-style: none;
295    counter-reset: counter;
296}
297ol li {
298    counter-increment: counter;
299}
300ol li:not(.footnotes)::before {
301    content: counter(counter);
302    border-radius: 50%;
303    text-align: center;
304    line-height: 1.2rem;
305    color: var(--darker);
306    background: var(--medium-gray);
307    width: 18px;
308    height: 18px;
309    font-size: 11px;
310    margin-right: 0.5rem;
311    box-sizing: content-box;
312    display: inline-block;
313    transform: translate(-1.9rem, 0.7rem);
314    position: absolute;
315}
316
317.footnote-ref a {
318    text-decoration: none;
319    color: var(--light);
320    border-radius: 50%;
321    text-align: center;
322    line-height: 0.8rem;
323    background: var(--cyan);
324    width: 0.8rem;
325    height: 0.8rem;
326    font-size: 0.6rem;
327    display: inline-block;
328}
329
330.footnotes > ol li::before {
331    content: counter(counter);
332    border-radius: 50%;
333    text-align: center;
334    line-height: 1.2rem;
335    color: var(--light);
336    background: var(--cyan);
337    width: 18px;
338    height: 18px;
339    font-size: 11px;
340    margin-right: 0.5rem;
341    box-sizing: content-box;
342    display: inline-block;
343    position: relative;
344    transform: unset;
345}
346
347.footnotes ol li:not(:last-child) {
348    padding-bottom: 2rem;
349}
350
351@media (max-width: 400px) {
352    .footer {
353        column-count: 1;
354    }
355
356    .image-grid {
357        column-count: 1;
358    }
359
360    table,
361    thead,
362    tbody,
363    th,
364    td,
365    tr {
366        display: block;
367    }
368    td {
369        padding: 0;
370        text-align: left;
371    }
372    tr {
373        padding: 10px 0 10px 0;
374    }
375}