:root { color-scheme: light dark; }
body { max-width: 42rem; margin: 4rem auto; padding: 0 1.25rem;
       font: 1.05rem/1.6 system-ui, sans-serif; }
h1 { margin-bottom: .2rem; line-height: 1.25; }
h2 { margin-top: 2.4rem; }
h3 { margin-bottom: .3rem; }
.tag { color: #888; margin-top: 0; }
.sc { font-variant: small-caps; letter-spacing: .04em; }
.meta { color: #888; font-size: .95rem; }
ul { padding-left: 1.2rem; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.video { position: relative; aspect-ratio: 16 / 9; width: 100%; margin: .4rem 0 1.2rem; }
.video a, .video img, .video iframe { display: block; width: 100%; height: 100%; border: 0; }
.video img { object-fit: cover; border-radius: 6px; }
.video .play { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 3.2rem;
               margin: -1.6rem 0 0 -2.25rem; border-radius: 1rem; background: #000b; }
.video .play::after { content: ""; position: absolute; left: 50%; top: 50%;
                      margin: -.7rem 0 0 -.5rem; border: .7rem solid transparent;
                      border-left: 1.2rem solid #fff; border-right: 0; }
.video a:hover .play, .video a:focus-visible .play { background: #c00; }
.novid { color: #888; font-size: .95rem; }
blockquote { margin: 1.6rem 0; padding-left: 1rem; border-left: 3px solid #888;
             font-style: italic; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
:not(pre) > code { background: #8882; padding: .05em .3em; border-radius: 4px; }
pre { overflow-x: auto; padding: .8rem 1rem; border: 1px solid #8886; border-radius: 6px;
      line-height: 1.45; }
article { font-size: 1.15rem; }
figure { margin: 1.8rem 0; }
figure img { width: 100%; border-radius: 6px; }
figcaption { color: #888; font-size: .95rem; font-style: italic; margin-top: .4rem; }
footer { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid #8886; }